Download Facelets - Junta de Andalucía

Published on Marco de Desarrollo de la Junta de Andalucía (http://madeja.i-administracion.juntaandalucia.es/servicios/madeja)
Facelets
Área: Capa de Presentación
Carácter del recurso : Recomendado
Tecno lo gías: Capa de presentación
Có digo : RECU-0140
Tipo de recurso : Referencia
Descripción
Facelets tiene como objetivo facilitar las tareas relacionadas con la presentación. Permite realizar el diseño de la web de forma
libre y posteriormente asociarle componentes JSF específicos. De esta manera se consigue una menor dependencia del
lenguaje y se dota al diseñador de más libertad.
Para configurar Facelets es necesario configurar el faces-config.xml, se permite la configuración de plantillas para la disposición
de páginas, creación de etiquetas con propiedades individuales, se elimina complejidad en el desarrollo.
¿Porque usar Facelets?
Si presentamos una aplicación sin diseño previo, la potencia de JSF puede aplicarse de forma completa. Se pueden utilizar
librerías de componentes definidos, de esta manera se facilita la reutilización de interfaces, consiguiendo un aspecto
profesional sin necesidad de maquetación y diseño adicional.
Con frecuencia, se utilizan otras tecnologías para facilitar el manejo de la interfaz final a los desarrolladores , provocando que
se produzca una perdida de las ventajas de usar JSF y sus componentes asociados. Con Facelets se puede mantener la
libertad de diseño sin obviar las ventajas que presenta trabajar con JSF
En Facelets, las páginas son XTHML. Se prevee que no exista una curva de aprendizaje complicada ya que el uso es muy
parecido a las JSP/JSTL. Con este formato, se podrán interpretar como HTML por parte de las herramientas de diseño.
Facelets permite incluir texto, etiquetas y expresiones en cualquier zona de la página, y se encargará de evaluarlo. Así es
más sencillo establecer el aspecto de los componentes.
Esta permitido el manejo de JSP con etiquetas. Facelets interpreta un árbol de componentes (no un servlet como con JSP),
el árbol mantiene coherencia con el ciclo de vida de JSF.
En definitiva, Facelets te permite trabajar con JSF de una forma más natural, y la curva de aprendizaje para desarrolladores
que no hayan trabajado con JSF es mucho más liviana.
Desarrollo cero para componentes. Hacer un componente JSF es tan simple como extraerlo en un fichero aparte. Facelets
ofrece un comportamiento con los componentes JSF similar al ofrecido por Custom Tag Files a JSP 2.0.
Se mejora el manejo de mensajes de error, que ahora reportan informes efectivos. De esta manera se reduce
drásticamente el tiempo necesario para interpretar un error en JSF. En JSF no se indica que componente y en que línea se
produce. Sin embargo, Facelets si reporta este tipo de información.
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.
Se recomienda introducir Facelets a cualquier proyecto JSF, aunque se tenga la necesidad de realizar componentes o plantillas.
Usar HTML y tener errores informados son razones suficientes para incorporarlo siempre.
Configuración de Facelets
A continuación se ofrece una rápida revisión de como integrar Facelets. En primer lugar se modifica el prefijo de las páginas
1
con componentes JSF, para ello se modifica la configuración web.xml:
<context-param>
<param-name>javax.faces.DEFAULT_SUFFIX</param-name>
<param-value>.jspx</param-value>
</context-param>
Podemos incluir los siguientes parámetros de contexto en el fichero de configuración web.xml:
<context-param>
<param-name>facelets.REFRESH_PERIOD</param-name>
<param-value>2</param-value>
</context-param>
<context-param>
<param-name>facelets.DEVELOPMENT</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>facelets.SKIP_COMMENTS</param-name>
<param-value>false</param-value>
</context-param>
facelets.REFRESH_PERIOD: Indica el periodo de recarga necesario para realizar comprobaciones de modificación en los
fuentes (xhtml o jspx), si un recurso ha sido modificado se cargará en caliente.
facelets.DEVELOPMENT: Se indica que estamos en el entorno de desarrollo, y frente a un error en el programa nos mostrará
una página detallada con la información del mismo, así como una renderización del árbol de componentes jsf que tenemos
en memoria.
facelets.SKIP_COMMENTS: Limpia de comentarios xml el fichero del fuente de las páginas xhtml o jspx.
Es necesario modificar la definición del gestor de las vistas en el fichero de configuración faces-config.xml:
<application>
...
<view-handler>com.sun.facelets.FaceletViewHandler</view-handler>
...
</application>
Migracion de JSP a facelets
A continuación se describen los cambios necesarios para migrar las páginas que se mantienen en JSP a Facelets. Todas las
modificaciones vienen dadas por la necesidad de tener, en los fuentes de nuestras páginas (xhtml o jspx), un XML bien
formado y válido. Son las siguientes:
Hay que modificar la extensión de las páginas para pasarlas de *.jsp a *.jspx.
Eliminación de las importaciones de tag lib como <@ taglib, ahora son espacios de nombres en el nodo raíz de la página
(xmlns:h="...").
los <@include file="..." /> deben ser <ui:include src="/servicios/madeja/..." />
Los scriptles <% %> deben suprimirse.
Los comentarios en scriptles tienen que ser comentarios en xml.
El acceso al contexto de facletes vía scriptlet <%=facesContext… debe hacerse vía Expression Language
#{facesContext...}.
Todas las entidades xml deben cambiarse a su formato numérico: los &nbsp; ahora son &#160;
Si tenemos algún atributo duplicado en la definición del nodo raíz de alguna etiqueta que renderiza un componente JSF (p.e.,
dos styleClass en un mismo componente)
El componente <f:verbatim no puede tener otros componentes jsf en su interior, si es así no se renderiza.
Facelets para definir plantillas
Con el uso de Facelets, se facilita el definir una plantilla en JSF. Con él se puede definir la estructura que contenga el menú de
navegación, el pie de página, encabezado, etc.... La inserción se puede realizar directamente con el nombre de la página
concreta o realizarse de forma relativa, con el nombre del atributo de tipo <ui:define/>.. Para crear una plantilla deben de
seguirse tres pasos bien diferenciados:
Crear la plantilla layout.xhtml donde se indicarán todos los divs con un identificador que corresponda al definido en la hoja
de estilo
2
Crear las páginas xhtml por cada parte de la estructura, generalmente con mayor contenido estático son el encabezado y
el pie.
Crear las páginas xhtml con mayor contenido dinámico, las listas y las formas. Basta con indicar cuál es la plantilla a seguir y
"sobreescribiendo" la parte que se definió en la plantilla con un <ui:insert name="contenido"> con un <ui:define
name="contenido">
Modularización de las páginas
La modularización de una página puede realizarse de tres maneras, mediante el uso de includes, archivos tag y decorators.
Pero primero algo básico de templating:
Primero la página donde se va a insertar la plantilla:
<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>
La plantilla en si:
<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.
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>
3
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 librería 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>
Es recomendable usar cuando se quiere reemplazar la página completa por la plantilla
Templating mediante ‘decorators’
Los decorators se pueden usar de la misma manera que los compositions, pero estos 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á.
Use para componentes o lugares donde quiera incluir una plantilla.
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.
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.
Creación de etiquetas
Con el uso de Facelets se facilita la creación de etiquetas del tipo <m:mietiqueta parametro="ABC" /> útiles para evitar la
duplicidad de código, mejorar la mantenibilidad y ayudar a reutilizar componentes. Se pueden crear etiquetas propias con el
uso de ficheros xhtml o con una clase que extienda de AbstractTagLibrary
Tags propios definidos en un fichero xhtml
Es necesario crear un fichero que puede denominarse misetiquetas.taglib.xml donde se indicará el nombre de la etiqueta,
en el ejemplo es campo, columna y accionColumna asociado al nombre del fichero xhtml donde se definirá cada uno de
esos tags.
Formalizar un fichero xhtml por cada etiqueta que hayamos indicado. Nuestro etiqueta será la abreviación de todos los
componentes que se encuentren en este fichero.
Declarar en el fichero web.xml dentro de <context-param> la ubicación del fichero misetiquetas.taglib.xml
Tags propios definidos en una clase Java
4
Crear una clase que extienda de com.sun.facelets.tag.AbstractTagLibrary que tenga una variable llamada NAMESPACE.
Utilizar en esa clase los métodos addComponent, addConverter, addFunction, addTagHandler, addValidator para
implementar la funcionalidad especializada que necesitamos para nuestro propio tag. Ver en la aplicación ejemplo la clase
TagsPropios.
Crear un fichero milib.taglib.xml y declarar como elemento library-class la clase que hereda de AbstractTagLibrary
Ejemplos
Revisar los ejemplos establecidos dentro del recurso.
Enlaces externos
Componentes customizados
Documentación para el desarrollador
Tutorial Facelets de IBM
Wiki Facelets con Tomahawk
Pautas
Área: Desarrollo » Construcción de Aplicaciones por Capas » Capa de Presentación
Có digo
LIBP-0011
Título
Funcionalidades de la capa de presentación
Tipo
Carácter
Directriz
Obligatoria
Source URL: http://madeja.i-administracion.junta-andalucia.es/servicios/madeja/contenido/recurso/140
5