Facelets y JSF – Uso de Templates
17 Diciembre 2008 por Otto Theo Deja una respuesta »
Este artículo tratará sobre el framework JavaServer Facelets comenzando con una pequeña
introducción y luego una descripción básica del uso de templating en una aplicación JSF
(JavaServer Faces).
Introducción
JavaServer Facelets es un framework para plantillas (templates) centrado en la tecnología JSF
(JavaServer Faces), por lo cual se integran de manera muy fácil. Este framework incluye
muchas características siendo las más importantes:
• Tiempo de desarrollo cero de los tags para UIComponents.
• Facilidad en la creación del templating para los componentes y páginas.
• Habilidad de separar los UIComponents en diferentes archivos.
• Un buen sistema de reporte de errores.
• Soporte completo a EL (Expression Language).
• Validación de EL en tiempo de construcción.
• No es necesaria configuración XML.
• Trabaja con cualquier RenderKit.
Desafortunadamente JSP (JavaServer Pages) y JSF no se complementan naturalmente,
cuando se usan juntos ambos escriben output al response, pero lo hacen de una manera
diferente: JSP crea output ni bien encuentra código JSP (es decir procesa los elementos de la
página de arriba a abajo), mientras que JSF dicta su propio re-rendering (ya que su ciclo de
vida está dividido en fases marcadas). Facelets llena este vacío entre JSP y JSF, siendo una
tecnología centrada en crear árboles de componentes y estar relacionado con el complejo ciclo
de vida JSF.
¿Por qué Facelets?
• No depende de un contenedor Web.
• Integrar JSP con JSF trae problemas, además, no se puede usar JSTL (JavaServer
Pages Standard Tag Library) con JSF, cosa que Facelets sí provee.
• Facelets provee un proceso de compilación más rápido que JSP.
• Provee templating, lo cual implica reutilización de código, simplificación de desarrollo y
facilidad en el mantenimiento de grandes aplicaciones.
• Permite crear componentes ligeros sin necesidad de crear los tags de los
UIComponents (es más fácil comparado a crear un componente JSF puro).
• Soporta Unified Expression Language, incluyendo soporte para funciones EL y
validación de EL en tiempo de compilación.
Templating
Existen tres maneras de modularizar las páginas y componentes: includes, archivos tag y
decorators. Pero primero algo básico de templating:
La página que contendrá al template:
<html xmlns="[Link]
xmlns:ui="[Link]
xmlns:h="[Link]
xmlns:f="[Link]
xmlns:c="[Link]
<head>
<ui:insert name="head"/>
</head>
<body>
<div class="body">
<ui:insert name="body">
Contenido por defecto
</ui:insert>
</div>
</body>
</html>
El template en sí:
<ui:composition xmlns="[Link]
xmlns:ui="[Link]
xmlns:f="[Link]
xmlns:h="[Link]
xmlns:c="[Link]
template="/[Link]">
<!-- nótese el uso del atributo 'template' -->
<ui:define name="head">
<!-- contenido de la cabecera -->
</ui:define>
<ui:define name="body">
<!-- contenido del cuerpo -->
</ui:define>
</ui:composition>
Como puede verse donde uno quiere que se inserte código se usa el tag <ui:insert
name=”nombre”/> donde nombre corresponde al identificador de la sección.
Tres maneras de modularizar con Facelets
Esta es la porción de código que se abstraerá para los ejemplos siguientes:
<ui:composition>
Bienvenido, #{[Link]}
</ui:composition>
• Templating mediante ‘includes’
Este es el método más familiar para modularizar componentes (se le pueden pasar parámetros
al ‘ui:include’).
<span id="loginDisplay">
<ui:include src="/contenido/[Link]" >
<ui:param name="usuario" value="#{usuarioActual}"/>
</ui:include>
</span>
• Templating mediante un ‘tag file’
Para esta manera de templating, al tag se le da un namespace, por ejemplo:
<ui:composition xmlns="[Link]
xmlns:ui="[Link]
xmlns:f="[Link]
xmlns:h="[Link]
xmlns:c="[Link]
xmlns:my="[Link]
...
<!-- uso del tag -->
<my:bienvenido usuario="#{usuarioActual}" />
...
</ui:composition>
¿Cómo especificamos el tag?: en un archivo xml, que es una libreria de tags facelets. Este
archivo es cargado automáticamente por Facelets, para ello debe tener la extensión
*.[Link] y estar ubicado en el directorio especial META-INF.
<facelet-taglib>
<namespace>[Link]
<tag>
<tag-name>bienvenido</tag-name>
<source>contenido/[Link]</source>
</tag>
...
<!-- otros tags -->
</facelet-taglib>
• Templating mediante ‘decorators’
Los decorators se pueden usar de la misma manera que los compositions, pero éstos pueden
ser insertados en la página (inline).
El texto anterior se mostrará.
<ui:decorate template="/contenido/[Link]">
<ui:param name="usuario" value="#{usuarioActual}" />
</ui:decorate>
El texto posterior se mostrará.
Un uso práctico del decorator es cuando no tiene mucho sentido abstraer el componente en un
archivo aparte, pero sí usar las ventajas del templating.
A manera de conclusión
El uso de templating trae consigo las ventajas de tener un código ordenado (sobre todo en
aplicaciones grandes), fácil de desarrollar y reusar. Uno puede crear componentes o templates
que abarcan desde simplemente mostrar texto hasta crear componentes que muestren un
checkbox, un input o un dropdown dependiendo de la data del backing bean.