Componente JSF o HTML5?
JavaServer Faces es un framework orientado a componentes. Si necesitas algún componente lo puedes obtener de alguna libreria como MyFaces, ICEFaces, RichFaces o el popular PrimeFaces,Por otro lado las últimas tecnologías de marcado, como HTML5, proveen funcionalidad a los componentes HTML en el browser sin necesidad de agregar código extra. Un ejemplo son los nuevos controles de HTML5 para calendar, date, time, email, url, etc. Tan sólo agregas el tag correspondiente y el browser sabrá interpretarlo.
Hasta ahora, si sale algun nuevo elemento de HTML se tiene que esperar a que exista algún componente de JSF por parte alguna de las librerías arriba mencionadas y así poder usarlo con el resto de mi código (Facelets, clases Java, Managed Beans, etc).
JSF 2.2 abre una puerta enorme a la integración con los tags que constantemente emergen de marcado con lo que le ha llamado HTML Friendly Markup.
Ed Burns, el spec lead de JSF 2.2 lo detalla muy bien en su artículo aquí.
HTML5 Friendly Markup
Con el friendly markup se hace más fácil la división de roles entre los que diseñan la estructura de la página web -comúnmente los diseñadores web hacen esta parte-, y quienes programan lo lógica de la aplicación web.
Los diseñadores web muy probablemente querrán diseñar su página con tecnologías como HTML5, CSS3, Sin embargo, al momento de integrar la vista o páginas web con la lógica del negocio haya mucho trabajo por hacer, y quizá hasta echar para atrás algunos cambios
Cómo aprovechar las ventajas de HTML5 y JSF?
El concepto básico de HTML5 es el de "dejar pasar" atributos en mi vista o página JSF o HTML5.
Por ejemplo, si se quiere utilizar el tag progress de HTML5 y que se modifique mientras se vayan completando los campos requeridos en una forma:
Lo que se hace es aprovechar los tags de HTML5 input y progress para renderear estos campos. Pero aún hace falta la lógica para ligar estos campos con el progress bar. Aquí entra JSF con el tag <f:ajax> y combinar el código HTML5 con JSF para lograrlo:
<label jsf:for="name">Name</label>
<input jsf:id="name" type="text" jsf:value="#{blogBean.name}">
<f:ajax execute="@this" render="progress"/>
</input><br/>
<label jsf:for="address">Address</label>
<input jsf:id="address" type="text" jsf:value="#{blogBean.address}">
<f:ajax execute="@this" render="progress"/>
</input><br/>
<label jsf:for="company">Company</label>
<input jsf:id="company" type="text" jsf:value="#{blogBean.company}">
<f:ajax execute="@this" render="progress"/>
</input><br/>
<label for="progress">Progress</label>
<progress jsf:id="progress" max="3" value="#{blogBean.progress}" />
En el código, blogBean es tan sólo un bean con getters y setters y una función para incrementar en 1 cuando el campo ya no está vacio:
public String getProgress() {
int progress = 0;
if(name != null) {
progress++;
}
if(address != null) {
progress++;
}
if(company != null) {
progress++;
}
return progress + "";
}
Que hace el prefijo jsf: en un tag HTML5?
Aqui es donde ocurre el "dejar pasar". Se está ocupando un elemento HTML5 (label,input, progress) y en los atributos con jsf: JSF le está diciendo al browser que "deje pasar" ese atributo a JSF.
jsf: es un nuevo namespace que se declara en la página con:
xmlns:jsf="http://xmlns.jcp.org/jsf"
Este prefijo se utiliza para dejar pasar atributos en HTML para JSF. Pero también hay un prefijo para dejar pasar un atributo HTML en un componente JSF: xmlns:p="http://xmlns.jcp.org/jsf/passthrough".
Este ejemplo fue tan sólo una combinación de HTML5 con JSF gracias a los pass-through elements y attributes en JSF 2.2.
Basta echar un ojo a los nuevos elementos que trae HTML5 para imaginarse cómo sacar provecho de la funcionalidad ya embebida en el browser con el poder de JSF.
