JSF

Tutorial de JavaServer Faces


1

ndice

ndice . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3

Capitulo 1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4

Primeros Pasos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.1 Preliminares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.2 Caractersticas principales . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 41.3 Comparativa con Tecnologas similares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51.4 Beneficios de la Tecnologa JavaServer Faces . . . . . . . . . . . . . . . . . . . . . . . . 61.5 Qu es una aplicacin JavaServer Faces? . . . . . . . . . . . . . . . . . . . . . . . . . . . 71.6 Una sencilla aplicacin JavaServer Faces . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

Capitulo 2 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

Primeros Pasos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112.1 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

2.1.1 Instalacin del JDK (Java Development Kit): . . . . . . . . . . . . . . . . . 112.1.2 Instalacin de Apache Tomcat: . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122.1.3 Instalacin de JavaServer Faces . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14

2.2 Entornos de desarrollo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 142.2.1 Java Studio Creator de Sun Microsystems . . . . . . . . . . . . . . . . . . . . . 142.2.2 NetBeans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 152.2.3 Eclipse-SDK . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

Capitulo 3 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

Modelo Vista Controlador en JSF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.1 Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.2 Modelo . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 183.3 Vista . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.4 Controlador . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 193.5 Ciclo de vida de una pgina JavaServer Faces . . . . . . . . . . . . . . . . . . . . . . . 21

3.5.1 Escenarios de Procesamiento del Ciclo de Vida de una Peticin . . . 213.5.2 Ciclo de Vida Estndar de Procesamiento de Peticiones . . . . . . . . . 22

3.6 Una sencilla aplicacin JavaServer Faces en detalle . . . . . . . . . . . . . . . . . . 243.7 Beans y pginas JSF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26

3.7.1 Beans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 263.7.2 Paginas JSF . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27

3.8 Navegacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29


2

3.9 Configuracin Servlet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29

Capitulo 4 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

Managed Beans, navegacin y etiquetas bsicas JSF . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.1 Managed Beans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 31

4.1.1 Concepto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 314.1.2 mbitos de los beans . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 324.1.3 Configuracin de un bean a travs de XML . . . . . . . . . . . . . . . . . . . 35

4.2 Navegacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384.2.1 Concepto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384.2.2 Navegacin esttica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 384.2.3 Navegacin dinmica . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 394.2.4 Navegacin avanzada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 40

4.3 Etiquetas bsicas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 424.4 Un ejemplo completo de etiquetas bsicas con JSF . . . . . . . . . . . . . . . . . . . 48

Capitulo 5 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 60

Etiquetas JSF estndares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605.1 Introduccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605.2 Etiquetas Core . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 605.3 Etiquetas HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61

5.3.1 Atributos comunes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 625.4 Formularios . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 655.5 Campos de texto y reas de texto . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66

5.6 Botones y enlaces . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 705.7 Etiquetas de seleccin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73

5.7.1 selectBooleanCheckbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 745.7.2 selectManyCheckbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 755.7.3 selectOneRadio . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 755.7.4 selectOneListbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 765.7.5 selectManyListbox . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775.7.6 selectOneMenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 775.7.7 selectManyMenu . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 78

5.8 Mensajes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 785.9 Paneles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 805.10 Data Table . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82

5.10.1 La etiqueta h:dataTable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 825.10.2 Cabeceras y pie de tabla . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 835.10.3 Componentes JSF incluidos en celdas tabla . . . . . . . . . . . . . . . . . . . 845.10.4 Editando celdas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 845.10.5 Estilos para filas y columnas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 845.10.6 Tcnicas de scroll . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 845.10.7 Un breve ejemplo de la etiqueta h:dataTable . . . . . . . . . . . . . . . . . . 85


3

Capitulo 6 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 90

Conversin y Validacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 906.1 El proceso de conversin y validacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 906.2 Usando conversores estndares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91

6.2.1 Conversin de nmeros y fechas . . . . . . . . . . . . . . . . . . . . . . . . . . . . 916.2.2 Conversores y atributos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 936.2.3 Mensajes de error . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 946.2.4 Cambiar el texto de los mensajes de error estndares . . . . . . . . . . . . 946.2.5 Un ejemplo completo usando conversores . . . . . . . . . . . . . . . . . . . . 95

6.3 Usando validadores estndares . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 976.3.1 Validando longitudes de cadenas de caracteres y rangos numricos

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 986.3.2 Chequeando valores requeridos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 996.3.3 Mostrando errores de validacin . . . . . . . . . . . . . . . . . . . . . . . . . . . . 996.3.4 Un completo ejemplo de validacin . . . . . . . . . . . . . . . . . . . . . . . . . 99

Capitulo 7 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 102

Manejo de Eventos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1027.1 Eventos de cambio de valor . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1027.2 Eventos de accin . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1087.3 Eventos de fase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 114

Capitulo 8 . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

Subvistas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1168.1 Organizacin comn . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1168.2 Un visor de libro . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116

8.2.1 Consideraciones para la especificacin JSF . . . . . . . . . . . . . . . . . . 1178.2.2 Inclusin de contenido en el visor de libro. . . . . . . . . . . . . . . . . . . . 118


4

Capitulo 1 Primeros Pasos

1.1 PreliminaresEl objetivo de la tecnologa JavaServer Faces es desarrollar aplicaciones web de forma

parecida a como se construyen aplicaciones locales con Java Swing, AWT (Abstract WindowToolkit), SWT (Standard Widget Toolkit) o cualquier otra API similar.

Tradicionalmente, las aplicaciones web se han codificado mediante pginas JSP (JavaServer Pages) que reciban peticiones a travs de formularios y construan como respuestapginas HTML (Hiper Text Markup Language) mediante ejecucin directa o indirecta -a travsde bibliotecas de etiquetas- de cdigo Java, lo que permita, por ejemplo, acceder a bases dedatos para obtener los resultados a mostrar amn de realizar operaciones marginales comoinsertar o modificar registros en tablas relacionales, actualizar un carrito de la compra, etc.

JavaServer Faces pretende facilitar la construccin de estas aplicaciones proporcionandoun entorno de trabajo (framework) va web que gestiona las acciones producidas por el usuarioen su pgina HTML y las traduce a eventos que son enviados al servidor con el objetivo deregenerar 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 ventanade la clase JFrame o similar, sino una pgina HTML.

Como el lector puede imaginar, cualquier evento realizado sobre una pgina JSF incurreen una carga sobre la red, ya que el evento debe enviarse a travs de sta al servidor, y larespuesta de ste debe devolverse al cliente; por ello, el diseo de aplicaciones JavaServer Facesdebe hacerse con cuidado cuando se pretenda poner las aplicaciones a disposicin del mundoentero a travs de internet. Aquellas aplicaciones que vayan a ser utilizadas en una intranetpodrn aprovecharse de un mayor ancho de banda y producirn una respuesta mucho ms rpida.

