Lectura Unidad 4 1 Corr Adri

5/10/2018 Lectura Unidad 4 1 Corr Adri - slidepdf.com

http://slidepdf.com/reader/full/lectura-unidad-4-1-corr-adri 1/35

Módulo 4Unidad 1

Lectura 1

Materia: Aplicación Web Avanzado

Profesor: Daniel Oliva Bianco



Capacitación Java – Daniel Oliva Bianco | 2

1- Java Server Faces

1.1 Introducción

En esta primera parte del módulo 4 se examinará como programar JavaServer Faces (JSF). El objetivo de esta lectura es mostrar un resumen deesta tecnología y explicar cómo el framework de Java Server Faces encajaen el desarrollo de interfaces web robustas y escalables.

A lo largo de esta unidad el lector aprenderá a:

Reconocer cuál es el código Java, JSP, XML y archivos de

configuración necesarios para que JSF funcione. Identificar los patrones de diseño y componentes de software

usados por este framework.

Establecer el flujo de una aplicación JSF mediante un ejemplopráctico

1.2 ¿Qué es Java Server Faces?

JSF es un framework para el desarrollo de aplicaciones web dinámicas, quesimplifica el desarrollo de interfaces de usuario (UI) mediante el uso dedistintos componentes de software y aplicando el patrón Modelo-Vista-Controlador (Model-View-Controller o MVC).

Modelo-Vista-Controlador

El primer beneficio de utilizar una arquitectura MVC es el desacoplamientoentre las distintas capas de la aplicación, esto permite, tanto el desarrollocomo la modificación y el testeo de cada una de ellas por separado,

facilitando la mantención del código.

El rol de un framework puede describirse de la siguiente forma:

Organizar pequeños componentes reutilizables en un todo

integral.

Imponer y alentar patrones de diseño probados para las

interacciones de los componentes.

Incrementar la reutilización de subsistemas y arquitecturas.




A diferencia de otros frameworks web que implementan el patrón MVC,JSF forma parte del estándar Java EE, adecuándose naturalmente almodelo request/response (peticiones/respuestas) del protocolo HTTP.

En la figura 1 se puede apreciar la variante del patrón MVC que es específicapara aplicaciones web. Los puntos a destacar son los siguientes:

El Model (modelo) está compuesto por clases Java (POJOs) o EJBsque representan objetos de negocio, interactuando con datospersistentes.

La capa de vista o View contiene cualquier tecnología visualización,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 información del request,se hacen ciertas operaciones y opcionalmente se populan ciertos

datos que luego serán usados en la capa de presentación.

Componentes de software

Un componente de software es un módulo unitario con interfacesespecificadas, que solo tiene dependencias de contexto explicitas. Estaunidad de software puede ser desplegada independientemente y estarsujeto a componer terceras partes1.

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

Figura 1: Patrón de diseño MVC




JSF es un framework basado en componentes UI, los cuales proveenfuncionalidades específicas para interactuar con el usuario final, y ademásdejan abierta una puerta para la creación de módulos personalizados.

En la figura 2 el lector observará que una aplicación JSF es muy parecida acualquier otra aplicación web, siendo sus principales componentes:

Un conjunto de páginas JSP (aunque, como se verá más adelante, eldesarrollador no está limitado únicamente a usar JSPs comotecnología de presentación)

Un conjunto de backing beans , que son JavaBeans usados paradefinir como la aplicación responde a eventos iniciados por elusuario.

Un archivo de configuración de recursos: faces-config.xml , quedefine las reglas de navegación, componentes personalizados, etc.

Un archivo de descripción de despliegue: web.xml (deploymentdescriptor).

Un conjunto de objetos creados por el desarrollador que puedenincluir validators, converters y/o listeners.

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

En las aplicaciones JSF, losobjetos que permiten lainteracción entre la UI y elmodelo son llamados backing beans. Estoscontienen propiedades queson obtenidas de losusuarios de la aplicación y los listeners para haceralgún tipo deprocesamiento.




1.3 Flujo de una aplicación JSF

El flujo de una aplicación JSF puede ser graficado de la siguiente forma:

