Lectura 1 - Java Server Faces

Mdulo 4
Unidad 1
Lectura 1
Materia: Framework de desarrollo WEB, componentes de negocio, Web Services Profesor: Daniel Oliva Bianco
1- Java Server Faces

1.1 Introduccin
En esta primera parte del mdulo 4 se examinar como programar Java Server Faces (JSF). El objetivo de esta lectura es mostrar un resumen de esta tecnologa y explicar cmo el framework de Java Server Faces encaja en el desarrollo de interfaces web robustas y escalables. A lo largo de esta unidad el lector aprender a: Reconocer cul es el cdigo Java, JSP, XML y archivos de configuracin necesarios para que JSF funcione. Identificar los patrones de diseo y componentes de software usados por este framework. Establecer el flujo de una aplicacin JSF mediante un ejemplo prctico
El rol de un framework puede describirse de la siguiente forma: Organizar pequeos componentes reutilizables en un todo integral. Imponer y alentar patrones de diseo probados para las interacciones de los componentes. Incrementar la reutilizacin de subsistemas y arquitecturas.
1.2 Qu es Java Server Faces?

JSF es un framework para el desarrollo de aplicaciones web dinmicas, que simplifica el desarrollo de interfaces de usuario (UI) mediante el uso de distintos componentes de software y aplicando el patrn ModeloVista-Controlador (Model-View-Controller o MVC). Modelo-Vista-Controlador El primer beneficio de utilizar una arquitectura MVC es el desacoplamiento entre las distintas capas de la aplicacin, esto permite, tanto el desarrollo como la modificacin y el testeo de cada una de ellas por separado, facilitando la mantencin del cdigo.
FRAMEWORK DE DESARROLLO WEB, COMPONENTES DE NEGOCIO, WEB SERVICES Daniel Oliva Bianco | 2
A diferencia de otros frameworks web que implementan el patrn MVC, JSF forma parte del estndar Java EE, adecundose naturalmente al modelo request/response (peticiones/respuestas) del protocolo HTTP.
Figura 1: Patrn de diseo MVC
En la figura 1 se puede apreciar la variante del patrn MVC que es especfica para aplicaciones web. Los puntos a destacar son los siguientes: El Model (modelo) est compuesto por clases Java (POJOs) o EJBs que representan objetos de negocio, interactuando con datos persistentes. La capa de vista o View contiene cualquier tecnologa visualizacin, como JSPs y Taglibs. Esta capa renderiza la respuesta que luego ser enviada al usuario por HTTP. El Controller (controlador) es siempre implementado por un servlet (ActionServlet). En esta capa se examina la informacin del request, se hacen ciertas operaciones y opcionalmente se populan ciertos datos que luego sern usados en la capa de presentacin.
Componentes de software Un componente de software es un mdulo unitario con interfaces especificadas, que solo tiene dependencias de contexto explicitas. Esta unidad de software puede ser desplegada independientemente y estar sujeto a componer terceras partes1.
Szyperski, Clemens. 2002. Component Software, Beyond Object-Oriented Programming.
JSF es un framework basado en componentes UI, los cuales proveen funcionalidades especficas para interactuar con el usuario final, y adems dejan abierta una puerta para la creacin de mdulos personalizados.
Figura 2: Vista de componentes JSF dentro de la arquitectura MVC
En la figura 2 el lector observar que una aplicacin JSF es muy parecida a cualquier otra aplicacin web, siendo sus principales componentes: Un conjunto de pginas JSP (aunque, como se ver ms adelante, el desarrollador no est limitado nicamente a usar JSPs como tecnologa de presentacin) Un conjunto de backing beans , que son JavaBeans usados para definir como la aplicacin responde a eventos iniciados por el usuario. Un archivo de configuracin de recursos: faces-config.xml, que define las reglas de navegacin, componentes personalizados, entre otros. Un archivo de descripcin de despliegue: web.xml (deployment descriptor). Un conjunto de objetos creados por el desarrollador que pueden incluir validators, converters y/o listeners.
En las aplicaciones JSF, los objetos que permiten la interaccin entre la UI y el modelo son llamados backing beans. Estos contienen propiedades que son obtenidas de los usuarios de la aplicacin y los listeners para hacer algn tipo de procesamiento.
En esta primera aproximacin a JSF se pueden ver algunos conceptos bsicos que permiten diferenciar este framework de Struts: JSF forma parte del estndar JEE JSF posee una arquitectura basada en componentes, mientras Struts est basado en acciones
1.3 Flujo de una aplicacin JSF

