Spring Roo multi-column view

Hi Experts.

We have a project created with Spring-Roo with Spring-mvc view (Java).

We have managed to change the page layout, menu position, images and text format.

The problem we are now facing is how to show the fields in more than one column, but without loosing the flexibility that the current generated pages have.

For example, we can change the layout of all "input" fields or all the "dropdown" fields, but it always put all of them one after the other, in one column.
Who is Participating?
HagayMandelConnect With a Mentor Commented:
There's no advantage. I was under the impression that you can't assign css rules to your elements, and that led me to suggest DOM manipulation via element position in the DOM (first, second third etc).
Now that I know that your elements do have IDs, use it for CSS rules,
Use DOM manipulation to position any element anywhere you want it.
For example, you can use jQuery to add a class to any object, and move it to the desired position.
alcaniAuthor Commented:
Thank you for your answer.

Sorry for the delay. I was analyzing this solution.

It seems like a good idea but I'm not sure how to do it, because the view is generated according to the fields of each entity.

Would I have to modify each view by hand and add to each “element” a special css formatting?
For example: If I add this way a new css format to the “foto” element, I would also have to do it for each and all the fields that come after that if I want to divide all the fields in two columns. Right?

Do you know if there is a way to “define it” by count of elements? (I’m not the designer, so don’t know much about css, sorry).
It would be much better if I could put all the “Even” elements to the left, and all the “Odd” elements to the right.

If there is no “automatic” way, what would be the difference of doing it in the jspx?

