8 Personalización de la apariencia de nuestra

aplicación Hemos terminado nuestra aplicación y ahora nos gustaría personalizar su aspecto para seguir el estilo que nos gusta. En este capítulo, veremos cómo cambiar el estilo de los skins existentes (usando CSS y XCSS) y cómo crear un skin nuevo personalizado a partir de los skins incorporados que ofrece el marco RichFaces.

Skinnability En el capítulo 1, Primeros Pasos, se da una introducción de lo que RichFaces skinnability trata y durante el desarrollo de nuestra aplicación, hemos aprendido cómo establecer el skin por defecto para un proyecto e incluso cómo cambiarlo dinámicamente. En resumen, todos los componentes RichFaces dan soporte a la skinnability y significa que sólo cambiando el skin, cambiamos la apariencia de todos los componentes. Eso es muy bueno para dar a nuestra aplicación un aspecto coherente y no repetir siempre los mismos valores de CSS para cada componente. RichFaces todavía usa CSS, sino que también mejora con el fin de hacerlo más sencillo de gestionar y mantener.

Personalizar los parámetros del skin Un archivo de skin contiene los ajustes básicos (tales como fuentes, colores, etc) que usaremos para todos los componentes, simplemente cambiando los ajustes, podemos personalizar el aspecto básico para el marco de RichFaces. Como debes saber, RichFaces viene con algunos skins integrados (y otros plug ‘n’ skins adicionales)-podemos empezar con los skins para crear un skin personalizado. Los Skins integrados son los siguientes • Plain • emeraldTown • blueSky • wine • japanCherry • ruby • classic • deepMarine

Los plug ‘n’ skins adicionales son: • laguna • darkX • glassX Los plug ‘n’ skin están empaquetados en archivos JAR externos (que se puede descargar de la misma ubicación que la del marco RichFaces) que se debe agregar en el proyecto con el fin de poder utilizarlos. Vamos a ver cómo crear nuestro plug ‘n’ skin personalizado en el capítulo siguiente. Recuerde que el skin utilizado por la aplicación se puede establecer como parámetro de contexto en el archivo web.xml: <context-param> <param-name>org.richfaces.SKIN</param-name> <param-value>emeraldTown</param-value> </context-param>

Este es un ejemplo con el conjunto del skin emeralTown:

Si cambiamos el skin al de japanCherry, tenemos la siguiente pantalla:

Eso es sin cambiar una sola línea de CSS o XHTML!

Editar un skin básico Ahora vamos a empezar a crear nuestro skin básico. Con el fin de hacer eso, vamos a la reutilización de uno de los incorporados en los archivos de skin y cambiarlo. Usted puede

encontrar los archivos de los skin en richfaces-impl-3.x.x.jar el archivo esta dentro del

directorio META-INF/skins.

Vamos al archivo y luego lo abrimos, por ejemplo, el archivo emeraldTown.skin.properties

que se parece a esto (sí, el archivo de skin es un .properties):

#Colors headerBackgroundColor=#005000 headerGradientColor=#70BA70 headerTextColor=#FFFFFF headerWeightFont=bold generalBackgroundColor=#f1f1f1 generalTextColor=#000000 generalSizeFont=18px generalFamilyFont=Arial, Verdana, sans-serif controlTextColor=#000000 controlBackgroundColor=#ffffff additionalBackgroundColor=#E2F6E2 shadowBackgroundColor=#000000 shadowOpacity=1

