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.