De la imagen anterior se puede constatar que los componentes JSF sonquienes manejan el ciclo de vida de nuestra aplicación. Para lograr unmayor entendimiento de este ciclo, se llevará a cabo con el lector, unejemplo práctico explicando cómo funcionan dichos componentes.

En esta primera aproximación a JSF se pueden ver algunos conceptos básicos que permiten diferenciar este framework de Struts:

JSF forma parte del estándar JEE

JSF posee una arquitectura basada en componentes, mientrasStruts está basado en acciones

Figura 3: Flujo de una aplicación JSF

En el primer ejemplo de uso de JSF, se generará n los archivosnecesarios para poder imprimir por pantalla un saludo simple:“Buenas, esta es una página JSF!”




Hola JSF!

Lo primero que se requiere es crear un proyecto del tipo “Dynamic WebProject”, eligiendo en la configuración del mismo la opción “Java ServerFaces v1.2 Project”.

Apenas terminada la instanciación del proyecto, se debería tenerautogenerada la estructura de carpetas y los dos primeros archivos: web.xml y faces-config.xml. A continuación, se explicará en 3 breves pasos como cumplir con el restodel requerimiento.

1- Mapeo de la instancia de FacesServlet

En la figura 3 se pudo apreciar que el controller de una aplicación

JSF está compuesto por el FacesServlet, quien es encargado de

procesar las solicitudes HTTPServletRequest desde algún 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> <servlet-

class>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 código de web.xml autogenerado por la IDE 2- Creación de páginas web

La creación de páginas 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 página 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.01Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd" >

<html><head> <meta http-equiv="Content-Type" content="text/html;

charset=ISO-8859-1">

Para usar componentesJSF en páginas JSP, senecesita dar acceso a doslibrerías de etiquetas(taglibs): html y core

Mediante el agregado deun prefijo (h para elcomponente html y f parael componente core) todaslas etiquetas pueden usarestas referencias para

obtener acceso a susfuncionalidades.




<title>Hola JSF!!</title></head> <body><f:view>

<h:form><h2>Buenas, esta es una página JSF!</h2> </h:form>

</f:view>

</body></html>

Código de index.jsp

3- Uso de index.jsp como página de inicio

Para poder utilizar en una página JSP los taglibs de JSF, se deberá

modificar el web.xml, así de esta forma, el JSP será reconocido por

el controller. A continuación el código completo:

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-

instance" 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/javaeehttp://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> <servlet-

class>javax.faces.webapp.FacesServlet </servlet-class> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping>


</servlet-mapping> </web-app>

Código de web.xml

Al mismo tiempo, cabe mencionar que el archivo de configuración

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/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"> </faces-config>

Código de faces-config.xml

En el código de ejemplo sedefine un servlet-name concualquier valor, en estecaso es “Faces Servlet”. Elnombre de la clase

pertenece a laimplementación de JSF y no debiera ser modificado.

También se puedeobservar el mapeo decualquier página quecomience con “/faces/” alservlet anteriormentedefinido.




Una vez cumplimentados los pasos anteriores se estará en condición dehacer el despliegue de la aplicación en un servidor. Realizada esta tarea, seobtiene una página como la siguiente:

Nota: La URL puede variar en el puerto (8084) de acuerdo a laconfiguración del servidor Glassfish.

Figura 4: Vista en un browser de index.jsp

1- ¿De dónde 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?

El ejemplo práctico cuenta ahora con los 3 archivosnecesarios para visualizar el saludo: “Buenas, esta es una

página JSF!” .

En la imagen de la izquierda se puede ver la estructura del proyecto y los archivos que lo componen tal cual aparecen enla IDE.




Lista de etiquetas de uso común en JSF

Tag Descripción

h:form Formulario HTML

h:inputText Control input-text de una sola línea.

h:inputTextArea Control input-text multilinea.

h:inputSecret Control input-text de password.

h:inputHidden Campo oculto

h:outputLabel Etiqueta para dar acceso a otro componente

h:outputLink HTML anchor.

h:outputFormat Como el outputText, pero para mensajes

compuestos

h:outputText Texto de una sola línea.

h:commandButton Botón (submit, reset, push).

h:commandLink Link que actúa como un botón push.

h:message Muestra el mensaje más reciente para uncomponente

