Instituto Tecnolgico de Durango

Tpicos selectos de programacin web Tecnologa JSF (Java Server Faces)

Profesor: Ing. Marco Antonio Rodrguez Ziga

Alumna: 08041058 Eugenia Montserrat Acosta Gurrola

Grupo: 8 Z

Fecha: 24/05/2011

Contenido
Introduccin: Tecnologa JSF (Java Server Faces) .......................................................... 2 Caractersticas principales ............................................................................................ 3 Captulo 1 Modelo de componentes de interfaz de usuario............................................ 3 Capitulo 2 Modelo de navegacin .................................................................................... 4 Capitulo 3 Usando JSF en JSP ......................................................................................... 6 Captulo 4 Desarrollo de aplicaciones JSF ..................................................................... 7

Introduccin: Tecnologa JSF (Java Server Faces)

El objetivo de la tecnologa JavaServer Faces es desarrollar aplicaciones web de forma parecida a como se construyen aplicaciones locales con Java Swing, AWT (Abstract Window Toolkit), SWT (Standard Widget Toolkit) o cualquier otra API similar. Tradicionalmente, las aplicaciones web se han codificado mediante pginas JSP (Java Server Pages) que reciban peticiones a travs de formularios y construan como respuesta pginas HTML (Hiper Text Markup Language) mediante ejecucin directa o indirecta -a travs de bibliotecas de etiquetas- de cdigo Java, lo que permita, por ejemplo, acceder a bases de datos para obtener los resultados a mostrar amn de realizar operaciones marginales como insertar o modificar registros en tablas relacionales, actualizar un carrito de la compra, etc. JavaServer Faces pretende facilitar la construccin de estas aplicaciones proporcionando un entorno de trabajo (framework) va web que gestiona las acciones producidas por el usuario en su pgina HTML y las traduce a eventos que son enviados al servidor con el objetivo de regenerar la pgina original y reflejar los cambios pertinentes provocados por dichas acciones. En definitivas cuentas, se trata de hacer aplicaciones Java en las que el cliente no es una ventana de la clase JFrame o similar, sino una pgina HTML. Como el lector puede imaginar, cualquier evento realizado sobre una pgina JSF incurre en una carga sobre la red, ya que el evento debe enviarse a travs de sta al servidor, y la respuesta de ste debe devolverse al cliente; por ello, el diseo de

aplicaciones JavaServer Faces debe hacerse con cuidado cuando se pretenda poner las aplicaciones a disposicin del mundo entero a travs de internet. Aquellas aplicaciones que vayan a ser utilizadas en una intranet podrn aprovecharse de un mayor ancho de banda y producirn una respuesta mucho ms rpida.

Caractersticas principales
La tecnologa JavaServer Faces constituye un marco de trabajo (framework) de interfaces de usuario del lado de servidor para aplicaciones web basadas en tecnologa Java y en el patrn MVC (Modelo Vista Controlador). Los principales componentes de la tecnologa JavaServer Faces son: Una API y una implementacin de referencia para representar componentes de interfaz de usuario (UI-User Interface) y manejar su estado Manejar eventos, validar en el lado del servidor y convertir datos Definir la navegacin entre pginas Soportar internacionalizacin y accesibilidad, y Proporcionar extensibilidad para todas estas caractersticas. Una librera de etiquetas JavaServer Pages (JSP) personalizadas para dibujar.

Captulo 1 Modelo de componentes de interfaz de usuario

JavaServer Faces componentes de interfaz de usuario (UI) son los bloques de construccin de vista deJavaServer Faces.JavaServer Faces componentes de interfaz de usuario son elementos configurables, reutilizables quecomponen la interfaz de usuario de aplicaciones JavaServer Faces. Un componente puede ser simple, como un bot n, o pueden ser compuestos, tales como una tabla, compuesta de mltiples componentes. La tecnologa JavaServer Faces proporciona una rica arquitectura de componentes flexibles que incluye lo siguiente: Un conjunto de clases UIComponent para especificar el estado y el comportamiento de los componentes de la interfaz de usuario. Un modelo de representacin que define el modo de hacer los componentes de varias maneras. Un evento de escucha y el modelo que define cmo manejar los eventos de los componentes. Un modelo de conversin que define cmo registrar los convertidores de datos en un componente. Un modelo de validacin que define cmo registrar validadores en un componente.

Capitulo 2 Modelo de navegacin

JSF permite especificar la navegacin entre pginas mediante reglas que indican qu eventos permiten pasar de una pgina a otra. El evento null dirige de nuevo a la ltima pgina. La especificacin de la navegacin en aplicaciones basadas en JSF se hace mediante el fichero de configuracin faces-config.xml en lugar de utilizar un servlet. Formato de las reglas <navigation-rule> <from-view-id>/init.jsp</from-view-id> <navigation-case> <from-outcome>event</from-outcome> <to-view-id>/end.jsp</to-view-id> </navigation-case> </navigation-rule>

Prcticamente todas las aplicaciones Web se componen de un conjunto de pginas. Una de las principales preocupaciones de un desarrollador de aplicaciones web es la gestin de la navegacin entre las pginas. El modelo de navegacin Java Server Faces hace que sea fcil de definir la pgina de navegacin y manejar cualquier procesamiento adicional necesario para elegir la secuencia en la que las pginas se cargan. Segn la definicin de la tecnologa Java Server Faces, la navegacin es un conjunto de reglas para la eleccin de la siguiente pgina que se mostrar despus de un botn o un hipervnculo que se hace clic. Estas reglas son definidas por el arquitecto de aplicaciones en el archivo de la aplicacin de configuracin de recursos, utilizando un pequeo conjunto de elementos XML. Para controlar la navegacin en la aplicacin ms sencilla, simplemente

Definir las reglas en el archivo de la aplicacin de configuracin de recursos. Consulte un resultado String desde el botn de hipervnculo o un componente de action atributo. Este resultado String es usado por la implementacin JavaServer Faces para seleccionar la regla de navegacin.

