Josel Toro: 6. Faceles (Template File y Template Cliente File)

¡Bienvenidos a todos! Esta publicación formará parte de una serie de 10 publicaciones que estaré desarrollando para aprender a crear una aplicación web en Java, bajo la plataforma JEE usando los frameworks de JPA y JSF. Este será un curso en forma de guía para todas aquellas personas que estén empezando en el mundo de la programación web.

En este curso aprenderemos a desarrollar aplicaciones web en N-CAPAS utilizando los patrones de diseño JEE, el estilo arquitectónico MVC y las funcionalidades provistas por los framework JSF (Java Server Faces) a nivel de vista-controlador y por JPA (Java Persistence API) a nivel de persistencia.

Este curso estará dividido en dos partes, En la primera parte, aprenderemos a configurar y utilizar el framework JPA mediante el desarrollo de aplicaciones Stand.Alone. En la segunda parte, aprenderemos a utilizar el framework JSF para desarrollar aplicaciones web. Por último, integraremos las funcionalidades de ambos frameworks en una aplicación final.

APLICACIÓN

Se presenta un formulario donde se debe ingresar los datos para el registro de un trabajador y al presionar el botón “Procesar”, la aplicación responde con una página de registro completo mostrando los datos ingresados (ver imagen 1). Además implementaremos la interfaz PhaseListener para monitorear la ejecución de faces del JSF y aprenderemos a crear plantilas usando FACELETS.

Aplicacion_JSF_03

Imagen 1

1. Pasos para la configuración del proyecto

Paso 1: Crear un proyecto web en java

Acceda al siguiente link para saber como crear un "Dynamic Web Proyect" usando Eclipse como IDE.

Paso 2: Agregar las librerías básicas de JSF

Si se está ejecutando la aplicación en un contenedor web que no soporta a JSF, las librerías del framework deben colocarse en el fólder “lib” de la aplicación (ver imagen 2):

Imagen 2

Clic aquí para descargar las librerías.

Paso 3: Configurar el Faces Servlet

Dentro del archivo descriptor o deployment descriptor "web.xml" de la aplicación (ubicado en la carpeta WEB-INF del WebContent), se debe registrar el servlet controlador llamado “Faces Controller”.


 
  faces/inicio.xhtml
 
 
 
  Faces Servlet
  javax.faces.webapp.FacesServlet
  1
 
 
  Faces Servlet
  /faces/*
 

 

 
 
  javax.faces.DEFAULT_SUFFIX
  .xhtml
 

 
 
  javax.faces.FACELETS_SKIP_COMMENTS
  true

Paso 4: Configurar el JSFListener

💁 Opcionalmente se puede tener un archivo de configuración de JSF llamado faces.config.xml el cual está ubicado al mismo nivel que el web.xml dentro de la carpeta WEB-INF del WebContent.

El archivo contiene la configuración de todos los elementos de una aplicación JSF, aunque también pueden emplearse “anotaciones” en el código java para evitar el uso de éste archivo. Un ejemplo del contenido del archivo faces-config.xml se puede apreciar en el siguiente código.

El listener debe registrarse en el archivo "faces-config.xml" dentro de la carpeta WEB-INF del WebContent.



 
 
  pe.edu.aprender.listener.JSFListener

2. Crear clases

Paso 1: Crear la clase Empleado.java, el managed bean FormularioBean.java y el listener JSFListener.java

. Empleado.java

package pe.edu.cibertec.entity;

import java.util.Date;

public class Empleado {

 private Integer id;
 private String apellido;
 private String nombre;
 private Integer edad;
 private String area;
 private Date fechaIngreso;

 public Integer getId() {
  return id;
 }

 public void setId(Integer id) {
  this.id = id;
 }

 public String getApellido() {
  return apellido;
 }

 public void setApellido(String apellido) {
  this.apellido = apellido;
 }

 public String getNombre() {
  return nombre;
 }

 public void setNombre(String nombre) {
  this.nombre = nombre;
 }

 public Integer getEdad() {
  return edad;
 }

 public void setEdad(Integer edad) {
  this.edad = edad;
 }

 public String getArea() {
  return area;
 }

 public void setArea(String area) {
  this.area = area;
 }

 public Date getFechaIngreso() {
  return fechaIngreso;
 }

 public void setFechaIngreso(Date fechaIngreso) {
  this.fechaIngreso = fechaIngreso;
 }

}

. FormularioBean.java

💁 Un "Manged Bean" es una clase java que representa información de un formulario web y existe dos maneras de configurarlos:
➢ Usando anotaciones dentro del programa Java. Es la forma más recomendada pues permite un código más cohesionado y fácil de mantener. Se emplea la anotación @ManagedBean antes de la definición de la clase (desde JSF 2.0).
➢ Usando XML dentro del archivo faces-config.xml. Se emplea el tag <managed-bean> para efectuar la declaración

💁 Un “managed Bean” típicamente tiene 3 partes:
a) Las propiedades del Bean: generalmente un getter y un setter por cada atributo. Los métodos setter son invocados automáticamente por el JSF cuando el formulario web es enviado.
b) Métodos para controlar acciones: Generalmente es sólo un método, pero podrían ser varios si es que el formulario posee múltiples botones de envío.
c) Un lugar para los datos resultantes: No es invocado automáticamente por JSF. Debe ser llenado por el método controlador en base a los resultados de la lógica de negocio.

package pe.edu.aprender.managed;

import javax.faces.application.FacesMessage;
import javax.faces.bean.ManagedBean;
import javax.faces.context.FacesContext;

import pe.edu.aprender.entity.Empleado;

@ManagedBean(name = "formulario")
public class FormularioBean {

 /*
  * En el ManagedBean “FormularioBean” crearemos una variable de instancia de
  * tipo “Empleado” con sus respectivos getters/setters
  */
 private Empleado empleado = new Empleado();

 public Empleado getEmpleado() {
  return empleado;
 }

 public void setEmpleado(Empleado empleado) {
  this.empleado = empleado;
 }

 // Añadimos un Action Method
 public String procesar() {
  FacesMessage facesMessage = new FacesMessage("Registro completo ");
  FacesContext.getCurrentInstance().addMessage(null, facesMessage);
  return "resultado";
 }
}

