Martes, 15 Julio 2014 01:52

Facelets en JSF 2.0 (Netbeans 6.9)

Escrito por 
Valora este artículo
(0 votos)

En una aplicación  Web, cuando se crea la vista o la presentación al usuario, es indispensable tener un formato en la cual se presentaran las distintas vistas, un plantilla con los menues, la cabecera y el pie, seria ideal que se viera en todas nuestras vistas, para ello por ejemplo en  .NET son conocidas las master pages, en nuestro caso en JSF  2.0 disponemos ya incluida la librería de Facelets para la creación de templates (plantillas). En este posr veremos como  crearlas e implementarlas de manera sencilla con Netbeans.

Las plantillas nos evitan problemas, nos abaratan recursos, nos da un formato uniforme a la aplicación, nos centraliza la vista que es común a todas las paginas. Supongamos que no usamos plantillas, y tenemos 4 paginas distintas, al no tener una plantilla repetiríamos el mismo código html (u otro) en todas las paginas, generándonos espacio, y si quisierasmo modificar un menú por ejemplo, deberíamos modificarlos en cada una de las paginas de nuestra aplicación, con las plantillas solo tenemos un menú, que es referenciado a las demás paginas y al modificar solo modificamos una vez y este cambio se reflejan en todas las paginas que hagan uso de la plantilla modificada.
JavaServer Facelets es un framework para plantillas (templates) centrado en la tecnología JSF (JavaServer Faces), por lo cual se integran de manera muy fácil. Este framework incluye muchas características siendo las más importantes:
•    Tiempo de desarrollo cero de los tags para UIComponents.
•    Facilidad en la creación del templating para los componentes y páginas.
•    Habilidad de separar los UIComponents en diferentes archivos.
•    Un buen sistema de reporte de errores.
•    Soporte completo a EL (Expression Language).
•    Validación de EL en tiempo de construcción.
•    No es necesaria configuración XML.
•    Trabaja con cualquier RenderKit.

A partir de JSF 2.0, facelets viene incorporado, anteriormente había que incluir y configurar la librería por separado, ahora y con la ayuda de netbeans esto se hace menos trabajoso.
En si Facelets se basa en el uso de las siguientes tags:
    ui:composition: envuelve un conjunto de componentes para ser reutilizados en otra página, es la etiqueta que:
           -envuelve o puede envolver la plantilla.
           -se utiliza para hacer referencia a una plantilla.
todo lo que quede fuera de la etiqueta ui:composition no será renderizado.

•    ui:define: define un contenido nombrado para ser insertado en una plantilla, su contenido es un conjunto de componentes y se identifica con un name. Ese conjunto de componentes será insertado en una etiqueta ui:insert con el mismo name.

•    ui:insert: declara un contenido nombrado que debe ser definido en otra página,

•    ui:decorate: es la etiqueta que sirve para hacer referencia a una plantilla, como la etiqueta ui:composition, solo que con ui:decorate lo definido antes y después de la etiqueta sí será renderizado,

•    ui:param: nos sirve para declarar parámetros y su valor en el uso de plantillas y componentes por composición,

•    ui:include: es una etiqueta que sirve para incluir en una página el contenido de otra, como si el contenido de esta última formase parte de la primera.

Sin mas que decir ya que en la web hay bastante de información, iremos con el ejemplo practico para comprender  mas  como  fuinciona este sistema de plantillas, usando nuestro Netbeans.
Abrimos como de costumbre nuestro Netbeans (estoy usando el 6.9 ), creamos un nuevo proyecto.

Elegimos aplicación web java


Le damos el nombre, en este caso FaceletsJSF


Elegimos el servidor y la versión del jdk


Elegimos el framework, en este caso java server faces


La pestaña de configuración la dejamos  como esta, aqui indicamos el url pattern que figurara en el web.xml


Y  terminamos la creación del proyecto. Siguiendo las recomendaciones de facelets org., nuestras plantillas (templates) las incluiremos dentro del directorio WEB-INF/templates/, de modo que no sean visibles desde el contenedor web.
Para ello nos pocicionamos sobre el directorio     WEB-INF , damos click derecho en nuevo-> carpeta, como lo muestra la imagen, en esta carpeta incluiremos nuestras plantillas que iremos creando