1.2 Caractersticas principalesLa 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 patrnMVC (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


5

componentes UI dentro de una pgina JSP.Este modelo de programacin bien definido y la librera de etiquetas para componentes

UI facilita de forma significativa la tarea de la construccin y mantenimiento de aplicacionesweb con UIs en el lado servidor. Con un mnimo esfuerzo, es posible:

Conectar eventos generados en el cliente a cdigo de la aplicacin en el lado servidor. Mapear componentes UI a una pgina de datos en el lado servidor. Construir una interfaz de usuario con componentes reutilizables y extensibles.Como se puede apreciar en la figura 1.1, la interfaz de usuario que se crea con la

tecnologa JavaServer Faces (representada por miUI en el grfico) se ejecuta en el servidor y serenderiza en el cliente.

En la figura no queda qu es fsicamente miUI. La pgina JSP, miform.jsp, especificalos componentes de la interfaz de usuario mediante etiquetas personalizadas definidas por latecnologa JavaServer Faces. LA UI de la aplicacin web (representada por miUI en la figura)maneja los objetos referenciados por la JSP, que pueden ser de los siguientes tipos:

Objetos componentes que mapean las etiquetas sobre la pgina JSP. Oyentes de eventos, validadores y conversores registrados y asociados a los

componentes. Objetos del modelo que encapsulan los datos y las funcionalidades de los

componentes especficos de la aplicacin (lgica de negocio).

1.3 Comparativa con Tecnologas similaresAl igual que Struts, JSF pretende normalizar y estandarizar el desarrollo de aplicaciones

web. Hay que tener en cuenta que JSF es posterior a Struts y, por lo tanto, se a nutrido de laexperiencia de ste, erradicando algunas sus deficiencias. De hecho el creador de Struts (CraigR. McClanahan) tambin es el lder de la especificacin de JSF.

Como se ha indicado, JSF es muy similar a Struts, ya que la interfaz de usuario seimplementa con pginas JSP, con la ventaja de que puede trabajar con diversas herramientas dedesarrollo que pueden facilitar la elaboracin de la interfaz de forma visual, pero esto esopcional, pudiendose hacer mediante editores de texto, editando cada uno de los ficheros quecomponen la aplicacin, tal y como se ha trabajado en este tutorial. Sin embargo se abordar el

Figura 1.1 Diagrama de una aplicacin JSF


6

uso de estas herramientas, en concreto, Java Studio Creator, en el ltimo captulo.No obstante, JSF no puede competir en madurez con Struts (en este punto Struts es claro

ganador), pero s puede ser una opcin muy recomendable para nuevos desarrollos, sobre todosi todava no tenemos experiencia con Struts.

1.4 Beneficios de la Tecnologa JavaServer FacesA continuacin se explican algunos de los puntos por los que JSF es una tecnologa muy

interesante (incluso mas que Struts). Hay una serie de especificaciones que definen JSF, y quepueden encontrarse en los siguientes enlaces:

JSR 127 ( http://www.jcp.org/en/jsr/detail?id=127 )JSR 252 ( http://www.jcp.org/en/jsr/detail?id=252 )JSR 276 ( http://www.jcp.org/en/jsr/detail?id=276 )

Una de las ventajas de que JSF sea una especificacin estndar es que puedenencontrarse implementaciones de distintos fabricantes. Esto permite no vincularseexclusivamente con un proveedor concreto, y poder seleccionar el que ms interese en cada casosegn el nmero de componentes que suministra, el rendimiento de stos, soporteproporcionado, precio, poltica de evolucin, etc.

JSF trata la vista (la interfaz de usuario) de una forma algo diferente a lo que estamosacostumbrados en aplicaciones web, ya que este tratamiento es mucho ms cercano al estilo deJava Swing, Visual Basic o Delphi, donde la programacin de la interfaz se hacer a travs decomponentes y est basada en eventos (pulsacin de un botn, cambio en el valor de un campo,etc.).

JSF es muy flexible. Por ejemplo nos permite crear nuestros propios componentes, y/ocrear nuestros propios renderizadores para pintar los componentes en la forma que ms nosconvenga.

Una de las grandes ventajas de la tecnologa JavaServer Faces es que ofrece una claraseparacin entre el comportamiento y la presentacin. Las aplicaciones web construidas contecnologa JSP conseguan parcialmente esta separacin. Sin embargo, una aplicacin JSP nopuede mapear peticiones HTTP al manejo de eventos especficos de los componentes o manejarelementos UI como objetos con estado en el servidor. La tecnologa JavaServer Faces permiteconstruir aplicaciones web que introducen realmente una separacin entre el comportamientoy la presentacin, separacin slo ofrecida tradicionalmente por arquitecturas UI del lado delcliente.

Separar la lgica de negocio de la presentacin tambin permite que cada miembro delequipo de desarrollo de la aplicacin web se centre en su parte asignada del proceso diseo, yproporciona un modelo sencillo de programacin para enlazar todas las piezas. Por ejemplo,personas sin experiencia en programacin pueden construir pginas JSF usando las etiquetas decomponentes UI que esta tecnologa ofrece, y luego enlazarlas con cdigo de la aplicacin sinescribir ningn script ni nada.

Otro objetivo importante de la tecnologa JavaServer Faces es mejorar los conceptosfamiliares de componente-UI y capa-web sin limitarnos a una tecnologa de script particular oun lenguaje de marcas. Aunque la tecnologa JavaServer Faces incluye una librera de etiquetas


7

JSP personalizadas para representar componentes en una pgina JSP, las APIs de JavaServerFaces se han creado directamente sobre el API JavaServlet. Esto nos permite, tericamente,hacer algunas cosas avanzadas: usar otra tecnologa de presentacin junto a JSP, crear nuestrospropios componentes personalizados directamente desde las clases de componentes, y generarsalida para diferentes dispositivos cliente, entre otras.

En definitivas cuentas, la tecnologa JavaServer Faces proporciona una rica arquitecturapara manejar el estado de los componentes, procesar los datos, validar la entrada del usuario, ymanejar eventos.

1.5 Qu es una aplicacin JavaServer Faces?En su mayora, las aplicaciones JavaServer Faces son como cualquier otra aplicacin web

Java. Se ejecutan en un contenedor de servlets de Java y, tpicamente, contienen: Componentes JavaBeans (llamados objetos del modelo en tecnologa JavaServer

Faces) conteniendo datos y funcionalidades especficas de la aplicacin. Oyentes de Eventos. Pginas, (principalmente pginas JSP). Clases de utilidad del lado del servidor, como beans para acceder a las bases de datos.Adems de estos tems, una aplicacin JavaServer Faces tambin tiene: Una librera de etiquetas personalizadas para dibujar componentes UI en una pgina. Una librera de etiquetas personalizadas para representar manejadores de eventos,

validadores y otras acciones. Componentes UI representados como objetos con estado en el servidor.

Toda aplicacin JavaServer Faces debe incluir una librera de etiquetas personalizadasque define las etiquetas que representan componentes UI, as como una librera de etiquetas paracontrolar otras acciones importantes, como validadores y manejadores de eventos. Laimplementacin de JavaServer Faces, de Sun proporciona estas dos libreras. La librera deetiquetas de componentes elimina la necesidad de codificar componentes UI en HTML u otrolenguaje de marcas, lo que se traduce en el empleo de componentes completamente reutilizables.Y la librera principal (core) hace fcil registrar eventos, validadores y otras acciones de loscomponentes.

Como librera de etiquetas de componentes puede usarse la librera html_basic incluidacon la implementacin de referencia de la tecnologa JavaServer Faces, aunque tambin esposible definir una librera de etiquetas personalizadas que dibuje componentes propios o queproporcione una salida distinta a HTML.

Otra ventaja importante de las aplicaciones JavaServer Faces es que los componentes UIde la pgina estn representados en el servidor como objetos con estado. Esto permite a laaplicacin manipular el estado del componente y conectar los eventos generados por el clientea cdigo en el lado del servidor.

Finalmente, la tecnologa JavaServer Faces permite convertir y validar datos sobrecomponentes individuales e informar de cualquier error antes de que se actualicen los datos enel lado del servidor.

Debido a la divisin de labores que permite el diseo de la tecnologa JavaServer Faces,el desarrollo y mantenimiento de una aplicacin JavaServer Faces se puede realizar muy rpiday fcilmente. Abajo tenemos un listado de los roles principales de un equipo de desarrollo tpico.


8

Aunque en muchos equipos, los desarrolladores individuales puede interpretar ms de uno deesos roles, resulta muy til considerar la tecnologa JavaServer Faces desde varias perspectivasbasadas en la responsabilidad principal que tiene cada participante:

Autores de pginas, que utilizan un lenguaje de marcas, como HTML, para construirpginas para aplicaciones web. Cuando se utiliza la tecnologa JavaServer Faces, losautores de pginas casi siempre usarn exclusivamente la librera de etiquetas.

Desarrolladores de aplicaciones, que programan los objetos del modelo, losmanejadores de eventos, los validadores, y la navegacin de pginas. Losdesarrolladores de aplicaciones tambin pueden proporcionar las clases de utilidadnecesarias.

Escritores de componentes, que tienen experiencia en programar interfaces de usuarioy prefieren crear componentes personalizados utilizando un lenguaje deprogramacin. Esta gente puede crear sus propios componentes desde cero, o puedeextender los componentes estndares proporcionados por JavaServer Faces.

Vendedores de herramientas, que proporcionan herramientas que mejoran latecnologa JavaServer Faces para hacer incluso ms sencilla la construccin deinterfaces de usuario en el lado servidor.

Para las aplicaciones web pueden ser muy convenientes frameworks como JSF, Struts,Spring,etc., pero stos no servirn (a no ser a costa de un gran esfuerzo) para hacer portales. Paraeste segundo caso sera ms adecuado usar gestores de contenidos como Lenya, OpenCMS, etc.

1.6 Una sencilla aplicacin JavaServer FacesEsta seccin describe el proceso de desarrollo de una sencilla aplicacin JavaServer

Faces. Con ella se ver qu caractersticas contiene una aplicacin tpica JavaServer Faces.Nuestra primera aplicacin empieza con una pantalla de entrada con un Login y un

password. Como vemos en la figura 1.2:

Fichero: ejemploBasico/index.jsp Una simple aplicacion JavaServer Faces Por favor, introduzca su nombre y password. Nombre:

Figura 1.2 Salida del fichero ejemploBasico/index.jsp


9

Password:

Discutiremos en detalle el contenido de este archivo ms tarde . Por ahora, baste concomentar los siguientes puntos:

Algunas de las etiquetas son etiquetas estndar de HTML: body, table, etc.Algunas etiquetas tienen prefijos, como f:view y h:inputText; stas son etiquetasJSF.

Las etiquetas h:inputText, h:inputSecret y h:commandButton corresponden alTextField, PasswordField y al botn Submit de HTML.

Los campos de entrada son conectados al atributo del objeto. Por ejemplo, elatributo #"{usuario.nombre}" nos dice segn la implementacin JSF que seconecta el TextField con el atributo nombre del objeto usuario. Discutimos estavinculacin en ms detalle ms tarde en este captulo.

Cuando el usuario introduce el nombre y la contrasea, aparece una pgina de

bienvenida. El mensaje de bienvenida contiene el nombre de usuario, mientras que por ahoraignoraremos la contrasea.

Como el lector puede comprobar, el propsito de esta aplicacin no es impresionar anadie, sino simplemente mostrar las piezas que son necesarias para construir una aplicacinJSF. Esta sencilla aplicacin contiene las siguientes partes:

Dos pginas, una que contiene casillas de texto para el login de usuario y sucontrasea (index.jsp) y otra con la bienvenida (hola.jsp).

Un bean que maneja los datos de usuario, (en este caso nombre y contrasea). Un bean es simplemente una clase Java en la que sus campos son accedidos

siguiendo mtodos getter y setter convencionales. El cdigo est en el archivoUsuarioBean.java.

Un archivo de configuracin para la aplicacin que contiene recursos del bean ylas reglas de navegacin. Por defecto, este archivo se denomina face-config.xml.

Los archivos que son necesarios para el servlet: el archivo web.xml y el archivo index.html que redireccionan el usuario a la direccin correcta para la pgina deentrada en el sistema.

Fichero: ejemploBasico/WEB-INF/classes /UserBean.java

public class UsuarioBean { private String nombre; private String password; // ATRIBUTO: nombre


10

public String getNombre() { return nombre; } public void setNombre(String nuevoValor) { nombre = nuevoValor; } // ATRIBUTO: password public String getPassword() { return password; } public void setPassword(String nuevoValor) { password = nuevoValor; }}

O Estructura de directorios para una aplicacin JSF

Una aplicacin JSF se corresponde con una estructura de directorios que sigue unmodelo estndar, la cual se puede comprimir en un archivo con extensin WAR, para mayorcomodidad y portabilidad. Esta estructura de directorios estndar es:

Aplicacin/Ficheros HTML y JSPWEB-INF/

archivos de configuracinclasses/

archivos .classlib/

libreras

Con lo que la estructura del archivo WAR, queda tal que as:

ejemploBasico.warindex.htmlindex.jsphola.jsp META-INF/

MANIFEST.MF WEB-INF/

faces-config.xmlweb.xml classes/

UsuarioBean.class lib/

common-beanutils.jarcommon-collections.jarcommon-digester.jarcommon-logging.jarjsf-api.jarjsf-impl.jarjstl.jarstandard.jar

donde el directorio META-INF se genera automticamente al crear el archivo .war.


11

Capitulo 2 Primeros Pasos

2.1 InstalacinEl tutorial est escrito usando la siguiente configuracin: Sistema Operativo: Windows XP Home Maquina Virtual Java: JDK 1.5.0_06 de Sun Microsystems Tomcat 5.5.16 Implementacin de referencia de JavaServer Faces v1.1Pasemos a ver cmo se instala y configura el software necesario:

2.1.1 Instalacin del JDK (Java Development Kit):Primero hay que descargar el kit de desarrollo de Java del enlace:

http://java.sun.com/j2se/1.5.0/download.jspUna vez descargado el fichero ejecutable, la instalacin es sencilla: doble clic y

seguir los pasos del asistente, seleccionando las opciones por defecto. Recomendamos lacreacin de un directorio \ArchivosDePrograma con el mismo nombre que el que utilizaautomticamente Windows, pero sin espacios; aqu deberan ir todas las carpetas creadas porel instalador del JDK. Utilizar esta carpeta en lugar de la estndar de Windows tiene laventaja de que, bajo ciertas circunstancias, evita problemas en el acceso a los directorios porparte de algunos IDEs.

Una vez instalado, pasamos a su configuracin. Habr que modificar la variable deentorno PATH. Para ello hay que acceder a las variables de entorno de Windows:Panel de control->Sistema->Opciones avanzadas (Figura 2.1) ->Variables de entorno (Figura2.2)

Figura 2.1 Ventana de propiedades del sistema


12

Localice la variable PATH y la modifiquela para que contenga la ruta del directoriobin de la instalacin de Java, por ejemplo:

c:\ArchivosDePrograma\Java\jdk1.5.0_06\bin

2.1.2 Instalacin de Apache Tomcat:Primero hay que descargar Tomcat de la pgina oficial de Apache:

http://tomcat.apache.org/download-55.cgi en la cual deber buscar la ltima versin disponible y seleccionarla.

Figura 2.2 Ventana de variables de entorno

Figura 2.3 Instalacin de Apache Tomcat


13

Descargado el fichero ejecutable, la instalacin es sencilla: doble clic y seguir lospasos del asistente, seleccionando las opciones por defecto, salvo el tipo de instalacin queen lugar de ser normal, deber ser completa (Figura 2.3), el motivo de la instalacincompleta es porque, aunque parezca mentira, al incluir Examples en la instalacin,dispondremos de las librerias standard.jar y jstl.jar, ubicadas enc:\ArchivosDePrograma\Tomcat5.5\webapps\jsp-examples\WEB-INF\lib, necesariaspara cualquier aplicacin JSF. En cuanto a la ubicacin del directorio de instalacin (porcomodidad puede poner c:\ArchivosDePrograma\Tomcat5.5). Durante el proceso semuestra el puerto por el que el servidor se mantiene a la escucha (8080) y se pide unacontrasea para actuar como administrador. Para nuestras pruebas se recomienda dejar elpuerto por defecto y no poner contrasea. Una vez instalado, se pasa a su configuracin.

Es necesario aadir la variable de entorno JAVA_HOME al sistema, apuntando aldirectorio donde se haya instalado el JDK (para que el Tomcat sepa donde buscar elcompilador de Java y dems utilidades), por ejemplo:

c:\ArchivosDePrograma\Java\jdk1.5.0_06Establezca la variable de entorno CATALINA_HOME para que apunte al directorio

donde haya instalado el servidor Tomcat, por ejemplo:c:\ArchivosDePrograma\Tomcat5.5y vuelva a modificar la variable PATH, para aadir la ruta del directorio bin de la

instalacin de Tomcat, por ejemplo:c:\ArchivosDePrograma\Tomcat5.5Y ya esta lista toda la configuracin; slo queda ponerlo en marcha para comprobar

que todo ha sido correcto. Para ello ejecute el programa Monitor Tomcat, desde el cual sepuede arrancar Tomcat (start service) y detenerlo (stop service).

Una vez arrancado, acceda a la direccin web http://localhost:8080/ desde sunavegador favorito. Si todo ha ido bien, deber ver la pgina principal de Tomcat (Figura2.4). Si inicialmente no se conecta al puerto 8080, darle a recargar en el navegador y probarde nuevo).

Figura 2.4 Pgina de inicio para Tomcat 5.5.16


14

Recuerde que localhost equivale a la direccin 127.0.0.1, por lo que obtendra elmismo efecto, accediendo mediante http://127.0.0.1:8080/.

2.1.3 Instalacin de JavaServer FacesPuede descargarla de la direccin:

http://java.sun.com/javaee/javaserverfaces/download.html Simplemente descomprima el archivo donde le parezca mejor, por ejemplo:c:\ArchivosDePrograma\Java\jsf-1_1Dentro de dicha carpeta podr encontrar el directorio lib, con las libreras necesarias

para las aplicaciones JSF.

2.2 Entornos de desarrolloEn el ejemplo bsico del captulo anterior las pginas JSF y archivos de configuracin

se crearon mediante un editor de texto. No obstante, existe la posibilidad de usar entornos dedesarrollo grficos, lo que resulta recomendable dada la complejidad de esta operacin y lorepetitiva que es.

Se pueden encontrar diferentes entornos, como por ejemplo:

Java Studio Creator NetBeans Eclipse Exadel Studio Pro y Exadel Studio FacesIDE IBMs WebSphere Application Developer (WSAD) Oracles Jdeveloper Borland Jbuilder IntelliJ IDEA

Veremos someramente algunos de ellos.

2.2.1 Java Studio Creator de Sun Microsystems

Sun Microsystems ofrece la herramienta de desarrollo Sun Java Studio Creator,(Figura 2.5), el cual se puede descargar de aqu:http://developers.sun.com/prodtech/javatools/jscreator/downloads Java Studio Creator es una solucin completa de desarrollo, depuracin y despliegue

de aplicaciones, que incorpora la tecnologa de produccin JavaServer Faces (JSF), capaz deproporcionar un mayor rendimiento y eficiencia en la codificacin.

El producto tambin incorpora: El runtime de Java Enterprise System, que permite a los desarrolladores

evaluar las aplicaciones en preproduccin de forma rpida. Incluye soporte para Sun Java System Application Server, Platform Edition.


15

PointBase, un servidor de bases de datos SQL (incluido en Java SystemApplication Server).

El kit de desarrollo (SDK) para Java 2, Standard Edition (J2SE).

Elementos de ayuda para desarrolladores,tales como ejemplos, tutoriales,componentes visuales para la tecnologa JavaServer Faces, etc.

Al integrar de forma transparente herramientas, runtimes y componentes, Java StudioCreator permite realizar codificacin en Java de forma visual y eficiente. De esta forma, losdesarrolladores pueden centrarse en aadir valor a las aplicaciones con elementos como lainteraccin de usuario y la lgica de negocio, en lugar de tener que dedicar la mayor parte desu tiempo a la fontanera de la infraestructura de sistemas y los servicios web.

La herramienta Java Studio Creator est totalmente basada en la plataforma Java y enlos estndares desarrollados mediante el programa Java Community

Process (JCP); ello asegura la portabilidad entre los entornos de despliegue yherramientas de desarrollo tales como Sun Java Studio Enterprise.

2.2.2 NetBeans

El IDE NetBeans (Figura 2.6), lo puede descargar junto con la Mquina virtual dejava, desde aqu:

http://java.sun.com/j2se/1.5.0/download.jsp

es un entorno de desarrollo, de cdigo abierto, una herramienta para programadorespara escribir, compilar, corregir errores y para ejecutar programas. Est escrito en Java - peropuede servir de soporte a cualquier otro lenguaje de programacin. Existe tambin un nmeroenorme de mdulos para extender el NetBeans IDE. El NetBeans IDE es un producto libre ygratuito sin restricciones de utilizacin.

Figura 2.5 Aspecto del IDE Sun Java Studio Creator 2


16

2.2.3 Eclipse-SDK

Eclipse, (Figura 2.7), lo puede descargar desde aqu:

http://www.eclipse.org/downloads/

es una IDE multiplataforma libre para crear aplicaciones clientes de cualquier tipo. Laprimera y ms importante aplicacin que ha sido realizada con este entorno es la afamadoIDE Java llamado Java Development Toolkit (JDT) y el compilador incluido en Eclipse, quese usaron para desarrollar el propio Eclipse.

El proyecto Eclipse se divide en tres subproyectos:

El Core de la aplicacin, que incluye el subsistema de ayuda, la plataformapara trabajo colaborativo, el Workbench (construido sobre SWT y JFace) y elWorkspace para gestionar proyectos.

Java Development Toolkit (JDT), donde la contribucin de Erich Gamma hasido fundamental.

Plug-in Development Enviroment (PDE), que proporciona las herramientaspara el desarrollo de nuevos mdulos.

La versin actual de Eclipse dispone de las siguientes caractersticas:

Editor de texto Resaltado de sintaxis

Figura 2.6 Aspecto del IDE NetBeans


17

Compilacin en tiempo real Pruebas unitarias con JUnit Control de versiones con CVS Integracin con Ant Asistentes (wizards): para creacin de proyectos, clases, tests, etc. Refactorizacin

Asimismo, a travs de "plugins" libremente disponibles es posible aadir:

Control de versiones con Subversion, via Subclipse. Integracin con Hibernate, via Hibernate Tools.

Figura 2.7 Aspecto del IDE Eclipse


18

Capitulo 3Modelo Vista Controlador en JSF

3.1 IntroduccinEl patrn MVC (Modelo Vista Controlador), ver Figura 3.1, nos permite separar la

lgica de control (qu cosas hay que hacer pero no cmo), la lgica de negocio (cmo sehacen las cosas) y la lgica de presentacin (cmo interaccionar con el usuario).

Utilizando este tipo de patrn es posible conseguir ms calidad, un mantenimientoms fcil, perder el miedo al folio en blanco (existe un patrn de partida por el que empezarun proyecto), etc. al margen de todo esto, una de las cosas ms importantes que permite el usode este patrn consiste en normalizar y estandarizar el desarrollo de Software.

Adems, este modelo de arquitectura presenta otras importantes ventajas: Hay una clara separacin entre los componentes de un programa; lo cual nos

permite implementarlos por separado. Hay una API muy bien definida; cualquiera que use la API, podr reemplazar el

modelo, la vista o el controlador, sin demasiada dificultad. La conexin entre el modelo y sus vistas (ya que puede haber varias) es dinmica: se

produce en tiempo de ejecucin, no en tiempo de compilacin.

3.2 ModeloTodas las aplicaciones software dejan a los usuarios manipular ciertos datos que

proceden de una realidad sobre la que se pretende actuar, como supermercados, itinerarios deviaje, o cualquier dato requerido en un dominio problemtico particular. A estos datos enestado puro, que representan el estado de la realidad se les llama modelo: modelan la parte dela realidad sobre la que se desea actuar.

El modelo, pues, es el objeto que representa y trabaja directamente con los datos delprograma: gestiona los datos y controla todas sus transformaciones. El modelo no tieneconocimiento especfico de los diferentes controladores y/o vistas, ni siquiera contienereferencias a ellos. Es el propio sistema el que tiene encomendada la responsabilidad demantener enlaces entre el modelo y sus vistas, y notificar a las vistas cundo deben reflejar uncambio en el modelo.

En nuestro ejemplo bsico, lo primero que hay que hacer es definir el modelo, que seve reflejado en el fichero UsuarioBean.java, donde se aprecia la clase UsuarioBean, quecontiene los elementos necesarios para manejar los datos de la aplicacin: es necesario un

Figura 3.1 Arquitectura MVC


19

campo que almacene el nombre del usuario que entr, y otro para su correspondientecontrasea, junto con sus respectivos mtodos de asignacin y recuperacin:

public class UsuarioBean { private String nombre; private String password; // ATRIBUTO: nombre public String getNombre() { return nombre; } public void setNombre(String nuevoValor) { nombre = nuevoValor; } // ATRIBUTO: password public String getPassword() { return password; } public void setPassword(String nuevoValor) { password = nuevoValor; }}

Este modelo a utilizar en la aplicacin se le comunica al sistema JSF mediante elfichero faces-config.xml, donde se detalla la parte de managed-bean, donde se aprecia unbean denominado usuario, que est recogido en la clase UsuarioBean, y con un mbito desesin:

usuario UsuarioBean session

3.3 VistaLa vista es el objeto que maneja la presentacin visual de los datos gestionados por el

Modelo. Genera una representacin visual del modelo y muestra los datos al usuario.Interacciona con el modelo a travs de una referencia al propio modelo.

En el ejemplo bsico, la vista est manipulada a travs de las pginas JSF, es decir,mediante las pginas index.jsp y hola.jsp. JSF conecta la vista y el modelo. Como ya se havisto, un componente de la vista puede ligarse a un atributo de un bean del modelo, como:

donde se ve como se declara un campo de texto de entrada (inputText) en la vista, ese

campo de texto recoge su valor de entrada en el atributo nombre de un bean denominadousuario.

De esta manera se establece el vnculo de enlace en vista y modelo.

3.4 ControladorEl controlador es el objeto que proporciona significado a las rdenes del usuario,

actuando sobre los datos representados por el modelo. Entra en accin cuando se realizaalguna operacin, ya sea un cambio en la informacin del modelo o una interaccin sobre laVista. Se comunica con el modelo y la vista a travs de una referencia al propio modelo.

Adems, JSF opera como un gestor que reacciona ante los eventos provocados por elusuario, procesa sus acciones y los valores de estos eventos, y ejecuta cdigo para actualizarel modelo o la vista.


20

Retomando el ejemplo bsico, una parte del controlador la recogen las lineas decdigo del fichero index.jsp que capturan los datos del nombre de usuario, su contrasea, y elbotn de Aceptar:

y la parte del dichero hola.jsp que muestra el nombre por pantalla:

Por otro lado, est el control para las reglas de navegacin, contenido en el fichero

faces-config.xml, donde por ejemplo, se indica que estando index.jsp, si ocurre una accindenominada login, navegaremos a la pgina hola.jsp, esta accin comentada, es unstring que se declara en la vista como un atributo del botn de aceptar que aparece en elformulario del ejemplo bsico. El fichero faces-config sera el siguiente:

/index.jsp login /hola.jsp

y la parte de la vista que establece la accin que activa la navegacin es:

Por ltimo, termina de definirse el controlador de la aplicacin con el servlet faces,definido en el fichero web.xml:

Faces Servlet javax.faces.webapp.FacesServlet 1 Faces Servlet *.faces index.html

Con la directiva se establece el nico servlet de nuestra aplicacin es elpropio del framework JSF.


21

La directiva indica la ruta (url) para acceder a servlet definidoanteriormente. Cualquier pgina JSP que pretendamos visualizar, si contiene la extensin.faces, se visualizar a traves de JSF.

Por ltimo con se establece como pgina de arranque de laaplicacin index.html. Posteriormente, esta pgina se redirecciona a index.faces, esto se haceas para que el framework JSF, a travs de su servlet principal tome el control. Si no se hicierade esta manera, el servidor de aplicaciones mostrara una simple pgina JSP como tal, y lacompilacin de dicha pgina, fuera del marco JSF, provocara errores.

3.5 Ciclo de vida de una pgina JavaServer FacesEl ciclo de vida de una pgina JavaServer Faces page es similar al de una pgina JSP:

El cliente hace una peticin HTTP (Hiper Text Transfer Protocol) de la pgina y el servidorresponde con la pgina traducida a HTML. Sin embargo, debido a las caractersticas extrasque ofrece la tecnologa JavaServer Faces, el ciclo de vida proporciona algunos serviciosadicionales mediante la ejecucin de algunos pasos extras.

Los pasos del ciclo de vida se ejecutan dependiendo de si la peticin se origin o nodesde una aplicacin JavaServer Faces y si la respuesta es o no generada con la fase derenderizado del ciclo de vida de JavaServer Faces. Esta seccin explica los diferentesescenarios del ciclo de vida.

3.5.1 Escenarios de Procesamiento del Ciclo de Vida de una PeticinUna aplicacin JavaServer Faces soporta dos tipos diferentes de respuestas y dos tipos

diferentes de peticiones; la idea es que en una aplicacin JSF se pueden mezclar pginas JSF yJSP (no-JSF) y, segn se pidan y/o se devuelvan una u otras, tendremos diferentes respuestasy/o peticiones:

Respuesta Faces: Una respuesta servlet que se gener mediante la ejecucin de la faseRenderizar la Respuesta del ciclo de vida de procesamiento de la respuesta.

Respuesta No-Faces: Una respuesta generada por el servlet en la que no se ha ejecutado la faseRenderizar la Respuesta. Un ejemplo es una pgina JSP que no incorporacomponentes JavaServer Faces.

Peticin Faces: Una peticin al servlet que fue enviada desde una Respuesta Facespreviamente generada. Un ejemplo es un formulario enviado desde uncomponente de interfaz de usuario JavaServer Faces, donde la URI de lapeticin identifica el rbol de componentes JavaServer Faces para usar elprocesamiento de peticin.

Peticin No-Faces: Una peticin al servlet que fue enviada a un componente de aplicacin comoun servlet o una pgina JSP, en vez de directamente a un componenteJavaServer Faces.


22

La combinacin de estas peticiones y respuestas resulta en tres posibles escenarios delciclo de vida que pueden existir en una aplicacin JavaServer Faces:

O Escenario 1: Una peticin No-Faces genera una respuesta Faces: Un ejemplo de este escenario es cuando se pulsa un enlace de una pgina HTML que

abre una pgina que contiene componentes JavaServer Faces. Para construir una respuestaFaces desde una peticin No-Faces, una aplicacin debe proporcionar un mapeo FacesServleten la URL de la pgina que contiene componentes JavaServer Faces. FacesServlet aceptapeticiones entrantes y pasa a la implementacin del ciclo de vida para su procesamiento.

O Escenario 2: Una peticin Faces genera una respuesta no-Faces: Algunas veces una aplicacin JavaServer Faces podra necesitar redirigir la salida a un

recurso diferente de la aplicacin Web (p.ej. una imagen sencilla) o generar una respuesta queno contiene componentes JavaServer Faces. En estas situaciones, el desarrollador debesaltarse la fase de renderizado (renderizar la respuesta) llamando aFacesContext.responseComplete. FacesContext contiene toda la informacin asociada conuna peticin Faces particular. Este mtodo se puede invocar durante las fases aplicar valoresde respuesta, procesar validaciones o actualizar los valores del modelo.

O Escenario 3: Una peticin Faces genera una respuesta Faces: Es el escenario ms comn en el ciclo de vida de una aplicacin JavaServer Faces.

Este escenario implica componentes JavaServer Faces enviando una peticin a una aplicacinJavaServer Faces utilizando el FacesServlet. Como la peticin ha sido manejada por laimplementacin JavaServer Faces, la aplicacin no necesita pasos adicionales para generar larespuesta. Todos los oyentes, validadores y conversores sern invocados automticamentedurante la fase apropiada del ciclo de vida estndar, como se describe en la siguiente seccin.

3.5.2 Ciclo de Vida Estndar de Procesamiento de PeticionesLa mayora de los usuarios de la tecnologa JavaServer Faces no necesitarn conocer a

fondo el ciclo de vida de procesamiento de una peticin. Sin embargo, conociendo lo que latecnologa JavaServer Faces realiza para procesar una pgina, un desarrollador deaplicaciones JavaServer Faces no necesitar preocuparse de los problemas de renderizadoasociados con otras tecnologas UI. Un ejemplo sera el cambio de estado de los componentesindividuales: si la seleccin de un componente, como por ejemplo una casilla de verificacin(checkbox ) afecta a la apariencia de otro componente de la pgina, la tecnologa JavaServerFaces manejar este evento de la forma apropiada y no permitir que se dibuje la pgina sinreflejar este cambio.

La figura 3.2 ilustra los pasos del ciclo de vida peticin-respuesta JavaServer Faces.


23

3.5.2.1 Reconstituir el rbol de componentesCuando se hace una peticin de una pgina JavaServer Faces, o cuando se produce un

evento como pulsar sobre un enlace o un botn, el sistema JavaServer Faces entra en el estadoreconstituir el rbol de componentes.

Durante esta fase, la implementacin JavaServer Faces construye el rbol decomponentes de la pgina JavaServer Faces, conecta los manejadores de eventos y losvalidadores y graba el estado en el FacesContext.

3.5.2.2 Aplicar valores de la peticinUna vez construido el rbol de componentes, cada componente del rbol extrae su

nuevo valor desde los parmetros de la peticin con su mtodo decode. A continuacin, elvalor se almacena localmente en el componente. Si la conversin del valor falla , se genera unmensaje de error asociado con el componente y se pone en la cola de FacesContext. Estemensaje se mostrar durante la fase renderizar la respuesta, junto con cualquier error devalidacin resultante de la fase procesar validaciones.

Si durante esta fase se produce algn evento, la implementacin JavaServer Facescomunica estos eventos a los oyentes interesados.

En este punto, si la aplicacin necesita redirigirse a un recurso de aplicacin Webdiferente o generar una respuesta que no contenga componentes JavaServer Faces, puedellamar a FacesContext.responseComplete.

En este momento, se han puesto los nuevos valores en los componentes y los mensajesy eventos se han puesto en sus colas.

3.5.2.3 Procesar validacionesDurante esta fase, el sistema JavaServer Faces procesa todas las validaciones

registradas con los componentes del rbol. Examina los atributos del componenteespecificados por las reglas de validacin y evala las reglas con los valores de dichos

Figura 3.2 Ciclo de vida peticin-respuesta de una pgina JSF


24

atributos. Si un valor incumple una regla, la implementacin JavaServer Faces aade unmensaje de error al FacesContext y el ciclo de vida avanza directamente hasta la faserenderizar las respuesta para que la pgina sea dibujada de nuevo incluyendo los mensajes deerror. Si haba errores de conversin de la fase aplicar los valores a la peticin, tambin semostrarn.

3.5.2.4 Actualizar los valores del modeloUna vez que la implementacin JavaServer Faces determina que el dato es vlido,

puede pasar por el rbol de componentes y actualizar los valores del modelo con los nuevosvalores pasados en la peticin. Slo se actualizarn los componentes que tengan expresionesvalueRef. Si el dato local no se puede convertir a los tipos especificados por los atributos delobjeto del modelo, el ciclo de vida avanza directamente a la fase renderizar las respuesta,durante la que se dibujar de nuevo la pgina mostrando los errores, similar a lo que sucedecon los errores de validacin.

3.5.2.5 Invocar AplicacinDurante esta fase, la implementacin JavaServer Faces maneja cualquier evento a

nivel de aplicacin, como enviar un formulario o enlazar a otra pgina. En este momento, si la aplicacin necesita redirigirse a un recurso de aplicacin web

diferente o generar una respuesta que no contenga componentes JavaServer Faces, puedellamar a FacesContext.responseComplete.

Posteriormente, la implementacin JavaServer Faces configura el rbol decomponentes de la respuesta a esa nueva pgina y, por ltimo, transfiere el control a la faseRenderizar la Respuesta.

3.5.2.6 Renderizar la RespuestaDurante esta fase, la implementacin JavaServer Faces invoca los atributos de

codificacin de los componentes y dibuja los componentes del rbol de componentes grabadoen el FacesContext.

Si se encontraron errores durante las fases aplicar los valores a la peticin, procesarvalidaciones o actualizar los valores del modelo, se dibujar la pgina original. Si las pginascontienen etiquetas output_errors, cualquier mensaje de error que haya en la cola se mostraren la pgina.

Se pueden aadir nuevos componentes en el rbol si la aplicacin incluyerenderizadores personalizados, que definen cmo renderizar un componente. Despus de quese haya renderizado el contenido del rbol, ste se graba para que las siguientes peticionespuedan acceder a l y est disponible para la fase reconstituir el rbol de componentes de lassiguientes llamadas.

3.6 Una sencilla aplicacin JavaServer Faces en detalleVamos a comentar los pasos para construir la aplicacin vista en el primer captulo y

luego se comentar en detalle.

1. La estructura inicial de directorios debe ser la siguiente (en cualquier carpeta detrabajo):


25

ejemploBasicoindex.htmlindex.jsphola.jsp

WEB-INF/faces-config.xmlweb.xml

classes/UsuarioBean.java

2. Debe compilarse el archivo UsuarioBean.java para generar UsuarioBean.class.una vez generado lo coloca en la carpeta /classes, en cuanto al fichero .java lo puede dejar enla misma carpeta o crear una propia, por ejemplo /src que recoja sus ficheros fuentes, es decir:


src/UsuarioBean.java

classes/UsuarioBean.class

3. Debe crearse la carpeta lib dentro de WEB-INF y dentro de sta, deben copiarse lasbibliotecas necesarias, representadas por los siguientes ficheros (la ubicacin original de stosdepender de donde haya instalado la implementacin JSF y Tomcat):

jsf-1_1/lib/jsf-api.jarjsf-1_1/lib/jsf-impl.jarjsf-1_1/lib/commons-digester.jarjsf-1_1/lib/commons-beanutils.jarjsf-1_1/lib/commons-collections.jarjsf-1_1/lib/commons-logging.jartomcat 5.5/webapps/jsp-examples/WEB-INF/lib/jstl.jartomcat 5.5/webapps/jsp-examples/WEB-INF/lib/standard.jar

4. Por ltimo debe construirse el fichero .war (Web Archive). Para ello, dentro deldirectorio /ejempoBasico, debe ejecutar:

jar cvf ejemploBasico.war .y el fichero ejemploBasico.war generado hay que copiarlo al directorio:

c:\ArchivosDePrograma\Tomcat5.5lo que producir el despliegue inmediato de la aplicacin en el servidor Tomcat.

5. Por ltimo, slo queda probar que todo funciona bien. Desde su navegador, acceda ala direccin:

http://localhost:8080/ejemploBasico y si todo es correcto, la aplicacin se iniciar correctamente.


26

Por otro lado, para desplegar la aplicacin existe una alternativa en caso de no quererusar archivos .war: se puede copiar directamente la carpeta ejemploBasico, dentro de

c:\ArchivosDePrograma\Tomcat5.5\webappsy acceder a la aplicacin mediante la direccin

http://localhost:8080/ejemploBasico/index.faces

3.7 Beans y pginas JSF

Las aplicaciones web correctamente planificadas tienen dos partes: la parte depresentacin y la lgica de negocio.

La parte de presentacin afecta a la apariencia de la aplicacin, y en el contexto de unaaplicacin basada en navegadores, la apariencia esta determinada por las etiquetas HTML,esto comprende marcos, tipos de caracteres, imgenes, etc. La lgica de negocio seimplementa en Java y determina el comportamiento de la aplicacin.

En el contexto de JSF, la lgica de negocio est contenida en los beans, y el diseoesta contenido en las paginas web Empezaremos nuestro estudio por los beans.

3.7.1 BeansUn bean es una clase Java que contiene atributos. Un atributo es un valor identificado

por un nombre, pertenece a un tipo determinado y puede ser ledo y/o escrito slo a travs demtodos a tal efecto llamados mtodos getter y setter:

Para conocer el valor de un campo llamado xxx se utiliza la funcin getXxx (oisXxx si es de tipo boolean)

Para asignarle valor a un campo llamado xxx se usa la funcin setXxxPor ejemplo, UsuarioBean.java (Figura 3.3) tiene dos atributos, nombre y password,

ambos de la clase String:

En una aplicacin JSF, se deben usar beans para todos los datos accedidos por unapgina. Los beans son los conductos entre la interfaz de usuario y la trastienda de laaplicacin.

Junto a las reglas de navegacin del fichero faces-cofig.xml:

public class UsuarioBean { private String nombre; private String password; // ATRIBUTO: nombre public String getNombre() { return nombre; } public void setNombre(String nuevoValor) { nombre = nuevoValor; } // ATRIBUTO: password public String getPassword() { return password; } public void setPassword(String nuevoValor) { password = nuevoValor; } }Figura 3.3 Implementacin de UsuarioBean.java


27



nos encontramos con las definiciones de los beans. As, puede usar el nombre del beanusuario, en los atributos de los componentes de la pgina. Por ejemplo, index.jsp contiene laetiqueta:

La etiqueta managed-bean-class, simplemente especifica la clase a que pertenece el

bean, en nuestro caso UsuarioBean.class.

Y finalmente tenemos la etiqueta managed-bean-scope, que en nuestro caso tiene elvalor session, con lo que estamos indicando que el bean estar disponible para un clientedurante todo el tiempo que est conectado al sitio web y, por tanto, mantendr su valor atravs de mltiples pginas, es decir, se esta indicando en mbito del bean.

3.7.2 Paginas JSFSe necesita una pagina JSF por cada pantalla de presentacin. Dependiendo de lo que

se quiera hacer, las pginas tpicas son .jsp o .jsf.Siguiendo con nuestro ejemplo, la pgina index.jsp comienza con las declaraciones de

las etiquetas, en la que se aprecia la importacin de la librera de etiquetas core, se usan, entreotras aplicaciones, para manejo de eventos, atributos, conversin de datos, validadores,recursos y definicin de la pgina, las cuales usan el prefijo f, por ejemplo f:view, y la librerade etiquetas html_basic, su utilizacin es bsicamente para la construccin de formularios ydems elementos de interfaz de usuario, que usa el prefijo h, por ejemplo h:form:

A continuacin, los valores de los campos de entrada son volcados del atributo delbean con el nombre usuario:

en el momento de presentar la pgina, el mtodo getNombre es invocado para obtener

el valor del atributo nombre. Y cuando la pgina se acepta pulsando el botn Aceptar, elmtodo setNombre es invocado estableciendo el valor de usuario que ha entrado.


28

La etiqueta h:commandButton, ubicada en el fichero index.jsp:

Fichero: ejemploBasico/index.jsp

Una simple aplicacion JavaServer Faces Por favor, introduzca su nombre y password. Nombre: Password:

tiene un atributo denominado action, cuyo valor (un String) es usado para activar unaregla de navegacin, la cual est recogida en el fichero faces-config.xml, de manera que alproducirse esta accin al pulsar el botn, navegaremos a una nueva pgina

En cuanto a la pginas hola.jsp:

Una simple aplicacion JavaServer Faces Bienvenido a JavaServer Faces, !

En este caso, slo cabe mencionar la etiqueta h:outputText , la cual muestra elnombre del usuario que entr, almacenada previamente en el bean.


29

3.8 NavegacinOtra 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 paraenviar un formulario.

El desarrollador de la aplicacin define la navegacin por la aplicacin mediante elfichero de configuracin, faces-config.xml, el mismo fichero en el que se declararon losmanaged beans .

Cada regla de navegacin define cmo ir de una pgina (especificada en el elementofrom-view-id) a otras pginas de la aplicacin. El elemento navigation-rule puede contenercualquier nmero de elemento navigation-case, cada uno de los cuales define la pgina que seabrir luego (definida por to-view-id) basndose en una salida lgica (definida mediantefrom-outcome).

La salida se puede definir mediante el atributo action del componente UICommandque enva el formulario.

Ahora vamos con las reglas de navegacin, de esta manera, indicamos a que pgina irtras otra pgina. En este caso la navegacin es simple, tras pulsar el botn Aceptar,navegamos desde index.jsp hasta hola.jsp. Estas reglas de navegacin se especifican en elfichero faces-config.xml, como se muestra a continuacin:



El valor de from-outcome (login), indica la accin que se debe producir en la pginafrom-view-id (index.jsp) para navegar al destino representado por to-view-id (hola.jsp). Laaccin es un mero nombrecito que se da a los botones de un formulario; en nuestro caso, lapgina index.jsp inclua la etiqueta:

3.9 Configuracin Servlet

Una aplicacin JSF requiere un servlet, llamado FacesServlet, el cual actual comocontrolador.


30

Esta configuracin esta recogida en el fichero web.xml, el cual se muestra acontinuacin, y afortunadamente, se puede usar el mismo fichero para mltiples aplicacionesJSF. De esta manera se establece el nico servlet de nuestra aplicacin es el propio delframework JSF.

Faces Servlet javax.faces.webapp.FacesServlet 1 Faces Servlet *.faces index.html

Lo importante aqu es el mapeo del servlet. Todas las pginas JSF son procesadas porun servlet especial que forma parte del cdigo de implementacin de JSF.

Para asegurarnos de que el servlet est correctamente activado cuando una pagina JSFes demandada, la URL posee un formato especial. En nuestra configuracin, es el formato.faces. Por ejemplo, en su navegador no se puede poner simplemente :

http://localhost:8080/login/index.jsp sino que la direccin ha de ser:http://localhost:8080/login/index.faces

El contenedor servlet usa el la regla del mapeado servlet para activar el servlet JSF,quien elimina el sufijo faces y carga la pagina index.jsp

Esto se hace as para que el framework JSF, a travs de su servlet principal tome elcontrol. Si no se hiciera de esta manera, el servidor de aplicaciones mostrara una simplepgina JSP como tal, y la compilacin de dicha pgina, fuera del marco JSF, provocaraerrores.


31

Capitulo 4Managed Beans, navegacin y etiquetas bsicas JSF

4.1 Managed BeansUn apartado importante en el diseo de aplicaciones web es la separacin de la

presentacin y la lgica de negocio. JSF usa beans para lograr esta separacin. Las pginasJSF se refieren a las propiedades del bean, y la lgica de programa esta contenida en el cdigode implementacin del bean. Los beans son fundamentales para programar JSF.

4.1.1 ConceptoSegn la especificacin de los JavaBeans, un Java bean es un componente

reutilizable del software, que puede ser manipulado. Esta es una definicin bastanteimprecisa y, ciertamente, como se ver en este captulo, los beans sirven para una granvariedad de propsitos.

A primera vista, un bean parece ser similar a cualquier otro objeto. Sin embargo, losbeans se manejan de una forma ms concreta. Cualquier objeto se crea y se manipula dentrode un programa Java llamando a los constructores e invocando a los mtodos. Sin embargo,los beans pueden ser configurados y manipulados sin programar, a travs de entornos detrabajo (frameworks) o entornos de desarrollo integrados (IDE-Integrated DevelopmentEnvironment), que los utilizan mediante tcnicas de introspeccin.

En el contexto de JavaServer Faces, los beans no se utilizan para nada relacionado conla interfaz de usuario: los beans se utilizan cuando se necesita conectar las clases Java conpginas web o archivos de configuracin.

Una vez que un bean ha sido definido, puede ser accedido a travs de etiquetas. JSF.Por ejemplo, la siguiente etiqueta lee y actualiza el atributo password del bean usuario:

4.1.1.1 AtributosLas caractersticas ms importantes de un bean son los atributos que posee, tambin

llamados propiedades. Cada uno de stos tiene: Un nombre. Un tipo. Mtodos para obtener y establecer los valores de atributo.La especificacin de los JavaBeans impone una sola exigencia en una clase bean: debe

tener un constructor predeterminado, sin parmetros. Adems, para que los entornos detrabajo o de desarrollo puedan acceder a sus atributos mediante introspeccin, una clase beandebe declarar mtodos get y/o set para cada uno de ellos, o debe definir descriptoresutilizando la clave java.beans.BeanDescriptor.

Consideremos los dos siguientes mtodos:T getCampo1()void setCampo1(T nuevoValor)stos se corresponden con funciones que permiten leer y escribir en un campo de

nombre campo1 y tipo T. Si slo tuvisemos el primer mtodo, estaramos tratando con un


32

atributo de solo lectura, y si tuvisemos slo el segundo mtodo, estaramos ante uno de soloescritura. Ntese que el nombre del atributo forma parte del nombre del mtodo que sigue alprefijo get o set.

Un mtodo get... no posee parmetros mientras que un mtodo set... posee unparmetro y no devuelve ningn valor. Por supuesto, una clase bean puede tener otrosmtodos adems de los getter y setter.

En el caso de que un atributo sea de tipo boolean, podemos elegir entre dos prefijos enel mtodo de lectura: get o is, es decir:

boolean isCampo1()boolean getCampo1()

4.1.1.2 Expresiones para valores inmediatos y directosMuchos componentes de interfaz de usuario JSF tienen un valor de atributo que

permite especificar ya sea un valor inmediato o un valor directo obtenido del atributo de unbean. Por ejemplo, se puede especificar un valor inmediato de la forma:

o se puede especificar un valor directo:

4.1.1.3 Agrupacin de mensajes: Cuando se implementa una aplicacin web, es una buena idea coleccionar todas las

cadenas de mensajes en un mismo sitio. Este proceso da facilidades para conservar mensajesconsistentes y cruciales, y facilita las traducciones a otros idiomas.

JSF simplifica este proceso mediante los ficheros de propiedades. Primero, hay queaglutinar todos los literales de tip String en un archivo de extensin .properties:

saludo=Bienvenido a JSF!pregunta=Escoja un nmero, por favor.despedida=Que tenga un buen da.Luego se guarda este fichero junto a los ficheros de clases .java, por ejemplo en:

WEB-INF/classes/mensajes.propertiesaunque puede elegirse cualquier ruta y nombre de archivo, siempre que sea de

extensin .properties.A continuacin se aade la etiqueta f:loadBundle a tu pagina JSF, tal que as:

Y por ltimo se puede usar una expresin de valor directo para acceder a la cadena del

mensaje:

4.1.2 mbitos de los beans

Para comodidad del programador aplicaciones web, un contenedor de servletssuministra diferentes mbitos, de peticin, de sesin y de aplicacin.

Estos mbitos normalmente mantienen beans y otros objetos que necesitan estardisponibles en diferentes componentes de una aplicacin web.


33

O mbito de tipo peticin:Es el de vida ms corta. Empieza cuando una peticin HTTP comienza a tramitarse y

acaba cuando la respuesta se enva al cliente.Por ejemplo, el la siguiente lnea de cdigo:

la etiqueta f:loadBundle hace que la variable bundle solo exista mientras dura lapeticin. Un objeto debe tener un mbito de este tipo slo si lo que se quiere es reenviarlo aotra fase de procesado.

O mbito de tipo sesin: El navegador enva una peticin al servidor, el servidor devuelve una respuesta, y

entonces ni el navegador ni el servidor tiene cualquier obligacin para conservar cualquiermemoria de la transaccin. Este acomodamiento simple marcha bien para recuperarinformacin bsica, pero es poco satisfactorio para aplicaciones del lado del servidor. Porejemplo, en una aplicacin de un carrito compras, necesita al servidor para recordar loscontenidos del carrito de compras.

Por esa razn, los contenedores servlet amplan el protocolo de HTTP para seguir lapista a una sesin, esto se consigue repitiendo conexiones para el mismo cliente. Hay diversosmtodos para el rastreo de sesin . El mtodo ms simple es usar cookies: La pareja nombre/valor la enva el servidor a un cliente, esperando que regresen en subsiguientes peticiones.

Mientras el cliente no desactive las cookies, el servidor recibe un identificador desesin por cada peticin siguiente. Los servidores de aplicacin usan estrategias de retirada,algo semejante como al URL rewriting, para tratar con esos clientes que no devuelvencookies. El URL rewriting aade un identificador de sesin a la URL, con lo cual se parecealgo a esto:

http://ejemploBasico/index.jsp;jsessionid=64C28D1FC...D28 La sesin el rastreo con cookies es completamente transparente al desarrollador web,

y las etiquetas estndar JSF automticamente reescriben URL si un cliente no usa cookies.El mbito de sesin permanece desde que la sesin es establecida hasta que esta

termina. Una sesin termina si la aplicacin web invoca el mtodo invalidate en el objetoHttpSession o si su tiempo expira.

Las aplicaciones Web tpicamente colocan la mayor parte de sus bean dentro de unmbito de sesin.

Por ejemplo, un bean UsuarioBean puede contener informacin acerca de usuarios queson accesibles a lo largo de la sesin entera. Un bean CarritoCompraBean puede irse llenandogradualmente durante las demandas que levantan una sesin.

O mbito de tipo aplicacin:Persiste durante toda la aplicacin web. Este mbito compartido entre todas las

peticiones y sesiones.


34

Existe la posibilidad de anidar beans, para conseguir objetivos mas complicados.Considere el siguiente bean como ejemplo:

examen ExamenBackingBean session

problemas

ProblemasBean #{problema1} #{problema2} #{problema3} #{problema4} #{problema5}

Ahora definimos objetos beans con nombres desde problema1 hasta problema5, talque as:

problema1 ProblemaBean none

sequence

java.lang.Integer 3 1 4

Cuando el bean examen se referencia por vez primera, se dispara automticamente la

creacin de los beans problema1 .. problema5, sin que haya que preocuparse por el orden enel cual se han especificado. Note que estos beans ( problema1 .. problema5 ) no tienenningn mbito (none), puesto que nunca son demandados desde una pgina JSP.

Cuando junte mbitos de beans, hay que asegurarse de que son compatibles, tal ycomo se muestra en el siguiente cuadro:


35

4.1.3 Configuracin de un bean a travs de XMLVamos a describir como configurar un bean mediante un archivo de configuracin.

Los detalles son mas bien tcnicos. El archivo de configuracin ms comnmente usado esWEB-INF/faces-config.xml.

Esta configuracin comprende las caractersticas bsicas del propio bean, y los valoresque se pueden establecer para los atributos del bean, ya sean valores simples, o diversosvalores para un mismo atributo del bean.

Un bean se define con una etiqueta managed-bean al comienzo del ficherofaces-config.xml. Bsicamente se debe especificar nombre del bean con la etiqueta, clase donde est recogida dicho bean, con la etiqueta y mbito del bean con la etiqueta , por ejemplo, paradefinir un bean llamado usuario, que est en la clase UsuarioBean y con un mbito desesin, sera:


El mbito puede ser de sesin, de aplicacin, de peticin o ninguno (session,application, request, o none).

O Establecer valores de atributos:

Puede inicializar cualquier variable de un managed bean. Como mnimo, deberindicar el nombre del atributo, y un valor. Dicho valor puede ser nulo, un String o unaexpresion directa. Cada atributo es inicializado con el elemento (anidado dentro de ), el nombre del atributo se inicializa con la directiva

Cuando defina un bean de mbito... Puede usar otro mbito de tipo...

none none

application none, application

session none, application, session

request none, application, session, request

Cuadro 4.1 Compatibilidades de mbitos de beans


36

, y para los valores est el elemento o para valoersnulos.

Echemos un vistazo al siguiente ejemplo:


nombre yo

password rojo70

Observe el en el ejemplo que est declarado un bean llamado usuario, contenido enuna clase UsuarioBean, Este bean, posee un atributo nombre y que se ha inicalizado con elvalor yo, as el atributo nombrado, password, se ha inicializado al valor rojo70. Parainicializar un atributo a un valor nulo, debe usarse la etiqueta , por ejemplo:

password

O Inicializar listas y mapas:

En el caso de tenga un atributo de un bean, con un array o una lista de valores, puedeusar el elemento , el cual se anida dentro del elemento

Veamos un ejemplo para un atributo llamado nombres con una lista de valores, paraapreciar la sintaxis:

nombres

Manuel Carlos Rocio Maria Luis


37

Una lista puede contener la etiqueta para un valor individual y etiquetasnull-value, para valores nulos. Por defecto, los valores de una lista deben ser cadenas decaracteres (String), pero si quiere utilizar otro tipo, tiene la etiqueta value-class, que esopcional, por ejemplo:

numero

java.lang.Integer 3 1 4 1 5

Un mapa es ms complejo. Al igual que las listas, se usa para atributos de beans queposees varios valores, pero en este caso, cada valor se identifica con una clave y con el propiovalor. El identificativo para mapas, es , dentro se anidan, una clave y unvalor (o para valores nulos). Por ejemplo:

nombres

java.lang.Integer

1 Manuel Ruiz

3 Cristina Lopez

16 Eduardo Robles

26 Ana Muoz


38

Al igual que en las listas, podemos establecer el tipo de los valores de las claves y losvalores con las etiquetas key-class y value-class (de nuevo, por defecto es java.lang.String).Vemoslo con un ejemplo:

numeros

java.lang.Integer

1

Manuel Ruiz

3 Cristina Lopez

16 Eduardo Robles

26 Ana Muoz

4.2 Navegacin

Las aplicaciones JavaServer Faces usan las reglas de navegacin para controlar lasnavegacin entre pginas. Cada regla de navegacin especifica cmo ir de una pgina a lasdems dentro de la aplicacin. En la arquitectura MVC, la navegacin de la pgina es una delas responsabilidades del controlador. Las reglas de navegacin de las aplicaciones JSF estncontenidas en el archivo faces-config.xml bajo el directorio WEB-INF.

4.2.1 ConceptoEn este apartado veremos cmo configurar la navegacin de su aplicacin web, de

manera que se pase de una pgina a otra cuando se pulsa un botn o se realiza cualquier otraaccin por parte del usuario.

Para empezar, existen dos tipos diferenciados de navegacin: navegacin esttica ydinmica.

4.2.2 Navegacin estticaConsidere el caso en el que un usuario rellena un formulario de una pgina

web. El usuario puede escribir en campos del texto, puede hacer clic sobre enlaces, pulsarbotones o seleccionar elementos de una lista, entre otras muchas cosas.


39

Todas estas acciones ocurren dentro del navegador del cliente. Cuando, por ejemplo,el usuario pulsa un botn, enva los datos del formulario y stos son gestionados por elservidor.

Al mismo tiempo, el servidor JSF analiza la entrada del usuario y debe decidir a quepgina ir para dar la respuesta.

En una aplicacin web simple, la navegacin es esttica. Es decir, pulsar sobre unbotn suele redirigir al navegador a una misma pgina para dar la respuesta. En este caso,simplemente, a cada botn se le da un valor para su atributo de accin (action), por ejemplo:

Esta accin desencadenante, debe concordar con la etiqueta outcome del fichero

faces-config.xml, dentro de sus reglas de navegacin.En esta simple regla de navegacin, se indica que tras la accin login, se navegar a la

pgina hola.jsp, si esta accin ocurre dentro de la pgina index.jsp.Tenga cuidado con no olvidar la /, en la lineas from-view-id y to-view-idPuede mezclar reglas de navegacin con el mismo from-view-id, por ejemplo:


signup /adios.jsp

4.2.3 Navegacin dinmicaEn la mayora de aplicaciones web, la navegacin no es esttica. El flujo de la pgina

no depende de qu botn se pulsa, sino que tambin depende de los datos que el clienteintroduce en un formulario. Por ejemplo, una pgina de entrada al sistema puede tener dosresultados: El xito o el fracaso.

El resultado depende de una computacin, sea cual sea el nombre y la contrasea eslegtima. Para implementar una navegacin dinmica, el botn de aceptar debe tener unmtodo referencia, por ejemplo:

En este caso, loginControlador, referencia un bean, y ste debe tener un mtododenominado verificarUsuario.

Un mtodo de referencia, en un atributo de accin, no tiene parmetros de entrada ydevuelve una cadena de caracteres, que sera una usada para activar una regla de navegacin,por ejemplo, el mtodo verificarUsuario debera parecerse a algo as:


40

Figura 4.1 Diagrama de sintaxis de los elementos denavegacin

String verificarUsuario() { if (...) return "exito"; else return "fracaso";}

El mtodo devuelve un String, "xito" o "fracaso". El manejador denavegacin usa el string devuelto para buscar una regla de navegacin que haga juego.

De manera que en las reglas de navegacin, podra encontrarse algo as:

exito /exito.jsp

fracaso /fracaso.jsp

4.2.4 Navegacin avanzadaEn este apartado, se describen las reglas restantes para los elementos de navegacin

que pueden aparecer en el archivo de faces-config.xml. En la Figura 4.1 se puede ver eldiagrama de sintaxis de etiquetas vlidas.

O Redireccin


41

Si se aade una etiqueta redirect, despus de to-view-id, el contenedor de JSPtermina la peticin actual y enva una redireccin HTTP al cliente.

Con se le dice a JSF que enve una redireccion HTTP al usuario de unavista nueva. En el mundo de JSP, esto quiere decir que el usuario ve el URL de la pgina quel actualmente mira, en contra de la direccin de la pgina previa .

Por ejemplo:

exito /exito.jsp

La respuesta redireccionada dice al cliente que URL usar para la siguiente pgina. Sin redireccin, la direccin original (localhost:8080/ejemplo/index.faces) es la misma

cuando el usuario se muda de la pgina index.jsp a exito.jsp. Con redireccin, el navegadorestablece la direccin nueva (localhost:8080/ejemplo/exito.faces).

O ComodinesSe pueden usar los comodines, en las etiquetas from-view-id de las reglas de

navegacin; por ejemplo:

/aplicacion/* ...

Esta regla se aplicar a todas aquellas pginas que empiecen con el prefijo aplicacion.Solo se permite un *, y debe estar al final de la cadena del from-view-id.O Etiqueta from-actionJunto con la etiqueta from-outcome, est tambin la etiqueta from-accin. Esto

puede ser til si se tienen dos acciones separadas con la misma cadena de accin, o dosmtodos de referencia de accin que devuelven la misma cadena. Por ejemplo, suponga quetiene dos mtodos, accionRespuesta y nuevoExamen, y ambos devuelven la misma cadena,repetir, pues, para diferenciar ambos casos de navegacin, se usa el elemento from-action:

#{examen.accionRespuesta}

repetir /repetir.jsp

#{examen.nuevoExamen}

repetir /idex.jsp


42

4.3 Etiquetas bsicasComponentes de interfaz de usuarioLos componentes UI JavaServer Faces son elementos configurables y reutilizables que

componen el interface de usuario de las aplicaciones JavaServer Faces. Un componente puedeser simple, como un botn, o compuesto, como una tabla, que puede estar compuesta porvarios componentes.

La tecnologa JavaServer Faces proporciona una arquitectura de componentes rica yflexible que incluye:

Un conjunto de clases UIComponent para especificar el estado ycomportamiento de componentes UI.

Un modelo de renderizado que define cmo renderizar los componentes dediferentes formas.

Un modelo de eventos y oyentes que define cmo manejar los eventos de loscomponentes.

Un modelo de conversin que define cmo conectar conversores de datos a uncomponente.

Un modelo de validacin que define cmo registrar validadores con uncomponente

La tecnologa JavaServer Faces proporciona un conjunto de clases de componentes UI,que especifican toda la funcionalidad del componente, cmo mantener su estado, manteneruna referencia a objetos del modelo, y dirigir el manejo de eventos y el renderizado para unconjunto de componentes estndar.

Estas clases son completamente extensibles, lo que significa que podemos extenderlaspara crear nuestros propios componentes personalizados.

Todas las clases de componentes UI de JavaServer Faces descienden de la claseUIComponentBase, que define el estado y el comportamiento por defecto de unUIComponent.

El conjunto de clases de componentes UI incluido en la ltima versin de JavaServerFaces es:

UICommand: Representa un control que dispara actions cuando se activa. UIForm: Encapsula un grupo de controles que envan datos de la aplicacin.

Este componente es anlogo a la etiqueta form de HTML. UIGraphic: Muestra una imagen. UIInput: Toma datos de entrada del usuario. Esta clase es una subclase de

UIOutput. UIOutput: Muestra la salida de datos en un pgina. UIPanel: Muestra una tabla.. UISelectItem: Representa un slo tem de un conjunto de tems. UISelectItems: Representa un conjunto completo de tems.


43

UISelectBoolean: Permite a un usuario seleccionar un valor booleano en uncontrol, selececcionndolo o deseleccionndolo. Esta clase es una subclase deUIInput.

UISelectMany: Permite al usuario seleccionar varios tems de un grupo detems. Esta clase es una subclase de UIInput.

UISelectOne: Permite al usuario seleccionar un tem de un grupo de tems. Estaclase es una subclase de UIInput.

La mayora de los autores de pginas y de los desarrolladores de aplicaciones notendrn que utilizar estas clases directamente. En su lugar, incluirn los componentes en unapgina usando la etiqueta correspondiente al componente. La mayora de estos componentesse pueden renderizar de formas diferentes. Por ejemplo, un UICommand se puede renderizarcomo un botn o como un hiperenlace.

La implementacin de referencia de JavaServer Faces proporciona una librera deetiquetas personalizadas para renderizar componentes en HTML. A continuacin se muestraun lista de etiquetas bsicas, cuyo contenido y atributos se explicar en detalle en el siguientecaptulo:

UIForm

form


44

Muestra una imagen

UIInput

inputText

Permite al usuario introducir un string

inputSecret

Permite al usuario introducir un stringsin que aparezca el string real en elcampo

inputTextArea

Permite al usuario introducir un textomulti-lneas


45

UIOutput

outputText

Muestra una lnea de texto

outputLink

Muestra un enlace

UISelectBoolean

selectBooleanCheckbox

Permite al usuario cambiar el valor deuna eleccin booleana

UISelectMany

selectManyCheckbox


46

Muestra un conjunto decheckbox, en los que elusuario puede seleccionarvarios

selectManyListbox

Permite al usuario seleccionarvarios elementos de una listade elementos.

selectManyMenu

Permite al usuario seleccionarvarios elementos de una listade elementos.

UISelectOne


47

selectOneRadio

Permite al usuario seleccionarun elemento de un grupo deelementos

selectOneMenu

Permite al usuario seleccionarun elemento de un grupo deelementos

selectOneListbox

Permite al usuario seleccionarun elemento de una lista deelementos


48

UIPanel

panelGrid y panelGroup

Muestra una tabla, con variospaneles donde se recogendiversos componentes

4.4 Un ejemplo completo de etiquetas bsicas con JSF

Con este ejemplo prctico se intenta ilustrar el uso de las diversas etiquetas que sepueden utilizar en un formulario. El ejemplo consiste en un cuestionario donde se nos piderellenar cierta informacin. Una vez que se ha rellenado se aceptara el formulario medianteun botn, y navegaremos a una nueva pgina donde se muestran los datos introducidos, con lasalvedad de que se puede optar por ir a una pgina intermedia (navegacin dinmica) dondese puede opinar sobre el cuestionario. La apariencia del cuestionario es la siguiente:


49

El pagina que muestra los datos tiene el siguiente aspecto:


50

Y por ltimo, la pgina opcional para opinar sobre la aplicacin es:

La estructura de la aplicacin ser la siguiente:

Cuestionarioindex.htmlindex.jspmostrarInformacion.jsptest.jspduke.gifpaloma.gifestilos.css (Hoja de estilos)


classes/Cuetionario.class

src/ (Opcional)Cuetionario.java

lib/common-beanutils.jarcommon-collections.jarcommon-digester.jarcommon-logging.jarjsf-api.jarjsf-impl.jar


51

jstl.jarstandard.jar

Esta aplicacin parte de la pgina index.jsp, que muestra el cuestionario con lasdiversas etiquetas JSF, y cuyo cdigo se expone a continuacin:


52

Como caractersticas a destacar, tras la importacin de las librera core y html_basic,se hace uso de una hoja de estilo, mediante:

donde se indica que los estilos de letras que se utilizaran durante la aplicacin, serecogen en el fichero estilos.css, y cuyo contenido se muestra a continuacin:

body {

background-image: url(paloma.gif); }.enfasis { font-style: italic; font-size: 1.3em;}.colores1 { font-size: 1.5em; font-style: italic; color: Blue; background: Yellow;


53

}.colores2 { font-size: 0.8em; font-style: italic; color: Yellow; background: Blue;}

se ha declarado un fondo de imagen (paloma.gif), un tipo de letra con estilo itlica yun cierto tamao (enfasis) y dos tipos de letra mas con colores. De tal manera que se recurre aun tipo de letra de este fichero con el atributo styleClass como es el caso de las salida porpantalla del texto de bienvenida:

que usa el tipo de letra enfasis.

Todos los mensajes que aparecen por pantalla se han recogido en el dicheromensajes.properties, de manera que facilita la labor si se quieres mostrar la aplicacin enotro id

JSF

Documents

Transcript of JSF