You are on page 1of 13

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:

Este es un ejemplo con el conjunto del skin emeralTown : Si cambiamos el skin al

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

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:

la captura de pantalla de lo que ocurrió con el nuevo skin: ¿Cómo sé cuales parámetros

¿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.

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:

En la guía oficial de desarrollo con

.rich-panel-header { color: #FF0000; background: #9999ff repeat scroll 0 0;

}

El resultado es el siguiente:

#9999ff repeat scroll 0 0; } El resultado es el siguiente: Por ahora, todos los componentes

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:

es como se muestra en la siguiente pantalla: Usted puede ver que sólo se personaliza la

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:

#FF0000;"> Usted puede ver el siguiente resultado: Incluso si se cambia el skin, nuestra configuración

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

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:

para nuestro skin nuevo hecho a la medida, será como sigue: En cambio, para el skin

En cambio, para el skin japanCherry, será:

como sigue: En cambio, para el skin japanCherry, será: Controles estándar de personalización Para los controles

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:

aplicación los controles estándar de nuestro skin son: Por lo que parece como esta: Si desea

Por lo que parece como esta:

estándar de nuestro skin son: Por lo que parece como esta: Si desea personalizar los controles

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 (si se selecciona mySkin):

actuales

del

.rich-panel-header {

background-color: #005000; color: #FFFFFF;

}

skin

y

generará

el

siguiente

codigo

CSS

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.