Le damos el nombre, en este caso “templates” y  terminamos de crear la carpeta.

Bien ahora sobre la carpeta recién creada le damos  click derecho nuevo-> Facelets Templates


Le damos el nombre, en mi caso plantillaPrincipal, tambien elegimos la forma (seria el maquetado en css) que tendra nuestra plantilla, y si queremos que esta este creada con hojas de estilo CSS o bien a trabes de tablas, en mi caso, y seria lo mas adecuado haremos que el netbeans cree nuestra plantilla con CSS


Y listo  ya tenemos creada nuestra plantilla, ahora la explicaremos un poco y la modificaremos, el codigo creado es el siguiente

  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4.      xmlns:ui="http://java.sun.com/jsf/facelets"
  5.      xmlns:h="http://java.sun.com/jsf/html">
  6.    
  7.     <h:head>
  8.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9.         <link href="./../../resources/css/default.css" rel="stylesheet" type="text/css" />
  10.         <link href="./../../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
  11.         <title>Facelets Template</title>
  12.     </h:head>
  13.    
  14.     <h:body>
  15.        
  16.        
  17.         <div id="top" class="top">
  18.             <ui:insert name="top">Top</ui:insert>
  19.         </div>
  20.         <div>
  21.             <div id="left">
  22.                 <ui:insert name="left">Left</ui:insert>
  23.             </div>
  24.             <div id="content" class="left_content">
  25.                 <ui:insert name="content">Content</ui:insert>
  26.             </div>
  27.         </div>
  28.     </h:body>
  29.    
  30. </html>
  31.  

Lo primero que tenemos en cuenta es el nombre de espacios que nesecitamos para poder referenciar  a  tags facelets

xmlns:ui="http://java.sun.com/jsf/facelets"

en el  cuerpo de la pagina tenemos

<div id="top" class="top">
            <ui:insert name="top">Top</ui:insert>
  </div>

En donde el div no es mas que una simple etiqueta html
Dentro del div tenemos

            <ui:insert name="top">Top</ui:insert>

En donde aqui si tenemos un tag facelets,  en donde el  tag <ui:insert> nos define el contenido a insertar en otra pagina cuando usemos el tag <ui:define> con el mismo nombre, en este caso “Top”.

<ui:insert name="top"> </ui:insert>  contendra el contenido de nuestra cabecera, dentro de esta etiqueta pondremos lo que querramos que se vea en todas nuestras vistas.

El resto del contenido del cuerpo es similar a lo antes explicado, solo que tenemos el contenido central (content) y lo que ira en nuestro  banner (left).

Bien ahora modificaremos nuestro template, queda de la siguiente manera

  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4.      xmlns:ui="http://java.sun.com/jsf/facelets"
  5.      xmlns:h="http://java.sun.com/jsf/html">
  6.    
  7.     <h:head>
  8.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9.         <link href="./../../resources/css/default.css" rel="stylesheet" type="text/css" />
  10.         <link href="./../../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
  11.         <title>Facelets Template</title>
  12.     </h:head>
  13.    
  14.     <h:body>
  15.        
  16.        
  17.         <div id="top" class="top">
  18.             <ui:insert name="top"><h1>FACELETS EN JSF - COMPUJUY</h1></ui:insert>
  19.         </div>
  20.         <div>
  21.             <div id="left">
  22.                 <ui:insert name="left"><ul>
  23.                         <li> <a href="#">item 1</a></li>
  24.                         <li> <a href="#">item 2</a></li>
  25. </ul>
  26.                 </ui:insert>
  27.             </div>
  28.             <div id="content" class="left_content">
  29.                 <ui:insert name="content"></ui:insert>
  30.             </div>
  31.         </div>
  32.     </h:body>
  33.    
  34. </html>
  35.  

