Jugué con esta librería durante una hora, descubrí que con ella podía convertir librerías javascript de efectos en librerías de componentes JSF y pensé en Mootools una librería javascript muy liviana que siempre me ha gustado mucho.

Así que he escrito este pequeño tutorial el cual adjunta el código al final del mismo, de como montar y crear componentes con esta librería.

En primer lugar creamos un proyecto web en Netbeans con soporte para Java ServerFaces (Evitaremos tener que escribir la configuración del web.xml), descargamos la última Nightly de la página de JSFTemplating y mootools. El servidor sobre el cual trabajaremos es Glassfish v2 (por defecto viene con Netbeans) y así las librerías JSF serán incluidas  automáticamente en el classpath de nuestro proyecto.

Una vez tenemos todo lo necesario para trabajar, deberemos incorporar las librerías de JSFTemplating a nuestro proyecto:

• jsftemplating-dt.jar: librería de etiquetado (design time) solo útil en desarrollo, no se incorpora al despliegue.
• jsftemplating.jar: librería base de JSFTemplating.

Luego creamos bajo Web Pages un directorio js donde copiaremos el fichero mootools.js. Y ya solo nos queda decidir que componente javascript queremos crear yo en mi caso Accordion (me recuerda al de Woodstock).

Nos creamos un paquete y las clases para nuestro componente que en mi caso es:

• com.nc.component
  • Accordion.java
  • AccordionFactory.java
  • AccordionTab.java
  • AccordionTabFactory.java

No explicare como están realizados por dentro ya que en el tutorial de la URL del principio del articulo esta perfectamente descrito, solo tenemos que realizar la modificación oportuna para el fichero de template usado por el componente y el nombre del mismo. p.e en Accordion:

setLayoutDefinitionKey(“tpl/accordion.jsp”);

Creamos un directorio bajo Web Pages llamado tpl y en el creamos dos ficheros jsp llamados:

• accordion.jsp
• accordionTab.jsp

Una vez realizado registramos nuestros los componentes en nuestro faces-config.xml:

<component>
<component-type>com.nc.Accordion</component-type>
<component-class>com.nc.component.Accordion</component-class>
</component>
<render-kit>
<renderer>
<component-family>com.nc.Accordion</component-family>
<renderer-type>com.nc.Accordion</renderer-type>
<renderer-class>com.sun.jsftemplating.renderer.TemplateRenderer</renderer-class>
</renderer>
</render-kit>

<component>
<component-type>com.nc.AccordionTab</component-type>
<component-class>com.nc.component.AccordionTab</component-class>
</component>
<render-kit>
<renderer>
<component-family>com.nc.AccordionTab</component-family>
<renderer-type>com.nc.AccordionTab</renderer-type>
<renderer-class>com.sun.jsftemplating.renderer.TemplateRenderer</renderer-class>
</renderer>
</render-kit>

Como podéis observar el nombre de componente difiere del nombre de paquete, tened cuidado. Una vez definidos los componentes podemos pasar a modificar las plantillas de estos:

accordion.jsp
"<script language="javascript" type="text/javascript" src="js/mootools.js"></script>
"<script language="javascript" type="text/javascript">
"    window.onload=function(){
"        var myAccordion = new Accordion($("$this{clientId}"),".toggler", ".element");
"    }
"</script>
"<div id="$this{clientId}">
<!foreach _child : $this{children}>
<component id="#{_child.id}" />
</foreach>
"</div>

accordionTab.jsp
"<h3 class="toggler">$property{title}</h3>
"<p class="element">
<!foreach _child : $this{children}>
<component id="#{_child.id}" />
</foreach>
"</p>

JSFTemplating dispone de un etiquetado propio para la definición de templates pero también podemos hacer uso de etiquetado h: y f:. Al principio de cada linea agrego una ” que realiza la misma operación que un f:verbatim mostrando el código que le precede sin tratarlo. Los foreach nos permiten recorrer todos los tags hijos (html, componentes JSF,…) y con una llamada a la etiqueta component hacemos que estos se muestren.

Teóricamente todo debería funcionar según lo especificado en el tutorial, pero esto no es así ya que el empaquetado de la aplicación que aparece en ese tutorial hace uso de una tarea ANT denominada APT (Annotation Processor Tool). Ya que no hacemos uso de esta tarea deberemos agregar al raíz de nuestro directorio de fuentes (en Netbeans src/java) el directorio META-INF/jsftemplating y en el los ficheros:

• UIComponentFactory.map: Aquí se definen las factorías para los componentes p.e.: mu\:accordion=com.nc.component.AccordionFactory (tag=factoria).
• Handler.map: Si usas manejadores aquí se definen las clases y los parámetros para el manejo de eventos (Véase el tutorial o la documentación de eventos y manejadores de JSFTemplating).

Una vez terminemos basta con escribir en nuestro index.jsp:

<mu:accordion id="accordion">
<mu:accordionTab title="Titulo 1">
<f:verbatim>
Esto es el texto que sera incorporado al titulo 1,
</f:verbatim>
</mu:accordionTab>
<mu:accordionTab title="Titulo 2">
<f:verbatim>
como se observa se puede hacer uso de etiquetado &lt;f: y &lt;h:,
</f:verbatim>
</mu:accordionTab>
<mu:accordionTab title="Titulo 3">
<h:outputText value="sin problema alguno." />
</mu:accordionTab>
</mu:accordion>


El proyecto Netbeans del ejemplo podéis descargarlo aquí.

Espero que os sea de ayuda.