HTML5 – Etiquetas compatible
Al desarrollar aplicaciones web, existen muchas consideraciones a tener en cuenta: ¿Que funcionalidad la aplicación proporcionará? ¿Qué tipo de usuarios trabajaran con la aplicación? ¿Que dispositivos se utilizarán para trabajar con la aplicación?. Estas son algunas preguntas a realizarse antes de decidir que framework utilizar.
Existen muchos frameworks a ser considerados actualmente. JSF es una especificación robusta y madura que lidera la elección. Proporciona una base sólida para aplicaciones del lado del servidor y permite a los desarrolladores tener el foco en el desarrollo de la aplicación, antes que invertir mucho tiempo desarrollando JavaScript y CSS. Esto lo realiza reemplazando los componentes que se utilizan en el desarrollo de la interfaz.
HTML5 es un nuevo estandard para el desarrollo de aplicaciones que permite trabajar con diferentes dispositivos. JSF 2.2 permite la interactividad entre los componentes de JSF y HTML5, permitiendo a los desarrolladores tomar ventaja de la escalabilidad y modernización de HTML5, mientras mantiene las características que lo hacen robusto. JSF 2.2 permite a los desarrolladores elegir componentes JSF, componentes HTML5 o ambos.
JSF 2.2 introduce un nuevo namespaces, que se puede especificar a través de los elementos o a través de los atributos o ambos en las páginas con HTML5. Utilizando estas nuevas funcionalidades, los elementos de HTML5 pueden ser tratados como componentes de JSF o los componentes de JSF pueden ser pasados al browser sin interpretación con los componentes de JSF o utilizando rendered. Las páginas HTML5 pueden utilizar los backing bean de la misma forma que los componentes de vista JSF, permitiendo la interacción con JSF.
Componentes JSF vs HTML5
Figura 1: Código de formulario en JSF vs HTML5
En la imagen se puede observar la representación de un formulario utilizando los componentes de JSF como los componentes de HTML5. En la sección de la izquierda se puede observar el uso de los componentes de JSF, en este caso la vista contiene varios de los componentes de PrimeFaces, como: inputText, spinner o el calendar. En la sección de la derecha, se puede observar que el código tiene una mixtura de JSF Facelets y etiquetas HTML5. Si la página sólo tuviera código HTML5 funcionaría igual, esto gracias a la posibilidad de JSF 2.2 denominada Pass-Through elements.
Para poder trabajar utilizando los elementos de HTML5 con JSF, se debe agregar el namespace para los elementos de Pass-Through elements (xmlns:jsf=»http://xmlns.jcp.org/jsf»). El namespace se puede agregar a cualquier atributo de HTML5, permitiendo que dicho elemento sea procesado por el motor de JSF.
1 | <head jsf:id='head' /> |
Al escribir jsf:id=»head» le indica al motor de JSF que interprete este componente como <h:head>. En forma similar para el siguiente ejemplo:
1 | <input type="text" /> |
Como resultado de los Pass-Through elements, los elementos de HTML5 son interpretados como la clase JSF h:inputText y es asociado a una instancia de un UIComponent en el servidor. Para ser tratados como componentes JSF, por lo menos un componente debe tener el namespace de Pass-Through elements. Esto permite que los elementos estandard puedan utilizar Expression Language (EL) para devolver y administrar propiedades de los beans.
Un poco de HTML5 en JSF
HTML5 y JSF funcionan perfectamente, de hecho, se puede agregar código de HTML5 en una página JSF y estos se comportará como componentes de JSF. Sin embargo, en ocasiones se puede requerir utilizar componentes JSF con atributos que sólo existen en las nuevas etiquetas de HTML. Esta solución es posible desde la versión de JSF 2.2 utilizando pass-through attributes. pass-through attributes es lo contrario a Pass-Through elements: pass-through attributes se aplica a los componentes de JSF para que el motor de JSF no tome en cuenta estos atributos y sean pasados directamente al browser. El resultado es el equivalente de HTML5 del componente JSF, incluyendo todos los atributos.
- En posteriores artículos revisaremos en más detalle la interacción entre HTML y JSF.
- Este articulo esta basado en: HTML5 y JSF.
- Otras referencias a HTML5: HTML5 y data-attributes
