Generación de vistas HTML5 con el soporte de JSF2: pass through.
0. Índice de contenidos.
- 1. Introducción.
- 2. Entorno.
- 3. Passthrough attributes: añadir atributos de HTML5 a la renderización de los componentes JSF.
- 4. Passthrough elements: usando HTML5 puro en la vista y JSF como capa de control.
- 5. Referencias.
- 6. Conclusiones.
1. Introducción
El objetivo de este tutorial es muy concreto, ver cómo podemos generar vistas, páginas HTML en versión 5, con el soporte de JSF2.
JSF es el estándar de JEE para la generación de interfaces visuales basadas en componentes reutilizables. Dichos componentes generan, del lado del servidor, todo lo necesario para que en el cliente, en el navegador, tengan el comportamiento y aspecto esperados. Como consecuencia de lo anterior, como desarrolladores, con JSF no tenemos que preocuparnos de cómo se renderizarán estos componentes en el cliente, ni tenemos porque trabajar con lenguajes de cliente, véase, HTML y Javascript; los componentes «se pintan» ellos solos.
Es precisamente esta característica una de las reticencias que podemos poner a JSF, puesto que no controlamos cómo se llevará a cabo el renderizado de los componentes, se escapa de nuestro control, o parcialmente de nuestro control. A favor de JSF, las vías a esa falta de control venían siendo:
- siempre podemos usar código HTML en las vistas y ahora no existe ningún problema en combinar html con componentes visuales JSF, y
- siempre podemos usar javascript para añadir comportamiento en cliente a los componentes visuales.
A partir de la versión 2.2 de JSF, a las soluciones anteriores, de andar por casa, se añade el soporte nativo para:
- añadir atributos de HTML5 a la renderización de los componentes JSF y
- usar HTML5 puro en la vista y JSF como capa de control
2. Entorno.
El tutorial está escrito y la instalación realizada usando el siguiente entorno:
- Hardware: Portátil MacBook Pro 15′ (2.3 GHz Intel Core i7, 16GB DDR3).
- Sistema Operativo: Mac OS Mavericks 10.9.4
- Eclipse Luna.
- JSF2.2, Mojarra Impl 2.2.8-02
3. Passthrough attributes: añadir atributos de HTML5 a la renderización de los componentes JSF.
El primer soporte para HTML5 es abrir la vía para incorporar a la renderización de cualquier componente JSF atributos del lenguaje cliente a través de lo que han denominado passthrough.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.org/ui"
xmlns:pt="http://xmlns.jcp.org/jsf/passthrough">
<ui:composition template="/WEB-INF/templates/generic/layout.xhtml">
<h:form id="in">
<h:outputLabel styleClass="ui-label" for="email"
value="#{msg.email}" /><br />
<p:inputText id="email" size="40"
value="#{formView.email}" required="true"
pt:type="email" pt:placeholder="Introduzca su email" pt:autofocus="autofocus" />
<br />
<h:outputLabel styleClass="ui-label" for="age"
value="#{msg.age}" /><br />
<p:inputText id="age" size="40"
value="#{formView.age}" required="true"
pt:type="number" pt:min="0" pt:max="10" pt:step="2"/>
<h:outputLabel styleClass="ui-label" for="date"
value="#{msg.date}" /><br />
<p:inputText id="date" size="40"
value="#{formView.date}" required="true"
pt:type="date" />
</h:form>
</ui:composition>
</html>
A un componente de entrada de texto básico, aunque en realidad es de Primefaces, estamos incorporando atributos nativos de HTML5, haciendo uso del espacio de nombres pt, que viene de passthrough y con ello:
- indicamos que el primer campo es de tipo email, incluyendo un placeholder y un autofocus
- establecemos que el segundo campo es de tipo número estableciendo las características de nímino, máximo y salto en la selección que decorará el navegador, con un componente nativo del mismo
A continuación una captura de cómo se renderizan en el navegador estos dos componentes.
Si en vez de asignar el tipo de componente number indicamos range
<p:inputText id="age" size="40"
value="#{formView.age}" required="true"
pt:type="range" pt:min="0" pt:max="10" pt:step="2"/>
La renderización cambiará, en el componente de edad, como sigue:
Este tipo de atributos no son manejados por los componentes JSF, simplemente se incluyen en la fase de renderización al html generado como atributos que son, con lo que los atributos no tienen porque ser necesariamente de HTML5, podrían ser atributos de cualquier posible framework en cliente.
<p:inputText id="age" size="40"
value="#{formView.age}" required="true"
pt:type="range" pt:min="0" pt:max="10" pt:step="2"
pt:ng-model="user.age" />
El «dejar pasar» la renderización del atributo del componente viene dado por la indefinición y el estado actual de la implementación de la especificación de HTML5 en los navegadores, de tal forma que se dejan pasar tanto los atributos conocidos y los futuros para «que pase cualquiera».
4. Passthrough elements: usando HTML5 puro en la vista y JSF como capa de control.
Si, aún lo anterior, seguimos poniendo reparos a la encapsulación de la renderización a HTML de los componentes JSF, lo cuál es perfectamente entendible, JSF 2.2 nos proporciona una segunda vía, usar directamente HTML5 en la vista pudiendo vincular el estado de los elementos a propiedades en la capa de control.
De este modo, la vista podría estar completamente escrita en HTML5 como sigue:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://xmlns.jcp.org/jsf/core"
xmlns:h="http://xmlns.jcp.org/jsf/html"
xmlns:jsf="http://xmlns.jcp.org/jsf"
xmlns:p="http://primefaces.org/ui">
...
<form jsf:id="in">
<label class="ui-label" jsf:for="email"
jsf:value="Email" /><br />
<input jsf:id="email" size="40"
jsf:value="#{formView.name}" data-required="true"
type="text" placeholder="Introduzca su email" autofocus="autofocus" />
<button jsf:action="#{formView.save}"
class="ui-icon-disk" >#{msg.action_save}
<f:ajax execute="@form" render="@form :out:name" />
</button>
<br /><br />
<p:messages redisplay="true" autoUpdate="true" />
</form>
...
En la generación del árbol de componentes se crea un componente JSF por elemento HTML que incluya un atrbiuto con el espacio de nombres jsf:. El tipo de componente que se crea depende del elemento anotado, de tal forma que existe una correlación entre elemento HTML y componente JSF según el tipo del primero. Un elemento input type=»text» generará un h:inputText.
Todos los atributos con el prefijo jsf: serán atributos del componente JSF y los que no tienen el espacio de nombres, del elemento HTML.
Es interesante también la posibilidad de imprimir comportamiento Ajax directamente a un elemento HTML, como en el ejemplo estamos haciendo con el elemento button.
5. Referencias.
- http://jsflive.wordpress.com/2013/08/08/jsf22-html5/
- http://www.oracle.com/webfolder/technetwork/tutorials/obe/java/HTML5-JSF/html5jsf.html
6. Conclusiones.
Lo que aparentemente no es más que una manera distinta de gestionar las vistas puede convertirse en una herramienta muy potente a la hora de generar interfaces visuales basadas en maquetas o plantillas; además perdemos la curva de aprendizaje que supone conocer los componentes visuales de JSF puesto que usamos directamente HTML.
Un saludo.
Jose
2 respuestas
Lo máximo en potencia y versatilidad. Recomendado JSF, html5 y Primefaces. Saludos!
y cómo listas una tabla en html5 como le das la fuente de un List por ejemplo???