h:messages Muestra todos los mensajes

h:grapicImage Muestra una imagen.

h:selectOneListbox Caja de selección única.

h:selectOneMenu Menú de selección único.

h:selectOneRadio Conjunto de radio-buttons.

h:selectBooleanCheckbox Checkbox.

h:selectManyCheckbox Conjunto de checkboxes.

h:selectManyListbox Caja de selección múltiple.

h:selectManyMenu Menú de selección múltiple.

h:panelGrid Tabla HTML.

h:panelGroup Dos o más componentes que son presentadoscomo uno

h:dataTable Tabla más compleja que panelGrid

h:column Columna de un dataTable




1.4 Componentes JSF avanzados

El ejemplo anterior provee los lineamientos para hacer funcionar unaaplicación JSF básica, a continuación se explicará cómo agregarlecomponentes más avanzados.

Adivinando el número!

Para cumplir con el requerimiento, se comenzará con el agregado de tagsJSF de la siguiente forma:

El primer tag que se agregará es outputText. Este representa un label queimprime el valor de una variable, en las páginas será utilizado para crear elmensaje que le indicará al usuario el rango de números en donde seencuentra el que tiene que adivinar.

Para evitar hacer hard-code del 0 y 10 en la página JSP, estos valores de

número máximo y mínimo se obtendrán directamente desde los campos del

managed-bean de la siguiente forma:

<h2>Buenas, esta es una página JSF!</h2> <h2>Estoy pensando en un número desde

<h:outputText value="#{numeroBean.minimo}"/> hasta <h:outputText value="#{numeroBean.maximo}"/> Podes adivinarlo?

</h2>

Modificación del código de index.jsp

En el código 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-bean-

class> <managed-bean-scope>session</managed-bean-scope>

</managed-bean>

Modificación del código de faces-config.xml

Al ejemplo anteriormente expuesto se le deberá agregar un managed- bean que genere números aleatorios entre el 0 y el 10 para que elusuario de nuestra aplicación lo adivine.

Si el usuario ingresa un número mayor a 10 o menor a 0, se lemostrará un mensaje de error mediante el uso de un validator.

Dependiendo si el usuario adivina o no el número, se indicará eseresultado con un mensaje correspondiente en una nueva página.

Cualquier clase Java conun constructor sinargumentos puede serusada como managed- bean.

Usando anotaciones como@ManagedBean y @SessionScoped se puedeindicar al compilador quese está en presencia de estetipo de componentes

Todo lo que se debe definiren faces-config.xml es elidentificador, el nombre declase y el alcance (scope).

El scope puede ser none(instanciado cada vez que

es solicitado), request,session, o application




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; //nro a adivinar Integer nroUsuario = null; //nro ingresado por el usuario String respuesta = null; //mensaje a mostrar private int maximo = 10; //límite max private int minimo = 0; //límite min

