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
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
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:
Something like:
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.
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>
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;
}
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.
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
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_domai n_inventor y_Producto _foto
Using jQuery, you can access this element, and assign it a specific class:
jQuery("#c_com_i4b_factura kit_domain _inventory _Producto_ foto").add Class("CLA SS_NAME");
If your elements maintaining the same IDs, you can manipulate once each component this way, and it will aooly throughout the application.
For example, in your code above, the input field foto, has an id of: c_com_i4b_facturakit_domai
Using jQuery, you can access this element, and assign it a specific class:
jQuery("#c_com_i4b_factura
If your elements maintaining the same IDs, you can manipulate once each component this way, and it will aooly throughout the application.
ASKER
Thanks. I'll give it a try.
But still. What would be the advantage of doing this:
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
}
vs. css:
#c_com_i4b_facturakit_domain_inventory_Producto_foto,
#c_com_i4b_facturakit_domain_inventory_Producto_precioVentaActual {
stuff;
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Did learn something new. :)
For example, you can use jQuery to add a class to any object, and move it to the desired position.