. JSFListener

💁 Los eventos de fase o “Phase Events” se procesan entre cada fase del procesamiento del ciclo de vida de un request. Se puede crear un Listener simplemente implementando la interfaz PhaseListener.

Esta interfaz posee tres métodos que deben ser implementados:
· beforePhase()
· afterPhase()
· getPhaseId()

➢ Los métodos beforePhase() y afterPhase() se ejecutan para todas las fases del ciclo de procesamiento de un request, por tanto, si se desea ejecutar alguna lógica especial en determinada fase, se deberá obtener el ID de la fase y en base a condiciones, controlar el flujo del código.

➢ El método getPhaseId() sirve para determinar a que fase está asociado el listener. Cuando se usa para cualquier fase retorna el valor ANY_PHASE.

3. Crear la plantilla faceles

💁 Desarrollada como una extensión de JSF con el objetivo de reemplazar el uso de JSP, permiten a los desarrolladores declarar componentes UI en diferentes tecnologías de presentación utilizando para ello plantillas (templates) HTML de manera tal que permita la composición de una vista a partir de diferentes páginas físicas separadas.

Las páginas en Facelets se generan usando XHTML. La idea de usar XHTML es hacer portables a las páginas entre diversos ambientes de desarrollo. Además, Facelets requiere el uso de “XML namespaces” para soportar las siguientes librerías de tags:

· JSF HTML Tag Library.
· JSF Core Tag Library.
· JSTL Core Tag Library.
· JSTL Functions Tag Library.
· JSF Facelets Tag Library.

💁 La construcción de páginas se realiza con “Facelets XHTML” empleando para ello “tag libraries”.

➢ Se puede declarar las librerías usando “XML namespaces”:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:h="http://java.sun.com/jsf/html">

➢ o usando la forma tradicional:
<%@ taglib uri="http://java.sun.com/jsf/core" prefix="f" %>
<%@ taglib uri="http://java.sun.com/jsf/html" prefix="h" %>

Paso 1: Crear un template y sus paginas clientes

Crear el template ("plantilla.xhtml") y las viewID o paginas clientes ("cabecera.xhtml", "menu.xhtml" y "pie.xhtml") dentro del WebContent de la aplicación (ver imagen 3).

Imagen 3

. plantilla.xhml