Lo unico que hicimos es agregar un titulo a la cabecera (Top) y unos ítems a nuestro banner (left). Este ejemplo es sencillo, pero  aquí es donde nosotros debemos definir el aspecto a nuestro sitio, la vista que tendrá a los usuarios finales en todas las paginas del sitio, excepto por ahora el contenido que varia dependiendo de nuestro contexto.
Bien hasta ahí nuestra simple plantilla, ahora procedemos acrear nuestra “cliente”, es decir a crear la pagina que hara uso de esta plantilla.
Antes de crearlo, como el netbeans nos crea un index.xhtml por defecto, a este lo eliminaremos, para que nuestro cliente tenga el mismo nombre y no nos cree conflictos (de todos modos si uds. quieren pueden ponerle otro nombre)
Nos posicionamos sobre Web Pages, click derecho  Nuevo->  Facelets Template Client  se nos abre una nueva ventana

 

Le damos el nombre y le tenemos que indicar el archivo template, osea la plantilla que usara esta pagina cliente, en nuestro caso es plantillaPrincipal.xhtml, entonces clickeamos en Browser se nos abre una nueva ventana  y buscamos nuestra plantilla y la seleccionamos

 

Dejamos tal cual esta, el Generated root tag (este es donde se definen los nombres de espacio, si en el tag html o el ui:composition) en este caso los espacios de nombres los definimos sobre el tag html.
Listo ya tenemos nuestro cliente con el siguiente  código

  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4.      xmlns:ui="http://java.sun.com/jsf/facelets">
  5.    
  6.     <body>
  7.        
  8.         <ui:composition template="./WEB-INF/templates/plantillaPrincipal.xhtml">
  9.            
  10.             <ui:define name="top">
  11.                 top
  12.             </ui:define>
  13.  
  14.             <ui:define name="left">
  15.                 left
  16.             </ui:define>
  17.  
  18.             <ui:define name="content">
  19.                 content
  20.             </ui:define>
  21.  
  22.         </ui:composition>
  23.        
  24.     </body>
  25. </html>
  26.  

Aquí tenemos el tag
            <ui:define name="top">
                top
            </ui:define>

Este  tag facelets nos define el contenido a reemplazar al tag      <ui:insert name="top">  del mismo nombre (en este caso “top”) en la plantilla. Es decir que si dejamos al tag
            <ui:define name="top">
                top
            </ui:define>
Este reemplazara a todo el contenido del tag <ui:insert name="top">  insertado en la plantilla plantillaPrincipal.xhtml, osea a lo siguiente

<ui:insert name="top"><h1>FACELETS EN JSF - COMPUJUY</h1></ui:insert>

Lo remarcado con rojo sera reemplazado por “top” que se encuentra dentro del ui: define . Por ello quitaremos al top y al left, ya que estos serán contenido que se repetirán en todas las vistas, sino no tendría mucho sentido hacerlos, y dejaremos el tag content, en donde este si variara en todas las vistas, ya que es un contenido que dependerá de cada contexto de la aplicación.
El codigo modificado de la pagina cliente index.xhtml queda de la siguiente manera

  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4.      xmlns:ui="http://java.sun.com/jsf/facelets">
  5.    
  6.     <body>
  7.        
  8.         <ui:composition template="./WEB-INF/templates/plantillaPrincipal.xhtml">
  9.             <ui:define name="content"><p>
  10. JavaServer Facelets es un framework para plantillas (templates) <br/>
  11. centrado en la tecnología JSF (JavaServer Faces), por lo cual se<br/>
  12. integran de manera muy fácil. Este framework incluye muchas<br/>
  13. características siendo las más importantes</p>          
  14.            </ui:define>
  15.         </ui:composition>
  16.     </body>
  17. </html>

Al tag content le incluimos un texto.
Ahora podemos ejecutar nuestro primer y sencillo ejemplo. Antes de ejecutarlo verificamos que el web.xml, esta bien configurado de acuerdo a nuestro url-patern como lo muestra la imagen.


Ejecutamos el proyecto, y el resultado debería ser el siguiente