panelBorderColor=#C0C0C0 subBorderColor=#ffffff tabBackgroundColor=#ADCDAD tabDisabledTextColor=#67AA67 trimColor=#BBECBB tipBackgroundColor=#FAE6B0 tipBorderColor=#E5973E selectControlColor=#FF9409 generalLinkColor=#43BD43 hoverLinkColor=#FF9409 visitedLinkColor=#43BD43 # Fonts headerSizeFont=18px headerFamilyFont=Arial, Verdana, sans-serif tabSizeFont=11 tabFamilyFont=Arial, Verdana, sans-serif buttonSizeFont=18 buttonFamilyFont=Arial, Verdana, sans-serif tableBackgroundColor=#FFFFFF tableFooterBackgroundColor=#cccccc tableSubfooterBackgroundColor=#f1f1f1 tableBorderColor=#C0C0C0 tableBorderWidth=2px #Calendar colors calendarWeekBackgroundColor=#f5f5f5 calendarHolidaysBackgroundColor=#FFEBDA calendarHolidaysTextColor=#FF7800 calendarCurrentBackgroundColor=#FF7800 calendarCurrentTextColor=#FFEBDA calendarSpecBackgroundColor=#E2F6E2 calendarSpecTextColor=#000000 warningColor=#FFE6E6 warningBackgroundColor=#FF0000 editorBackgroundColor=#F1F1F1 editBackgroundColor=#FEFFDA #Gradients gradientType=plain

Con el fin de probarlo, vamos a abrir nuestro proyecto de aplicación, crearemos un archivo

llamado mySkin.skin.properties dentro del directorio /resources/WEB-INF/ y

agregaremos el texto anterior. Entonces, abrimos el archivo build.xml, editamos y agregamos el siguiente código en la etiqueta war: <copy tofile="${war.dir}/WEB-INF/classes/mySkin.skin.properties" file="${basedir}/resources/WEB-INF/mySkin.skin.properties" overwrite="true"/>

Además, como nuestra aplicación es compatible con múltiples skins, vamos a abrir el archivo components.xml y agregamos soporte a la misma: <property name="defaultSkin">mySkin</property>

<property name="availableSkins"> <value>mySkin</value>

<value>laguna</value> <value>darkX</value> <value>glassX</value> <value>blueSky</value> <value>classic</value> <value>ruby</value> <value>wine</value> <value>deepMarine</value> <value>emeraldTown</value> <value>japanCherry</value>

</property>

Si sólo desea seleccionar el nuevo skin como skin fijo, sólo tendría que editar el archivo web.xml y seleccione el nuevo skin mediante la inserción del nombre en el parámetro de contexto (como se explicó antes). Sólo para hacer un ejemplo (mal aspecto, pero comprensible), vamos a cambiar algunos parámetros en el archivo de skin: #Colors headerBackgroundColor=#005000 headerGradientColor=#70BA70 headerTextColor=#FFFFFF headerWeightFont=bold generalBackgroundColor=#f1f1f1 generalTextColor=#000000 generalSizeFont=18px

generalFamilyFont=Arial, Verdana, sans-serif controlTextColor=#000000 controlBackgroundColor=#ffffff additionalBackgroundColor=#E2F6E2 shadowBackgroundColor=#000000

shadowOpacity=1 panelBorderColor=#C0C0C0 subBorderColor=#ffffff tabBackgroundColor=#ADCDAD tabDisabledTextColor=#67AA67 trimColor=#BBECBB tipBackgroundColor=#FAE6B0 tipBorderColor=#E5973E selectControlColor=#FF9409 generalLinkColor=#43BD43 hoverLinkColor=#FF9409 visitedLinkColor=#43BD43 # Fonts headerSizeFont=18px

headerFamilyFont=Arial, Verdana, sans-serif tabSizeFont=11 tabFamilyFont=Arial, Verdana, sans-serif buttonSizeFont=18

buttonFamilyFont=Arial, Verdana, sans-serif tableBackgroundColor=#FFFFFF tableFooterBackgroundColor=#cccccc tableSubfooterBackgroundColor=#f1f1f1 tableBorderColor=#C0C0C0 tableBorderWidth=2px

#Calendar colors calendarWeekBackgroundColor=#f5f5f5 calendarHolidaysBackgroundColor=#FFEBDA calendarHolidaysTextColor=#FF7800 calendarCurrentBackgroundColor=#FF7800 calendarCurrentTextColor=#FFEBDA calendarSpecBackgroundColor=#E2F6E2 calendarSpecTextColor=#000000 warningColor=#FFE6E6 warningBackgroundColor=#FF0000 editorBackgroundColor=#F1F1F1 editBackgroundColor=#FEFFDA #Gradients gradientType=plain