El flujo de una aplicacin JSF puede ser graficado de la siguiente forma:
Figura 3: Flujo de una aplicacin JSF
De la imagen anterior se puede constatar que los componentes JSF son quienes manejan el ciclo de vida de nuestra aplicacin. Para lograr un mayor entendimiento de este ciclo, se llevar a cabo con el lector, un ejemplo prctico explicando cmo funcionan dichos componentes. En el primer ejemplo de uso de JSF, se generar n los archivos necesarios para poder imprimir por pantalla un saludo simple: Buenas, esta es una pgina JSF!
Hola JSF! Lo primero que se requiere es crear un proyecto del tipo Dynamic Web Project, eligiendo en la configuracin del mismo la opcin Java Server Faces v1.2 Project. Apenas terminada la instanciacin del proyecto, se debera tener autogenerada la estructura de carpetas y los dos primeros archivos: web.xml y faces-config.xml. A continuacin, se explicar en 3 breves pasos como cumplir con el resto del requerimiento. 1- Mapeo de la instancia de FacesServlet En la figura 3 se pudo apreciar que el controller de una aplicacin JSF est compuesto por el FacesServlet, quien es encargado de procesar las solicitudes HTTPServletRequest desde algn browser. Es el web descriptor (web.xml) quien necesita conocer a FacesServlet, al igual que las URLs que deber manejar:
<display-name>HolaJSF</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>Faces Servlet</servlet-name> <servletclass>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> Extracto del cdigo de web.xml autogenerado por la IDE
Para usar componentes JSF en pginas JSP, se necesita dar acceso a dos libreras de etiquetas (taglibs): html y core Mediante el agregado de un prefijo (h para el componente html y f para el componente core) todas las etiquetas pueden usar estas referencias para obtener acceso a sus funcionalidades.
2- Creacin de pginas web La creacin de pginas web implica exponer componentes UI al usuario final, mapear componentes a los beans y agregar etiquetas (tags) que indiquen la necesidad de hacer conversiones, validaciones o escuchas con ciertos datos. La primera pgina del ejemplo ser llamada index.jsp
<%@ page language="java" contentType="text/html; charset=ISO-8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html><head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Hola JSF!!</title> </head> <body><f:view> <h:form><h2>Buenas, esta es una pgina JSF!</h2> </h:form> </f:view> </body> </html> Cdigo de index.jsp
En el cdigo de ejemplo se define un servlet-name con cualquier valor, en este caso es Faces Servlet. El nombre de la clase pertenece a la implementacin de JSF y no debiera ser modificado. Tambin se puede observar el mapeo de cualquier pgina que comience con /faces/ al servlet anteriormente definido.
3- Uso de index.jsp como pgina de inicio Para poder utilizar en una pgina JSP los taglibs de JSF, se deber modificar el web.xml, as de esta forma, el JSP ser reconocido por el controller. A continuacin el cdigo completo:
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/webapp_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>HolaJSF</display-name> <welcome-file-list> <welcome-file>faces/index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>Faces Servlet</servlet-name> <servletclass>javax.faces.webapp.FacesServlet</servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> </web-app> Cdigo de web.xml
Al mismo tiempo, cabe mencionar que el archivo de configuracin de recursos, faces-config.xml, queda igual a como fue autogenerado por la IDE:
<?xml version="1.0" encoding="UTF-8"?> <faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/webfacesconfig_1_2.xsd" version="1.2"> </faces-config> Cdigo de faces-config.xml
El ejemplo prctico cuenta ahora con los 3 archivos necesarios para visualizar el saludo: Buenas, esta es una pgina JSF!. En la imagen de la izquierda se puede ver la estructura del proyecto y los archivos que lo componen tal cual aparecen en la IDE.
Una vez cumplimentados los pasos anteriores se estar en condicin de hacer el despliegue de la aplicacin en un servidor. Realizada esta tarea, se obtiene una pgina como la siguiente:
Figura 4: Vista en un browser de index.jsp
Nota: La URL puede variar en el puerto (8084) de acuerdo a la configuracin del servidor Glassfish.
1- De dnde sale el nombre HolaJSF que est en la URL? 2- Qu sucede si en la URL le agrego al final el nombre del archivo index.jsp? Y si le agrego faces/index.jsp?
Lista de etiquetas de uso comn en JSF Tag h:form h:inputText h:inputTextArea h:inputSecret h:inputHidden h:outputLabel h:outputLink h:outputFormat h:outputText h:commandButton h:commandLink h:message h:messages h:grapicImage h:selectOneListbox h:selectOneMenu h:selectOneRadio Descripcin Formulario HTML Control input-text de una sola lnea. Control input-text multilinea. Control input-text de password. Campo oculto Etiqueta para dar acceso a otro componente HTML anchor. Como el outputText, pero para mensajes compuestos Texto de una sola lnea. Botn (submit, reset, push). Link que acta como un botn push. Muestra el mensaje ms reciente para un componente Muestra todos los mensajes Muestra una imagen. Caja de seleccin nica. Men de seleccin nico. Conjunto de radio-buttons.
h:selectBooleanCheckbox Checkbox. h:selectManyCheckbox h:selectManyListbox h:selectManyMenu h:panelGrid h:panelGroup h:dataTable h:column Conjunto de checkboxes. Caja de seleccin mltiple. Men de seleccin mltiple. Tabla HTML. Dos o ms componentes que son presentados como uno Tabla ms compleja que panelGrid Columna de un dataTable
1.4 Componentes JSF avanzados

