Facelets y JSF – Uso de Templates

17 Diciembre 2008 por Juan Eladio Sánchez Rosas 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="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:c="http://java.sun.com/jstl/core">
 
  <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="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:c="http://java.sun.com/jstl/core"
  template="/template.xhtml">
  <!-- 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, #{usuario.nombre}
</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/bienvenido.xhtml" >
   <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="http://www.w3.org/1999/xhtml"
  xmlns:ui="http://java.sun.com/jsf/facelets"
  xmlns:f="http://java.sun.com/jsf/core"
  xmlns:h="http://java.sun.com/jsf/html"
  xmlns:c="http://java.sun.com/jstl/core"
  xmlns:my="http://www.mycompany.com/jsf">
...
  <!-- 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 *.taglib.xml y estar ubicado en el directorio especial META-INF.

<facelet-taglib>
  <namespace>http://www.mycompany.com/jsf</namespace>
  <tag>
    <tag-name>bienvenido</tag-name>
    <source>contenido/bienvenido.xhtml</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/bienvenido.xhtml">
  <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.

No related posts.

15 comentarios

  1. Andrea dice:

    Gracias por la informacion!

  2. Vero dice:

    Ah ver, a leer jeje.

  3. Hector dice:

    Otto Theo, Gracias esta muy buena la informacion, me aclaraste varias dudas…

  4. Raul dice:

    Muy buena informacion, pero he estado algo confundido con respecto al funcionamiento de este framework, si bien se puede desarrollar el típico esquema de header, menu, etc… ¿es posible tener un menú de navegación del lado izquierdo con el cual al darle click a uno de sus elementos se cargue o renderize la unicamente la sección del contenido en la parte derecha? o es que siempre actulizaria toda la pagina?, lo que deseo saber es que si es posible lograr el uso visual de un iframe con este framework.

    Uno de los funcionamientos visuales que desea es el mostrado por el framework de icefaces en uno de sus demos

    http://component-showcase.icefaces.org/component-showcase/showcase.iface

    espero me puedan ayudar y disculpen la ignorancia, es solo que estoy entrando al uso de este tipo de frameworks

  5. Otto Theo dice:

    No, ya que para lograr ese efecto visual se utilizan frameworks como RichFaces o IceFaces (los cuales agregan Ajax a las aplicaciones JSF), una característica importante de Facelets es ser usado para plantillas… Una combinación de JSF/Facelets/RichFaces(o IceFaces) sería la solución para tu requerimiento.

  6. David dice:

    Hola.

    Yo tengo una aplicación hecha con facelets y icefaces que hace exactamente lo que comenta raul. El problema es que estoy intentando mejorarla para que (como en el component-showcase de icefaces) tenga de entrada una zona central (donde normalmente se muestran las paginas) y que ésta este dividida en dos, una parte central mas una parte derecha. De manera que pueda mostrar contenido una veces en la parte central manteniendo la parte derecha y otras muestre el contenido (por ser más complejo) y desaparezca la parte derecha. El problema es que intento meter una plantilla en otra para conseguir esto, pero no hay manera.

    Si quereis lo podemos comentar con lo que yo tengo funcionando.
    Salu2

  7. Otto Theo dice:

    David, si te refieres a usar ui:decorate y ui:insert anidados, no hay ningún problema en usarlos.

  8. René Paz dice:

    Me parece muy buena la información y ami también me resolvió algunas dudas que tenía de una aplicación de PriceFaces que tengo y que no comprendía…
    Soy principiante en esto del JSF y Facelets pero ya programo en JSP y demás cuestiones relacionadas con esa tecnología…
    Otto hay forma de que me des cursos de todo eso para poder empezar a dominarlo y migrar en un futuro las aplicaciones de mi empresa… Salu2…

  9. carlo dice:

    amigo creo que esta confundido:
    el “template file” es la pagina que contiene los “ui:insert”, y el “template client file” es la pagina que contiene los “ui:define”.

    Lean el capitulo 4 del libro “JavaServer Faces 2.0: The Complete Reference” (Burns et. al, 2010).

    (por cierto el sistema que gestiona los comentarios en esta pagina es pesimo)

  10. Alex Catalán dice:

    Estimados, por necesito crear un tag personalizado, como por ej:

    Alguna idea???

  11. Carlo dice:

    le recomiendo leer el capitulo 7 del libro “JavaServer Faces 2.0: The Complete Reference”, o buscar ejemplos en google.

  12. Diego dice:

    Recomiendo el siguiente artículo: Facelets fits JSF like a glove (Finally, a view technology made just for JSF!)
    http://www.ibm.com/developerworks/java/library/j-facelets/

    Tanto ese como este me fueron de mucha utilidad.

    Alex Catalán: ahí explican como crear tags personalizados.

    Saludos.

  13. Lola dice:

    Hola, necesito saber si existe una herramienta que permita que mi aplicación jsf en eclipse tenga un diseño bonito y agradable, que solamente me permita despues copiar el código de dicha herramienta en el eclipse con las mismas cosas que hice en la herramienta. Se los voy a agradecer, Gracias

  14. Pablo dice:

    Gracias por compartir el conocimiento, esta muy bien explicado. Espero que sigas publicando cosas sobre JSF

  15. Abner dice:

    Realmente es un buen post.

Deja un comentario