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.