11

Kit de desarrollo de
componentes
En este capítulo, vamos a crear un sencillo componente JSF utilizando el Kit de Desarrollo de
Componentes (CDK). Desarrollar un componente JSF no es una tarea sencilla, y si lo hace sin la ayuda
de la CDK, usted tendrá que escribir mucho del código estandar(y no en componentes específicos) que
incluye la clase UIComponent, clase Procesador, etiqueta de clase, archivos de configuración, y así
sucesivamente. El CDK ofrece muchas ventajas tales como un esqueleto del proyecto pre-generado
para iniciar rápidamente, un generador que tiene la tarea de generación de tareas repetitivas utilizando
archivos de configuración simple, un constructor de funcionalidades Ajax, pruebas, optimización para
versiones especificas JSF, creación del componente render usando un código de marcado JSP-like,
soporte para plantillas JSF, y mucho más.

Con el fin de mostrar cómo iniciar y sus características básicas, vamos a desarrollar un componente de
conteo de estrellas que acepta un valor flotante y hace que sea como las estrellas

Vamos a empezar!

Configurando el entorno

Todo el CDK se basa en Apache Maven (http://maven.apache.org/) que es ampliamente utilizado para
generar el código esqueleto que podemos utilizar como base para trabajar.

Maven es una herramienta utilizada por una gran cantidad de proyectos Java con el fin de gestionar la
administración de proyectos y fases de construcción. Está cerca (como concepto) a Apache Ant y muy
útil para generar la automatización.

Maven se puede descargar de forma dinámica las dependencias necesarias para crear un proyecto y es
muy útil para crear desde cero y mantener las plantillas de proyecto.

Instalando Maven

Si usted no ha instalado Maven antes de empezar tenemos que instalar. Para ello, visite el sitio web de
Maven (http://maven.apache.org), descargarlo, y siga las instrucciones para completar la instalación.

Configurando
Después de haber instalado correctamente Maven, tenemos que configurarlo para usarlo con el CDK.

El archivo setting.xml contiene toda la configuración general de Maven que podemos utilizar en
nuestros proyectos de Maven.

En nuestro caso, vamos a agregar el perfil de cdk a la configuración de elemento, este perfil permite
que los recursos generales, tales como repositorios cdk-specific y plugins, que serán compartidos entre
los archivos pom.xml utilizados para nuestros componentes CDK.

Ir al directorio de maven y abra el fichero conf / settings.xml dentro de un editor, agregando un nuevo
perfil (dentro de la sección perfiles) para CDK:

<profile>
<id>cdk</id>
<repositories>
<repository>
<id>maven2-repository.dev.java.net</id>
<name>Java.net Repository for Maven</name>
<url>http://download.java.net/maven/1</url>
<layout>legacy</layout>
</repository>
<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>
</repositories>
<pluginRepositories>
<pluginRepository>
<id>maven.jboss.org</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>

Como puede ver, hemos añadido recursos repository y pluginRepository que serán utilizadados por
nuestro fichero pom.xml.

Después de eso, tenemos que activar el perfil. Para hacer eso, simplemente quite la sección
activeProfiles, como en el siguiente código:

<activeProfiles>
activeProfile>cdk</activeProfile>
</activeProfiles>

Ahora el ambiente está listo y podemos empezar a crear nuestro proyecto nuevo componente!

Creando el proyecto

Con el fin de generar nuestro proyecto, en primer lugar vamos a crear un directorio que contiene
nuestro componente (que puede contener más de uno) y vamos a llamarlo, por ejemplo, sandbox.

Dentro del nuevo directorio, vamos a crear un archivo llamado pom.xml e inserte este código:

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

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://
www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://maven.
apache.org/POM/4.0.0 http://maven.apache.org/ xsd/maven-4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>
<groupId>org.mycompany</groupId>
<artifactId>sandbox</artifactId>
<url>http://mycompany.org</url>
<version>1.0-SNAPSHOT</version>
<packaging>pom</packaging>
<dependencies>
<dependency>
<groupId>javax.servlet</groupId>
<artifactId>servlet-api</artifactId>
<version>2.4</version>
<scope>provided</scope>
</dependency>
 <dependency>
<groupId>javax.servlet</groupId>
<artifactId>jsp-api</artifactId>
<version>2.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.servlet.jsp</groupId>
<artifactId>jsp-api</artifactId>
<version>2.1</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.faces</groupId>
<artifactId>jsf-api</artifactId>
<version>1.2_12</version>
</dependency>
<dependency>
<groupId>javax.faces</groupId>
<artifactId>jsf-impl</artifactId>
<version>1.2_12</version>
</dependency>
<dependency>
<groupId>javax.el</groupId>
<artifactId>el-api</artifactId>
<version>1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>el-impl</groupId>
<artifactId>el-impl</artifactId>
<version>1.0</version>
<scope>provided</scope>
</dependency>
<dependency>
<groupId>javax.annotation</groupId>
<artifactId>jsr250-api</artifactId>
<version>1.0</version>
</dependency>
<dependency>
<groupId>org.richfaces.ui</groupId>
<artifactId>richfaces-ui</artifactId>
<version>3.3.1.GA</version>
</dependency>
</dependencies>
</project>

Con la excepción del modelVersion, empaquetado, y las secciones dependencies, puede cambiar los
otros parámetros (como groupId, artifactId, etc) con sus valores personalizados.

¿Qué es POM?
Si usted no conoce Maven, tal vez usted se está preguntando acerca de lo que significa POM. POM
significa Proyecto de Modelo de Objetos y se utiliza como una descripción del proyecto para poder
construirlo, usted puede especificar no solo las dependencias, sino también las tareas a realizar
durante el proceso y un montón de características avanzadas. Puede ser personalizado con plugins
three-part para tareas específicas.

Una vez creado el POM, se puede pasar (en nuestro terminal) dentro del directorio sandbox que hemos
creado (que contiene el archivo pom.xml) y lanzar el siguiente comando (todo está en una línea
completa):

mvn archetype:generate -DarchetypeGroupId=org.richfaces.cdk

-DarchetypeArtifactId=maven-archetype-jsf-component
-DarchetypeVersion=3.3.1.GA -DartifactId=starRating

Al utilizar este comando, le estamos pidiendo Maven para generar una plantilla de proyecto para un
componente llamado starRating.

Se iniciará la fase de generación de proyectos , se detendrá en algún punto para preguntar cierta
información:

Define value for groupId: : book.richfaces.cdk.example

Aquí, hemos definido el prefijo de la estructura del paquete de nuestra biblioteca que será
book.richfaces.cdk.example.

Al presionar la tecla enter, podemos pasar a la siguiente pregunta

Define value for version: 1.0-SNAPSHOT: :

Aquí, se puede decidir la versión del componente. El sistema sugiere el valor 1.0-SNAPSHOT y
acabamos de confirmar pulsando Enter.

También para la siguiente pregunta, elegimos los valores predefinidos con sólo pulsar la tecla Intro:

Define value for package: book.richfaces.cdk.example: :

Después de eso, el script nos pide confirmar los valores, así que solo escriba Y presione la tecla Intro:

Confirm properties configuration:

groupId: book.richfaces.cdk.example
artifactId: starRating
version: 1.0-SNAPSHOT
package: book.richfaces.cdk.example
Y: : Y

Se genera la estructura del proyecto del nuevo componente que debería aparecer como se muestra en
la siguiente pantalla:
Una breve explicación sobre la estructura de directorios generada es la siguiente:

Directorio Descripción
src/main/config Contiene los metadatos de archivos
relacionados con la configuración de
los componentes.
src/main/java Contiene el código Java
src/main/resources Contiene todos los recursos que
vamos a utilizar en nuestro
componente (imágenes, archivos
JavaScript, archivos CSS, etc.).
src/main/templates Contiene la plantilla JSP-like la que
describe el diseño del componente.

Generando el template

Como puede ver, dentro del directorio del nuevo componente generado (llamado starRating), usted
puede encontrar otro archivo pom.xml. El siguiente paso es editar el archivo mediante la adición de un
nuevo plugin dentro de la sección de plugins:

<plugin>
<artifactId>maven-compiler-plugin</artifactId>
<inherited>true</inherited>
<configuration>
<source>1.5</source>
<target>1.5</target>
</configuration>
</plugin>
Configurando la versión del source y target dentro del elemento configuration del pluginse llama al
plugin compilador de Maven para pasar estos parametros al compilador javac. Por lo tanto, se obtiene
clases compatibles con la versión de Java que se especifica en el elemento de destino (1,5) para
compilar el código fuente 1.5-compatible.

Tenemos que establecer los parámetros, como la configuración por default de source es de 1,3, y la
configuración predeterminada de target es de 1,1-esto es independiente de la JDK que corre con
Maven.

Ahora estamos listos para crear el esqueleto de nuestro nuevo componente: vamos a ir dentro del
directorio starRating y lanzamos el siguiente comando:

mvn cdk:create -Dname=starRating

Acabamos de ejecutar la meta Maven llamada cdk: create pasando el nombre como parámetro
(utilizando la opción-D para definir una propiedad de sistema).

Probando el template

Después de la creación del esqueleto de la plantilla, podemos probarlo con sólo lanzar el siguiente
código:

mvn install

Si, al final del proceso, dice BUILD SUCCESSFUL, entonces todo lo trabajado y que ha generado un
nuevo paquete(vacio) de componente jar. Usted puede encontrar el paquete dentro del directorio
target que el proceso ha creado.

La próxima vez que desee reconstruir el proyecto, primero debe limpiar todo y volver a generarlo
mediante el siguiente comando:

mvn clean install

Creando el componente
Como hemos dicho, que acabamos de generar un componente vacío - el siguiente paso es editar los
archivos generados (y añadir otras nuevas) a fin de crear nuestros archivos personalizados.

Hemos decidido desarrollar un componente sencillo con el fin de mostrar cómo empezar de una manera
sencilla. Por lo tanto, no vamos a usar JavaScript o características complejas, nuestro componente
sólo mostrará el número de estrellas que pasan a él.

Con el fin de hacerlo más interesante también se gestionaran valores decimales (que representaran la
mitad de una estrella).

Configuración del componente

En primer lugar, tenemos que configurar nuestro nuevo componente, vamos a abrir el archivo src / main
/ config / component / starRating.xml para editar y agregar el valor de la propiedad dentro del elemento
<component>, usando el siguiente código:

<property>
<name>value</name>
<classname>java.lang.Float</classname>
<description>
The value of the component.
</description>
</property>

Además, queremos apoyar a las propiedades estándar para el estilo de personalización (estyle y
styleClass); en vez de añadir a mano, podemos utilizar las entidades predefinidas, añadiendo este
código:

&html_style_attributes;

Hay otras entidades predefinidas para los atributos comunes que podemos utilizar (consulte la
documentación CDK para este fin en http://docs.jboss.org/richfaces/ latest_3_3_X/en/cdkguide/html /).

Recursos de componentes

La segunda cosa que necesitamos son las imágenes de dos tipos de estrellas una llena y una media.

Se muestran en la siguiente imagen:

Vamos a crear el directorio starRating / src / main / resources / book / RichFaces / example cdk / /
renderkit / html / imágenes y copiamos las dos imágenes (con nombre y full.png half.png) .

Vamos a ver cómo usarlos en la siguiente sección.

Procesador de componente
La clase Procesador de un componente se encarga de hacer la representación del componente que
genera el marcado elegido (como HTML, WML, etc.). También es responsable de convertir los valores a
los clientes el tipo correcto de que el componente va a utilizar.

Con el fin de entrar en la profundidad de la estructura de los componentes JSF y los ciclos de vida,
consulte la documentación oficial de JSF.
Utilizando el marco CDK, podemos crear nuestra clase Procesador mediante una página JSP-like de
marcado que se convierte automáticamente en el código de Java durante la generación de paquetes.
Muy conveniente!

Vamos a abrir la plantilla de archivo generado starRating / src / main / templates / book / RichFaces /
cdk / ejemplo / htmlStarRating, jspx y empezamos a importar los recursos que se van a utilizar,
añadiendo el código de relieve entre el f: ClientID y las etiquetas div :

...
<f:clientid var="clientId"/>
<f:resource var="fullStar" name="images/full.png" />
<f:resource var="halfStar" name="images/half.png" />
<div ...

Ahora podemos referirnos a ellos con la denominación que figura en el atributo var (fullStar y halfStar).
Por ejemplo, si queremos insertar la imagen de la estrella completa, podemos utilizar el siguiente
código:

<img src="#{fullStar}" />

En nuestra aplicación, aceptamos los valores Flotantes en el atributo de valor (que especificamos como
un flotante en el archivo de configuración), así que lo primero que debes hacer es conseguir un flotante
del valor pasado.

Para ello, usamos una etiqueta especial llamada jsp: scriptlet que es muy útil para insertar dentro de la
lógica de Java dentro del código JSP-like, será copiado "tal cual" en la clase Renderer generada .

<jsp:scriptlet>
<![CDATA[
Float ratingValue =(Float) component.getAttributes().get("value");
variables.setVariable("ratingValue", ratingValue);
]]>
</jsp:scriptlet>

En este código, lo primero que vamos a obtener es el valor flotante, a continuación será insertarlo en
una variable denominada ratingValue (así, podemos referirnos a ella en el siguiente fragmento de
código que vamos a insertar).

Después de obtener y establecer el valor, tenemos que llegar a la parte entera del valor flotante y
escribir tantas estrellas como el número que hemos encontrado.

For that purpose, we use the following scriptlet (to be written after the first one):

<jsp:scriptlet>
<![CDATA[
// Render the full stars
int integerValue = (int)Math.floor(ratingValue);
for (int b=0; b<integerValue; b++) {
]]>
</jsp:scriptlet>
<img src="#{fullStar}" alt="#{ratingValue}" />
<jsp:scriptlet>
<![CDATA[
 }
]]>
</jsp:scriptlet>

Como puede ver, mezclamos el código HTML y código Java (correctamente el cierre y la reapertura de
las etiquetas scriptlet).

El código que acabamos de insertar itera sobre la parte entera con el fin de escribir una lista de estrellas
completas, por ejemplo, si pasamos el número 3.4, escribe tres estrellas completas.

Ahora tenemos que considerar la parte decimal y decidir qué hacer. Hemos hecho una lógica simple:

• Si el valor de la parte decimal es de más de 0,66, luego escribimos otra estrella completa
(redondeando hacia arriba)
• Si está entre (el rango) de 0,33 y 0,66, escribimos media estrella
• Si el valor es inferior a 0,33, no escribimos nada (redondeando hacia abajo)

Podemos aplicar esta lógica simple si se añade el siguiente código:

<jsp:scriptlet>
<![CDATA[
// Decide if I have to render for the last star
float decimalPart = (ratingValue-integerValue);
if (decimalPart>0.66) {
]]>
</jsp:scriptlet>

<img src="#{fullStar}" alt="#{ratingValue}" />

<jsp:scriptlet>
<![CDATA[
} else if (decimalPart>=0.33 && decimalPart<=0.66) {
]]>
</jsp:scriptlet>

<img src="#{halfStar}" alt="#{ratingValue}" />

<jsp:scriptlet>
<![CDATA[
}
]]>
</jsp:scriptlet>

Hemos terminado (esto es un componente muy simple), y estamos dispuestos a probarlo dentro de
nuestra aplicación!

Probando el nuevo componente

En primer lugar, tenemos que regenerar el paquete del componente JAR con el siguiente comando
desde el directorio starRating:

mvn clean install

Después de que el proceso se complete, tenemos que copiar el paquete JAR (llamado starRating-1.0-
SNAPSHOT.jar) dentro del directorio lib de nuestro proyecto (en nuestro caso, vamos a utilizar el
proyecto AdvContactManager que hemos usado para los ejemplos de Capítulo 10, Técnicas
Avanzadas).

Después de eso, hay que añadir la nueva biblioteca en el paquete generado en el proyecto sean-
generator y editar el archivo desployed-jars-war.list añadiendo la siguiente línea:

starRating-1.0-SNAPSHOT.jar

En nuestro caso, estamos añadiendo a la lista de archivo EAR (deployed-jars-ear.list), porque hemos
movido todas las bibliotecas que había, al escribir los ejemplos para el Capítulo 10.

Ahora vamos a crear el ejemplo de la clase vean llamada StarRatingTest en el

book.richfaces.advcm.modules.main.examples.component paquete:

package book.richfaces.advcm.modules.main.examples.component;

import org.jboss.seam.annotations.Name;

@Name("starRatingTest")
public class StarRatingTest {

private Integer intTest;

private Float floatTest;

public Integer getIntTest() {

return intTest;
}

public void setIntTest(Integer intTest) {

this.intTest = intTest;
}

public Float getFloatTest() {

return floatTest;
}

public void setFloatTest(Float floatTest) {

this.floatTest = floatTest;
}
}

Es sólo un "contenedor" para un entero y una variable de tipo float.

Ahora vamos a usarlo dentro del XHTML a través de nuestro nuevo componente!

Vamos a crear un archivo llamado componentExample.xhtml dentro del directorio /view/examples/

component/ y agregue el siguiente código:
<!DOCTYPE composition PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:a="http://richfaces.org/a4j"
xmlns:test="http://mycompany.org/starRating"
template="/layout/template.xhtml">
<ui:define name="body">
<h:form>
<h:panelGrid columns="3">
<h:outputText value="Integer test: "/>
<h:inputText value="#{starRatingTest.intTest}">
<a:support event="onchange"
reRender="sri" ajaxSingle="true"/>
</h:inputText>

<test:starRating id="sri" value="#{starRatingTest.intTest}"/>

<h:outputText value="Float test: "/>
<h:inputText value="#{starRatingTest.floatTest}">
<a:support event="onchange"
reRender="srf" ajaxSingle="true"/>
</h:inputText>
<test:starRating id="srf"
value="#{starRatingTest.floatTest}"/>
</h:panelGrid>
</h:form>
</ui:define>
</ui:composition>

Como puedes ver, hemos conectado los valores del bean a un texto de entrada y dos componentes
starRating con el fin de mostrar el valor que el usuario escribe en la entrada como las estrellas.

Para utilizar el componente, que hemos definido el namespace como pueden ver por la línea señalada.

Lo último que podemos añadir (opcionalmente, sólo para tener una buena apariencia de la URL de la
página) es el descriptor Seam de la página en el mismo directorio, con el nombre
componentExample.page.xml y el siguiente contenido:

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

<page xmlns="http://jboss.com/products/seam/pages"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://jboss.com/products/seam/pages
http://jboss.com/products/seam/pages-2.1.xsd">
<rewrite pattern="/componentExample"/>
</page>

Si ejecutamos el ejemplo, podemos ver el componente de actualización de una petición Ajax después
de foco de entrada del usuario sale del componente h: inputText.

La captura de pantalla siguiente se muestra el ejemplo en acción:

También puede tratar de establecer el estilo y los elementos styleClass para personalizar el aspecto de
componentes, como se muestra en la siguiente captura de pantalla, por ejemplo:

Aquí hemos añadido a los componentes de color de bordes a nuestra prueba sólo para darle un
ejemplo. También puede implementar imágenes personalizadas para las estrellas y así sucesivamente:
le toca a usted!

Resumen
CDK es "kit" muy útil para desarrollar componentes rich JSF en una forma rápida y sólida, sin importar
todos los estándares de código que normalmente un componente JSF requiere.

En este capítulo, hemos visto cómo poner en marcha un proyecto para desarrollar un simple
componente JSF Ajax de una manera sencilla y eficaz con las características que ofrece CDK.

La lectura de la documentación acerca de CDK (latest_3_3_X/en/cdkguide/html

http://docs.jboss.org/richfaces/ /) y estudiar el código fuente de la biblioteca RichFaces (que puede ser
descargado desde http://www.jboss. org / RichFaces / download / stable.html) es una forma muy útil
para revisar y desarrollar componentes más complejos.