💁 Una gran característica de los Facelets (no disponible en JSP) es el poder generar “templates”. Un “template” es una página XHTML que emplea algunos tags de Facelets para definir varias “divisiones” lógicas de la vista como por ejemplo: cabecera, pie de página y contenido. La idea es tener partes reusables de código sin tener que repetir el mismo código en diferentes páginas.

Observe las primeras líneas de código en el tag <html>. Se declaran los “namespaces” de las librerías.
Observe la línea 10 para ver el uso de “resources folders”. En este caso, la aplicación busca un folder “resources” y dentro de este, busca el nombre de la librería que está como parámetro (“css”).
Observe los bloques con el tag <ui:insert>. Lo que está dentro del bloque es el valor por defecto de esa zona (si es que el viewID no reemplazará nada).
Los tags <ui:include> permiten incorporar contenido que se encuentra en otros archivos, dentro del template o de la viewId.

. cabecera.xhtml

. menu.xhtml

. pie.xhtml

4. Crear las páginas XHTML

Paso 1: Crear las siguientes páginas: inicio.xhtml, formulario.xhtml, resultado.xhtml y final.xhtml en el webContent del proyecto

Observe las declaraciones del tag <html> en la primeras líneas.
En la línea 11 se declara el <ui:composition> para indicar cual es el archivo de “layout” con el que trabaja ésta página.
Los bloques <ui:define> sirven para reemplazar el contenido de cada bloque dentro de la zona de la plantilla identificada con el mismo nombre.
Tenga en cuenta que el contenido que se encuentre fuera de los tags <ui:composition> no aparecerá en los clientes.

. inicio.xhtml

. formulario.xhtml

La siguiente expresión en el atributo value de las etiquetas "inputText", es una forma abreviada de invocar a los métodos getters del Managed Bean llamado “formulario”:

La primera parte (en este caso “formulario”) es la “BASE” que indica el ámbito donde buscar.
La segunda parte (en este caso “nombre”) es la propiedad, la cual puede navegarse usando la notación dot.(.).

Una facilidad que brinda EL (Expressions Languages), es la invocación directa a métodos públicos y no estáticos de los managed beans. Como se puede apreciar en el atributo action de la etiqueta "commandButton procesar".

. resultado.xhtml

. final.xhtml

Paso 2: Ejecutar la aplicación

Hay dos formas de poder ejecutar nuestra aplicación para poder probarla. Esto es valido solo si estas usando Apache Tomcat.

1. La primera y la más sencilla es el despliegue automático, es decir, que Eclipse se encargue de ello, tan solo dando clic derecho al proyecto y seleccionar la opción "Run As/Run on Server". Eclipse iniciará el servidor por nosotros y abrirá el navegador con la siguiente URL "localhost:8080/Aplicacion_15_final_JSF_03/faces/inicio.xhtml". Si te preguntas, como es que Eclipse hace este trabajo, es muy sencillo. Lo que hace Eclipse, es publicar el proyecto en un directorio dentro del workspace, en mi caso en la siguiente ruta "G:\Programación\Programas\VersionesEclipse\workspace\indigo\SesionesDAW2\metadata\plugins\org.eclipse.wst.server.core\tmp0\wtpwebapps". Esto se puede ver dando clic derecho al proyecto y seleccionar la opción "Run As/Run Configurations" como se muestra en la siguiente imagen, donde se puede ver como Eclipse inicia Tomcat con la aplicación (ver imagen 3).

Imagen 3

2. La segunda es el despliegue mediante un archivo .war (de Web Application Archive - Archivo de Aplicación Web), para luego copiarlo en la carpeta webapps del servidor tomcat y mediante linea de comandos poder deployarlo.

Primero debemos exportar el proyecto. Para ello, hacemos clic derecho al proyecto y seleccionamos la opción "export/WAR File" (ver imagen 4).
Copiamos el archivo .war a la carpeta webapps del servidor tomcat. En mi caso la ruta sería "C:\Apache\Apache Tomcat 7.0.22\webapps".
Abrimos la consola de comandos CMD y accedemos al directorio en donde tenemos instalado el Tomcat. En mi caso lo tengo instalado en "C:\Apache\Apache Tomcat 7.0.22\bin". Para iniciar el servidor debemos digitar el comando "startup" y para apagar el servidor debemos digitar el comando "shutdown" (ver imagen 5).
Abrimos el navegador y accedemos a URL del proyecto. En mi caso sería "localhost:8080/Aplicacion_15_final_JSF_03/faces/inicio.xhtml".