En aplicaciones ms complejas, tambin debe proporcionar uno o ms mtodos de accin, que realizan algn tipo de procesamiento para determinar qu pgina se debe mostrar a continuacin. El componente que activa referencias de navegacin este mtodo. El resto de esta seccin se describe lo que sucede cuando el componente est activado. Cuando un botn o un hipervnculo se hace clic en el componente asociado que genera un evento de accin. Este evento es manejado por el ejemplo de

incumplimiento ActionListener , que llama al mtodo de accin al que hace referencia al componente que desencaden el evento. Este mtodo de accin est localizado en un bean de respaldo y es proporcionado por el desarrollador de aplicaciones. Se realiza algn procesamiento y devuelve un resultado lgico String , que describe el resultado de la transformacin. El oyente pasa el resultado lgico y una referencia al mtodo de accin que produjo el resultado de la omisin NavigationHandler . El NavigationHandler selecciona la pgina para mostrar al lado haciendo coincidir el resultado o la referencia de la accin contra el mtodo de las normas de navegacin en el archivo de la aplicacin de configuracin de recursos. Cada regla de navegacin define la forma de navegar de una pgina en particular a cualquier nmero de otras pginas de la aplicacin. Cada caso de la navegacin dentro de la regla de navegacin define una pgina de destino y, o bien una consecuencia lgica, una referencia a un mtodo de accin, o ambas cosas. He aqu un ejemplo de regla de navegacin de la guessNumber aplicacin descrita en Definicin de navegacin en la pgina : <navigation-rule> <from-view-id> / greeting.jsp </ a-view-id> <navigation-case> <from-outcome> xito </ a partir de los resultados-> <to-view-id> / response.jsp </ a-view-id> </ Navegacin de los casos> </ Navegacin de la regla> Esta regla establece que cuando el botn o componente hipervnculo en greeting.jsp se activa, la aplicacin para navegar desde el greeting.jsp pgina a la response.jsp pgina si el resultado al que hace referencia el botn o la etiqueta del componente hipervnculo es success . El NavigationHandler selecciona la regla de navegacin que coincide con la pgina actual. A continuacin, coincide con el resultado o la referencia al mtodo de accin que recibi de la omisinActionListener con los definidos por los casos de navegacin. En primer lugar, intenta hacer coincidir tanto el mtodo de referencia y el resultado en contra del caso de la navegacin misma. Si eso falla, se intentar que coincida con el resultado. Por ltimo, se intentar que coincida con el mtodo de referencia, si la accin de los dos anteriores intentos fracasaron. Cuando el NavigationHandler logra un partido, la fase de respuesta de representacin comienza. Durante esta fase, la pgina seleccionada por el NavigationHandler se representar.

Capitulo 3 Usando JSF en JSP

JavaServer Faces (JSF) de las aplicaciones requieren algn tipo de tecnologa de visualizacin, tales como Java Server Pages. Una de las cosas interesantes acerca de JSP es la posibilidad de ampliarlo con etiquetas personalizadas. Una etiqueta personalizada es un elemento XML especial respaldado por el cdigo de Java, que puede ser utilizada, adems de los elementos estndar de JSP o elementos HTML. Una etiqueta personalizada puede hacer casi cualquier cosa: mostrar el valor de las variables, anlisis de XML, de forma condicional mostrar partes de una pgina, acceder a una base de datos, y as sucesivamente (aunque nadie debera estar haciendo todas estas cosas con etiquetas JSP es una pregunta para otro da ...). Su objetivo principal es mantener el cdigo Java de las pginas y permitir que los desarrolladores de interfaz para utilizar las etiquetas sencillas y familiares en su lugar. Un grupo de relacionados con etiquetas personalizadas forma una biblioteca de etiquetas. JSF se integra con JSP con etiquetas personalizadas. Todas las etiquetas JSF que hemos mostrado hasta el momento <h:inputText> , <h:outputText> , <h:form> , <f:view> , y as sucesivamente-son etiquetas personalizadas. Implementaciones de JSF JSP deben ser compatibles con las bibliotecas de etiquetas personalizadas que proporcionan acceso a todos los componentes estndar, prestadores, validadores y convertidores. Estas bibliotecas incluidas en los JAR JSF) se enumeran en la tabla de abajo.

Figura 1 Todas las etiquetas de estas bibliotecas deben ser nombradas y aplicadas de una manera especfica. De esta manera, sus aplicaciones basadas en JSP garantizan su portabilidad a travs de diferentes implementaciones de JSF. La mayora de los IDE se puede utilizar con JSP.

En su mayor parte, con JSF con JSP es slo una cuestin de la utilizacin de las bibliotecas de etiquetas personalizadas JSF. Sin embargo, hay algunos matices que se deben tener en cuenta, incluyendo el uso de JSP. Una de las caractersticas clave de JSP es la capacidad de integrar el contenido de las pginas JSP mltiples en una sola pgina. Esto a menudo se utilizan para tareas como la diversin como un encabezado o un pie de pgina. JSP admite dos tipos de incluye:. Dinmico y esttico dinmico incluye (realizada con la<jsp:include> etiqueta o el JSTL <c:import> etiqueta) acceder a un recurso en tiempo de ejecucin. En este caso, el control se enva a los incluidos JSP. La respuesta de los incluidos JSP se fusion con la respuesta enviada desde la pgina de llamada. Cuando se realizan cambios en una pgina dinmica incluye, automticamente aparecer en todas las pginas de llamadas. Esttica incluye integrar el recurso a la traduccin en tiempo-cuando la pgina se transform en el cdigo de Java y compilado. Los contenidos de la pgina de origen son esencialmente copiado en la pgina de llamada. Los cambios realizados en los contenidos incluidos por lo general no son automticamente notado llamando pginas, ya que ya tiene su propia copia del contenido. Ellos tienen que ser "tocado" para que puedan volver a compilar con el nuevo contenido.

Captulo 4 Desarrollo de aplicaciones JSF