La url a ejecutar el proyecto según su configuración en el web.xml podría será también la siguiente

Según lo hecho hasta ahora parece estar todo en orden, pero si observamos bien nuestra plantilla plantillaPrincipal.xhtml creada por nuestro Netbeans viene incluidad con unos archivos de estilo CSS en la cabecera

    <h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./../../resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./../../resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Facelets Template</title>
    </h:head>

Estos archivos css se encuentran dentro de la carpeta resources/css/, la cual no se esta referenciando bien.


Este, por lo menos en la versión que yo estoy usando (Netbeans 6.9) no  esta bien referenciado, ya que la ruta a referenciar debe ser de acuerdo a la pagina cliente, en nuestro caso index.xhtml, desde aquí debemos interpretar el path para referenciar los archivos CSS. Osea según el árbol debemos ingresar directamente a resources/css/,
El head de la plantilla quedaría, para nuestro ejemplo

<h:head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
        <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
        <title>Facelets Template</title>
    </h:head>

El código completo de la plantilla plantillaPrincipal.xhtml quedaría de la siguiente manera

  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4.      xmlns:ui="http://java.sun.com/jsf/facelets"
  5.      xmlns:h="http://java.sun.com/jsf/html">
  6.    
  7.     <h:head>
  8.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  9.         <link href="./resources/css/default.css" rel="stylesheet" type="text/css" />
  10.         <link href="./resources/css/cssLayout.css" rel="stylesheet" type="text/css" />
  11.         <title>Facelets Template</title>
  12.     </h:head>
  13.    
  14.     <h:body>
  15.        
  16.        
  17.         <div id="top" class="top">
  18.             <ui:insert name="top"><h1>FACELETS EN JSF - COMPUJUY</h1></ui:insert>
  19.         </div>
  20.         <div>
  21.             <div id="left">
  22.                 <ui:insert name="left">
  23.                         <ul>
  24.                         <li> <a href="#">item 1</a></li>
  25.                         <li> <a href="#">item 2</a></li>
  26.                         </ul>
  27.                 </ui:insert>
  28.             </div>
  29.             <div id="content" class="left_content">
  30.                 <ui:insert name="content"></ui:insert>
  31.             </div>
  32.         </div>
  33.     </h:body>
  34.    
  35. </html>
  36.  

Bien, ahora ejecutamos el proyecto y obtenemos lo siguiente. Este resultado es diferente ya que a la pagina index.xhtml se le aplica estilo CSS que lo crea el netbeans.

Bien la imagen nos muestra como queda nuestra pagina index.xhtml con la respectiva referencia a la plantilla plantillaPrincipal.xhtml y esta a su vez la referencia a las hojas de estilo CSS.
Bien ahora para comprobar que la plantilla nos sirve para varias paginas, crearemos otra pagina cliente de nombre index2.xhtml


No olvidemos el nombre y la referencia a la plantilla plantillaPrincipal.xhtml.
Modificamos al index2.xhtml  con el siguiente código

  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4.      xmlns:ui="http://java.sun.com/jsf/facelets">
  5.     <body>
  6.         <ui:composition template="./WEB-INF/templates/plantillaPrincipal.xhtml">
  7.             <ui:define name="content">
  8.                 Segunda pagina cliente de prueba
  9.             </ui:define>
  10.         </ui:composition>
  11.     </body>
  12. </html>
  13.  

Ejecutamos al index2.xhtml, y el resultado debería ser el siguiente


Con esto comprobamos que en las dos paginas index.xhtml e index2.xhtml ejecutan la misma plantilla, y que el código de la cabecera “top” y el banner o menú “left” es el mismo y esta centralizado.


Bien ahora supongamos que tenemos dos contenidos que se repiten varias veces, uno para unos determinados clientes,  y el otro para los de mayor nivel, entonces nesecitariamos 2 contenidos distintos, para no repetir el contenido en todas las vistas, podemos utilizar las etiquetas <ui:include> de facelets.
Los include no son  mas que el contenido de una pagina en otra, esto es especial cuando no queremos que el mismo contenido  se repita en todas las paginas clientes, pero si en algunos. Lo haremos a continuación. A los includes lo crearemos sobre la carpeta templates, será un simple archivo xhtml, como lo muestra la imagen


