• No se tiene que configurar cada página en el tiles-conf. Es cierto puede ser una tontería pero la razón de peso para mi es que, este oculta e incrementa el tiempo necesario para la compresión de proyectos que ya están desarrollados.
• Solo se hace uso de una tecnología (JSF), lo cual para mi es una razón de peso. A mayor número de tecnologías usadas, mayor es la complejidad y la dificultad de compresión del proyecto web y claro esta en el desarrollo de aplicaciones web ya intervienen unas cuantas de tecnologías como para complicarlo más.
• El trabajo con Facelets se asimila mucho al uso de templates con XSLT (en lo cual me siento muy cómodo). Dispones de elementos como ui:composion en vez de xsl:call-templates, y xsl:apply templates y siempre conoces que ficheros de templates usa tu página.

Tras descargarme las últimas versiones de ambas librerías, la configuración no fue un problema ya que solo debemos agregar estas lineas a nuestro web.xml para configurar el gestor de temas de Woodstock y el filtro de subida de ficheros:

<filter>
<filter-name>UploadFilter</filter-name>
<filter-class>com.sun.webui.jsf.util.UploadFilter</filter-class>
<init-param>
<param-name>maxSize</param-name>
<param-value>1000000</param-value>
</init-param>
<init-param>
<param-name>sizeThreshold</param-name>
<param-value>4096</param-value>
</init-param>
</filter>
<filter-mapping>
<filter-name>UploadFilter</filter-name>
<servlet-name>Faces Servlet</servlet-name>
</filter-mapping>
<servlet>
<servlet-name>ThemeServlet</servlet-name>
<servlet-class>com.sun.webui.theme.ThemeServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>ThemeServlet</servlet-name>
<url-pattern>/theme/*</url-pattern>
</servlet-mapping>

Y en el caso de Facelets que es un poco más complejo solo necesitamos agregar los siguientes parámetros de configuración al web.xml:

<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.xhtml</param-value>
</context-param>
<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>facelets.SKIP_COMMENTS</param-name>
<param-value>true</param-value>
</context-param>

Y el siguiente manejador de vistas al faces-config.xml:

<application>
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
</application>

Con esto habremos configurado todo lo necesario y los que uséis NetBeans no tendréis ni que configurar esto ya que durante la creación de vuestro proyecto Web una vez seleccionados los frameworks JSF y Facelets esta configuración sera agregada. Por norma las configuraciones de JSF suele disponer de un mapeo del servlet sobre /faces/* o *.jsf, si os fijáis en el parámetro javax.faces.DEFAULT_SUFFIX mapea *.xhtml. ¿Qué significa esto?:

1. Todas las peticiones que vayan contra un fichero con extensión *.xhtml serán usadas como ficheros de templates.
2. Todas las peticiones que vayan contra un fichero con extensión *.jsf (si usaste esta configuración) o estén en la ruta /faces/* (si usaste esta) serán tratados como páginas JSF normales.

El resto de parámetros de como facelets.DEVELOPMENT para mostrar los errores y trazas vía web (para esto ya tenemos una bonita consola en nuestro IDE) y facelets.SKIP_COMMENTS (se salta cualquier comentario sin tratarlo) no son de importancia (de hecho podemos trabajar sin ellos ya que disponen de configuración por defecto en la librería). Bien ahora viene lo interesante, creamos un fichero template.xhtml con el siguiente contenido en el raíz de nuestro sitio web:

<f:view xmlns="http://www.w3.org/1999/xhtml" xmlns:f="http://java.sun.com/jsf/core" xmlns:h="http://java.sun.com/jsf/html" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:webuijsf="http://www.sun.com/webui/webuijsf">
<webuijsf:page>
<webuijsf:html>
<webuijsf:head>
<f:facet name="title">
<ui:insert name="title">Titulo por defecto</ui:insert>
</f:facet>
</webuijsf:head>
<webuijsf:body>
<webuijsf:form id="indexForm">
<ui:insert name="body">Cuerpo por defecto</ui:insert>
</webuijsf:form>
</webuijsf:body>
</webuijsf:html>
</webuijsf:page>
</f:view>

Y otro fichero index.jsp con:

<?xml version="1.0" encoding="UTF-8"?>
<jsp:root version="2.0" xmlns:jsp="http://java.sun.com/JSP/Page" xmlns:ui="http://java.sun.com/jsf/facelets">
<ui:composition template="/template.xhtml">
<ui:define name="title">Texto de titulo</ui:define>
<ui:define name="body">Texto de cuerpo</ui:define>
</ui:composition>
</jsp:root>

Paso a describiros que es lo que hacemos en cada fichero:

1. template.xhtml: Este fichero es la plantilla y dispone de una vista de JSF en la que agregamos el cuerpo de nuestra pagina que como se observa hace uso de los tags de Woodstock. En determinadas posiciones como son el título de la página agregamos las etiquetas ui:insert con un nombre que más tarde usaremos para remplazar su contenido.
2. index.jsp: En el disponemos de una llamada ui:composion con el atributo template apuntando a nuestro fichero de template template.xhtml. Seguidamente dispone de ui:define apuntando a los ui:insert de nuestro fichero template.xhtml(igual que un xsl:call-template con sus xsl:param) y con los nuevos valores(no tiene por que ser texto puede ser etiquetado JSF).

Como se observa lo que conseguimos de este modo es disponer de un cuerpo único para todas nuestra páginas. Algo importante al respecto de Facelets es que se permiten realizar ui:define en nuestro ficheros jsp a atributos que estan en otros ui:composion de nuestro template, esto quiere decir que podemos combinar varios templates a través de llamadas ui:composion e insertar solo las partes que nos hacen falta.

La convivencia

El uso conjunto de Facelets y Woodstock cambia los atributos del segundo. ¿Que quiere decir esto?, pues que si creamos por ejemplo:

• Un webuijsf:button este deberá usar atributos action en vez de actionExpression.
• Un webuijsf:upload deberá disponer de un atributo value en vez de un fileUploaded y además obligara a insertar un enctype=”multipart/form-data” en nuestro webuijsf:form para que funcione.

Solo puedo deciros que el proyecto Woodstock tiene modificada su API (estos atributos que cambian están marcados como DEPRETATED) y que cuando trabaja con Facelets estos cambian (Un par de horas o tres me dan la razón ). Podéis descargaros el proyecto de NetBeans (se necesitan los plugins Visual Web JSF Components y Facelets para disponer de las librerías) aquí. Espero que os sirva de algo. 

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.