El ejemplo anterior provee los lineamientos para hacer funcionar una aplicacin JSF bsica, a continuacin se explicar cmo agregarle componentes ms avanzados. Al ejemplo anteriormente expuesto se le deber agregar un managedbean que genere nmeros aleatorios entre el 0 y el 10 para que el usuario de nuestra aplicacin lo adivine. Si el usuario ingresa un nmero mayor a 10 o menor a 0, se le mostrar un mensaje de error mediante el uso de un validator. Dependiendo si el usuario adivina o no el nmero, se indicar ese resultado con un mensaje correspondiente en una nueva pgina. Adivinando el nmero! Para cumplir con el requerimiento, se comenzar con el agregado de tags JSF de la siguiente forma: El primer tag que se agregar es outputText. Este representa un label que imprime el valor de una variable, en las pginas ser utilizado para crear el mensaje que le indicar al usuario el rango de nmeros en donde se encuentra el que tiene que adivinar. Para evitar hacer hard-code del 0 y 10 en la pgina JSP, estos valores de nmero mximo y mnimo se obtendrn directamente desde los campos del managed-bean de la siguiente forma:
Cualquier clase Java con un constructor sin argumentos puede ser usada como managedbean. Usando anotaciones como @ManagedBean y @SessionScoped se puede indicar al compilador que se est en presencia de este tipo de componentes Todo lo que se debe definir en faces-config.xml es el identificador, el nombre de clase y el alcance (scope). El scope puede ser none (instanciado cada vez que es solicitado), request, session, o application
<h2>Buenas, esta es una pgina JSF!</h2> <h2>Estoy pensando en un nmero desde <h:outputText value="#{numeroBean.minimo}"/> hasta <h:outputText value="#{numeroBean.maximo}"/> Podes adivinarlo? </h2> Modificacin del cdigo de index.jsp
En el cdigo anterior #{numeroBean.minimo} representa la llamada al managed-bean que tiene como identificador numeroBean y deber estar definido en el archivo faces-config.xml de la siguiente forma:
<managed-bean> <managed-bean-name>numeroBean</managed-bean-name> <managed-bean-class>adivinar.NumeroBean</managed-beanclass> <managed-bean-scope>session</managed-bean-scope> </managed-bean> Modificacin del cdigo de faces-config.xml
La clase NumeroBean tendr el siguiente aspecto:

package adivinar; import java.util.Random; import javax.faces.bean.ManagedBean; import javax.faces.bean.SessionScoped; @ManagedBean @SessionScoped public class NumeroBean { Integer random = null; Integer nroUsuario = null; String respuesta = null; private int maximo = 10; private int minimo = 0; //nro a adivinar //nro ingresado por el usuario //mensaje a mostrar //lmite max //lmite min
public NumeroBean() { random = new Integer(new Random().nextInt(maximo)); System.out.println("Nmero generado: " + random); } public String getRespuesta() { if(nroUsuario!=null && (nroUsuario.compareTo(random) == 0)) { return "Muy bien! Lo adivinaste"; } else { return "Lo lamento, "+nroUsuario+ " es incorrecto"; } } public Integer getNroUsuario() { return nroUsuario; } public void setNroUsuario(Integer nroUsuario) { this.nroUsuario = nroUsuario; } public int getMaximo() { return maximo; } public void setMaximo(int maximo) { this.maximo = maximo; } public int getMinimo() { return minimo; } public void setMinimo(int minimo) { this.minimo = minimo; } } Cdigo de NumeroBean.java
En el managed-bean que se acaba de crear tiene un constructor sin argumentos que le asigna un nmero aleatorio a la variable random; esta variable mantendr su valor durante toda la sesin. Al mismo tiempo, el mtodo getRespuesta() es el encargado de verificar si se adivin el nmero o no.
Por ltimo, es necesario agregar en el archivo index.jsp el input del usuario y el validador:
<h:inputText id="nroIngresado" validatorMessage="Nmero fuera de los lmites!" value="#{numeroBean.nroUsuario}"> <f:validateLongRange minimum="#{numeroBean.minimo}" maximum="#{numeroBean.maximo}"/> </h:inputText> <h:commandButton id="submit" value="Enviar" action="resultado.jsp"/> <p></p> <h:message showSummary="true" showDetail="false" style="color: red; text-decoration: overline" id="errors1" for="nroIngresado"/> Modificacin del cdigo de index.jsp
Se pueden usar expresiones JSF EL para acceder a las variables o mtodos de los JavaBeans, hacer operaciones lgicas o numricas. Por ejemplo: #{myBean.value} devuelve el valor de value para el elemento identificado como myBean #{myBean.methodName} retorna una llamada al mtodo methodName #{20 + 3} imprime 23
Mediante el uso del tag: validateLongRange, un validator es registrado para el input con id: nroIngresado, el cual ser el encargado de verificar que el rango no sea mayor o menor a lo que se define en el bean. Si ello no ocurre, el tag message mostrar el mensaje de error: "Nmero fuera de los lmites!" Otro tag agregado en el cdigo JSP es: commandButton, que representa un botn que permite hacer submit del formulario con los datos ingresados en el input. El atributo action especfica cul ser la prxima pgina que ser accedida. Para mostrarle al usuario si su respuesta fue correcta o no, se genera la pgina resultado.jsp que contiene el siguiente cdigo:
<f:view> <h:form> <h2> <h:outputText id="resultado" value="#{numeroBean.respuesta}"/> </h2> <h:commandButton id="back" value="Volver" action="index.jsp"/> </h:form> </f:view> Extracto del cdigo de resultado.jsp
Con este ltimo agregado, el lector puede hacer una vez ms el despliegue de la aplicacin en el servidor.
La nueva pgina se visualizar como:
Figura 5: Vista en un browser de nuestro nuevo index.jsp
1- Qu sucede si en lugar de un nmero se inserta una letra en el input? 2- Qu partes del ejemplo anterior estn hard-codeadas en el cdigo fuente?
Backing-beans Una de las incertidumbres que se puede generar al programar en JSF es la diferencia existente entre backing-beans y managed-beans, cuando en realidad ambos son la misma cosa. Es decir, un backing-beans es un managed-beans y viceversa. Se utiliza distinta nomenclatura para referirse a ellos de acuerdo a su instanciacin. Mientras un managed-bean es instanciado por el framework JSF cuando este es requerido (asignndole valores a las variables y mapendolo en un scope) generalmente un backing-bean necesita ser creado y manejado manualmente, cumpliendo el rol de ser la representacin del lado del server de los componentes existentes en la pgina. Los componentes de una pgina tienen un set de atributos para referenciar a mtodos de un backing-bean: action: la funcin de este atributo es la de realizar la navegacin entre pginas:
<h:commandButton id="submit" value="Enviar" action="#{backingBean.submit}" />
Para este ejemplo, nuestra clase BackingBean deber tener un mtodo con la siguiente nomenclatura:
public String submit()
Donde el string retornado por el mtodo refiere una de las entradas definidas en las reglas de navegacin. validator: este atributo admiten realizar validaciones sobre el valor de un componente, a continuacin un ejemplo:
<h:inputText id="email" value="#{backingBean.email}" validator="#{backingBean.validateEmail}"/>
El mtodo para el atributo anterior puede surgir de implementar la interfaz Validator, o tambin alcanza con tener un mtodo con la siguiente nomenclatura:
public void validateEmail(FacesContext context, UIComponent toValidate, Object value)
actionListener y valueChangeListener: en este caso, los
atributos permiten manejar eventos que suceden con una accin o ante un cambio de valores en alguno de los componentes.
1.5 Mejorando el cdigo