Here I copy an example: “Create new Product” view.
It’s contents are:
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<div xmlns:c="http://java.sun.com/jsp/jstl/core" xmlns:field="urn:jsptagdir:/WEB-INF/tags/form/fields" xmlns:form="urn:jsptagdir:/WEB-INF/tags/form" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:spring="http://www.springframework.org/tags" version="2.0">
    <jsp:directive.page contentType="text/html;charset=UTF-8"/>
    <jsp:output omit-xml-declaration="yes"/>
    <form:create id="fc_com_i4b_facturakit_domain_inventory_Producto" modelAttribute="producto" path="/productos" render="${empty dependencies}" z="DNy4Xn4RKXuUnbW2KuIs7uJPYNo=">
        <field:select field="tipo" id="c_com_i4b_facturakit_domain_inventory_Producto_tipo" itemValue="id" items="${tiposproducto}" path="/tiposproducto" z="dQjPp1KbDKXO+Itx3dIiYLakOX0="/>
        <field:input field="idProducto" id="c_com_i4b_facturakit_domain_inventory_Producto_idProducto" max="5" min="2" required="true" z="ibiNxg8/qBOE0gRGdY6eUd16hnU="/>
        <field:textarea field="descripcion" id="c_com_i4b_facturakit_domain_inventory_Producto_descripcion" required="true" z="0QHtejMS/tSJ57owz8ZgthVNZmA="/>
        <field:select field="udm" id="c_com_i4b_facturakit_domain_inventory_Producto_udm" itemValue="id" items="${udms}" path="/udms" z="sUs6TfaTX57jGSRNG6CLTF5YyoM="/>
        <field:select field="status" id="c_com_i4b_facturakit_domain_inventory_Producto_status" items="${estadoproductoes}" path="estadoproductoes" z="E78o9bcuoCecU7B/Wd2kMp/z9eY="/>
        <field:input field="foto" id="c_com_i4b_facturakit_domain_inventory_Producto_foto" z="kue11+MUTAWR5KLQHEFxX2szSBw="/>
        <field:input field="precioVentaActual" id="c_com_i4b_facturakit_domain_inventory_Producto_precioVentaActual" validationMessageCode="field_invalid_number" z="Wvn5I1xwBdyq2oa0lK16To0492Y="/>
        <field:input field="precioVentaAnt" id="c_com_i4b_facturakit_domain_inventory_Producto_precioVentaAnt" validationMessageCode="field_invalid_number" z="pYLOkLI5ib/klaWGHbILtvmx10s="/>
        <field:input field="costo" id="c_com_i4b_facturakit_domain_inventory_Producto_costo" validationMessageCode="field_invalid_number" z="HQMB6ey7C8s27HqbwdiYNqwljj4="/>
        <field:checkbox field="usaLote" id="c_com_i4b_facturakit_domain_inventory_Producto_usaLote" z="NE8WdWdh5D8QUlTCQPHqCYkIC+s="/>
        <field:checkbox field="usaSerie" id="c_com_i4b_facturakit_domain_inventory_Producto_usaSerie" z="oGK2LTeMVoV7Ff+oIWqrWJ3FHIs="/>
        <field:checkbox field="esExtranjero" id="c_com_i4b_facturakit_domain_inventory_Producto_esExtranjero" z="29WkDPxVss6A2ZuRZ4TdvYT/QMc="/>
        <field:datetime dateTimePattern="${producto_fechaalta_date_format}" field="fechaAlta" id="c_com_i4b_facturakit_domain_inventory_Producto_fechaAlta" required="true" z="OcBNtm233xSLLKpQBxjwVTBTBJM="/>
        <field:datetime dateTimePattern="${producto_fechabaja_date_format}" field="fechaBaja" id="c_com_i4b_facturakit_domain_inventory_Producto_fechaBaja" z="mZ3Pkev3y6+6hmzJ/Mn7z6fi5LY="/>
        <field:datetime dateTimePattern="${producto_fechaultimaventa_date_format}" field="fechaUltimaVenta" id="c_com_i4b_facturakit_domain_inventory_Producto_fechaUltimaVenta" z="1RfXxDfMLGbriqb5RbsRYW3zO+4="/>
        <field:datetime dateTimePattern="${producto_fechaprecio_date_format}" field="fechaPrecio" id="c_com_i4b_facturakit_domain_inventory_Producto_fechaPrecio" z="XSBIA9G71wVs3MQjZmmHyQSU63Q="/>
        <field:datetime dateTimePattern="${producto_fechaprecioant_date_format}" field="fechaPrecioAnt" id="c_com_i4b_facturakit_domain_inventory_Producto_fechaPrecioAnt" z="1f88Sa7G9BWgt5FkAN5pBOBlXAA="/>
        <field:datetime dateTimePattern="${producto_fechacosto_date_format}" field="fechaCosto" id="c_com_i4b_facturakit_domain_inventory_Producto_fechaCosto" z="0kZkBXr7rwveyY/UFY8G3vvNLF4="/>
    <form:dependency dependencies="${dependencies}" id="d_com_i4b_facturakit_domain_inventory_Producto" render="${not empty dependencies}" z="wrCXBYbcHKSlWT3FiM+74Q6xgFU="/>

Open in new window

There I could add some <div> around each element with a special css class. Or create a list of “id’s” in css to apply a format. The first option is more intrusive than the later, so maybe it’s better the later.
Something like:
#id1, #id2, #id3 {

Open in new window

But still, it would be a manual task either way. Right?

One question though, since I haven’t used the JQuery’s addClass.
What are the advantages of using JQuery’s addClass?

I was looking for a way to modify the way Spring Roo generates the view (if there’s any). That way it would be much easier for us to drastically do a makeover in the future.

Again. We appreciate your help.
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

alcaniAuthor Commented:
Decided to add some screenshots of the file structure generated by Spring Roo.

They are from a reduced project of only 3 entities. Each with their CRUD views and list.

Hope it helps.
What about your IDs? do they change?
For example, in your code above, the input field foto, has an id of: c_com_i4b_facturakit_domain_inventory_Producto_foto

Using jQuery, you can access this element, and assign it a specific class:
If your elements maintaining the same IDs, you can manipulate once each component this way, and it will aooly throughout the application.
alcaniAuthor Commented:
Thanks. I'll give it a try.

But still. What would be the advantage of doing this:


Open in new window


#c_com_i4b_facturakit_domain_inventory_Producto_precioVentaActual {

Open in new window

alcaniAuthor Commented:
Did learn something new. :)
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.