Diferencia entre revisiones de «Capa de Presentación de Spring Roo»
De Dos Ideas.
| (No se muestran 9 ediciones intermedias de 2 usuarios) | |||
| Línea 29: | Línea 29: | ||
Con la generación de una aplicación web con [[Spring Roo]] y algunos de los siguientes cambios podemos lograr una personalización de su apariencia, sin necesidad de modificar cada una de las pantallas. | Con la generación de una aplicación web con [[Spring Roo]] y algunos de los siguientes cambios podemos lograr una personalización de su apariencia, sin necesidad de modificar cada una de las pantallas. | ||
| − | + | Tomando el [[Ejemplo de proyecto web ABM con Spring Roo]] el look & feel original es: | |
| + | |||
| + | [[Archivo:roo_css_estandar.gif | 700px]] | ||
| + | |||
| + | Luego si hacemos los siguientes cambios: | ||
* el archivo '''/images/banner-graphic.png''' => el banner de la aplicación tendrá el aspecto que nosotros le demos | * el archivo '''/images/banner-graphic.png''' => el banner de la aplicación tendrá el aspecto que nosotros le demos | ||
| Línea 35: | Línea 39: | ||
* en el archivo '''/WEB-INF/layouts/default.jspx''' podemos conservar o no el uso de los estilos y/o lenguajes, para nuestro ejemplo dejamos de utilizar la internacionalización. La utilizaremos solo en español. | * en el archivo '''/WEB-INF/layouts/default.jspx''' podemos conservar o no el uso de los estilos y/o lenguajes, para nuestro ejemplo dejamos de utilizar la internacionalización. La utilizaremos solo en español. | ||
* en el archivo '''/WEB-INF/i18n/messages-es.properties''' modificamos los mensajes configurados para la pantalla de inicio. En el mismo lugar se pueden modificar el resto de los mensajes de la aplicación. | * en el archivo '''/WEB-INF/i18n/messages-es.properties''' modificamos los mensajes configurados para la pantalla de inicio. En el mismo lugar se pueden modificar el resto de los mensajes de la aplicación. | ||
| − | * en el archivo '''/WEB-INF/ | + | * en el archivo '''/WEB-INF/i18n/application.properties''' corregimos la pluralización de las etiquetas de menú. |
| + | * en el archivo '''/WEB-INF/views/index.jspx''' re-estructuramos los títulos. | ||
| + | |||
| + | |||
| + | Obtenemos: | ||
| + | |||
| + | [[Archivo:roo_css_alternativo.gif | 700px]] | ||
| + | |||
| + | El mayor desafío de esta parte es [[CSS]] en sí, más abajo compartimos algunos tutoriales básicos que encontramos. | ||
== Ver tambien == | == Ver tambien == | ||
* [[Spring Roo]] | * [[Spring Roo]] | ||
| + | * [http://www.cssya.com.ar Tutorial de css] | ||
| + | * [http://www.cristalab.com/tutoriales/crear-menus-de-navegacion-en-css-usando-listas-c130l/ Tutorial de creación de menu con css] | ||
[[Category: Spring Framework]] | [[Category: Spring Framework]] | ||
Revisión actual del 20:44 22 jul 2010
Spring Roo genera la interfaz gráfica de usuario que puede personalizarse, teniendo en cuenta los siguientes componentes:
| Directorio | Propósito |
|---|---|
| /styles | para las hojas de estilo del proyecto (*.css), puede haber más de una |
| /images | para las imágenes del proyecto |
| /WEB-INF/classes/*.properties | para la configuración de las páginas de estilo |
| /WEB-INF/Spring/*.xml | para la configuración de los controladores |
| /WEB-INF/i18n/*.properties | para la internacionalizacion de los mensajes |
| /WEB-INF/layauts/layouts.xml | para la configuración de las páginas maestras de la aplicación (home, menu, default) |
| /WEB-INF/tags/*.tagx | para los tags de declaración de paginado, lenguajes y estilos |
| /WEB-INF/views/**/* | para las vistas |
| /WEB-INF/web.xml | para configurar el contexto web de la aplicacion |
| /WEB-INF/urlrewrite.xml | para configurar la re-escritura de urls de la aplicación |
Con la generación de una aplicación web con Spring Roo y algunos de los siguientes cambios podemos lograr una personalización de su apariencia, sin necesidad de modificar cada una de las pantallas.
Tomando el Ejemplo de proyecto web ABM con Spring Roo el look & feel original es:
Luego si hacemos los siguientes cambios:
- el archivo /images/banner-graphic.png => el banner de la aplicación tendrá el aspecto que nosotros le demos
- el archivo /styles/alt.css => cambiamos el estilo alternativo de la aplicación. La aplicación generada tiene dos estilos, uno estandar y otro alternativo.
- en el archivo /WEB-INF/layouts/default.jspx podemos conservar o no el uso de los estilos y/o lenguajes, para nuestro ejemplo dejamos de utilizar la internacionalización. La utilizaremos solo en español.
- en el archivo /WEB-INF/i18n/messages-es.properties modificamos los mensajes configurados para la pantalla de inicio. En el mismo lugar se pueden modificar el resto de los mensajes de la aplicación.
- en el archivo /WEB-INF/i18n/application.properties corregimos la pluralización de las etiquetas de menú.
- en el archivo /WEB-INF/views/index.jspx re-estructuramos los títulos.
Obtenemos:
El mayor desafío de esta parte es CSS en sí, más abajo compartimos algunos tutoriales básicos que encontramos.
