9

Creando un nuevo plug 'n' skin

La característica de plug 'n' skin es una forma eficaz de crear, personalizar e implementar nuevos
skins para el marco de RichFaces.

En este capítulo, vamos a aprender a crear y editar un nuevo skin, con el fin de tenerlo listo para
ser desplegado en nuestro proyecto.

Con el fin de utilizar la característica de plug 'n' skin, vamos a utilizar Apache Maven para la
creación de plantillas y su compilación. Esto es muy útil, ya que no tiene que preocuparse por las
dependencias y versiones ya que son totalmente gestionados por la tecnología de Apache.

Instalando Maven
Si todavía no has instalado maven, tendrás que descargar e instalar Maven antes de comenzar.
Con el fin de hacerlo, visite el sitio web de Maven (http://maven.apache.org), descargar la
última versión, y siga las instrucciones para completar la instalación.

Después de eso, tenemos que añadir el perfil de RichFaces a la de Maven. Vamos a abrir el
archivo <maven_root_directory>/conf/settings.xml y agregue el código siguiente en la
sección <profiles>:

<profile>
<id>RichFaces</id>
<repositories>
<repository>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>false</enabled>
<updatePolicy>never</updatePolicy>

</snapshots>
<id>repository.jboss.com</id>
<name>Jboss Repository for Maven</name>
<url>
http://repository.jboss.com/maven2/
</url>
 <layout>default</layout>
</repository>
<repository>
<releases>
<enabled>false</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
<updatePolicy>always</updatePolicy>
</snapshots>
<id>maven2-snapshots.jboss.com</id>
<name>Jboss Repository for Maven Snapshots</name>
<url>http://snapshots.jboss.org/maven2</url>
<layout>default</layout>
</repository>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>maven2-snapshots.jboss.com</id>
<name>Jboss Repository for Maven Snapshots</name>
<url>http://snapshots.jboss.org/maven2</url>
<releases>
<enabled>false</enabled>
</releases>
<snapshots>
<enabled>true</enabled>
<updatePolicy>always</updatePolicy>
</snapshots>
</pluginRepository>
<pluginRepository>
<releases>
<enabled>true</enabled>
</releases>
<snapshots>
<enabled>false</enabled>
<updatePolicy>never</updatePolicy>
</snapshots>

<id>repository.jboss.com</id>
<name>Jboss Repository for Maven</name>
<url>
http://repository.jboss.com/maven2/
</url>
<layout>default</layout>
</pluginRepository>
</pluginRepositories>
</profile>

Ahora tenemos que activar el nuevo perfil. Con el fin de hacerlo, vamos al final del archivo,
eliminamos la sección <activeProfiles>, y añadimos el nuevo perfil. La sección debe aparecer
como sigue:

<!-- activeProfiles
| List of profiles that are active for all builds.
| -->
<activeProfiles>
<activeProfile>RichFaces</activeProfile>
</activeProfiles>

Guardamos el archivo y ya hemos terminado con la configuración de Maven!

Creando el nuevo Skin

Ahora es el momento para empezar a crear el nuevo skin!

Cree una carpeta llamada PlugNSkin donde quiera, abrir el terminal dentro de este directorio y los
siguientes tipos(todo en una sola línea):

mvn archetype:create
-DarchetypeGroupId=org.richfaces.cdk
-DarchetypeArtifactId=maven-archetype-plug-n-skin
-DarchetypeVersion=3.3.1.GA
-DartifactId=newSkin
-DgroupId=newSkin
-Dversion=1.0

Este comando crea una plantilla genérica de un proyecto de Maven para la creación del nuevo
skin. Después de la ejecución, tendremos una nueva carpeta llamada newSkin (el nombre que
especifica como artifactId) que contiene todos los archivos de configuración de Maven tenemos
que comenzar nuestro proyecto del nuevo skin.

Teniendo la plantilla preparada, tenemos que crear el skin personalizado. Opcionalmente,

podemos utilizar uno ya existente como base (y vamos a hacerlo, por lo tanto, será más sencillo
para empezar).

Volvamos a nuestra ventana de terminal y escribimos los siguientes comandos:

cd newSkin

mvn cdk:add-skin -Dname=myNewSkin -Dpackage=book.newSkin -

DbaseSkin=blueSky -DcreateExt=true

Los dos últimos parámetros son opcionales y pueden utilizarse para seleccionar un skin base para
uno nuevo y añadir los controles estándar Skinning de clases CSS para el nuevo proyecto,
respectivamente.

La captura de pantalla siguiente muestra la estructura del skin que se genera:

Como se puede ver en la imagen anterior, la carpeta contiene los siguientes archivos:

• Los archivos de configuración: Tanto Maven y archivos de configuración del skin con el fin de
definir las propiedades del mismo. Observe que el archivo myNewSkin.skin.properties
contiene las propiedades del skin.

• XCSS archivos: Definición de las clases CSS del nuevo akin, estas están basadas en las del skin
Bluesky, como hemos añadido la opción de baseSkin.

• Una clase para almacenar imágenes llamado BaseImage.java y su clase de prueba (llamada
BaseImageTest.java).

Personalización del nuevo skin

Todo está listo para iniciar la edición y personalización del nuevo skin, cambiaremos algunos
parámetros para hacer la edición del nuevo skin evidente para usted. Por esta razón, el skin
generado no será del gusto de todos!

Tenemos que cambiar los colores estándar y podemos hacerlo mediante la redefinición de los
parámetros del skin.

Si nos fijamos en el archivo myNewSkin.skin.properties, encontraremos algunas opciones

interesantes:

gradientType=glass
generalStyleSheet=resource:///META-INF/skins/myNewSkin.xcss
baseSkin=blueSky
extendedStyleSheet=resource:///META-INF/skins/myNewSkin-ext.xcss

Las opciones generalStyleSheet y extendedStyleSheet contienen la ruta a fin de incluir todas las
hojas de estilo necesarias, el baseSkin (como hemos visto) contiene el nombre del skin, se utiliza
para generar uno nuevo, el gradientType contiene el tipo de gradiente utilizado para el nuevo skin
(otras opciones son de plastic y plain, y es posible generar otras nuevas).

Dentro de este archivo, podemos poner los parámetros del skin que nos gustaría redefinir, por
ejemplo:

headerBackgroundColor=#d5a32b
headerTextColor=#FF0000
myNewProperty=#d5a32b

Hemos cambiado algunos parámetros para mostrar cómo se pueden controlar las opciones del
skin base. Como puede ver, usted también puede definir nuevas propiedades para usarlas dentro
del código XCSS (usaremos el valor myNewProperty más adelante).

La segunda cosa que tenemos que hacer es editar los archivos. XCSS. Como se puede ver en la
apertura de uno de ellos, hay dos maneras de editar la información de CSS-mediante el uso de
CSS o lenguaje XCSS.

En el primer caso, podemos insertar nuestro CSS dentro de la etiqueta f: verbatim de esta manera:
 <f:verbatim>
<![CDATA[
// my css code
]]>
</f:verbatim>

En el segundo caso, podemos utilizar etiquetas XCSS fuera de la sección f: verbatim.

Por ejemplo, vamos a abrir el archivo tool-bar.xcss y definimos un borde para el componente
rich:toolbar en CSS normal, con solo añadir la siguiente definición dentro del selector .rich-
toolbar:

border: 1px solid red;

Ahora vamos a utilizar XCSS para redefinir el gradiente de fondo. Agregue el código siguiente
después del bloque la f: verbatim:

<u:selector name=".rich-toolbar">
<u:style name="padding" value="0px 5px 0px 5px" />
<u:style name="background-position" value="0% 50%" />

<u:style name="background-image">
<f:resource
f:key="org.richfaces.renderkit.html.CustomizeableGradient"
>
<f:attribute name="valign" value="middle" />
<f:attribute name="gradientHeight"
value="22px" />
<f:attribute name="baseColor"
skin="myNewProperty" />
<f:attribute name="gradientColor"
skin="headerGradientColor" />
</f:resource>
</u:style>
</u:selector>

Como puede ver, hemos usado la clase CustomizedGradient para generar nuestros gradiente
con el color establecido por el valor myNewProperty.

La versión final del contenido del archivo tool-bar.xcss es:

<?xml version="1.0" encoding="UTF-8"?>

<f:template xmlns:f="http://jsf.exadel.com/template"
xmlns:u="http://jsf.exadel.com/template/util"
xmlns="http://www.w3.org/1999/xhtml">
<f:verbatim>
<![CDATA[
.rich-toolbar {
border: 1px solid red;
}
.rich-toolbar-item {
}
.rich-toolbar-separator {
 }
]]>
</f:verbatim>
<u:selector name=".rich-toolbar">
<u:style name="padding" value="0px 5px 0px 5px" />
<u:style name="background-position" value="0% 50%" />

<u:style name="background-image">
<f:resource
f:key="org.richfaces.renderkit.html.CustomizeableGrad
ient">
<f:attribute name="valign"
value="middle" />
<f:attribute name="gradientHeight"
value="22px" />
<f:attribute name="baseColor"
skin="myNewProperty" />
<f:attribute name="gradientColor"
skin="headerGradientColor" />
</f:resource>
</u:style>
</u:selector>
</f:template>

Empaquetando e implementando el Nuevo

skin
Después de editar nuestro skin, podemos implementarlo en nuestro proyecto. Volvamos a la
terminal y desde el directorio raíz del skin, ponemos lo siguiente:

mvn clean install

Después de que el comando termine su trabajo, tendremos un nuevo directorio de destino que
contiene todos los archivos compilados y el paquete jar llamado newSkin-1.0.jar, que podemos
usar para implementar el nuevo skin en nuestro proyecto.

Hemos explicado cómo implementar una nueva piel a nuestro proyecto, por lo que dejaremos esto
como un ejercicio para el lector.

Así es como luce nuestra aplicación, con el skin BlueSky:

El resultado de nuestro nuevo skin implementado se muestra en la siguiente pantalla:

Eso es todo! Usted puede hacer los skins y complementos que desee de una manera muy simple!

Resumen
En este capítulo, nos enteramos de lo sencillo que es hacer un skin nuevo!

En el próximo capítulo, vamos a ver algunos temas avanzados para optimizar sus aplicaciones
utilizando el marco de RichFaces.