En el ejemplo anterior se puede distinguir lo sencillo de agregar distintos componentes JSF, sin embargo, hay partes del cdigo que pueden ser mejorados para hacerlo mas mantenible, reusable y fcil de testear. 1- Definiendo la navegacin entre pginas Para definir las reglas de navegacin, es aconsejable el uso del archivo de configuracin de recursos: faces-config.xml
<navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>enviar</from-outcome> <to-view-id>/resultado.jsp</to-view-id> </navigation-case> </navigation-rule> Extracto del cdigo de faces-config.xml
Con esta modificacin se puede reemplazar el cdigo hard-codeado que hacia la redireccin de la pgina:
<h:commandButton id="submit" value="Enviar" action="enviar" /> Modificacin del cdigo de index.jsp
Si bien al reemplazar en index.jsp el llamado a la pgina de resultados por el action=enviar (definido en el archivo de configuracin de recursos) el comportamiento no vara, el cdigo generado es modificable mas fcilmente. Tambin se puede apreciar que el uso de navigation-rule ayuda al desarrollador a visualizar cmo se comporta la aplicacin mediante el uso de la IDE, ya que esta le genera un mapa de navegacin:
Figura 6: Mapa de navegacin del faces-config.xml autogenerado por la IDE
2- Configuracin de mensajes Es visto como una buena prctica en el desarrollo de software, que todos los mensajes de una aplicacin se guarden en un archivo de recursos para poder ser fcilmente. Para el ejemplo, se definir un archivo de configuracin de mensajes de la siguiente forma: - En la carpeta Java Resources/src se crea una nueva carpeta llamada resources y dentro de ella, un archivo llamado ApplicationMessages.properties con el siguiente contenido:
adivinarNumero=Estoy pensando en un nmero desde {0} hasta {1}, podes adivinarlo? numeroNoValido=El nmero ingresado no es vlido.
- En faces-config.xml se agrega el siguiente cdigo:

<application> <locale-config> <default-locale>en</default-locale> </locale-config> <resource-bundle> <base-name>resources.ApplicationMessages</basename> <var>msg</var> </resource-bundle> </application> Modificacin del cdigo de faces-config.xml
Propiedades del componente de configuracin de mensajes: - En locale-config se pueden tener mltiples entradas en caso de que se necesite internacionalizar la aplicacin. - En base-name se pone el nombre (sin la extensin .properties) del archivo, incluyendo la ruta completa del mismo. - En var se utiliza un nombre con el cual se referencia las llamadas al archivo de mensajes, ya que podra tenerse ms de uno dentro de la aplicacin.
- Por ltimo se modifica el archivo index.jsp para que contenga las referencias a los mensajes, en lugar del texto original:
<h2> <h:outputFormat value="#{msg.adivinarNumero}"> <f:param value="#{numeroBean.minimo}"/> <f:param value="#{numeroBean.maximo}"/> </h:outputFormat> </h2> <h:inputText id="nroIngresado" converterMessage="#{msg.numeroNoValido}" validatorMessage="#{msg.numeroNoValido}" value="#{numeroBean.nroUsuario}"> <f:validateLongRange minimum="#{numeroBean.minimo}" maximum="#{numeroBean.maximo}" /> </h:inputText> Modificacin del cdigo de index.jsp
Se puede observar que en el cdigo se agreg un nuevo tag: outputFormat, que permite enviar parmetros al mensaje definido en el archivo de recursos. Para referenciar un mensaje desde dentro de una clase java, el mecanismo es un poco diferente: - En primer lugar se agrega en ApplicationMessages.properties el siguiente contenido:
numeroAdivinado=Muy bien! Lo adivinaste. numeroNoAdivinado=Lo lamento, {0} es incorrecto.
- Luego se hace referencia a estas dos nuevas entradas desde el mtodo getRespuesta():
public String getRespuesta() { ResourceBundle msg = ResourceBundle .getBundle("resources.ApplicationMessages");
if(nroUsuario!=null && (nroUsuario.compareTo(random) == 0)) { return msg.getString("numeroAdivinado"); } else { return MessageFormat .format(msg.getString("numeroNoAdivinado"), nroUsuario); } } Modificacin del cdigo de NumeroBean.java
De esta forma, mediante la utilizacin de configuracin de mensajes, el cdigo de la aplicacin queda ms limpio y fcil de leer. 3- Agregando declaraciones al managed-bean En la primera pgina creada se pudo apreciar que el nmero mximo y mnimo eran obtenidos desde la clase java, para evitar que esos valores estn tambin dentro del cdigo, JSF da la posibilidad de configurar variables de un managed-bean en el archivo de configuracin de recursos:
<managed-bean> <managed-bean-name>numeroBean</managed-bean-name> <managed-bean-class>adivinar.NumeroBean</managedbean-class> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>maximo</property-name> <property-class>int</property-class> <value>15</value> </managed-property> <managed-property> <property-name>minimo</property-name> <property-class>int</property-class> <value>0</value> </managed-property> </managed-bean> Modificacin del cdigo de faces-config.xml
1- Qu valor tomar la pgina como lmite mximo si se configura 15 en faces-config.xml y 10 en NumeroBean.java?
1.6 Ciclo de vida de pginas JSF