Le damos el nombre “contenido1.xhtml” y terminamos


De la misma manera creamos otro archivo xhtml contenido2.xhtml
Nuestro árbol de proyecto se tiene que ver asi


Bien ahora reemplazamos el contenido de contenido1.xhtml por lo siguiente

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!--
  3. To change this template, choose Tools | Templates
  4. and open the template in the editor.
  5. -->
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml"
  8.      xmlns:ui="http://java.sun.com/jsf/facelets">>
  9.     <head>
  10.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  11.         <title>TODO supply a title</title>
  12.     </head>
  13.     <body>
  14.         <ui:composition>
  15.             CONTENIDO 1 <br/>
  16.             CONTENIDO 1 <br/>
  17.             CONTENIDO 1 <br/>
  18.             CONTENIDO 1 <br/>
  19.             CONTENIDO 1 <br/>
  20.         </ui:composition>
  21.     </body>
  22. </html>
  23.  



Y el contenido de contenido2.xhtml por lo siguiente

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <!--
  3. To change this template, choose Tools | Templates
  4. and open the template in the editor.
  5. -->
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
  7. <html xmlns="http://www.w3.org/1999/xhtml"
  8.      xmlns:ui="http://java.sun.com/jsf/facelets">>
  9.     <head>
  10.         <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  11.         <title>TODO supply a title</title>
  12.     </head>
  13.     <body>
  14.         <ui:composition>
  15.             CONTENIDO 2 <br/>
  16.             CONTENIDO 2 <br/>
  17.             CONTENIDO 2 <br/>
  18.             CONTENIDO 2 <br/>
  19.             CONTENIDO 2 <br/>
  20.         </ui:composition>
  21.     </body>
  22. </html>
  23.  

Lo unico que cambia aqui es el nombre y el contenido

Ahora el contenido de index.xhtml

  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4.      xmlns:ui="http://java.sun.com/jsf/facelets">
  5.    
  6.     <body>
  7.        
  8.         <ui:composition template="./WEB-INF/templates/plantillaPrincipal.xhtml">
  9.             <ui:define name="content">
  10.                     <ui:include src="./WEB-INF/templates/contenido1.xhtml" ></ui:include>
  11.             </ui:define>
  12.            </ui:composition>
  13.     </body>
  14. </html>
 

Y el contenido de index2.xhtml

  1. <?xml version='1.0' encoding='UTF-8' ?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  3. <html xmlns="http://www.w3.org/1999/xhtml"
  4.      xmlns:ui="http://java.sun.com/jsf/facelets">
  5.     <body>
  6.         <ui:composition template="./WEB-INF/templates/plantillaPrincipal.xhtml">
  7.             <ui:define name="content">
  8.                  <ui:include src="./WEB-INF/templates/contenido2.xhtml" ></ui:include>
  9.             </ui:define>
  10.         </ui:composition>
  11.     </body>
  12. </html>
  13.  

Estamos en condiciones de ejecutar y si todo salió bien  tendremos lo siguiente, ejecutamos el index.xhtml que contiene el contenido1


Y ahora el index2.xhtml


Bien ya tenemos un tamplate principal y dos  paginas clientes de este template, que a la vez los dos cliente tienen incluida 2 contenidos distintos en otros archivos.
Por cuestiones de tiempo lo dejo ahí, solo falto explicar el tag decórate, pero la única diferencia con el composition es que este es in line, es decir  que lo que este fuera de la etiqueta decórate si será renderizado.
Bueno eso es todo por ahora, lo que haremos en el siguiente post será usar FACELETS EN ICEFACES con nuestro ultimo ejemplo de datatables, si desean el proyecto que lo suba dejen sus comentarios, hasta pronto.

Visto 1253 veces

Deja un comentario

Asegúrate de llenar la información requerida marcada con (*). No está permitido el código HTML. Tu dirección de correo NO será publicada.