Diferencia entre revisiones de «Capa de Presentación de Spring Roo»

De Dos Ideas.
Saltar a: navegación, buscar
 
(No se muestran 23 ediciones intermedias de 2 usuarios)
Línea 2: Línea 2:
  
 
{| border="0" style="background:#ffffff" align="top"
 
{| border="0" style="background:#ffffff" align="top"
! width="60 px" |Directorio
+
! width="200 px" style="background:Lavender; color:Black" |Directorio
! width="120 px"|Propósito
+
! width="500 px" style="background:Lavender; color:Black"|Propósito
 
|-
 
|-
|info 1||info 2||info 3||info 4||info 5
+
|/styles||para las hojas de estilo del proyecto (*.css), puede haber más de una
 
|-
 
|-
|info 6||info 7||info 8||info 9||info 10
+
|/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:
 +
 +
[[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 '''/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:
 +
 +
[[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 ==
 +
* [[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]]

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:

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