Si bien se puede decir que el comportamiento de una pgina JSF es similar a una pgina JSP (todo inicia con una request HTTP y termina cuando el server traduce la respuesta a HTML) la principal diferencia tiene que ver con el ciclo de vida en JSF, ya que este contiene mltiples etapas para dar soporte a todo el modelo de componentes UI de l framework.
Figura 7: Ciclo de vida una aplicacin JSF
Probablemente los autores de pginas JSF no necesiten conocer los detalles del ciclo de vida que se explican en esta seccin, la cual est destinada principalmente para desarrolladores que necesitan saber cundo se realizan las validaciones, conversiones y escucha de eventos; que pueden hacer para cambiarlos, cmo y cundo se gestionan.
Restaurar Vista: En esta etapa, se reconstruye la vista, asocindole los action-handlers , validadores y converters. La instancia de la vista es accesible por todos los componentes por medio de la clase FacesContext, quien contiene la informacin contextual necesaria para procesar las solicitudes (request) y generar una respuesta (response). Aplicar valores del request: Aqu, cada componente obtiene los valores desde el request. En el ejemplo que se vi durante esta lectura, el valor est representado por el nmero ingresado por el usuario. Internamente se realiza una conversin (para el nmero ingresado es desde String a Integer) y en caso de que falle la conversin se generar un mensaje de error que ser mostrado al renderizar la salida. Procesar validaciones: Se examinan los atributos para los que existen reglas de validacin y se comparan esas reglas con el valor local almacenado en el componente. Si el valor local no es vlido, la JSF aade un mensaje de error al FacesContext y el ciclo de vida avanza directamente hasta renderizar la salida
Actualizar modelo: Si en el paso anterior se determina que el dato es vlido, entonces este es asignado al objeto de modelo correspondiente. En este paso, para el ejemplo anteriormente desarrollado, se asignara el valor del input "nroIngresado" a la variable nroUsuario de la clase NumeroBean.java. Invocar aplicacin: En esta etapa JSF gestiona los eventos a nivel de aplicacin, como submitir el formulario o enlazar la pgina con otra. Renderizar response: Aqu la pgina de respuesta es generada mediante la codificacin de los componentes de acuerdo a los renderers que provee el framework. Por ltimo, JSF delega la autoridad de visualizacin al contenedor JSP. Si se encontraron errores durante las etapas anteriores, aqu es donde ellos pueden ser mostrados.
Resumen
A lo largo de esta lectura se pudo apreciar las caractersticas del framework JSF. Como es su arquitectura, cual es el flujo de una aplicacin JSF y cmo trabajan algunos de sus componentes. Adems el lector puede encontrar en la misma algunas recomendaciones para hacer que el cdigo de la aplicacin sea ms entendible y fcil de mantener. Con lo aprendido, el lector deber ser capaz de construir aplicaciones web usando componentes JSF de manera slida y fcil de mantener.
Trabajo integrador
Para el trabajo integrador de esta lectura se deber crear el sitio web de una librera en donde se le permita al usuario la compra de libros agregados a un catlogo, por medio del envi de un mail sobre la seleccin de libros realizada. La pgina de inicio mostrar el catalogo disponible de libros, al hacer click en alguno de ellos se podr ir a una pgina de detalles del mismo y la posibilidad de agregarlo a nuestra compra (hasta un mximo de 5 unidades por libro). Una vez finalizada la seleccin de los libros, el usuario finalizar la compra con el envo de un mail a la librera con la descripcin de los libros y el total de la compra.
Estructura del proyecto para el trabajo integrador:
Figura 8: Trabajo integrador de la lectura 1 - Estructura
Reglas de navegacin para el trabajo integrador:
Figura 9: Trabajo integrador de la lectura 1 Navigation rules
A continuacin el cdigo de la aplicacin: web.xml

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchemainstance" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5"> <display-name>IntegracionWeb</display-name> <welcome-file-list> <welcome-file>faces/index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>Faces Servlet</servlet-name> <servlet-class>javax.faces.webapp.FacesServlet</servletclass> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Faces Servlet</servlet-name> <url-pattern>/faces/*</url-pattern> </servlet-mapping> </web-app>
faces-config.xml
<?xml version="1.0" encoding="UTF-8"?> <faces-config xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-facesconfig_1_2.xsd" version="1.2"> <managed-bean> <managed-bean-name>catalogoBean</managed-bean-name> <managed-bean-class>catalogo.CatalogoBean</managed-beanclass> <managed-bean-scope>session</managed-bean-scope> <managed-property> <property-name>listadoLibros</property-name> <list-entries> <value-class>catalogo.LibroBean</value-class> <value>#{libro1}</value> <value>#{libro2}</value> <value>#{libro3}</value> </list-entries> </managed-property> </managed-bean> <managed-bean> <managed-bean-name>libro1</managed-bean-name> <managed-bean-class>catalogo.LibroBean</managed-beanclass> <managed-bean-scope>none</managed-bean-scope> <managed-property> <property-name>isbn</property-name> <value>1</value> </managed-property> <managed-property> <property-name>nombre</property-name> <value>Cronicas del angel gris</value> </managed-property> <managed-property> <property-name>descripcion</property-name> <value>Descripcion de cronicas del angel gris</value> </managed-property> <managed-property> <property-name>precio</property-name> <value>11.11</value> </managed-property> <managed-property> <property-name>paginas</property-name> <value>111</value> </managed-property> <managed-property> <property-name>autor</property-name> <value>Dolina</value> </managed-property> </managed-bean> <managed-bean> <managed-bean-name>libro2</managed-bean-name> <managed-bean-class>catalogo.LibroBean</managed-beanclass> <managed-bean-scope>none</managed-bean-scope> <managed-property>
<property-name>isbn</property-name> <value>2</value> </managed-property> <managed-property> <property-name>nombre</property-name> <value>El libro del fantasma</value> </managed-property> <managed-property> <property-name>descripcion</property-name> <value>Descripcion del libro del fantasma</value> </managed-property> <managed-property> <property-name>precio</property-name> <value>22.22</value> </managed-property> <managed-property> <property-name>paginas</property-name> <value>222</value> </managed-property> <managed-property> <property-name>autor</property-name> <value>Dolina</value> </managed-property> </managed-bean> <managed-bean> <managed-bean-name>libro3</managed-bean-name> <managed-bean-class>catalogo.LibroBean</managed-beanclass> <managed-bean-scope>none</managed-bean-scope> <managed-property> <property-name>isbn</property-name> <value>3</value> </managed-property> <managed-property> <property-name>nombre</property-name> <value>Bar del infierno</value> </managed-property> <managed-property> <property-name>descripcion</property-name> <value>Descripcion del bar del infierno</value> </managed-property> <managed-property> <property-name>precio</property-name> <value>33.33</value> </managed-property> <managed-property> <property-name>paginas</property-name> <value>333</value> </managed-property> <managed-property> <property-name>autor</property-name> <value>Dolina</value> </managed-property> </managed-bean> <navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>detalle</from-outcome> <to-view-id>/detalleItem.jsp</to-view-id> </navigation-case>
</navigation-rule> <navigation-rule> <from-view-id>/index.jsp</from-view-id> <navigation-case> <from-outcome>comprar</from-outcome> <to-view-id>/comprar.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/comprar.jsp</from-view-id> <navigation-case> <from-outcome>volver</from-outcome> <to-view-id>/index.jsp</to-view-id> </navigation-case> </navigation-rule> <navigation-rule> <from-view-id>/detalleItem.jsp</from-view-id> <navigation-case> <from-outcome>volver</from-outcome> <to-view-id>/index.jsp</to-view-id> </navigation-case> </navigation-rule> <application> <locale-config> <default-locale>en</default-locale> </locale-config> <resource-bundle> <base-name>resources.ApplicationMessages</base-name> <var>msg</var> </resource-bundle> </application> </faces-config>
index.jsp
<%@ page language="java" contentType="text/html; charset=ISO8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <f:view> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title><h:outputText value="#{msg.titulo_index}" /></title> </head> <body> <h:form> <h2><h:outputText value="#{msg.intro_index}" /></h2> <h:dataTable id="libros" value="#{catalogoBean.listadoLibros}" var="libro"> <h:column> <f:facet name="header">
<h:outputText value="#{msg.tabla_cantidad}" /> </f:facet> <h:inputText id="cantidad" size="4" value="#{libro.cantidad}" converterMessage="#{msg.error_cantidad}" validatorMessage="#{msg.error_cantidad}"> <f:validateLongRange minimum="0" maximum="5" /> </h:inputText> <br /> <h:message showSummary="true" showDetail="false" style="color: red; text-decoration: overline" id="errors1" for="cantidad" /> </h:column> <h:column> <f:facet name="header"> <h:outputText value="#{msg.tabla_nombre}" /> </f:facet> <h:commandLink action="#{catalogoBean.detalle}" title="#{msg.link_detalle}"> <h:outputText value="#{libro.nombre}" /> <f:setPropertyActionListener value="#{libro}" target="#{catalogoBean.libroSeleccionado}" /> </h:commandLink> </h:column> <h:column> <f:facet name="header"> <h:outputText value="#{msg.tabla_precio}" /> </f:facet> <h:outputText value="#{libro.precio}" /> </h:column> <f:facet name="footer"> <h:panelGroup> <h:outputText value="#{msg.tabla_total}" /> <h:outputText value="#{catalogoBean.total}"> <f:convertNumber currencySymbol="$" type="currency" /> </h:outputText> </h:panelGroup> </f:facet> </h:dataTable> <br /> <h:commandButton id="recalcular" value="#{msg.boton_recalcular}" action="#{catalogoBean.recalcularTotal}" /> <h:commandButton id="comprar" value="#{msg.boton_finalizar}" action="comprar" /> </h:form> </body> </f:view> </html>
detalleItem.jsp
<%@ page language="java" contentType="text/html; charset=ISO8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <f:view> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title><h:outputText value="#{msg.titulo_detalle}" /></title> </head> <body> <h:form> <h2><h:outputText value="#{msg.intro_detalle}" /></h2> <h:panelGrid columns="2"> <h:outputText style="font-weight: bold" value="#{msg.tabla_isbn}: " /> <h:outputText value="#{catalogoBean.libroSeleccionado.isbn}" /> <h:outputText style="font-weight: bold" value="#{msg.tabla_nombre}: " /> <h:outputText value="#{catalogoBean.libroSeleccionado.nombre}" /> <h:outputText style="font-weight: bold" value="#{msg.tabla_descripcion}: " /> <h:outputText value="#{catalogoBean.libroSeleccionado.descripcion}" /> <h:outputText style="font-weight: bold" value="#{msg.tabla_paginas}: " /> <h:outputText value="#{catalogoBean.libroSeleccionado.paginas}" /> <h:outputText style="font-weight: bold" value="#{msg.tabla_autor}: " /> <h:outputText value="#{catalogoBean.libroSeleccionado.autor}" /> <h:outputText style="font-weight: bold" value="#{msg.tabla_precio}: " /> <h:outputText value="#{catalogoBean.libroSeleccionado.precio}" /> </h:panelGrid> <br /> <h:commandButton id="agregar" value="#{msg.boton_agregar}" action="#{catalogoBean.agregarLibro}" /> <h:commandButton id="volver" value="#{msg.boton_volver}" action="volver" /> </h:form> </body> </f:view> </html>
comprar.jsp
<%@ page language="java" contentType="text/html; charset=ISO8859-1" pageEncoding="ISO-8859-1"%> <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <f:view> <head> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <title><h:outputText value="#{msg.titulo_compra}" /></title> </head> <body> <h:form> <h2><h:outputText value="#{msg.intro_compra}" /></h2> <h:outputText escape="false" value="#{catalogoBean.compra}" /> <br /> <br /> <h:outputLink value="#{msg.msg_emailTo}?subject=#{msg.msg_emailSubject}&bod y=#{catalogoBean.emailBody}"> <h:outputText value="#{msg.boton_comprar}" /> </h:outputLink> <br /> <br /> <h:commandButton id="volver" value="#{msg.boton_recomenzar}" action="#{catalogoBean.borrarSession}" /> </h:form> </body> </f:view> </html>
applicationMessages.properties
titulo_index=Catlogo de libros titulo_detalle=Detalle del libro titulo_compra=Compra realizada intro_index=Catlogo de libros intro_detalle=Detalle del libro intro_compra=Compra realizada tabla_cantidad=Cantidad (0-5) tabla_nombre=Nombre tabla_descripcion=Descripcin tabla_precio=Precio tabla_paginas=Pginas tabla_autor=Autor tabla_isbn=ISBN tabla_total=Total msg_subtotal=Subt. msg_total=Total de la compra msg_emailTo=mailto:aaa@aaa.com msg_emailSubject=Pedido de compra
link_detalle=Ver ms detalles del libro boton_agregar=Agregar boton_volver=Volver boton_recomenzar=Recomenzar compra boton_recalcular=Recalcular total boton_finalizar=Finalizar compra boton_comprar=Enviar email de pedido de compra error_cantidad=Cant. no vlida
LibroBean.java
package catalogo; import java.math.BigDecimal; public class LibroBean { private private private private private private private String isbn; String nombre; String descripcion; BigDecimal precio; int paginas; String autor; int cantidad;
public LibroBean() { } public String getIsbn() { return isbn; } public void setIsbn(String isbn) { this.isbn = isbn; } public String getNombre() { return nombre; } public void setNombre(String nombre) { this.nombre = nombre; } public String getDescripcion() { return descripcion; } public void setDescripcion(String descripcion) { this.descripcion = descripcion; } public BigDecimal getPrecio() { return precio; } public void setPrecio(BigDecimal precio) { this.precio = precio; } public int getPaginas() {
return paginas; } public void setPaginas(int paginas) { this.paginas = paginas; } public String getAutor() { return autor; } public void setAutor(String autor) { this.autor = autor; } public int getCantidad() { return cantidad; } public void setCantidad(int cantidad) { this.cantidad = cantidad; } }
CatalogoBean.java
package catalogo; import import import import import import import import java.math.BigDecimal; java.util.ArrayList; java.util.List; java.util.ResourceBundle; javax.faces.bean.ManagedBean; javax.faces.bean.SessionScoped; javax.faces.context.FacesContext; javax.servlet.http.HttpSession;
@ManagedBean @SessionScoped public class CatalogoBean { private private private private List<LibroBean> listadoLibros; LibroBean libroSeleccionado; BigDecimal total = new BigDecimal(0); ResourceBundle msg;
public CatalogoBean() { msg = ResourceBundle.getBundle("resources.ApplicationMessages"); listadoLibros = new ArrayList<LibroBean>(); } protected FacesContext context() { return (FacesContext.getCurrentInstance()); } public LibroBean getLibroSeleccionado() { if (libroSeleccionado == null) {
libroSeleccionado = new LibroBean(); } return libroSeleccionado; } public void setLibroSeleccionado(LibroBean libroSeleccionado) { this.libroSeleccionado = libroSeleccionado; } public List<LibroBean> getListadoLibros() { return listadoLibros; } public void setListadoLibros(List<LibroBean> listadoLibros) { this.listadoLibros = listadoLibros; } public void setTotal(BigDecimal total) { this.total = total; } public BigDecimal getTotal() { return total; } public StringBuffer renderCompra(String render) { StringBuffer compra = new StringBuffer(); for (LibroBean libro : listadoLibros) { if (libro.getCantidad() > 0) { compra.append(libro.getCantidad() + " " + libro.getNombre() + " " + msg.getString("msg_subtotal") + " $" + getSubtotalLibro(libro) + render); } } recalcularTotal(); compra.append("--------------------------------------" + render); compra.append("" + msg.getString("msg_total") + " $ " + total + ""); return compra; } public StringBuffer getCompra() { return renderCompra("<br/>"); } public StringBuffer getEmailBody() { return renderCompra("%0A"); } public String detalle() { context().getExternalContext().getSessionMap().put("libroSele ccionado", getLibroSeleccionado()); return ("detalle"); }
public String agregarLibro() { int cant = getLibroSeleccionado().getCantidad(); getLibroSeleccionado().setCantidad(cant + 1); return ("volver"); } public String recalcularTotal() { BigDecimal total = new BigDecimal(0); for (LibroBean libro : listadoLibros) { total = total.add(getSubtotalLibro(libro)); } setTotal(total); return ("volver"); } private BigDecimal getSubtotalLibro(LibroBean libro) { BigDecimal total = libro.getPrecio().multiply( new BigDecimal(libro.getCantidad())); return total; } public String borrarSession() { HttpSession session = (HttpSession) context().getExternalContext() .getSession(false); session.invalidate(); return ("volver"); } }
Captura de las pantallas del ejemplo:
Figura 10: Pantalla de inicio
Figura 11: Pantalla de detalle
Figura 12: Pantalla de finalizacin de la compra
Bibliografa Lectura 1
Mann, Kito D. Java Server Faces in Action, Manning Publications Co. (2005). Dudney, Bill. Mastering Java Server Faces, Wiley Publishing Inc, (2004). Oracle, The Java EE 5 Tutorial, (2010).

Lectura 1 - Java Server Faces

Încărcat de

Informații document

Descriere originală:

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Lectura 1 - Java Server Faces

Încărcat de

Drepturi de autor:

Formate disponibile

Mdulo 4

1- Java Server Faces

1.2 Qu es Java Server Faces?

Figura 1: Patrn de diseo MVC

Szyperski, Clemens. 2002. Component Software, Beyond Object-Oriented Programming.

Figura 2: Vista de componentes JSF dentro de la arquitectura MVC

1.3 Flujo de una aplicacin JSF

Figura 3: Flujo de una aplicacin JSF

Figura 4: Vista en un browser de index.jsp

1.4 Componentes JSF avanzados

La clase NumeroBean tendr el siguiente aspecto:

La nueva pgina se visualizar como:

Figura 5: Vista en un browser de nuestro nuevo index.jsp

actionListener y valueChangeListener: en este caso, los

1.5 Mejorando el cdigo

Figura 6: Mapa de navegacin del faces-config.xml autogenerado por la IDE

- En faces-config.xml se agrega el siguiente cdigo:

1- Qu valor tomar la pgina como lmite mximo si se configura 15 en faces-config.xml y 10 en NumeroBean.java?

1.6 Ciclo de vida de pginas JSF

Figura 7: Ciclo de vida una aplicacin JSF

Estructura del proyecto para el trabajo integrador:

Figura 8: Trabajo integrador de la lectura 1 - Estructura

Reglas de navegacin para el trabajo integrador:

Figura 9: Trabajo integrador de la lectura 1 Navigation rules

A continuacin el cdigo de la aplicacin: web.xml

Captura de las pantallas del ejemplo:

Figura 10: Pantalla de inicio

Figura 11: Pantalla de detalle

Figura 12: Pantalla de finalizacin de la compra

S-ar putea să vă placă și