JSF est orientado a prestar el soporte necesario para la construccin de las capas controlador y vista, dejando para las clases normales la capa del modelo. Toda aplicacin JSF tendr un archivo de configuracin Faces-config.xml, donde definiremos varios elementos claves para el funcionamiento de la aplicacin. Es aqu donde definiremos las reglas de navegacin por la web, segn el resultado que obtengamos en cada operacin. Otro de los componentes que utilizaremos en las aplicaciones sern los Beans Gestionados, que no son ms que simples JavaBeans, que adems de ser utilizados para encapsular los datos de la capa cliente, disponen de mtodos que responden a los eventos producidos en la capa cliente. Todo Beans utilizado en la aplicacin deber de ser registrado en el archivo facesconfig.xml. La apariencia que tendrs ser la siguiente:

<managed-bean> <managed-bean-name>credencialesBean</managed-bean-name> <managed-bean-class>javabeans.CredencialesBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope>

</managed-bean> Significado de cada campo:

managed-bean. Es el elemento principal en el que se incluyen los datos de registro del bean. Ser necesario aadir un bloque <managed-bean> por cada bean que se quiera sea gestionado por el framework. managed-bean-name. Es el nombre que permite referirse a la instancia del bean. Este nombre es utilizado mediante el lenguaje EL desde los componentes de la interfaz para acceder a las propiedades y mtodos del objeto. managed-bean-class. Nombre cualificado de la clase a la que pertenece el bean. managed-bean.scope. mbito en el que ser mantenida la instancia, siendo sus posibles valores: request, session y application.

Por ltimo tendremos las vistas, que ser la parte visible a los usuarios y que podr estar creado utilizando JSP. Si es as, deberemos de utilizar una serie de libreras de acciones que pasamos a detallar a continuacin:

Librera html: proporciona los controles bsicos html y una serie de componentes grficos complejos. Todos los controles permiten integrar el modelo JavaBean, vinculando de manera automtica las propiedades de un objeto a las de un control. Para su uso hay que poner la siguiente lnea al principio del archivo JSP: <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html" %>

Librera core: Incluyen elementos bsicos para la generacin de una vista JSF. Tambin incluyen elementos especiales conocidos como validadores y conversores que permiten realizar validaciones y conversiones de datos. Para poder utilizar esta librera hay que incluir la siguiente lnea: <%@ taglib prefix="h" uri="http://java.sun.com/jsf/core" %>

Este es un ejemplo donde se tiene un formulario para registrar personas y meterlos en un array. Luego se tandr otro botn que nos permitir sacar por pantalla los datos introducidos. Lo primero ser crear la clase JavaBean referente al formulario del cliente. El cdigo es el siguiente: package javabeans; import java.util.*;

