Además llevaba tiempo queriendo hacer algo con JQuery ya que en el pasado me había dado muy buenos resultados y es por eso que voy a describir un poco el proceso de creación de este Plugin de Joomla! 1.5.

En primer lugar tenemos que tener claro la diferencia entre los distintos tipos de plugins que podemos crear en Joomla! para decidirnos por uno y nada mejor que visitar la documentación oficial y elegir el que más nos convenga.

En mi caso me decante por el uso del onAfterInitialise ya que este me permite agregar script a la cabecera de nuestro sitio web haciendo uso del framework de desarrollo de Joomla! de una forma muy sencilla:

 function onAfterInitialise(){
        global $mainframe;
        $document	=& JFactory::getDocument();
        $base = JURI::root(true);

¿Para que sirve todo esto?:

• global $mainframe;: me proporciona acceso a las variables ya inicializadas de Joomla!
• $document =& JFactory::getDocument(): obtenemos la instancia de la template sobre la que trabajaremos.
• $base = JURI::root(true): con esto obtendremos la ubicación de nuestro sitio web(para evitar problemas de ubicación del sitio).

Además el framework de Joomla! ofrece la posibilidad de almacenar y recuperar parámetros predefinidos o definidos por el usuario, podemos hacer uso de:

$plugin =& JPluginHelper::getPlugin('system', 'fontstylize');
$params = new JParameter( $plugin->params );

Con esto tenemos acceso a los parámetros serán usados para almacenar las etiquetas que serán sustituidas.

Otro aspecto importante que debemos cubrir es el de hacer que nuestro plugin actue solo en el frontend de Joomla!, que es donde queremos alterar el aspecto visual, para eso usamos:

if(!$mainframe->isAdmin()){

Esto nos permite verificar que el cliente usado es Administrador (Véase JFactory/getApplication). Cargamos los scripts y código Javascript necesarios haciendo uso de dos tipos de llamadas:

$document->addScript($base."/plugins/system/fontstylize/js/jquery.ifixpng.js");
//add the pixel fix
$document->addScriptDeclaration("jQuery.noConflict();".
"jQuery(function($){".
"   $.ifixpng(\"".$base."/plugins/system/fontstylize/img/pixel.gif\");".
"});");

¿Como funcionan?

• $document->addScript: La declaración addScript nos permite incorporar nuestros ficheros JS al head de nuestra pagina y además haciendo uso de la variable $base que definimos anteriormente nos aseguramos de que su ubicación sea correcta.
• $document->addScriptDeclaration: La declaración addScriptDeclaration nos permite agregar nuestro código Javascript en el mismo head. Esto es muy útil para configurar/inicializar nuestro Javascript haciendo uso de los parámetros almacenados en el plugin.

Ya disponemos de las herramientas en Joomla! necesarias para crear nuestro plugin por lo que ahora vamos a pasar a la base de nuestro plugin. Necesitamos crear un script PHP que nos permita generar Imagenes a partir de un texto haciendo uso de una fuente. El proceso es un poco largo y existe muchísima documentación que nos enseña a crear imágenes a partir de un texto(el ejemplo más básico es el de un captcha) así que no entrare en muchos detalles. La idea es que nuestro script reciba como parametros:

• Texto que sera creado(q)
• Color usado por la fuente(c)
• Tamaño de la fuente(s)
• Fuente usada(f)

Con estos parámetros tomaríamos la fuente de una ubicación de nuestro disco, crearíamos una imagen true color con algo de transparencia y le daríamos el tamaño a esta imagen haciendo uso de las funciones ttf de PHP. Aquí podéis ver un poco del código responsable de esta acción:

...
$font = $fonts_folder.DIRECTORY_SEPARATOR.$font.TTF_EXTENSION;

$h_box = imagettfbbox ($font_size,0,$font,ALPHABET);

$w_box = imagettfbbox ($font_size+2,0,$font,$query);

$width=abs( $w_box[2] - $w_box[0] );
$height=abs( $h_box[3] - $h_box[5] );

$image = imagecreatetruecolor($width,$height);
imagesavealpha($image, true);
...

Una vez creamos la imagen lo ideal seria grabarla en disco para realizar cache con algún sistema que nos permita localizarla ya que el proceso de creación de una imagen requiere cierta cantidad de recursos. Un ejemplo seria:

$file_name = md5($query.NAME_SEPARATOR.$font.NAME_SEPARATOR.$font_color.NAME_SEPARATOR.$font_size).PNG_EXTENSION;

En mi caso uso los parámetros de entrada y genero un resumen MD5 de los mismo para generar el nombre de fichero en caso de existir la imagen realizo una redirección haciendo uso de cabeceras HTTP a la imagen y en caso contrario creo una nueva imagen.

Como detalle final si eres de los que te gustan los detalles puedes hacer uso de mod_rewrite para que nuestro script parezca una imagen. Para realizar esta operación creamos un fichero .htaccess
y agregamos este código:

RewriteEngine on
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule image.png image.php
# Esto nos permitirá hacer que todas las peticiones a imagen.png sean procesadas por imagen.php.

Ya tenemos el tipo de plugin que usaremos para cargar nuestros Javascript y el script usado para generar la imagen, solo nos falta generar el código Javascript que realizara la sustitución del texto.

La idea central es tomar la información del texto a sustituir de la hoja de estilos en CSS de nuestro sitioweb usando JQuery ocultar el texto y en su lugar mostrar como imagen de fondo con CSS la nueva imagen creada con PHP. Voy a pegar y describir la sección en la que se realiza todo este proceso y que podeis encontrar en el fichero fonstylize.js:

var text = jQuery.trim($(this).text()).replace(/ /gi,"%20");
var font = $(this).css("font-family").replace(/ /gi,"%20").split(",");
var font_size = $(this).css("font-size").replace(/px/gi,"");
var font_color = hexColor($(this).css("color"));
var background_color = hexColor($(this).css("background-color"));

var image_url = url_base + "plugins/system/fontstylize/img/image.png?";

image_url += new Array(
    new Array("q", text).join("="),
    new Array("f", font[0]).join("="),
    new Array("c", font_color).join("="),
    new Array("s", font_size).join("=")
).join("&");

$(this).html("" + text + "");

// background
$(this).css("background-image", "url(" + image_url + ")");
$(this).css("background-repeat", "no-repeat");
$(this).css("background-position", "left top");
$(this).css("background-color", background_color);
 $(this).css("height",font_size+"px");

En primer lugar preparo los parámetros de la url que serán usados para la propiedad ccs background-color, luego sustituyo el texto de la etiqueta por un span sin visibilidad y finalmente cargo la imagen de fondo con css.

Hasta aquí todo lo importante, relacionado con el plugin de Joomla! fonstylize si tienes interés en ver el código puedes descargartelo aquí:

Plugin Fontstylize Joomla! 1.5

Espero que os sirva de algo

El parametro de la ubicación del fichero de configuración.

<context-param>
<param-name>contextConfigLocation</param-name>
<param-value>/WEB-INF/applicationContext.xml</param-value>
</context-param>

El listener propio de Spring.

<listener>
<listener-class>org.springframework.web.context.ContextLoaderListener</listener-class>
</listener>

Creamos el fichero de configuración de Spring en WEB-INF/ con el nombre de applicationContext.xml como ya hemos visto en el parametro que definimos anteriormente en nuestro web.xml. No os pegare la definición del fichero por que realmente es muy grande.

Una vez visto como se configura Spring basta con configurar en nuestro web.xml la parte correspondiente a JSF. Esto ya es todo un clásico así que voy a obviar las explicaciones:

<context-param>
<param-name>com.sun.faces.verifyObjects</param-name>
<param-value>false</param-value>
</context-param>
<context-param>
<param-name>com.sun.faces.validateXml</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>javax.faces.STATE_SAVING_METHOD</param-name>
<param-value>client</param-value>
</context-param>
<servlet>
<servlet-name>Faces Servlet</servlet-name>
<servlet-class>javax.faces.webapp.FacesServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>Faces Servlet</servlet-name>
<url-pattern>/faces/*</url-pattern>
</servlet-mapping>

Bueno ya tenemos la configuración ahora viene lo interesante. Spring basa principalmente su funcionamiento en la Inversión de Control(IoC) y un ejemplo seria:

<!-- dao -->
<bean id="dao" class="com.nc.dao.impl.DaoImpl">
<property name="sessionFactory" ref="sessionFactory"/>
</bean>
<!-- service -->
<bean id="service" class="com.nc.srv.impl.ServiceImpl">
<property name="dao" ref="dao" />
</bean>

Esta es la forma de definir los beans en nuestro applicationContext.xml. Como se observa Spring genera una instancia de las clase definida en la etiqueta bean y les asigna el nombre del identificador del campo id. Tras cargar todos los bean inyecta las referencias en las propiedades de cada uno. El código de uno de estos Beans seria algo así:

public class ServiceImpl implements Service {
private Dao dao;
public void setDao(Dao dao) {
this.dao = dao;
}
public List<PersonVO> getPeople() {
return dao.getPeople();
}
}

Siempre que definimos una propiedad inyectable en nuestro applicationContext.xml el bean debe de disponer como minimo el metodo setter de la misma.

Visto esto el siguiente paso es ¿Como se inyectan beans definidos en Spring en beans definidos para JSF?. Spring no solo realiza la inversión de control, sino que además dispone de adaptadores y otras librerías que le permiten trabajar combinadamente con otros frameworks. Para trabajar con JSF, Spring ofrece un variable-resolver propio que basta con agregar a nuestro fichero faces-config.xml de esta manera:

<application>
<variable-resolver>
org.springframework.web.jsf.DelegatingVariableResolver
</variable-resolver>
</application>

Una vez hecho disponemos de las referencias descritas en el applicationContext.xml dentro de nuestro faces-config.xml por lo que solo debemos declarar propiedades en nuestros Beans de JSF y las referencias como podeis ver en este ejemplo:

<managed-bean>
<managed-bean-name>index</managed-bean-name>
<managed-bean-class>com.nc.jsf.IndexBean</managed-bean-class>
<managed-bean-scope>session</managed-bean-scope>
<managed-property>
<property-name>service</property-name>
<value>#{service}</value>
</managed-property>
</managed-bean>

Las referencias definidas anteriormente en el applicationContext.xml son usadas para ser inyectadas en nuestros Beans de JSF, por lo que podemos acceder a ellas sin problemas:

private Service service;
public void setService(Service service) {
this.service = service;
}
public String getText() {
List<PersonVO> people = service.getPeople();

Hasta aquí llega la explicación así que si teneís dudas podeís descargaros el proyecto NetBeans aquí y probarlo por vosotros mismos.

Proyecto Netbeans JSF + Spring

¡Ojo este proyecto usa una BD Derby y una de las BD de prueba denominada travel! por ello deberiais cambiar las opciones de conexión definidas en el applicationContext.xml y cambiar los mapeos de hibernate del proyecto(solo es una tabla con id,valor).

Espero que os haya ayudado y en un futuro tratare de ampliar un poco más este post hablando de la parte de Hibernate que tiene integrada Spring.

Para empezar el responsable de gestionar los permisos de todos los elementos que componen Joomla! es la clase JAuthorization (~/libraries/joomla/user/authorization.php). Esta clase carga la ACL de Joomla! según lo dispuesto en su constructor. Un ejemplo es:

$this->addACL( 'com_frontpage', 'manage', 'users', 'super administrator' );

En este ejemplo obtenido de este constructor se observa que: los usuarios del grupo Super Administrator pertenecientes a la sección Users para el item com_frontpage (pagina principal de Frontend) dispone del permiso manage. ¿Facíl no?

Ya disponemos de la forma en que se lleva acabo ahora solo falta el mecanismo y la herramienta. La herramienta es un componente denominado JXtended Control el cual nos permite gestionar desde el Backend de Joomla! las tablas de phpGACL(no entraremos en los detalles de las tablas ya que nos extenderiamos demasiado) de una forma más simplificada.

Una vez instalado accedemos a Componentes -> Control (en el Backend), seleccionamos configuración y marcamos en el combo Extension Mode como Advanced Mode, guardamos y actualizamos la pagina (no refresca la configuración ).

Tras refrescar aparecera un menú más extenso peor nos centraremos solamente en:

• Section, con la opción Tipo a Permissions(ACOs)
• Objects, con la opción Filter Type a Permissions(ACOs)
• Groups, con la opción Filter Group Type a Users Groups(AROs)
• Rules

Bien si nos fijamos en el ejemplo anterior obtenido del constructor de JAuthorization, para agregar el mismo permiso basta con agregar:

• Una Section con valor com_frontpage (como nombre suele ser útil usar el mismo que valor tanto para este caso como para los siguientes).
• Un Object con valor manage y que pertenezca a la seccion com_frontpage.
• En este caso no es necesario agregar un Group ya que podemos hacer uso de los existentes.
• Finalmente una Rule en la que agregaremos un texto descriptivo en el campo Note, marcamos el checkbox correspondiente a com_frontpage – manage y el checkbox correspondiente a Super Administrator.

Con esto ya disponemos de una regla igual a la del ejemplo por lo que el resto es generar las que deseemos (es aconsejable crear todas las del grupo Super Administrator para evitar problemas en el siguiente paso).

El mecanismo para hacer que sea phpGACL el que gestione los permisos es cambiar en la clase JAuthorization el valor de la variable $_checkMode a 1. Este es el código que debemos buscar:

/**
* The check mode.  0 = Joomla!, 1 = phpGACL
* @var    int
*/
var $_checkMode = 0;

Una vez realizado este cambio si no disponemos previamente de los permisos necesarios(por eso es necesario agregar todos los de Super Administrador) muchos de los menús del Backend desapareceran.

Hasta aquí ya disponemos de un mecanismo para agregar nuevos grupos y permisos pero obtener los permisos de cada modulo y componente instalado puede ser un engorro. Lo más aconsejable es agregar a la clase JAuthorization en la función acl_check algo así:

echo sprintf("(%s)
$aco_section_value, $aco_value, $aro_section_value,
$aro_value, $axo_section_value, $axo_value,
$root_aro_group, $root_axo_group <br />",
parent::acl_check( $aco_section_value, $aco_value,
$aro_section_value, $aro_value, $axo_section_value,
$axo_value, $root_aro_group, $root_axo_group )?"true":"false");

Esto nos permitira ver en la pagina las reglas y el valor true si esta permitida la accion y false en caso contrario.

Aunque no he entrado en mucho detalle espero escribir en un futuro otro post con una explicación algo más extensa.

• 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.