public NumeroBean() {

random = new Integer(new Random().nextInt(maximo));System.out.println("Número 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;}

}

Código de NumeroBean.java

En el managed-bean que se acaba de crear tiene un constructor sin

argumentos que le asigna un número aleatorio a la variable random; esta

variable mantendrá su valor durante toda la sesión.

Al mismo tiempo, el método getRespuesta() es el encargado de verificar sise adivinó el número o no.




Por último, es necesario agregar en el archivo index.jsp el input del usuario

y el validador:

<h:inputText id="nroIngresado" validatorMessage="Número fuera de los límites!" 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"/>


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: " Número fuera de

los límites!"

Otro tag agregado en el código JSP es: commandButton, que representa

un botón que permite hacer submit del formulario con los datos ingresados

en el input. El atributo action específica cuál será la próxima página que

será accedida.

Para mostrarle al usuario si su respuesta fue correcta o no, se genera la

página resultado.jsp que contiene el siguiente código:

… <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 código de resultado.jsp

Con este último agregado, el lector puede hacer una vez más el despliegue

de la aplicación en el servidor.

Se pueden usarexpresiones JSF EL paraacceder a las variables ométodos de los JavaBeans,hacer operaciones lógicas onuméricas.

Por ejemplo:#{myBean.value} devuelveel valor de value para el

elemento identificadocomo myBean

#{myBean.methodName}retorna una llamada almétodo methodName

#{20 + 3} imprime 23




La nueva página se visualizará como:

Backing-beans

Una de las incertidumbres que se puede generar al programar en JSF es ladiferencia existente entre backing-beans y managed-beans, cuando enrealidad ambos son la misma cosa. Es decir, un backing-beans es unmanaged-beans y viceversa. Se utiliza distinta nomenclatura para referirsea ellos de acuerdo a su instanciación. Mientras un managed-bean esinstanciado por el framework JSF cuando este es requerido (asignándole

valores a las variables y mapeándolo en un scope) generalmente un backing-bean necesita ser creado y manejado manualmente, cumpliendo elrol de ser la representación del lado del server de los componentesexistentes en la página.

Los componentes de una página tienen un set de atributos para referenciara métodos de un backing-bean:

- action: la función de este atributo es la de realizar la navegación entrepáginas:

<h:commandButton id="submit" value="Enviar" action="#{backingBean.submit}" />

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

1- ¿Qué sucede si en lugar de un número se inserta una letra en el input?

2- ¿Qué partes del ejemplo anterior están hard-codeadas en el código fuente?




Para este ejemplo, nuestra clase BackingBean deberá tener un métodocon la siguiente nomenclatura:

public String submit()

Donde el string retornado por el método refiere una de las entradas

definidas en las reglas de navegación.

- validator: este atributo admiten realizar validaciones sobre el valor deun componente, a continuación un ejemplo:

<h:inputText id="email" value="#{backingBean.email}" validator="#{backingBean.validateEmail}"/>

El método para el atributo anterior puede surgir de implementar lainterfaz Validator, o también alcanza con tener un método con lasiguiente nomenclatura:

public void validateEmail(FacesContext context,UIComponent toValidate, Object value)

- actionListener y valueChangeListener: en este caso, losatributos permiten manejar eventos que suceden con una acción o anteun cambio de valores en alguno de los componentes.

1.5 Mejorando el código

1- Definiendo la navegación entre páginas

Para definir las reglas de navegación, es aconsejable el uso del

archivo de configuración 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 código de faces-config.xml

En el ejemplo anterior se puede distinguir lo sencillo de agregardistintos componentes JSF, sin embargo, hay partes del código

que pueden ser mejorados para hacerlo mas mantenible,

reusable y fácil de testear.




Con esta modificación se puede reemplazar el código hard-codeadoque hacia la redirección de la página:

…

<h:commandButton id="submit" value="Enviar" action="enviar" />…


Si bien al reemplazar en index.jsp el llamado a la página de

resultados por el action=”enviar” (definido en el archivo de

configuración de recursos) el comportamiento no varía, el código

generado es modificable mas fácilmente.

También se puede apreciar que el uso de navigation-rule ayuda al

desarrollador a visualizar cómo se comporta la aplicación medianteel uso de la IDE, ya que esta le genera un mapa de navegación:

2- Configuración de mensajes

Es visto como una buena práctica en el desarrollo de software, quetodos los mensajes de una aplicación se guarden en un archivo derecursos para poder ser fácilmente.

Para el ejemplo, se definirá un archivo de configuración de mensajesde la siguiente forma:

- En la carpeta Java Resources/src se crea una nueva carpetallamada resources y dentro de ella, un archivo llamado ApplicationMessages.properties con el siguiente contenido:

adivinarNumero=Estoy pensando en un número desde {0}

hasta {1}, podes adivinarlo? numeroNoValido=El número ingresado no es válido.

Figura 6: Mapa de navegación del faces-config.xml autogenerado por la IDE




- En faces-config.xml se agrega el siguiente código:

… <application>

<locale-config>

<default-locale>en</default-locale> </locale-config> <resource-bundle>

<base-name>resources.ApplicationMessages</base-name>

<var>msg</var> </resource-bundle>

</application> …


- Por último se modifica el archivo index.jsp para que contenga lasreferencias 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>…


Se puede observar que en el código se agregó un nuevo tag:outputFormat , que permite enviar parámetros al mensajedefinido en el archivo de recursos.

Para referenciar un mensaje desde dentro de una clase java, elmecanismo es un poco diferente:

- En primer lugar se agrega en ApplicationMessages.properties elsiguiente contenido:numeroAdivinado=Muy bien! Lo adivinaste.numeroNoAdivinado=Lo lamento, {0} es incorrecto.

- Luego se hace referencia a estas dos nuevas entradas desde elmétodo getRespuesta():

public String getRespuesta() {ResourceBundle msg = ResourceBundle

.getBundle("resources.ApplicationMessages" );

Propiedades del

componente deconfiguración de mensajes:

- En locale-config sepueden tener múltiplesentradas en caso de que senecesite internacionalizarla aplicación.

- En base-name se pone elnombre (sin la extensión.properties) del archivo,

incluyendo la rutacompleta del mismo.

- En var se utiliza unnombre con el cual sereferencia las llamadas alarchivo de mensajes, yaque podría tenerse más deuno dentro de laaplicación.




if(nroUsuario!=null &&(nroUsuario.compareTo(random) == 0)) {return msg.getString("numeroAdivinado");

} else {return MessageFormat

.format(msg.getString("numeroNoAdivinado"),

nroUsuario);}}

Modificación del código de NumeroBean.java

De esta forma, mediante la utilización de configuración de mensajes,el código de la aplicación queda más limpio y fácil de leer.

3- Agregando declaraciones al managed-bean En la primera página creada se pudo apreciar que el número

máximo y mínimo eran obtenidos desde la clase java, para evitarque esos valores estén también dentro del código, JSF da laposibilidad de configurar variables de un managed-bean en elarchivo de configuración de recursos:

<managed-bean> <managed-bean-name>numeroBean</managed-bean-name> <managed-bean-class>adivinar.NumeroBean</managed-

bean-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>


1- ¿Qué valor tomará la página como límite máximo si se configura“ 15 ” en faces-config.xml y “ 10” en NumeroBean.java?




1.6 Ciclo de vida de páginas JSF

Si bien se puede decir que el comportamiento de una página JSF es similara una página JSP (todo inicia con una request HTTP y termina cuando elserver traduce la respuesta a HTML) la principal diferencia tiene que vercon el ciclo de vida en JSF, ya que este contiene múltiples etapas para darsoporte a todo el modelo de componentes UI de l framework.

Restaurar Vista: En esta etapa, se reconstruye la vista, asociándole losaction-handlers , validadores y converters. La instancia de la vista esaccesible por todos los componentes por medio de la clase FacesContext ,quien contiene la información contextual necesaria para procesar lassolicitudes (request) y generar una respuesta (response).

Aplicar valores del request: Aquí, cada componente obtiene los valoresdesde el request. En el ejemplo que se vió durante esta lectura, el valor estárepresentado por el número ingresado por el usuario.Internamente se realiza una conversión (para el número ingresado es desdeString a Integer) y en caso de que falle la conversión se generará un mensajede error que será mostrado al renderizar la salida.

Procesar validaciones: Se examinan los atributos para los que existenreglas de validación y se comparan esas reglas con el valor local almacenadoen el componente. Si el valor local no es válido, la JSF añade un mensaje deerror al FacesContext y el ciclo de vida avanza directamente hastarenderizar la salida

Figura 7: Ciclo de vida una aplicación JSF

Probablemente los autoresde páginas JSF nonecesiten conocer los

detalles del ciclo de vidaque se explican en estasección, la cual estádestinada principalmentepara desarrolladores quenecesitan saber cuándo serealizan las validaciones,conversiones y escucha deeventos; que pueden hacerpara cambiarlos, cómo y cuándo se gestionan.




Actualizar modelo: Si en el paso anterior se determina que el dato es válido, entonces este es asignado al objeto de modelo correspondiente. Eneste paso, para el ejemplo anteriormente desarrollado, se asignaría el valordel input "nroIngresado" a la variable nroUsuario de la clase NumeroBean.java.

Invocar aplicación: En esta etapa JSF gestiona los eventos a nivel deaplicación, como submitir el formulario o enlazar la página con otra.

Renderizar response: Aquí la página de respuesta es generada mediantela codificación de los componentes de acuerdo a los renderers que provee elframework. Por último, JSF delega la autoridad de visualización alcontenedor JSP.Si se encontraron errores durante las etapas anteriores, aquí es donde ellospueden ser mostrados.




Resumen

A lo largo de esta lectura se pudo apreciar las características del framework JSF. Como es su arquitectura, cual es el flujo de una aplicación JSF y cómotrabajan algunos de sus componentes.

Además el lector puede encontrar en la misma algunas recomendacionespara hacer que el código de la aplicación sea más entendible y fácil demantener.

Con lo aprendido, el lector deberá ser capaz de construir aplicaciones webusando componentes JSF de manera sólida y fácil de mantener.




Trabajo integrador

Estructura del proyecto para el trabajo integrador:

Para el trabajo integrador de esta lectura se deberá crear el sitio webde una librería en donde se le permita al usuario la compra de librosagregados a un catálogo, por medio del envió de un mail sobre laselección de libros realizada.

La página de inicio mostrará el catalogo disponible de libros, al hacerclick en alguno de ellos se podrá ir a una página de detalles del mismo y la posibilidad de agregarlo a nuestra compra (hasta un máximo de 5unidades por libro).

Una vez finalizada la selección de los libros, el usuario finalizará lacompra con el envío de un mail a la librería con la descripción de los

libros y el total de la compra.

Figura 8: Trabajo integrador de la lectura 1 - Estructura




Reglas de navegación para el trabajo integrador:

A continuación el código de la aplicación:

web.xml

<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 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/javaeehttp://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 </servlet-

class> <load-on-startup>1</load-on-startup>

</servlet> <servlet-mapping>


</servlet-mapping> </web-app>

Figura 9: Trabajo integrador de la lectura 1 – Navigation rules




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-bean-

class> <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-bean-

class> <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>


<property-name>descripcion</property-name> <value>Descripcion de cronicas del angel gris</value>


<property-name>precio</property-name> <value>11.11</value>


<property-name>paginas</property-name> <value>111</value>


<property-name>autor</property-name> <value>Dolina</value>







<property-name>isbn</property-name> <value>2</value>


<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>autor</property-name> <value>Dolina</value>




<property-name>isbn</property-name>

<value>3</value> </managed-property> <managed-property>

<property-name>nombre</property-name> <value>Bar del infierno</value>


<property-name>descripcion</property-name> <value>Descripcion del bar del infierno</value>






<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=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.01Transitional//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


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.01Transitional//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


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.01Transitional//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=Catálogo de libros titulo_detalle=Detalle del libro titulo_compra=Compra realizada

intro_index=Catálogo de libros intro_detalle=Detalle del libro intro_compra=Compra realizada tabla_cantidad=Cantidad (0-5) tabla_nombre=Nombre tabla_descripcion=Descripción tabla_precio=Precio tabla_paginas=Páginas tabla_autor=Autor tabla_isbn=ISBN tabla_total=Total msg_subtotal=Subt. msg_total=Total de la compra

msg_emailTo=mailto:[email protected] msg_emailSubject=Pedido de compra




link_detalle=Ver más 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 válida

LibroBean.java

package catalogo;

import java.math.BigDecimal;

public class LibroBean {

private String isbn; private String nombre; private String descripcion; private BigDecimal precio; private int paginas; private String autor; private 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 java.math.BigDecimal;import java.util.ArrayList;import java.util.List;import java.util.ResourceBundle;

import javax.faces.bean.ManagedBean;import javax.faces.bean.SessionScoped;import javax.faces.context.FacesContext;import javax.servlet.http.HttpSession;

@ManagedBean @SessionScoped public class CatalogoBean {

private List<LibroBean> listadoLibros; private LibroBean libroSeleccionado; private BigDecimal total = new BigDecimal(0); private 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( "libroSeleccionado",

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 finalización de la compra




Bibliografía Lectura 1

Kito D. Mann, “Java Server Faces in Action”, Manning Publications Co. 2005.

Bill Dudney , “Mastering Java Server Faces”, Wiley Publishing Inc, (2004).

Oracle, “The Java EE 5 Tutorial”, (2010).

www.uesiglo21.edu.ar

Lectura Unidad 4 1 Corr Adri

Documents

Transcript of Lectura Unidad 4 1 Corr Adri