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
alcaniAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

HagayMandelCommented:
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.
0
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: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.
0
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.
files-01.png
files-02.png
files-03.png
files-04.png
files-05.png
files-06-CreateJspx.png
files-07-CreateTagx.png
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

HagayMandelCommented:
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.
0
alcaniAuthor 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

0
HagayMandelCommented:
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,
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
alcaniAuthor Commented:
Did learn something new. :)
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Java

From novice to tech pro — start learning today.