Aquí está la captura de pantalla de lo que ocurrió con el nuevo skin:

¿Cómo sé cuales parámetros fueron cambiados? La guía oficial para desarrolladores RichFaces contiene para cada componente, una tabla con las correspondencias entre los parámetros del skin y las propiedades que conectan al CSS.

Uso de CSS ¿Qué pasa cuando tenemos que cambiar la apariencia de solo un componente en específico? ¿Y si tenemos que cambiar sólo para una página específica? En estos casos, podemos utilizar el marco de CSS para realizar las tareas.

Para el primer caso, podemos redefinir la clase CSS skin-inserted y para el segundo,

podemos especificar determinadas clases CSS para cada componente.

Redefinir las clases CSS skin-inserted

Volvamos a nuestro ejemplo, queremos cambiar el fondo de todas las cabeceras del panel. En la guía oficial de desarrollo con RichFaces , podemos ver que tenemos que redefinir la clase

CSS rich-panel-header. Vamos a abrir el /view/stylesheet/theme.css y agregamos el

siguiente código: .rich-panel-header {

color: #FF0000; background: #9999ff repeat scroll 0 0;

}

El resultado es el siguiente:

Por ahora, todos los componentes rich-panel tienen una nueva cabecera redefinida por la

clase de CSS.

Personalizar nuestras clases CSS específicas Si queremos cambiar el estilo de un componente específico, sólo puede pasar a nuestras clases CSS personalizado utilizando los * atributos de clase. Para dar un ejemplo, vamos a personalizar sólo a los componentes rich : toolbar de la tabla de

todos los contactos (All contacs), vamos a abrir el archivo /view/stylesheet/theme.css y

