Ir al contenido principal

Instalando Apache NetBeans 10 y configurarlo con Jakarta EE

Tutorial JSF 2.2 - Sesión 8: HTML5

Tutorial JSF 2.2 - Sesión 8: HTML5
Esta vez hablaremos sobre la novísima versión de HTML que ya se ha vuelto popular, y que revoluciona el desarrollo de aplicaciones web. Es nada menos que el HTML5.

Pero, no vamos a hablar del HTML5 en sí, ya que estamos siguiendo un tutorial sobre JSF 2.2. Lo que vamos a ver es cómo puede interactuar HTML5 con JSF.

En las versiones anteriores a JSF 2.2, solo se podía usar etiquetas compatibles con HTML 4, y las etiquetas y atributos de HTML5 se estaban volviendo muy útiles y necesarias para las aplicaciones. Así que decidieron que el JSF deba contemplar HTML5. Veremos en qué consiste.


HTML5 tiene nuevas características bastantes útiles. Si quieres conocer un poco más de HTML5, te recomiendo que veas este tutorial que está muy bueno: HTML 5 Intro. Ahora bien, es posible que estas características (input de tipo fecha, tag de vídeo y audio nativo, base de datos en el navegador y más) quieras implementarlas en un JSF que tiene etiquetas establecidas. JSF sale a nuestra salvación, ya que la tecnología permite dos maneras de implementación:
  • Pase de elementos (Passthrough Elements)
  • Pase de atributos (Passthrough Attributes).

Pase de elementos

El pase de elementos consiste en que podemos usar etiquetas y atributos HTML5 y a la vez tratarlos con características que son propias de JSF. Para ello, necesitamos poner un namespace al documento JSF y usar los atributos de JSF en las etiquetas HTML pero con el prefijo del namespace. Quedaría algo así como un HTML con chispitas de sabor de JSF:

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:jsf="http://xmlns.jcp.org/jsf"
      >
    <h:head>
        <title>Usando paso de elementos</title>
    </h:head>
    <h:body>
        <h1>Usando paso de elementos</h1>
        <form jsf:id="form">
            <label jsf:for="nombre">Nombre</label>
            <input required="required" 
                   name="nombre" 
                   jsf:id="nombre"  
                   type="text" 
                   value="#{formBean.nombre}"/>
            <br/>
            <label jsf:for="anioNacimiento">Año que naciste</label>
            <input required="required" 
                   name="anioNacimiento" 
                   jsf:id="anioNacimiento" 
                   type="number" 
                   value="#{formBean.anioNacimiento}"/><br/>
            <br/>
            <h:commandButton value="Calcular edad" action="paso-elementos-resp" />            
            
            <br/>
            <h:link outcome="index" value="Regresar"/>
        </form>
    </h:body>
</html>

Notar que con solo colocar el atributo jsf:id el tag HTML5 tiene las características como JSF. Por eso podemos utilizar atributos de HTML5 (como type="number", required y más) conjuntamente con funcionalidades JSF

Pase de atributos

Esto es al revés: tenemos tags de JSF y queremos adornarlo con atributos propios de HTML5. El namespace a usar debe ser
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:p="http://xmlns.jcp.org/jsf/passthrough">
    <h:head>
        <title>Usando paso de atributos</title>
    </h:head>
    <h:body>
        <h1>Usando paso de atributos</h1>
        <h:form>

            <h:outputLabel value="Nombre" 
                           for="nombre" 
                           p:contextmenu="menu"/>
            <h:inputText id="nombre"
                         value="#{formBean.nombre}" 
                         p:placeholder="Escribe tu nombre..." />
            Nota: el menú contextual del LABEL solo funciona en Firefox
            <br/>
            <h:outputLabel value="Fecha nacimiento" 
                           for="fecNac" />
            <h:inputText value="#{formBean.fechaNacimiento}"
                         id="fecNac"
                         p:required="required"
                         p:type="date"/>
            Nota: El selector de fecha solo funciona en Chrome, Opera y Safari.
            <br/>
            <h:commandButton action="paso-atributos-resp" value="Calcular"/>
            <br/>
            <h:link outcome="index" value="Regresar"/>

        </h:form>
        <menu type="context" id="menu">
            <menuitem label="HOLA!"/>
            <menuitem label="Este es una opción del menú"/>
        </menu>
    </h:body>
</html>



Código fuente

Actualizado Nota: Agradezco a Miguel Angel de Quito - Ecuador que me avisó que no corría bien este código, por lo que actualicé los códigos fuentes.
El proyecto completo, lo pueden descargar desde aquí
https://bitbucket.org/apuntesdejava/javanet/downloads/jsf-08-html5.tar.gz

Bibliografía

Todo esto me basé de capítulo 8.9 HTML5-Friendly Markup de The Java EE 7 Tutorial.

Comentarios

Entradas más populares de este blog

RESTful... la forma más ligera de hacer WebServices (Parte 1)

Quienes hayan usado SOAP para WebService, sabrán que es bien fácil de diseñar, pero algo complicado de consumir: se necesita toda una API para construir los clientes utilizando el WSDL. Por ejemplo, para PHP se necesita de la biblioteca NuSOAP. Entonces, para lograr el concepto de "lenguaje único XML" es un dolor de cabeza. Y más aún si el cliente es tan simple como JavaScript, manejar XML de SOAP provocaría suicidos masivos... o no usar WebServices.

Además, con SOAP se permite crear un solo servicio y ponerle varios métodos. Esto puede llevar a un mal diseño del servicio ya que podría tener un servicio que haga de todo: por ejemplo, un servicio de manejo de Clientes que permita también manejar Proveedores.

RESTful es una propuesta muy interesante de Roy Fielding que permite manejar los servicios web con métodos definidos, manteniendo la simpleza del protocolo como XML, pero que cada servicio sea identificado únicamente con un solo URI.

En este post veremos cómo crear un Ser…

¿Por valor o por referencia?

Esta es una pregunta existencial para todo programador Java. Cada uno encuentra una respuesta satisfactoria. Pero ahora veremos, basándonos en el libro para Certificación SCJP 1.5 de Katty Sierra, sobre la respuesta correcta.

Contraseñas encriptadas con Java

¿Quién no ha querido encriptar texto o archivo? Hay diversas maneras para hacer eso, por ejemplo, utilizando un diccionario donde se reemplazara cada caracter por un código.. y para poder desencriptarlo se debería utilizar el mismo diccionario para revertir el proceso. Pero si el diccionario cae en manos de alguien que no queremos que lo sepa, entonces estamos en peligro.
Cuando yo programaba en pascal, mi encriptación favorita era invirtiendo los bits... pero cualquiera también puede invertir los bits y listo.
Pero ya gente experta logró algoritmos de encriptación populares. Los más conocidos: MD5 y SHA.
En este post hablaremos cómo encriptar texto, sobretodo las contraseñas, utilizando MD5 o SHA.