import javax.faces.context.*; import javax.faces.event.*; import javax.faces.component.*; import javax.servlet.http.*; public class PersonaBean { private String nombre; private long telefono; private int edad; public PersonaBean() { } public String getNombre(){ return this.nombre; } public void setNombre(String nombre){ this.nombre=nombre; } public long getTelefono(){ return this.telefono; } public void setTelefono(long telefono){ this.telefono=telefono; } public int getEdad(){ return this.edad; } public void setEdad(int edad){ this.edad=edad; } public String doGuardar(){ FacesContext context = FacesContext.getCurrentInstance(); HttpSession sesion = (HttpSession)context.getExternalContext().getSession(true); ArrayList listapersonas = (ArrayList)sesion.getAttribute("listapersonas"); //comprueba si ya existe la coleccion de personas en la sesion y si no es as la crea if(listapersonas==null){ listapersonas = new ArrayList(); sesion.setAttribute("listapersonas", listapersonas); } listapersonas.add(this); return null; }

Es una clase JavaBean normal con sus mtodos SET y GET para las propiedades y un mtodo doGuardar que se ejecutar cuando se pulse el botn de Guardar del formulario. En este mtodo doGuardar, se obtiene del mbito sesin la lista de personas. Si esta

lista es nula, entonces se crea una nueva, si no es nula, se aade a la lista el nuevo objeto persona. El archivo faces-config.xml ser el siguiente que ponemos a continuacin: <?xml version=\'1.0\' encoding=\'UTF-8\'?> <!-- =========== FULL CONFIGURATION FILE ============================== --> <faces-config version="1.2" 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"> <managed-bean> <managed-bean-name>PersonaBean</managed-bean-name> <managed-bean-class>javabeans.PersonaBean</managed-bean-class> <managed-bean-scope>request</managed-bean-scope> </managed-bean> <navigation-rule> <from-view-id>/grabadatos.jsp</from-view-id> <navigation-case> <from-outcome>ver</from-outcome> <to-view-id>/ver.jsp</to-view-id> </navigation-case> </navigation-rule> </faces-config> En este archivo, lo que hacemos es declarar el JavaBean utilizado y las reglas de navegacin. En estas reglas, hemos indicado que cuando se d de alta un usuario, la aplicacin vuelva al formulario y cuando se pulse el botn de ver, este llamar a una url ver, que nos llevar al archivo ver.jsp. Pasemos ahora a la vista del formulario de alta de personas.

<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@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=UTF-8"> <title>Insertar personas</title> </head> <body> <center> <h1>Formulario de datos</h1>

</center> <f:view> <h:form> <table width="50%" align="center" border="0"> <tr> <td>Nombre:</td> <td><h:inputText value="#{PersonaBean.nombre}"/></td> </tr> <tr> <td>Telefono:</td> <td><h:inputText value="#{PersonaBean.telefono}"/></td> </tr> <tr> <td>Edad:</td> <td><h:inputText value="#{PersonaBean.edad}"/></td> </tr> <tr> <td colspan="2" align="center"><h:commandButton value="Guardar" action="#{PersonaBean.doGuardar}"/></td> </tr> <tr> <td colspan="2" align="center"><h:commandButton id="vertodos" rendered="false" value="Ver Todos" action="ver"/></td> </tr> </table> </h:form> </f:view> </body> </html>

De este cdigo debemos destacar la utilizacin de las librera core y html comentadas anteriormente, y como se le asigna una propiedad del JavaBean a los distintos campos. Por ejemplo al campo edad, el cdigo es: <h:inputText value="#{PersonaBean.edad}"/> InputText es el control referente al tipo text de html y le asociamos la propiedad edad del javabean. En los botones le indicamos las acciones que deben de realizar, as cuando se pulsa en guardar ejecutar el mtodo doGuardar del javabean. Mientras que cuando se pulse al botn de ver, lo que hace es mandarlo a la url ver, que corresponde a la vista ver.jsp, tal y como le hemos indicado en el archivo faces-config.xml. Por ltimo, la vista ver.jsp, lo que har ser recorrer la lista de clientes y mostrarla en

una tabla. Para ello utilizaremos la librera core de JSTL (librera utilizada para crear pginas en JSP para no utilizar cdigo java en los archivos)

<%@page contentType="text/html" pageEncoding="UTF-8"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!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=UTF-8"> <title>Ver registros</title> </head> <body> <center> <h1>Listado de personas</h1> <table border="1" align="center"> <tr> <th>Nombre</th> <th>Telfono</th> <th>Edad</th> </tr> <c:forEach var="per" items="${listapersonas}"> <tr> <td><c:out value="${per.nombre}"/></td> <td><c:out value="${per.telefono}"/></td> <td><c:out value="${per.edad}"/></td> </tr> </c:forEach> </table> <br/><br/> <a href="grabadatos.jsp">Volver</a> </center> </body> </html>

Desarrollar una sencilla aplicacin JavaServer Faces requiere la realizacin de estos pasos: 1. Desarrollar los objetos del modelo, los que contendrn los datos. 2. Aadir las declaraciones del bean controlado al fichero de configuracin de la aplicacin. 3. Crear las pginas utilizando las etiquetas de componentes UI y las etiquetas core. 4. Definir la navegacin entre las pginas.

Estas tareas se pueden realizar simultneamente o en cualquier orden. Sin embargo, la gente que realice las tareas necesitar comunicarse durante el proceso de desarrollo. Por ejemplo, el autor de las pginas necesita saber los nombres de los objetos del modelo para poder acceder a ellos desde la pgina. Este ejemplo pedir adivinar un nmero del 0 al 10, ambos inclusive. La segunda pgina nos dir si hemos acertado. El ejemplo tambin chequea la validez de nuestra entrada. 1. Desarrollar los Objetos del Modelo Desarrollar los objetos del modelo es responsabilidad del desarrollador de aplicaciones. El autor de las pginas y el desarrollador de aplicaciones podran necesitar trabajar juntos para asegurarse que las etiquetas de componentes se refieren a las propiedades del objeto apropiado, que las propiedades del objeto son de los tipos apropiados, y para tener cuidado de otros detalles. Aqu tenemos la clase UserNumberBean.java que contiene los datos introducidos en el campo de texto de la pgina greeting.jsp: package guessNumber; import java.util.Random; public class UserNumberBean { Integer userNumber = null; Integer randomInt = null; String response = null; public UserNumberBean () { Random randomGR = new Random(); randomInt = new Integer(randomGR.nextInt(10)); System.out.println(Dukes Number: +randomInt); } public void setUserNumber(Integer user_number) { userNumber = user_number; System.out.println(Set userNumber + userNumber); } public Integer getUserNumber() { System.out.println(get userNumber + userNumber); return userNumber; } public String getResponse() { if(userNumber.compareTo(randomInt) == 0) return Yay! You got it!; else return Sorry, +userNumber+ is incorrect.; } }

Como podemos ver, este bean es como cualquier otro componente JavaBeans. Tiene un mtodo set o accesor y un campo privado o propiedad. Esto significa que podemos concebir referenciar beans que ya hayamos escrito desde nuestras pginas JavaServer Faces. Dependiendo del tipo de componente que referencia una propiedad del objeto del modelo, esta propiedad puede ser de cualquiera de los tipos bsicos primitivos y los tipos referencia. Esto incluye cualquiera de los tipos numricos, String, int, double, y float. La tecnologa JavaServer Faces convertir automticamente el dato al tipo especificado por la propiedaded del objeto del modelo. Tambin podemos aplicar una conversin a un componente para convertir los valores de los componentes a un tipo que no est soportado por el componente. En el UserNumberBean, la propiedad userNumber es del tipo Integer. La implementacin de JavaServer Faces puede convertir el String de los parmetros de la solicitud que contiene este valor a un Integer antes de actualizar la propiedad del objeto del modelo cuando utilicemos una etiqueta input_number. Aunque este ejemplo lo convierte a un Integer, en general, deberamos utilizar tipos nativos en vez de utilizar las clases envoltura (int en lugar de Integer). 2. Aadir las Declaraciones del Bean Controlado Despus de desarrollar los beans utilizados en la aplicacin, necesitamos aadir declaraciones para ellos en el fichero de configuracin de la aplicacin. Cualquier miembro del equipo de desarrollo puede realizar la tarea de aadir las declaraciones al fichero de configuracin de la aplicacin. Aqu tenemos la declaracin de bean controlado para UserNumberBean: <managed-bean> <managed-bean-name>UserNumberBean</managed-bean-name> <managed-bean-class> guessNumber.UserNumberBean </managed-bean-class> <managed-bean-scope>session</managed-bean-scope> </managed-bean> La implementacin de JavaServer Faces procesa este fichero en el momento de arrancada de la aplicacin e inicializa el UserNumberBean y lo almacena en el mbito de sesin. Entonces el bean estar disponible para todas las pginas de la aplicacin. Para aquellos que estn familiarizados con versiones anteriores, esta facilidad de bean controlado reemplaza la utilizacin de la etiqueta jsp:useBean. 3. Crear las Pginas La creacin de las pginas es responsabilidad del autor de pginas. Esta tarea implica distribuir los componentes UI en las pginas, mapear los componentes a los datos de los objetos del modelo, y aadir otras etiquetas importanes (como etiquetas del

validador) a las etiquetas de los componentes. Aqu tenemos la pgina greeting.jsp con las etiquetas de validador (menos los HTML que lo rodea): <HTML> <HEAD> <title>Hello</title> </HEAD> <%@ taglib uri=http://java.sun.com/jsf/html prefix=h %> <%@ taglib uri=http://java.sun.com/jsf/core prefix=f %> <body bgcolor=white> <h:graphic_image id=wave_img url=/wave.med.gif /> <h2>Hi. My name is Duke. Im thinking of a number from 0 to 10. Can you guess it?</h2> <f:use_faces> <h:form id=helloForm formName=helloForm > <h:graphic_image id=wave_img url=/wave.med.gif /> <h:input_number id=userNo numberStyle=NUMBER valueRef=UserNumberBean.userNumber> <f:validate_longrange minimum=0 maximum=10 /> </h:input_number> <h:command_button id=submit action=success label=Submit commandName=submit /><p> <h:output_errors id=errors1 for=userNo/> </h:form> </f:use_faces> Esta pgina demuestra unas cuantas caractersticas importantes que utilizaremos en la mayora de nuestras aplicaciones JavaServer Faces:

La etiqueta form: Esta etiqueta representa un formulario de entrada, que permite al usuario introducir algn dato y enviarlo al servidor, normalmente pulsando un botn. Las etiquetas que representan los componentes que conforman el formulario se anidan dentro de la etiqueta form. Estas etiquetas son h:input_number y h:command_button. La etiqueta input_number: Esta etiqueta representa un componente que es un campo de texto, dentro del que el usuario introduce un nmero. Esta etiqueta tiene tres atributos: id, valueRef, y numberStyle. El atributo id es opcional y corresponde al identificador ID del componente. Si no incluimos uno, la implementacin JavaServer Faces generar uno automticamente. El atributo valueRef utiliza una expresin de referencia para referirse a la propiedad del objeto del modelo que contiene los datos introducidos en el campo de texto. La parte de la expresin que hay antes del . debe corresponder con el nombre definido por el elemento managed-bean-name del bean controlado en el fichero de configuracin. La parte de la expresin que hay despus del . debe corresponder con el nombre del elemento propertyname correspondiente en la declaracin del propio bean controlado. En este

ejemplo, no se declararon elementos property-name porque no se inicializaron propiedades en la arrancada de la aplicacin para este ejemplo. El atributo numberStyle indica el nombre del patrn de estilo de nmero definido segn la clase java.text.NumberFormat. Los valores vlidos son: currency, integer, number, o percent.

La etiqueta validate_longrange: La etiqueta input_number tambin contiene una etiqueta validate_longrange, que es una del conjunto de etiquetas validadores estndar incluido con la implementacin de referencia de JavaServer Faces. Este validador chequea si el valor local de un componente est dentro de un cierto rango. El valor debe ser cualquier cosa que se pueda convertir a long. Esta etiqueta tiene dos atributos, uno que especifica un valor mnimo y otro que especfica un valor mximo. Aqu, la etiqueta se utiliza para asegurarnos de que el nmero introducido en el campo de texto es un nmero entre el 0 y el 10.

La etiqueta command_button: Esta etiqueta representa el botn utilizado para enviar los datos introducidos en el campo de texto. El atributo action especifca una salida que facilita al mecanismo de navegacin la decisin de qu pgina abrir luego. La siguiente pgina describe esto en ms detalle. La etiqueta output_errors:

Esta etiqueta mostrar un mensaje de error si el dato introducido en el campo de texto no cumple con las reglas especificadas por el validador. El mensaje de error se muestra en el lugar de la pgina donde hayamos situado la etiqueta output_errors.

4. Definir las Navegacin por las Pginas Otra posibilidad que tiene el desarrollador de la aplicacin es definir la navegacin de pginas por la aplicacin, como qu pgina va despus de que el usuario pulse un botn para enviar un formulario. El desarrollador de la aplicacin define la navegacin por la aplicacin mediante el fichero de configuracin, el mismo fichero en el que se declararn los beans manejados. Aqu estn las reglas de navegacin definidas para el ejemplo guessNumber: <navigation-rule> <from-tree-id>/greeting.jsp</from-tree-id> <navigation-case> <from-outcome>success</from-outcome> <to-tree-id>/response.jsp</to-tree-id>

</navigation-case> </navigation-rule> <navigation-rule> <from-tree-id>/response.jsp</from-tree-id> <navigation-case> <from-outcome>success</from-outcome> <to-tree-id>/greeting.jsp</to-tree-id> </navigation-case> </navigation-rule> Cada regla de navegacin define cmo ir de una pgina (especificada en el elemento from-tree-id) a otras pginas de la aplicacin. El elemento navigation-rule puede contener cualquier nmero de elemento navigation-case, cada uno de los cuales define la pgina que se abrir luego (definida por to-tree-id) basndose en una salida lgica (definida mediante from-outcome). La salida se puede definir mediante el atributo action del componente UICommand que enva el formulario, como en el ejemplo guessNumber: <h:command_button id=submit action=success label=Submit /> La salida tambin puede venir del valor de retorno del mtodo invoke de un objeto Action. Este mtodo realiza algn procesamiento para determinar la salida. Un ejemplo es que el mtodo invoke puede chequear si la password que el usuario ha introducido en la pgina corresponde con la del fichero. Si es as, el mtodo invoke podra devolver success; si no es as, podra devolver failure. Un salida de failure podra resultar en la recarga de la pgina de logon. Una salida de success podra resultar en que se mostrara una pgina con las actividades de la tarjeta de crdito del usuario, por ejemplo.

Captulo 5 Creacin de componentes personalizados (UI)

Una clase de componente define el estado y el comportamiento de un componente de interfaz de usuario. La informacin de estado incluye el tipo de componente, el identificador y el valor local. El comportamiento definido por la clase de componente incluye lo siguiente:

Decodificacin (convertir el parmetro de la peticin al valor local del componente) Codificacin (convertir el valor local en el marcado correspondiente) Salvando el estado del componente La actualizacin del valor del frijol con el valor local Proceso de validacin en el valor local Eventos de colas

El UIComponentBase clase define el comportamiento predeterminado de una clase de componente. Todas las clases que representan a los componentes estndar se extienden desde UIComponentBase . Estas clases aadir sus definiciones de conducta propios, como la clase de componente personalizado har. Su clase componente personalizado o bien se debe extender UIComponentBase directa o extender una clase que representa uno de los componentes estndar. Estas clases se encuentran en la javax.faces.component paquete y sus nombres comienzan con la interfaz de usuario. Si el componente personalizado tiene el mismo propsito como un componente estndar, debe ampliar ese componente estndar en lugar de hacerlo directamente extienden UIComponentBase . Por ejemplo, supongamos que desea crear un componente de men editable. No tiene sentido tener este componente se extienden UISelectOne en lugar de UIComponentBase porque se puede reutilizar el comportamiento ya est definido en UISelectOne . La nica funcionalidad nueva es necesario definir es hacer que el men se puede editar. Si usted decide que su componente se extienden UIComponentBase o un componente estndar, es posible que tambin desea que el componente para aplicar una o ms de estas interfaces de comportamiento: ActionSource : Indica que el componente puede despedir a un ActionEvent . ActionSource2 : Extiende ActionSource y permite que las propiedades del componente hace referencia a los mtodos que se ocupan de eventos de accin de usar expresiones mtodo definido por el EL unificado. EditableValueHolder : Extiende ValueHolder y especifica las caractersticas adicionales para los componentes modificables, como la validacin y emisin de los eventos de cambio de valor. NamingContainer : los mandatos que cada componente de la raz en este componente tiene un identificador nico. StateHolder : Indica que un componente tiene el estado que se deben guardar entre las solicitudes. ValueHolder : Indica que el componente mantiene un valor local, as como la posibilidad de acceder a los datos en el nivel de modelo. Si su componente ampla UIComponentBase , automticamente se implementa slo StateHolder . Debido a que todos los componentes directamente o indirectamente extender UIComponentBase , todos ellos aplicar StateHolder . Si el componente se extiende uno de los componentes estndar de otros, sino que tambin puede implementar otras interfaces de comportamiento, adems de StateHolder . Si su componente ampla UICommand , automticamente se implementa ActionSource2 . Si su componente ampla UIOutput o una de las clases de componentes que se extienden UIOutput , automticamente se implementa ValueHolder . Si su componente ampla UIInput , automticamente se implementa EditableValueHolder y ValueHolder . Consulte la documentacin de la API JavaServer Faces para averiguar lo que las clases de otros componentes en prctica.

Tambin puede hacer que su componente de implementar explcitamente una interfaz de comportamiento que no es as ya por la virtud de extender un componente estndar en particular. Por ejemplo, si usted tiene un componente que se extiende UIInput y quiere que para desencadenar eventos de accin, usted debe hacer es implementar explcitamente ActionSource2 porque un UIInput componente no forma automtica implementar esta interfaz. La imagen de la librera de Duke mapa de ejemplo tiene dos clases de componentes: AreaComponent y MapComponent . El MapComponentclase extiende UICommand y por lo tanto implementa ActionSource2 , lo que significa que puede disparar eventos de accin cuando un usuario hace clic en el mapa. El AreaComponent clase extiende la componente estndar UIOutput . El @ FacesComponent anotacin registra los componentes con la implementacin JavaServer Faces: @ FacesComponent ("demomap") pblica MapComponent clase extiende UICommand {...} @ FacesComponent ("DemoArea") pblica AreaComponent clase extiende UIOutput {...} El MapComponent clase representa el componente correspondiente al mapa de la etiqueta: <Librera: mapa id = "bookMap" current = "map1" inmediata = "true" action = "librera"> ... </ Bookstore: mapa> El AreaComponent clase representa el componente correspondiente a la zona de la etiqueta: <Librera: id = rea "map1" value = "# {} Book201" onmouseover = "resources/images/book_201.jpg" onmouseout = "recursos, imgenes o book_all.jpg" targetImage = "mapImage" /> MapComponent tiene uno o ms AreaComponent casos como los nios. Su comportamiento se compone de las siguientes acciones: La recuperacin del valor de la zona seleccionada Definicin de las propiedades correspondientes a los valores del componente La generacin de un evento cuando el usuario hace clic en el mapa de la imagen Queue caso Salvar su estado Representacin del mapa de la etiqueta y la entrada de la etiqueta MapComponent los delegados de la representacin de los mapas y las etiquetas de entrada a la MapRenderer clase. AreaComponent est enlazado a un grano que almacena la forma y las coordenadas de la regin del mapa de imagen. Vers cmo todos estos datos se accede a travs de la expresin de valor en la creacin de la clase de procesador . El comportamiento de AreaComponent consiste en lo siguiente:

Recuperar la forma y los datos de coordenadas de la semilla Establecer el valor de la etiqueta oculta a la Identificacin de este componente La representacin de la zona de la etiqueta, incluyendo el cdigo JavaScript de la onmouseover , onmouseout , y onclick funciones Aunque estas tareas son en realidad realizado por AreaRenderer , AreaComponent debe delegar las tareas a AreaRenderer . Ver delegacin de representacin en un Renderer para obtener ms informacin. El resto de esta seccin se describen las tareas que MapComponent lleva a cabo, as como la codificacin y decodificacin que delega aMapRenderer . Gestin de eventos para los componentes personalizados detalla cmo MapComponent gestiona los eventos. Especificacin de la familia de componentes Si la clase personalizada componente de representacin de los delegados, es necesario anular el getFamily mtodo de UIComponent para devolver el identificador de una familia de componentes , que se utiliza para referirse a un componente o conjunto de componentes que pueden ser prestados por un procesador o un conjunto de extraccin de grasas. La familia de componentes se utiliza junto con el tipo de procesador para buscar renderizadores que pueden hacer que el componente: getFamily public String () { return ("Mapa"); } El identificador de familia de componentes, Mapa , debe coincidir con el definido por los componentes de la familia los elementos incluidos en el componente de procesador y configuraciones en el archivo de la aplicacin de configuracin de recursos. El registro de un representador personalizado con un render kit explica cmo definir la familia de componentes en la configuracin del procesador . El registro de un componente personalizado se explica cmo definir la familia de componentes en la configuracin de los componentes. Realizacin de Codificacin Durante la fase de respuesta de procesamiento, la implementacin JavaServer Faces procesa los mtodos de codificacin de todos los componentes y sus renderizadores asociados en la vista. Los mtodos de codificacin de convertir el valor local actual del componente en el formato correspondiente que se representa en la respuesta. El UIComponentBase clase define un conjunto de mtodos para la representacin de marcas: encodeBegin , encodeChildren y encodeEnd . Si el componente tiene componentes secundarios, puede que tenga que utilizar ms de uno de estos mtodos para hacer que el componente, de lo contrario, toda la representacin se debe hacer en encodeEnd . Alternativamente, puede utilizar el encodeALL mtodo, que abarca todos los mtodos. Debido a que MapComponent es un componente principal de la AreaComponent , las reas etiquetas deben ser prestados despus del iniciomapa etiqueta y antes de la terminacin mapa de etiqueta. Para lograr esto, el MapRenderer clase hace que el principio mapa etiqueta enencodeBegin y el resto del mapa etiqueta en encodeEnd . La implementacin JavaServer Faces invoca automticamente la encodeEnd mtodo de AreaComponent 's procesador despus de que se invoca MapRenderer 's encodeBegin mtodo y antes de invocar

la MapRenderer 's encodeEnd mtodo. Si un componente necesario para llevar a cabo la representacin de sus hijos, lo hace en el encodeChildren mtodo. Aqu estn las encodeBegin y encodeEnd mtodos de MapRenderer : @ Override public void encodeBegin (FacesContext contexto, el componente UIComponent) throws IOException { if ((marco == null) | | (componente == null)) { arroja NullPointerException nuevo (); } MapComponent map = (MapComponent) del componente; Escritor ResponseWriter = context.getResponseWriter (); writer.startElement ("mapa", el mapa); writer.writeAttribute ("nombre", map.getId (), "id"); } @ Override public void encodeEnd (FacesContext contexto, el componente UIComponent) throws IOException { if ((marco == null) | | (componente == null)) { arroja NullPointerException nuevo (); } MapComponent map = (MapComponent) del componente; Escritor ResponseWriter = context.getResponseWriter (); writer.startElement ("entrada", el mapa); writer.writeAttribute ("tipo", "oculto", null); writer.writeAttribute ("nombre", getName (contexto, el mapa), "clientId"); ( writer.endElement ("entrada"); writer.endElement ("mapa"); } Tenga en cuenta que encodeBegin hace slo el principio mapa de etiqueta. El encodeEnd mtodo hace que la entrada de la etiqueta y el finalmapa etiqueta. Los mtodos de codificacin de aceptar un UIComponent argumento y una FacesContext argumento. El FacesContext ejemplo, contiene toda la informacin asociada a la solicitud actual. El UIComponent argumento es el componente que debe ser prestado. El resto del mtodo hace que el margen de beneficio a la ResponseWriter ejemplo, que escribe el marcado de la respuesta actual. Esto, bsicamente, consiste en pasar los nombres de etiquetas HTML y nombres de atributos a la ResponseWriter ejemplo, en forma de cadenas, la recuperacin de los valores de los atributos de los componentes, y la aprobacin de estos valores a la ResponseWriter ejemplo. El startElement mtodo toma una cadena (el nombre de la etiqueta) y el componente al que corresponde la etiqueta (en este caso, el mapa ). (Al pasar esta informacin a la ResponseWriter ejemplo ayuda en tiempo de diseo de herramientas de saber qu partes del marcado generado que se relacionan con los componentes.) Despus de llamar a startElement , puede llamar a WriteAttribute para hacer los atributos de la etiqueta. El WriteAttribute mtodo toma el nombre del atributo, su

valor, y el nombre de una propiedad o atributo del componente que contiene correspondiente al atributo. El ltimo parmetro puede ser nulo, y no va a prestar. El nombre de valor del atributo del mapa de la etiqueta se recupera mediante el getId mtodo de UIComponent , que devuelve el identificador nico del componente. El nombre de valor del atributo de la entrada de la etiqueta se recupera mediante el getName (FacesContext, UIComponent) mtodo de MapRenderer . Si desea que el componente para llevar a cabo su propia representacin, sino delegado en un procesador si lo hay, se incluyen las siguientes lneas en el mtodo de codificacin para comprobar si hay un procesador asociado a este componente: if (getRendererType ()! = null) { super.encodeEnd (contexto); regresar; } Si hay un procesador disponible, este mtodo invoca la superclase encodeEnd mtodo, que hace el trabajo de encontrar el procesador. LosMapComponent todos los delegados de clase de representacin de MapRenderer , por lo que no es necesario para comprobar si hay extraccin de grasas disponibles. En algunas clases de componentes personalizados que se extienden a los componentes estndar, puede que tenga que poner en prctica otros mtodos, adems de encodeEnd . Por ejemplo, si usted necesita recuperar el valor del componente de los parmetros de la peticin, tambin se debe implementar la decodificacin de mtodo. Realizacin de decodificacin Durante la fase de solicitud de aplicar los valores, la implementacin JavaServer Faces procesa los decodificar los mtodos de todos los componentes en el rbol. La decodificacin de mtodo extrae el valor local de un componente a partir de parmetros de la peticin de entrada y utiliza un convertidor de clase para convertir el valor a un tipo que sea aceptable para la clase del componente. Una clase de componente personalizado o su procesador debe implementar la decodificacin mtodo slo si se debe recuperar el valor local o si es necesario a los eventos de la cola. Las colas de los componentes del evento llamando queueEvent . Esta es la decodificacin de mtodo de MapRenderer : @ Override decode public void (contexto FacesContext, componente UIComponent) { if ((marco == null) | | (componente == null)) { arroja NullPointerException nuevo (); } MapComponent map = (MapComponent) del componente; Cadena clave = getName (contexto, el mapa); Valor de la cadena = (String) context.getExternalContext (). getRequestParameterMap () get (clave).; if (valor! = null) map.setCurrent (valor); } } La decodificacin primer mtodo recibe el nombre de lo oculto de entrada de campo llamando a getName (FacesContext, UIComponent) . A continuacin, utiliza ese

nombre como la clave para el mapa de parmetro de la peticin para recuperar el valor actual de la entrada de campo.Este valor representa el rea seleccionada. Por ltimo, se establece el valor de la MapComponent clase de corriente atributo al valor de la entrada de campo. Habilitacin de las propiedades de componentes para aceptar las expresiones Casi todos los atributos de las etiquetas estndar JavaServer Faces puede aceptar expresiones, ya sean expresiones de valor o expresiones de mtodo. Se recomienda que tambin permite a sus atributos de los componentes de aceptar las expresiones, ya que le da mucha ms flexibilidad al escribir pginas Facelets. Crear el controlador de etiqueta de componente describe cmo MapTag , el manejador de etiquetas para el mapa de la etiqueta, establece los valores del componente en el tratamiento de la etiqueta. Para ello, las siguientes aportaciones: Un mtodo para cada atributo que tiene ya sea un ValueExpression o MethodExpression objeto en funcin de qu tipo de expresin del atributo acepta. Un setProperties mtodo que almacena la ValueExpression o MethodExpression objeto para cada propiedad del componente para que la clase componente puede recuperar el objeto de la expresin ms tarde. Para recuperar los objetos de expresin que SetProperties almacenados, la clase del componente debe implementar un mtodo para cada propiedad que tiene acceso al objeto de expresin apropiado, extrae el valor de ella, y devuelve el valor. Debido a que MapComponent extiende UICommand , el UICommand clase ya hace el trabajo de encontrar las ValueExpression yMethodExpression instancias asociadas con cada uno de los atributos que lo apoya. Sin embargo, si usted tiene una clase de componente personalizado que se extiende UIComponentBase , tendr que implementar los mtodos que obtienen el ValueExpression y MethodExpression casos asociados con esos atributos que estn habilitados para aceptar expresiones. Por ejemplo, puede incluir un mtodo que obtiene el ValueExpression ejemplo, para la inmediata atributo: public boolean isImmediate () { if (this.immediateSet) { return (this.immediate); } He ValueExpression = getValueExpression ("inmediata"); if (he! = null) { Boolean = valor (booleano) ve.getValue ( . getFacesContext () getELContext ()); retorno (value.booleanValue ()); Else {} return (this.immediate); } } Las propiedades que corresponden a los atributos de los componentes que aceptan expresiones mtodo debe aceptar y devolver unMethodExpression objeto. Por ejemplo, si MapComponent extendido UIComponentBase lugar de UICommand , sera

necesario para proporcionar una accin de propiedad que devuelve y acepta un MethodExpression objeto: getAction MethodExpression pblica () { retorno (this.action); } setAction public void (accin MethodExpression) { this.action = accin; } Cmo guardar y restaurar Estado Dado que las clases de componentes aplicar StateHolder , se debe implementar el saveState (FacesContext) y restoreState (FacesContext, Object) mtodos para ayudar a la implementacin JavaServer Faces guardar y restaurar el estado de los componentes de las distintas solicitudes. Para guardar un conjunto de valores, debe implementar la saveState (FacesContext) mtodo. Este mtodo se llama durante la fase de respuesta de procesamiento, durante el cual el estado de la respuesta se guarda para el procesamiento de las solicitudes posteriores. Aqu est el mtodo de MapComponent : @ Override saveState pblica de objetos (contexto FacesContext) { Valores de los objetos [] = new Object [2]; los valores de [0] = super.saveState (contexto); los valores [1] = actual; return (valores); } Este mtodo inicializa una matriz, que contendr el estado guardado. La prxima ahorra todo el estado asociada con el componente. Un componente que implementa StateHolder tambin debe proporcionar una implementacin para restoreState (FacesContext, Object) , que restaura el estado del componente a que se guarda con el saveState (FacesContext) mtodo. El restoreState (FacesContext, Object) se llama al mtodo durante la fase de restauracin de Vista, durante el cual la implementacin JavaServer Faces comprueba si hay algn estado que se guard durante la fase de procesamiento de Respuesta pasado y necesita ser restaurado en la preparacin para la devolucin de datos que viene. Aqu est la restoreState (FacesContext, Object) mtodo de MapComponent : public void restoreState (contexto FacesContext, estado del objeto) { Valores de los objetos [] = (Object []) del Estado; super.restoreState (el contexto, los valores de [0]); actual = (cadena) los valores [1]; } Este mtodo toma un FacesContext y un objeto de instancia, en representacin de la matriz que est llevando a cabo el estado para el componente. Este mtodo establece las propiedades del componente a los valores guardados en el objeto matriz. Al implementar estos mtodos en la clase de componente, asegrese de especificar en el descriptor de despliegue en el que desea el estado para ser salvo: ya sea cliente o servidor. Si el estado se guarda en el cliente, el estado de toda la vista se representa en un campo oculto en la pgina.

Para especificar el lugar donde se guarda el estado de una aplicacin web en particular, es necesario establecer eljavax.faces.STATE_SAVING_METHOD parmetro de contexto para el cliente o el servidor en el descriptor de despliegue de la aplicacin. Para el estudio del duque caso de Librera, el estado se guarda en el servidor.

Linkografa

http://www.sicuma.uma.es/sicuma/Formacion/documentacion/JSF.pdf http://www.programacion.com/articulo/primera_aplicacion_con_jsf_java_server_face s_350 http://kalistog.wordpress.com/javaserver-faces-jsf/ http://www.javaworld.com/javaworld/jw-12-2004/jw-1213-jsf.html http://es.scribd.com/doc/28079982/Curso-de-JSF-2-0-con-Hibernate-3 http://docs.oracle.com/javaee/1.4/tutorial/doc/JSFIntro7.html http://docs.oracle.com/javaee/6/tutorial/doc/bnavu.html