añadimos nuestra clase custom CSS como sigue: .my-custom-toolbar { background: #cccc00 repeat scroll 0 0; }

Ahora, vamos a abrir el archivo /view/contactsList.xhtml y establecemos el atributo styleClass con nuestra clase CSS de nueva creación: ... <rich:toolBar styleClass="my-custom-toolbar">

...

El resultado de esta personalización es como se muestra en la siguiente pantalla:

Usted puede ver que sólo se personaliza la barra de herramientas de tabla Todos los contactos (All contacs). También puede insertar código CSS en línea con el atributo de estilo del componente: ... <rich:toolBar styleClass="my-custom-toolbar" style="border: 2px solid #FF0000;">

...

Usted puede ver el siguiente resultado:

Incluso si se cambia el skin, nuestra configuración personalizada CSS seguirá siendo válida:

Usando skins con componentes non-skinnable La característica skinnability sólo funciona para los componentes de RichFaces, así, los mismos problemas para los que esta característica se ha creado se encuentran el uso de componentes de otro marco de trabajo (que también utiliza los estándares JSF!). Con el fin de poder utilizar los parámetros del skin también para los componentes de non-RichFaces, el marco declara un objeto llamado richSkin que permite el acceso a los valores del skin. Vamos a ver el código de ejemplo: #{richSkin.tabBackgroundColor}

Por lo tanto, si tenemos un componente div costura (s: div) y aún desea utilizar el color del borde

definido por el skin, podemos utilizar este código: <s:div

style="border: 10px solid #{richSkin.panelBorderColor}"> <h:outputText value="Example text" />

</s:div>

Y el color será el seleccionado por nuestro skin, por lo que, para nuestro skin nuevo hecho a la medida, será como sigue:

En cambio, para el skin japanCherry, será:

Controles estándar de personalización Para los controles estándar XHTML, tenemos las opciones de personalizar el estilo de la forma RichFaces. RichFaces, de hecho, unifica la apariencia de la aplicación por desollar los elementos estándar HTML de la misma manera que hace con los otros componentes de la biblioteca. Hay dos niveles de personalización: • Estándar: Para personalizar sólo las propiedades básicas (se aplica a IE 6, IE 7 en el modo de BackCompat y Safari) • Extendida: Para personalizar más las propiedades con más estilos (que se aplica a Mozilla Firefox y Internet Explorer 7 en modo conforme con las normas) Con el fin de activar los controles estándar de personalización, basta con añadir un nuevo

context-param dentro del archivo web.xml, como este:

<context-param> <param-name>org.richfaces.CONTROL_SKINNING</param-name> <param-value>enable</param-value> </context-param>

Esto habilitará la función para nuestra aplicación. Habilitando el parámetro en nuestra aplicación los controles estándar de nuestro skin son:

Por lo que parece como esta:

Si desea personalizar los controles estándar utilizando el marco de CSS, también puede habilitar el parámetro de contexto org.richfaces.CONTROL_SKINNING_CLASSES (dentro del archivo web.xml)-al hacer esto, usted será capaz de editar un conjunto de clases CSS para personalizar los componentes XHTML (algunos ejemplos de las clases CSS que puede redefinir son rich-select, rich-input-text, etc que siguen los rich-<elementName> [- <elementType>] del patrón).

Skinning extendido en Opera y Safari A fin de resolver algún problema con skinning extendido en Opera y Safari, usted puede activar una secuencia de comandos JavaScript que detecta el navegador y permite extenderse la personalización solo cuando hay soporte. Para hacer esto, añada el siguiente código a la página XHTML (en nuestro caso, nos gustaría

añadir al archivo /view/layout/template.xhtml):

<script type="text/javascript"> window.RICH_FACES_EXTENDED_SKINNING_ON = true; </script>

XCSS Otra forma de utilizar los valores de las propiedades del skin para las clases de CSS es la XCSS. Se trata de una versión XML de la CSS utilizado para ampliar la función de CSS y añadir funcionalidades adicionales. Es ampliamente utilizado dentro del marco RichFaces, debido a su flexibilidad. En resumen, es una versión XML del archivo CSS que contiene los parámetros del skin y las clases de generador dinámico de los recursos. Automáticamente se convierte en un archivo estándar CSS que sirve para todos los navegadores.

En nuestra aplicación, puede abrir el archivo /view/stylesheet/theme.xcss y mirar la

definición creado por Seam-gen para el proyecto.

Como puede ver, usted tiene que utilizar las etiquetas XML <u:selector> y <u:style> para

crear un selector CSS. Veamos el siguiente código de ejemplo: <u:selector name=".rich-panel-header">

<u:style name="background-color" skin="headerBackgroundColor" />

<u:style name="color" skin="headerTextColor" />

</u:selector>

Este leerá los valores actuales del skin y generará el siguiente codigo CSS (si se selecciona mySkin): .rich-panel-header { background-color: #005000; color: #FFFFFF; }

Como puede ver, el atributo de nombre de la etiqueta u:selector define el nombre de selector CSS, y el atributo de nombre de la etiqueta u:style define el nombre de la propiedad CSS. También puede utilizar los nombres separados por comas del selector CSS en el u:selector nombre del atributo para especificar más de un selector a la vez <u:selector name=".rich-panel-header, .rich-panel-body"> ...

Otra característica es la posibilidad de utilizar los recursos de Java dentro de la CSS para generar dinámicamente imágenes en theme.xcss, usted puede encontrar algunos ejemplos para generar gradientes: <u:selector name=".rich-table-subheadercell">

<u:style name="background-image"> <f:resource

f:key="org.richfaces.renderkit.images.TabGradientB"/> </u:style>

</u:selector>

XCSS es muy potente y amplía el marco de CSS para desollar todos los componentes que necesitamos para el skin!

Resumen En este capítulo, hemos visto todas las potentes capacidades de personalización que ofrece el marco RichFaces. En el próximo capítulo, vamos a crear un nuevo skin utilizando la tecnología plug 'n' skin.