Josel Toro: 7. Beans Relacionados y el Ámbito @SessionScope

¡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, aprenderemos a crear plantillas usando FACELETS, veremos una demostración de como podemos relacionar EJBs o simplemente Beans y por ultimo, veremos los diferentes tipos de ámbitos que existen y que podemos utilizar en nuestra aplicación.

Aplicacion_JSF_04

(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 el listener PhaseListener.java

💁 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.

. JSFListener.java

package pe.edu.aprender.listener;

import javax.faces.event.PhaseEvent;
import javax.faces.event.PhaseId;
import javax.faces.event.PhaseListener;

import org.apache.log4j.Logger;

public class JSFListener implements PhaseListener {

 private static final long serialVersionUID = 1L;
 
 static Logger logger = Logger.getLogger(JSFListener.class.getName());

 @Override
 public void beforePhase(PhaseEvent arg0) {
  logger.info("Antes de fase: " + arg0.getPhaseId());
 }

 @Override
 public void afterPhase(PhaseEvent arg0) {
  logger.info("Despues de fase: " + arg0.getPhaseId());
 }

 @Override
 public PhaseId getPhaseId() {
  return PhaseId.ANY_PHASE;
 }

}

Paso 2 - Crear los beans relacionados: Empleado.java, Casillero.java y Empleado.java

. Cargo.java

. Casillero.java

package pe.edu.aprender.entity;

import java.io.Serializable;

public class Casillero implements Serializable {

 private static final long serialVersionUID = 1L;
 
 private int codigo;
 private String descripcion;
 private Empleado empleado; // Relación 1 a 1

 public int getCodigo() {
  return codigo;
 }

 public void setCodigo(int codigo) {
  this.codigo = codigo;
 }

 public String getDescripcion() {
  return descripcion;
 }

 public void setDescripcion(String descripcion) {
  this.descripcion = descripcion;
 }

 public Empleado getEmpleado() {
  return empleado;
 }

 public void setEmpleado(Empleado empleado) {
  this.empleado = empleado;
 }
 
 @Override
 public String toString() {
  return "Casillero [codigo=" + codigo + ", descripcion=" + descripcion + ", empleado=" + empleado + "]";
 }
 
}

. Empleado.java

package pe.edu.aprender.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;
 private Boolean estado;
 private Cargo cargo; // Relación M a 1
 private Casillero casillero; // Relación 1 a 1

 // Importante: Para poder acceder a las propiedades de Cargo y Casillero
 public Empleado() {
  cargo = new Cargo();
  casillero = new Casillero();
 }

 public Empleado(Integer id, String apellido, String nombre) {
  this.id = id;
  this.apellido = apellido;
  this.nombre = nombre;
 }

 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;
 }

 public Boolean getEstado() {
  return estado;
 }

 public void setEstado(Boolean estado) {
  this.estado = estado;
 }

 public Cargo getCargo() {
  return cargo;
 }

 public void setCargo(Cargo cargo) {
  this.cargo = cargo;
 }

 public Casillero getCasillero() {
  return casillero;
 }

 public void setCasillero(Casillero casillero) {
  this.casillero = casillero;
 }

}

Paso 3 - Crear los managedBean FormularioBean.java y SessionBean.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.

. FormularioBean.java
. SesionBean.java

💁 Los tipos de ámbitos para marcar los managed Beans pueden ser:

➢ none - @NoneScoped (sólo JSF 2.0)

Los Managed Beans con éste ámbito no se generan ni almacenan en ningún ámbito. Ellos son generados bajo demanda por otros Managed Beans. Su tiempo de vida depende del Managed Bean que lo invocó.

Puede referenciar a otros managed Beans del ámbito: none.

➢ request - @RequestScoped

Pueden ser generados y están disponibles durante una petición HTTP simple. Esto significa que el Bean sobrevive a la navegación hacia otra pagina.

Puede referenciar a otros managed Beans del ámbito: none, request, view, session, application.

➢ view - @ViewScoped (sólo JSF 2.0)

Permanecen disponibles durante el tiempo que el usuario permanezca en la misma vista. Al salir de dicha vista, los Managed Beans son eliminados.

Puede referenciar a otros managed Beans del ámbito: none, view, session, application.

➢ session - @SessionScoped

Se almacenan en la sesión HTTP. Esto significa que los valores de sus atributos son almacenados a lo largo de múltiples peticiones HTTP para un usuario.

Puede referenciar a otros managed Beans del ámbito: none, session, application.

➢ application - @ApplicationScoped

Retienen sus valores a lo largo de la vida de una aplicación, por lo que están disponibles para TODOS los usuarios.

Puede referenciar a otros managed Beans del ámbito: none, application.

➢ Custom - @CustomScoped(value="#{someMap}")

El bean se almacena en un Mapa y el desarrollador tiene el control del ciclo de vida del mismo.

Como se ve en el ejemplo, el “Managed Bean” está marcado para funcionar en el ámbito @SessionScoped. Se almacenan en la sesión HTTP. Esto significa que los valores de sus atributos son almacenados a lo largo de múltiples peticiones HTTP para un usuario.

(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.

a) Observe las primeras líneas de código en el tag <html>. Se declaran los “namespaces” de las librerías.
b) 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 library que está como parámetro (“css”).
c) 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 reemplazara nada).
d) Los tags <ui:include> permiten incoporar contenido que se encuentra en otros archivos, dentro del template o de la viewId.

. cabecera.xhtml

. menu.xhtml

4. Crear las páginas XHTML

Paso 1 - Crear la página inicio.xhtml, formulario.xhtml, resultado.xhtml y final.xhtml dentro del webContent.

a) Observe las declaraciones del tag <ui:composition> en la primeras líneas.
b) En la línea 6 se indica cual es el archivo de “layout” con el que trabaja ésta página.
c) Los bloques <ui:define> sirven para reemplazar el contenido de cada bloque dentro de la zona de la plantilla identificada con el mismo nombre.
d) 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

. listado.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_16_final_JSF_04/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 4).

Imagen 4

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 5).
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 6).
Abrimos el navegador y accedemos a URL del proyecto. En mi caso sería "localhost:8080/Aplicacion_16_final_JSF_04/faces/inicio.xhtml".