Link to home
Start Free TrialLog in
Avatar of alcani
alcani

asked on

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.
screen1.png
Avatar of Hagay Mandel
Hagay Mandel
Flag of Israel image

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.
Avatar of alcani
alcani

ASKER

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.
Avatar of alcani

ASKER

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
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.
Avatar of alcani

ASKER

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

ASKER CERTIFIED SOLUTION
Avatar of Hagay Mandel
Hagay Mandel
Flag of Israel image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of alcani

ASKER

Did learn something new. :)