Capa de Presentación de Spring Roo

De Dos Ideas.
Revisión del 20:44 22 jul 2010 de Ale holman (discusión | contribuciones)
(dif) ← Revisión anterior | Revisión actual (dif) | Revisión siguiente → (dif)
Saltar a: navegación, buscar

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:

Roo css estandar.gif

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:

Roo css alternativo.gif

El mayor desafío de esta parte es CSS en sí, más abajo compartimos algunos tutoriales básicos que encontramos.

Ver tambien