Spring Roo multi-column view

alcani
alcani used Ask the Experts™
on
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.
screen1.png
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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.

Author

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:create>
    <form:dependency dependencies="${dependencies}" id="d_com_i4b_facturakit_domain_inventory_Producto" render="${not empty dependencies}" z="wrCXBYbcHKSlWT3FiM+74Q6xgFU="/>
</div>
 

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 {
    stuff;
}

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.

Author

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.
files-01.png
files-02.png
files-03.png
files-04.png
files-05.png
files-06-CreateJspx.png
files-07-CreateTagx.png
Ensure you’re charging the right price for your IT

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

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:
jQuery("#c_com_i4b_facturakit_domain_inventory_Producto_foto").addClass("CLASS_NAME");
If your elements maintaining the same IDs, you can manipulate once each component this way, and it will aooly throughout the application.

Author

Commented:
Thanks. I'll give it a try.

But still. What would be the advantage of doing this:
      jspx:
jQuery("#c_com_i4b_facturakit_domain_inventory_Producto_foto").addClass("CLASS_NAME");
jQuery("#c_com_i4b_facturakit_domain_inventory_Producto_precioVentaActual").addClass("CLASS_NAME");

      css:
.CLASS_NAME {
    stuff
}

Open in new window

vs.

      css:
#c_com_i4b_facturakit_domain_inventory_Producto_foto, 
#c_com_i4b_facturakit_domain_inventory_Producto_precioVentaActual {
    stuff;
} 

Open in new window

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,

Author

Commented:
Did learn something new. :)

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial