JSF DEFINICIONES

Componentes de presentacin

ndice

1 Introduccin a JavaServer Faces.................................................................................. 3

1.1 Frameworks RIA basados en el servidor................................................................. 3

1.2 Caractersticas de JSF.............................................................................................. 7

1.3 Evolucin de JSF..................................................................................................... 8

1.4 El lenguaje de definicin de vistas JSF..................................................................13

1.5 Creando un primer proyecto JSF........................................................................... 22

1.6 Una aplicacin de ejemplo en detalle.................................................................... 25

2 Ejercicios sesin 1 - Introduccin a JSF.................................................................... 30

2.1 Creando nuestro proyecto con Maven (1 punto)....................................................30

2.2 Mini-aplicacin de ejemplo (1 punto)....................................................................30

2.3 Pantalla de login (1 punto).....................................................................................30

3 El MVC en JavaServer Faces.....................................................................................33

3.1 Modelo-Vista-Controlador.....................................................................................33

3.2 Expresiones EL...................................................................................................... 49

3.3 Componentes estndar de JSF............................................................................... 51

4 Ejercicios sesin 2 - MVC..........................................................................................68

4.1 Login de usuario (1 punto).....................................................................................68

4.2 Guardando el usuario recin logueado (1 punto)...................................................68

4.3 Logout del usuario................................................................................................. 69

5 El ciclo de vida de JSF .............................................................................................. 70

5.1 La arquitectura JSF................................................................................................ 70

5.2 Ciclo de vida.......................................................................................................... 71

5.3 Un programa de ejemplo........................................................................................73

5.4 Conversin de formatos entre la interfaz y los beans............................................ 81

5.5 Validacin.............................................................................................................. 84

5.6 Contexto asociado a la peticin............................................................................. 89

Copyright 2012-2013 Dept. Ciencia de la Computacin e IA All rights reserved.

5.7 rbol de componentes........................................................................................... 92

5.8 Ligando componentes a beans gestionados........................................................... 94

5.9 Gestin de eventos................................................................................................. 96

6 Ejercicios sesin 3 - Funcionamiento y arquitectura de JSF ...................................104

6.1 Conversores y validadores................................................................................... 104

7 Internacionalizacin. Menajes Flash. RichFaces: una librera de componentesprofesional.....................................................................................................................106

7.1 Mensajes e internacionalizacin.......................................................................... 106

7.2 Mensajes Flash.....................................................................................................109

7.3 Introduccin a RichFaces.....................................................................................109

7.4 Skins.....................................................................................................................111

7.5 Peticiones Ajax y ciclo de vida............................................................................111

7.6 Algunos ejemplos de componentes .....................................................................115

7.7 Referencias...........................................................................................................118

8 Ejercicios sesin 4 - Proyecto en RichFaces............................................................ 119

8.1 Internacionalizacin de la aplicacin (1 punto)................................................... 119

8.2 CRUD de tareas (2 puntos).................................................................................. 120


2Copyright 2012-2013 Dept. Ciencia de la Computacin e IA All rights reserved.

1. Introduccin a JavaServer Faces

1.1. Frameworks RIA basados en el servidor

Frente a las aplicaciones web tradicionales basadas en la navegacin entre distintaspginas, en los ltimos aos se han popularizado las aplicaciones web de una nicapgina que intentan simular las aplicaciones de escritorio. Son las denominadas RIA(Rich Internet Applications).

Google fue uno de los primeros promotores de este tipo de aplicaciones, con ejemploscomo Google Maps. Esta aplicacin web utiliza JavaScript de forma intensiva parainteractuar con el mapa o para seleccionar opciones (imprimir, enviar, etc.). Todas estasacciones se realizan en una nica pgina del navegador.

Un ejemplo de aplicacin RIA: Google Maps

En las aplicaciones tradicionales cada peticin al servidor hace que ste genere una nuevapgina HTML. En la parte izquierda de la siguiente figura se muestra este modelo.



En la parte derecha de la figura vemos el funcionamiento de las aplicaciones RIA. Sesiguen realizando peticiones HTTP al servidor, pero no es el navegador quin lo hacedirectamente, sino funciones JavaScript residentes en la pgina. Estas funciones envan lapeticin y los datos al servidor y ste devuelve los datos de respuesta en algn tipo deformato (texto, XML o JSON). Las funciones JavaScript en la pgina del navegadorformatean estos datos y los muestran en pantalla actualizando el rbol de componentesDOM. El servidor no genera una nueva pgina sino slo los datos. Este enfoque se hadenominado Ajax (Asynchronous JavaScript and XML).

Existen frameworks JavaScript muy populares, como jQuery, que facilitan la tarea dedefinir la interfaz de usuario de la aplicacin. Aun as, el mantenimiento y testeo de estecdigo se hace complicado. Hay muchos elementos implicados: la comunicacin con elservidor, las pginas HTML en las que est embebido y el propio cdigo JavaScript.Tambin se hace complicado reutilizar y compartir el cdigo JavaScript entre distintaspginas y desarrolladores.

Como alternativa a la codificacin en JavaScript aparecen los denominados frameworksRIA basados en el servidor, en los que los desarrolladores no escriben directamenteJavaScript, sino que utilizan componentes de alto nivel (paneles, mens desplegables,



http://www.adaptivepath.com/ideas/essays/archives/000385.phphttp://jquery.com/

combos, etc.) que el servidor inserta en las pginas resultantes. Este enfoque es el queutilizan frameworks populares como JSF (JavaServer Faces), GWT (Google WebToolkit) o ZK.

En este enfoque el desarrollador compone la interfaz de usuario utilizando un lenguaje decomponentes especfico. Esta definicin reside en el servidor en forma de pgina de texto.Cuando el servidor recibe una peticin realiza un procesamiento de esta pgina de texto ygenera otra que contiene todos los componentes de la interfaz en formato HTML yJavaScript y que se enva de vuelta al navegador.

En el caso de JSF 2 la definicin de la interfaz se realiza en forma de pginas XHTMLcon distintos tipos de etiquetas que veremos ms adelante. Estas pginas se denominanpginas JSF. La siguiente figura muestra el funcionamiento de JSF para generar unapgina por primera vez.

Generacin de una pgina JSF

El navegador realiza una peticin a una determinada URL en la que reside la pgina JSFque se quiere mostrar. En el servidor un servlet que llamamos motor de JSF recibe lapeticin y construye un rbol de componentes a partir de la pgina JSF que se solicita.Este rbol de componentes replica en forma de objetos Java la estructura de la pgina JSForiginal y representa la estructura de la pgina que se va a devolver al navegador. Porejemplo, si en la pgina JSF se define un componente de tipo men con la etiqueta

en el rbol de componentes se construir un objeto Java de la clase

javax.faces.component.html.HtmlSelectOneMenu



http://www.oracle.com/technetwork/java/javaee/javaserverfaces-139869.htmlhttp://code.google.com/intl/es-ES/webtoolkit/http://www.zkoss.org/

Una vez construido el rbol de componentes, se ejecuta cdigo Java en el servidor pararellenar los elementos del rbol con los datos de la aplicacin. Por ltimo, a partir delrbol de componentes se genera la pgina HTML que se enva al navegador.

Los componentes deben mostrar y recoger datos que se obtienen y se pasan a laaplicacin. Este proceso se denomina ligado de datos o data binding. En los frameworksbasados en el servidor el ligado de datos es sencillo porque la definicin de la interfaz deusuario y los datos residen en un mismo sitio. En el caso de JSF 2 la forma de ligar datoscon la interfaz es utilizando la anotacin @ManagedBean en una clase Java para definir loque se denomina como bean gestionado.

Una vez que la pgina se muestra en el navegador, el usuario interacta con ella (porejemplo, pulsando en un botn, escribiendo texto en un campo o pinchando en una opcinde un men desplegable). En este momento es cuando se utiliza el enfoque de Ajax. Loscomponentes contienen cdigo JavaScript que se encarga de gestionar la interaccin ypasar al servidor las peticiones especficas. Estas peticiones no tienen por qu generar unanueva pgina. Muchas veces es suficiente con actualizar algn elemento del DOM de lapgina actual, siguiendo un enfoque similar a Ajax. La siguiente figura describe elproceso de actualizacin de una pgina JSF.

Actualizacin de una pgina JSF

El servidor recoge la peticin, la procesa, recupera el rbol de componentes de la pgina ygenera unos datos en formato XML que devuelve al cliente. All el cdigo JavaScript losprocesa y actualiza el DOM de la pgina.

Como resumen, entre las ventajas del desarrollo basado en el servidor frente a lacodificacin directa en JavaScript destacamos:

Ms fcil de portar a distintos navegadores y plataformas (mviles, por ejemplo). Ms sencillo de utilizar: es muy fcil acceder a los objetos de negocio y de datos



desde la presentacin. Mayor robustez y seguridad. Mayor facilidad de mantener, probar y modificar.

1.2. Caractersticas de JSF

JSF es un framework MVC (Modelo-Vista-Controlador) basado en el API de Servlets queproporciona un conjunto de componentes en forma de etiquetas definidas en pginasXHTML mediante el framework Facelets. Facelets se define en la especificacin 2 de JSFcomo un elemento fundamental de JSF que proporciona caractersticas de plantillas y decreacin de componentes compuestos. Antes de la especificacin actual se utilizaba JSPpara componer las pginas JSF.

En la siguiente sesin explicaremos con ms profundidad las caractersticas MVC de JSF.Por ahora basta con adelantar que JSF utiliza las pginas Facelets como vista, objetosJavabean como modelos y mtodos de esos objetos como controladores. El servletFacesServlet realiza toda la tediosa tarea de procesar las peticiones HTTP, obtener losdatos de entrada, validarlos y convertirlos, colocarlos en los objetos del modelo, invocarlas acciones del controlador y renderizar la respuesta utilizando el rbol de componentes.

Entrando un poco ms en detalle, JSF proporciona las siguientes caractersticasdestacables:

Definicin de las interfaces de usuario mediante vistas que agrupan componentesgrficos.

Conexin de los componentes grficos con los datos de la aplicacin mediante losdenominados beans gestionados.

Conversin de datos y validacin automtica de la entrada del usuario. Navegacin entre vistas. Internacionalizacin A partir de la especificacin 2.0 un modelo estndar de comunicacin Ajax entre la

vista y el servidor.

Tal y como hemos comentado, JSF se ejecuta sobre la tecnologa de Servlets y norequiere ningn servicio adicional, por lo que para ejecutar aplicaciones JSF slonecesitamos un contenedor de servlets tipo Tomcat o Jetty.

Para entender el funcionamiento de JSF es interesante compararlo con JSP. Recordemosque una pgina JSP contiene cdigo HTML con etiquetas especiales y cdigo Java. Lapgina se procesa en una pasada de arriba a abajo y se convierte en un servlet. Loselementos JSP se procesan en el orden en que aparecen y se transforman en cdigo Javaque se incluye en el servlet. Una vez realizada la conversin, las peticiones de losusuarios a la pgina provocan la ejecucin del servlet.

En JSF el funcionamiento es distinto. Una pgina JSF tambin contiene etiquetasespeciales y cdigo HTML, pero su procesamiento es mucho ms complicado. La



diferencia fundamental con JSP es el resultado del procesamiento interno, en el servidor,de la pgina cuando se realiza la peticin. En JSP la pgina se procesa y se transforma enun servlet. En JSF, sin embargo, el resultado del procesamiento es un rbol decomponentes, objetos Java instanciados el servidor, que son los que posteriormente seencargan de generar el HTML.

Con un poco ms de detalle, cuando el usuario realiza una peticin a la pgina JSF serealizan las siguientes acciones en orden:

(1) Se procesa la pgina de arriba abajo y se crea un rbol de componentes JSF enforma de objetos instanciados de clases del framework JSF.

(2) Se obtienen los valores introducidos por el usuario y se actualizan los beansgestionados con ellos.

(3) Se actualizan los componentes con los valores procedentes de las propiedades delos beans gestionados.

(4) Se pide a los componentes que se rendericen, generndose el cdigo HTML que seenva de vuelta al navegador como resultado de la peticin.

(5) El rbol de componentes JSF se guarda en memoria para que posteriorespeticiones a la misma pgina JSF no tengan que crearlo, sino que utilicen el existente.

Cmo se genera el HTML final de la respuesta a la peticin? En JSP el servlet genera elHTML mediante sentencias embebidas en su cdigo que escriben en el stream de salida.En JSF, la pgina HTML se genera como resultado de llamadas a mtodos del rbol decomponentes (en JSF se habla de realizar un render del componente). Una ventaja delenfoque de JSF es que el renderizado de la interfaz de usuario resultante es ms flexible.De hecho, es posible generar con el mismo JSF distinto cdigo para distintos dispositivos.Por ejemplo, es posible utilizar la misma aplicacin JSF para servir pginas anavegadores web y dispositivos mviles.

1.3. Evolucin de JSF

1.3.1. Especificaciones de JSF

JavaServer Faces es el framework oficial de Java Enterprise para el desarrollo deinterfaces de usuario avanzadas en aplicaciones web. La especificacin de JSF ha idoevolucionando desde su lanzamiento en 2004 y se ha ido consolidando, introduciendonuevas caractersticas y funcionalidades.



La especificacin original de JavaServer Faces (1.0) se aprob en marzo del 2004, con laJava Specification Request JSR 127. En esta especificacin se define el funcionamientobsico de JSF, introducindose sus caractersticas principales: uso de beans gestionados ellenguaje JSF EL, componentes bsicos y navegacin entre vistas.

La especificacin JavaServer Faces 1.2 se aprob en mayo del 2006. La JSR donde sedefine es la JSR 252. En esta especificacin se introducen algunas mejoras y correccionesen la especificacin 1.1. Una de las principales es la introduccin del lenguaje unificadode expresiones (Unified Expression Language o Unified EL ), que integra el lenguajeJSTL de expresiones de JSP y el lenguaje de expresiones de JSF en una nicaespecificacin.

La especificacin actual de JSF (JavServer Faces 2.1) se aprob en octubre de 2010 (JSR314) junto con el resto de especificaciones que definen Java EE 6.0. En estaespecificacin se rompe definitivamente con JSP como forma de definir las vistas JSF yse introduce un formato independiente de JSP. De hecho, la implementacin de referenciade Oracle/Sun se integra con Facelets, un sistema de definicin de plantillas para laspginas web que sustituye a JSP y que se ha popularizado con JSF 1.2.

Otras caractersticas importantes de esta especificacin son :

Soporte para Ajax Componentes mltiples Integracin con Facelets Gestin de recursos (hojas de estilo, imgenes, etc.) Facilidad de desarrollo y despliegue

Por la cantidad de comentarios que est generando, parece ser que esta nueva versin va arepresentar un salto cualitativo importante y va a conseguir popularizar definitivamenteJSF. Esta es la especificacin con la que vamos a trabajar en este mdulo.

Las siguientes URLs son muy tiles cuando se est programando en JSF.

JavaDoc del API de JSF 2: http://javaserverfaces.java.net/nonav/docs/2.1/javadocs/ Anotacin @ManagedBean:

http://javaserverfaces.java.net/nonav/docs/2.0/managed-bean-javadocs/index.html Etiquetas de JSF y Facelets:

http://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/index.html

1.3.2. JSF y otros frameworks de presentacin

En la actualidad JSF se ha convertido una alternativa ya madura digna de ser tenida encuenta si necesitamos que nuestra aplicacin web tenga un interfaz rico.

Algunas de las caractersticas ms importantes de JSF en la actualidad:

Framework estndar definido en la especificacin Java EE. Soporte en todos los servidores de aplicaciones y en las herramientas de desarrollo:



http://www.jcp.org/en/jsr/detail?id=127http://www.jcp.org/en/jsr/detail?id=252http://www.jcp.org/en/jsr/detail?id=314http://www.jcp.org/en/jsr/detail?id=314https://facelets.dev.java.net/http://javaserverfaces.java.net/nonav/docs/2.1/javadocs/http://javaserverfaces.java.net/nonav/docs/2.1/managed-bean-javadocs/index.htmlhttp://javaserverfaces.java.net/nonav/docs/2.1/vdldocs/facelets/index.html

Eclipse, GlassFish, etc. Entornos grficos para desarrollar rpidamente aplicaciones JSF. Gran variedad de implementaciones de componentes. Fcil integracin con frameworks en la capa de negocio y de persistencia: Spring,

JPA, etc. Comunidad muy activa en la actualidad; podemos encontrar fcilmente soporte en

foros, artculos, tutoriales, etc.

Todo esto, sumado a la madurez demostrada con la especificacin 2.0 hace que JSF seauna tecnologa que tenemos que conocer obligatoriamente y que plateemos seriamente suutilizacin en proyectos Java EE.

Ahora bien, como con cualquier otra tecnologa y framework novedoso, antes de lanzarsea ello hay que tomar ciertas precauciones. JSF es una tecnologa complicada, con unacurva de aprendizaje bastante pronunciada, y debemos meditar bien si es apropiadoutilizarla o no.

Lo primero que debemos plantearnos es si nuestro proyecto necesita una interfaz deusuario rica. Si estamos desarrollando una aplicacin web de gestin de contenidos ypginas HTML, lo ms probable es que JSF nos venga grande. Sera suficiente algunaherramienta para gestionar plantillas como Velocity, Tiles o el mismo Facelets junto conJSP.

Si nuestro proyecto va a necesitar formularios, rejillas de datos, grficas estadsticasgeneradas dinmicamente, rboles de navegacin, pestaas, validacin de los datosintroducidos por el usuario, internacionalizacin y dems caractersticas avanzadas,entonces s que debemos considerar JSF.

Uno de los problemas que nos podemos encontrar en JSF es que necesitemos algncomponente especfico que no exista en el conjunto de componentes que estemosutilizando. Puede ser que queramos definir alguna funcionalidad especfica en nuestraweb (un canvas, por ejemplo, en el que el usuario dibuja algunos sencillos trazos) que noest soportada por ningn conjunto de componentes, o que queramos integrar en ellaalgn servicio Ajax de terceros, como Google Maps. Dado que JSF se basa encomponentes definidos previamente que insertamos en las pginas web de formadeclarativa (utilizando etiquetas XML), tendramos que construir ese componentenosotros mismos. Hay bastante informacin sobre cmo hacerlo, pero es un temaavanzado que no vamos a ver en este curso.

Entre las alternativas ms slidas a JSF en la actualidad se encuentran GWT (GoogleWeb Toolkit), Java FX y Flex. Todas ellas se pueden comunicar perfectamente con laaplicacin Java en el servidor, si hemos utilizado una correcta arquitectura y hemosseparado nuestra aplicacin en capas. Algunas de las caractersticas de estas tecnologasson las siguientes:

GWT (Google Web Toolkit) es un proyecto open source de Google para desarrollaraplicaciones de internet ricas en Java basadas en Ajax. El enfoque de GWT es



http://code.google.com/webtoolkit/

radicalmente distinto al de JSF. La interfaz de usuario se desarrolla en Java (en lugarde definirse estticamente en un fichero XML) como si estuviramos programando enSwing. La conexin con el servidor se realiza utilizando un API de GWT de llamadasasncronas a procedimientos remotos. El cdigo que define la interfaz de usuariocliente se compila a cdigo JavaScript compatible con todos los navegadores con lasherramientas suministradas por Google. Es una alternativa a JSF muy interesante.

Java FX es la ltima propuesta de Oracle/Sun para desarrollar aplicaciones RIA (RichInternet Applications) que podemos ejecutar en el navegador o en el escritorio. Suninverti mucho esfuerzo en el desarrollo del framework y ahora en su divulgacin ypromocin. Los resultados y las aplicaciones ejemplo que muestran en el sitio webson bastante espectaculares. Es una tecnologa que merece la pena conocer si sequiere desarrollar una aplicacin totalmente interactiva, que se salga del navegador yque necesite conexin a servicios web externos proporcionados por un servidor. Conla actualizacin 10 de Java 6 se intenta dar un nuevo empujn a los applets,introduciendo la posibilidad de arrastrar y soltar applets del navegador al escritorio.

Flex es la propuesta de Adobe basada en Flash para realizar aplicaciones RIA. Esposible integrarlo con cdigo Java en el servidor. Es posible usarlo tanto paradesarrollar aplicaciones completas, como para definir pequeos componentes conefectos interactivos en nuestras pginas web. Una de las ventajas de Flex frente a JavaFX es que Flash est instalado casi en la totalidad de navegadores, lo que hace laaplicacin muy portable.

1.3.3. Implementaciones y componentes JSF

Una vez que hemos decidido utilizar JSF para nuestro proyecto tenemos que tomar unadecisin complicada. Qu conjunto de componentes utilizar? Existen multitud deimplementaciones de componentes.

JSF es una especificacin y, como tal, existen distintas implementaciones. Sun siempreproporciona una implementacin de referencia de las tecnologas Java, que incluye en elservidor de aplicaciones GlassFish. En el caso de JSF, la implementacin de referencia eslas dos implementaciones ms usadas son:

Mojarra es la especificacin de referencia realizada por Sun. Es una de lasimplementaciones ms populares y se incluye en distintos servidores de aplicacionesJava Enterprise, entre los que se encuentran GlassFish y JBoss. Sun la mantieneactivamente y se puede descargar desde esta pgina.

MyFaces es la implementacin abierta de la Fundacin Apache. Est desarrollada porla comunidad Apache y est incluida en el servidor de aplicaciones Geronimo. Sepuede descargar desde esta pgina.

Las implementaciones de la especificacin JSF proporcionan el framework y loscomponentes bsicos (etiquetas h: y f:). Para utilizar JSF en una aplicacin avanzadanecesitaremos componentes ms elaborados.

En la pgina web www.jsfmatrix.net se encuentra una tabla resumen muy til en la que se



http://javafx.com/http://www.adobe.com/devnet/flex/flex_java.htmlhttps://javaserverfaces.dev.java.net/https://javaserverfaces.dev.java.net/download.htmlhttp://myfaces.apache.org/http://myfaces.apache.org/download.htmlhttp://www.jsfmatrix.net/

comparan las caractersticas de distintos conjuntos de componentes para JSF (ms de 20).Los autores de la pgina escribieron un interesante artculo en The Server Sidecomparando tres conjuntos de componentes especficos. Este artculo dio origen a la tablacomparativa.

Podemos destacar los siguientes:

RichFaces. Desarrollado por Exadel y comprado por JBoss para su servidor deaplicaciones JBoss. Componentes Ajax muy elaborados y con una detalladadocumentacin. Muy recomendable. Licencia open source LGPL.

Icefaces. Conjunto de componentes muy maduro, usado por gran cantidad deaplicaciones web de importantes empresas. Ha sido escogido por Sun como conjuntode componentes adicional a los bsicos, sustituyendo un proyecto interno de Sunrecin cancelado (Proyecto Woodstock). Licencia open source Mozilla PublicLicense, version 1.1.

MyFaces Tomahawk. Desarrollado por el proyecto MyFaces de Apache. Tambinmaduro y estable. Licencia open source Apache Software License, version 2.0.

En las siguientes imgenes, se puede observar un ejemplo de la apariencia de algunoscomponentes de RichFaces y de Icefaces. Hay que tener en cuenta que la apariencia finaldel componente en una misma implementacin depende tambin del skin escogido, que, asu vez, se implementa con hojas de estilo CSS.

Richfaces:

Icefaces:



http://www.theserverside.com/tt/articles/article.tss?l=JSFComparisonhttp://www.jboss.org/jbossrichfaces/http://www.icefaces.org/main/home/index.jsphttp://myfaces.apache.org/tomahawk/index.html

1.4. El lenguaje de definicin de vistas JSF

Al igual que JSP, las vistas JSF se construyen mediante etiquetas especficas que declaranelementos y componentes. Un ejemplo de pgina JSF es el siguiente:

Welcome

Please enter your name and password.

Name:

Password:



El ejemplo muestra una pantalla de login en la se pide al usuario el nombre y lacontrasea. El aspecto de la pgina en el navegador es el siguiente:

En las especificaciones anteriores a JSF 2.0 (la actual es la versin 2.1), las pginas deJSF se construan utilizando pginas JSP con etiquetas especficas de JSF. Pronto secomprob que el enfoque no era el correcto. La tecnologa JSP no tena la potenciasufiente para las funcionalidades que se intentaban implementar en JSF. Adems, ambosconjuntos de etiquetas tenan incompatibilidades y era complicado combinarlas de formasencilla.

La especificacin 2 soluciona el problema utilizando XHTML como el lenguaje en el quese definen las pginas. Repasemos rpidamente qu es el XHTML y cules son susventajas frente al HTML tradicional.

El lenguaje XHTML es una normalizacin del HTML orientada a hacerlo compatible conel formato XML. Expresndolo en pocas palabras, un documento XHTML es undocumento HTML formateado en forma de documento XML. Por ejemplo, en losdocumentos XML toda etiqueta debe empezar y terminar. En HTML, no sucede siempreas. El ejemplo ms comn es la etiqueta de fin de lnea . En HTML es una etiquetacorrecta. Sin embargo en XHTML se transforma aadindole la terminacin () paracumplir el estndar XML.

Debido a que estn escritos en XML, los documentos XHTML son ms fciles de validary de procesar. Se pueden editar con herramientas genricas orientadas a XML. Y sepueden transformar utilizando hojas de estilo y otras caractersticas de XML.

Una de las caractersticas del XHTML es la posibilidad de utilizar en un mismodocumento distintos lenguajes de etiquetas utilizando espacios de nombres. Por ejemplo,un documento XHTML puede contener dibujos definidos en SVG o ecuaciones definidasen MathML. Cada lenguaje tiene su propio espacio de nombres definido con un prefijo



distinto. Es la forma de evitar conflictos entre etiquetas iguales de distintos lenguajes.Esta caracterstica es la que usa la especificacin JSF para permitir que en las pginasXHTML coexistan distintos tipos de etiquetas.

Los espacios de nombres se especifican al comienzo del documento XHTML definiendoel prefijo que utilizan las etiquetas de cada uno de los lenguajes. Utilizando distintosprefijos para distintos lenguajes se elimina el problema de la posible ambiguedad a lahora de procesar el documento.

La siguiente tabla muestra las distintas libreras de etiquetas que se utilizan en las pginasJSF, incluyendo las etiquetas de la implementacin RichFaces que es la que utilizaremosen el mdulo.

Librera de etiquetas Descripcin Ejemplo

JSTL Core Etiquetas estndar JSP

JSTL Functions Funciones estndar JSTL

Facelets Lenguaje de plantillas

JSF HTML Componentes estndar JSF basados en HTML

JSF Core Componentes especficos de JSF

RichFaces Componentes especficos de RichFaces

Ajax RichFaces Funciones Ajax de RichFaces

Cada librera se declara con un prefijo distinto. La siguiente tabla muestra los distintosprefijos y URIs.

Librera de etiquetas Prefijo URI

JSTL Core c: http://java.sun.com/jsp/jstl/core

JSTL Functions fn: http://java.sun.com/jsp/jstl/functions

JSF Facelets ui: http://java.sun.com/jsf/facelets

JSF HTML h: http://java.sun.com/jsf/htm

JSF Core f: http://java.sun.com/jsf/core

RichFaces rich: http://richfaces.org/rich



Ajax RichFaces a4j: http://richfaces.org/a4j

Estos lenguajes de etiquetas se definen al comienzo del documento XHTML. Slo esnecesario declarar los que se utilizan en el documento. El siguiente ejemplo muestra unacabecera de un documento en el que se declaran todos los lenguajes de etiquetas que sepueden utilizar en las pginas RichFaces.

1.4.1. Facelets

Facelets es un framework basado en el servidor que permite definir la estructura generalde las pginas (su layout) mediante plantillas. Se trata de un framework similar a Tiles,Velocity, Tapestry o Sitemesh.

Facelets se adapta perfectamente al enfoque de JSF y se incorpora a la especificacin enla ltima revisin 2.1. Anteriormente, las pginas JSF se definan utilizando etiquetasespecficas de JSP, lo que generaba cierta confusin porque se trata de enfoquesalternativos para un mismo problema. La sustitucin de JSP por Facelets como lenguajebsico para definir la disposicin de las pginas permite separar perfectamente lasresponsabilidades de cada parte del framework. La estructura de la pgina se defineutilizando las etiquetas Facelets y los componentes especficos que deben presentar losdatos de la aplicacin utilizando etiquetas JSF.

Entre las caractersticas de Facelets destacan:

Definicin de plantillas (como en Tiles) Composicin de componentes Etiquietas para definir funciones y lgica Desarrollo de pginas amistoso para el diseador Posibilidad de crear libreras de componentes

Para usar los tags de facelets, habr que aadir la siguiente declaracin de namespace ennuestra pgina JSF:

xmlns:ui="http://java.sun.com/jsf/facelets"

La siguiente tabla explica brevemente las etiquetas definidas por Facelets. Por falta detiempo en el mdulo nos centraremos nicamente en las etiquetas que se utilizan paradefinir plantillas: , , y .

Etiqueta Descripcin



Incluye contenido de otro fichero XHTML. Permite la reutilizacinde contenido para mltiples vistas

Cuando se usa sin el atributo template una composicin es unasecuencia de elementos que se pueden insertar en algn otrolugar (mediante la etiqueta por ejemplo). Lacomposicin puede tener partes variables especificadas con elelemento hijo . Cuando se usa con el atributotemplate, se carga la plantilla especificada. Los elementoshijos (etiquetas ) determinan las partes variablesde la plantilla. El contenido de la plantilla reemplaza estaetiqueta.

Cuando se usa sin el atributo template especifica una pginaen la que se pueden insertar otras partes. Las partes variables seespecifican con el elemento hijo .

Define el contenido que se inserta en una plantilla con un que empareja.

Define un lugar en el que se va a insertar contenido en unaplantilla. El contenido se define en la etiqueta que carga laplantilla utilizando la etiqueta .

Especifica un parmetro que se pasa a un fichero incluido o auna plantilla.

Esta etiqueta es idntica a , excepto en quecrea un componente que se aade al rbol de componentes.

Es idntica a excepto que crea un componenteque se aade al rbol de coponentes.

Permite mostrar al usuario una ventana de depuracin quemuestra la jerarqua de componentes de la pgina actual y lasvariables en el mbito de la aplicacin.

JSF elimina todo lo que hay dentro de una etiqueta.

Itera sobre una lista, array, result set o un objeto individual.

1.4.2. Definiendo plantillas con Facelets

Facelets nos permite usar un mecanismo de plantillas para encapsular los comoponentescomunes en una aplicacin. As tambin podremos modificar el aspecto de nuestra pginaaplicando cambios sobre la plantilla, y no individualmente sobre las pginas.

Veamos ahora cmo definir la plantilla de una aplicacin. Supongamos que queremosdefinir una plantilla con la siguiente estructura: un men a la izquierda, una cabecera, unpie de pgina y un contenido variable, en funcin de la opcin del men que se ha



pulsado. Para el usuario siempre se va a estar en la misma pgina y slo va a cambiar elcontenido del centro de la pantalla. El aspecto de la pgina que queremos construir es elque aparece en la siguiente figura:

La plantilla la definimos en el fichero resources/templates/principal.xhtml. Es unapgina XHTML que utiliza una tabla para componer la disposicin y que contiene laetiqueta para definir el contenido variable. La cabecera y el pie de pginase definen en la propia pgina. Por modularidad el men se define en una pgina separadaque se incluye con la instruccin .

La pgina se define en el fichero templates/principal.xhtml:

JSF Twitter



JSF Twitter

Aqu va el contenido. Si no hay contenido, se mostrar

este texto por defecto

Experto en Desarrollo de Aplicaciones y Servicios conJava Enterprise

Ya tenemos definida nuestra plantilla con sus cuatro elementos: cabecera, men,contenido y pie

Dentro de cada fragmento, podemos especificar un contenido por defecto, cosa quehemos hecho tanto en el men como en el contenido. Sin embargo, la manera de aadircontenido por defecto se ha hecho de dos formas distintas:

En el caso del men, hemos hecho uso de la etiqueta ui:include para incluircontenido de otra pgina

En el caso del bloque de contenido, hemos incluido directamente el cdigo HTML delmismo

Ambas maneras son permitidas por Facelets. Sin embargo, el uso de la etiquetaui:include nos permite una mayor independencia de la plantilla a la hora de modificarfragmentos.

El siguiente fichero resources/components/leftMenu.xhtml contiene el men de laaplicacin. Utiliza la directiva para definir un bloque de cdigo quees insertado desde otra pgina con la directiva . Dentro utilizamos elcomponente RichFaces para definir un panel con el ttulo Men

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

user.name}(#{user.screenName})

Tweets: #{user.tweets}Siguiendo a: #{user.following}Seguidores: #{user.followers}

Por ltimo, definimos el fichero principal timeline.xhtml: que incluye la plantilla conla instruccin y el atributo template en el que se indica la ruta de laplantilla. Con la directiva definimos el contenido del panel principal,utilizando el atributo name con un valor que debe emparejar con el mismo atributo de ladirectiva en el que se coloca.



#{tweet.user.name}(@#{tweet.user.screenName})

#{tweet.text}

Se utiliza una hoja de estilo CSS en la que se define el tamao de fuente del ttulo y delpie de pgina y las dimensiones y separacin del men y la zona principal. Lo hacemosen el fichero resources/css/detault.css:

body {background-color: #ffffff;font-size: 12px;font-family: Verdana, Arial, sans-serif;color: #000000;margin: 10px;

}

h1 {font-family: Verdana, Arial, sans-serif;border-bottom: 1px solid #AFAFAF;font-size: 16px;font-weight: bold;margin: 0px;padding: 0px;color: #D20005;

}

/* RESTO DEL CSS*/

Para acceder a la pgina debemos utilizar el prefijo faces accediendo ahttp://localhost:8080/jsf-ejemplos/faces/timeline.xhtml.

Tambin podemos definir un fichero index.jsp en la raz de la aplicacin web que hagauna redireccin a la pgina anterior utilizando la directiva jsp:forward:

Debemos incluir el fichero index.jsp en el primer lugar de la lista de ficheros debienvenida en WEB-INF/web.xml:

...

index.jsp



faces/timeline.xhtml

...

1.5. Creando un primer proyecto JSF

En esta seccin vamos a detallar cmo crear un proyecto JSF utilizando Maven y laimplementacin de JSF RichFaces. En el momento de escribir estos apuntes, JBoss estterminando el desarrollo de la versin 4.2, la versin que soporta completamente laespecificacin 2.1 de JSF.

Para crear nuestro primer proyecto JSF, lo primero que haremos ser crear un proyectoweb en Netbeans con Maven, del tipo Web Application. Las caractersticas de nuestroproyecto sern las que se muestran en el siguiente pantallazo:

Proyecto Netbeans

Posteriormente, tendremos que editar el fichero pom.xml para aadir las rutas delrepositorio de RichFaces, as como las dependencias con sus libreras y las de JSR 303

4.0.0

es.ua.jtech.jsfModJSF1.0-SNAPSHOTwar

ModJSF



http://www.jboss.org/richfaces

richfacesRichfaces repositorydefault

https://repository.jboss.org/nexus/content/groups/public-jboss/

false

${project.build.directory}/endorsedUTF-8

org.richfaces.corerichfaces-core-impl4.2.0.Final

org.richfaces.uirichfaces-components-ui4.2.0.Final

org.richfaces.corerichfaces-core-api4.2.0.Final

org.richfaces.uirichfaces-components-api4.2.0.Final

com.sun.facesjsf-api2.1.1-b04

com.sun.facesjsf-impl2.1.1-b04

javax.servletjstl1.1.2

taglibsstandard1.1.2

org.scribescribe



1.3.2

javax.servletjavax.servlet-api3.1-b02

provided

org.hibernatehibernate-validator4.3.0.Final

com.google.code.gsongson2.2.2

org.apache.maven.pluginsmaven-compiler-plugin2.3.2

1.61.6

${endorsed.dir}

org.apache.maven.pluginsmaven-war-plugin2.1.1

false

org.apache.maven.pluginsmaven-dependency-plugin2.1

validate

copy

${endorsed.dir}true

javaxjavaee-endorsed-api6.0jar



Una vez hecho esto, editaremos las propiedades del proyecto, y nos iremos al apartadoFrameworks. Aadiremos JavaServer Faces 2.1 y aceptaremos

Proyecto Netbeans

Volviendo a editar, verificamos que, adems, se nos han aadido las libreras deRichFaces. En caso contrario, aadiremos las dependencias faltantes y actualizaremosnuestro proyecto.

1.6. Una aplicacin de ejemplo en detalle

Las aplicaciones JSF utilizan la tecnologa de servlets y pueden ser ejecutadas encualquier contenedor de aplicaciones web, como Tomcat 6.x. No es necesario un servidorde aplicaciones compatible con toda la especificacin Java EE 5 o 6.

Una aplicacin web JSF contiene los siguientes elementos especficos:

Libreras de implementacin de JSF Pginas JSF Directivas en el fichero web.xml Fichero faces-config.xml



Clases Java con los beans gestionados

Vamos a detallar todos estos elementos, creando una sencilla aplicacin de ejemplo quehace uso de RichFaces.

1.6.1. Libreras de implementacin de JSF

Contienen el conjunto de clases que realizan la implementacin del framework y laslibreras de apoyo. Como en cualquier aplicacin web, se guardan en el directorioWEB-INF/lib del WAR.

Las libreras dependen de la implementacin especfica de JSF. Por ejemplo, en el caso dela implementacin de RichFaces (RichFaces 4.2) la lista de libreras es la siguiente:

cssparser-0.9.5.jarehcache-1.6.0.jarguava-r05.jarjsf-api-2.0.3-b03.jarjsf-impl-2.0.3-b03.jarjstl-1.2.jarrichfaces-components-api-4.0.0.20101110-M4.jarrichfaces-components-ui-4.0.0.20101110-M4.jarrichfaces-core-api-4.0.0.20101110-M4.jarrichfaces-core-impl-4.0.0.20101110-M4.jarsac-1.3.jar

Vemos que existen libreras de apoyo (cssparser, ehcache, guava y sac) y libreraspropias de JSF.

Entre las libreras de JSF podemos diferenciar dos tipos, las que realizan laimplementacin bsica del estndar y las que definen componentes adicionales que seaaden a los componentes estndar de JSF. Las implementaciones ms usadas de laslibreras bsicas son las del proyecto Mojarra de GlassFish de Oracle/Sun y las delsubproyecto MyFaces Core de Apache. Ambas implementan la ltima especificacin JSF2.1. En ambos casos se definen dos mdulos: jsf-api-xxx.jar y jsf-impl-xxx.jar.

Los componentes adicionales los proporcionan las distintas libreras de componentesdesarrolladas por una gran cantidad de empresas. Las ms populares son RichFaces,PrimeFaces y IceFaces, aunque cada da aparecen nuevas libreras muy interesantes comoOpenFaces. Algunas de estas libreras de componentes son compatibles, y es posibleutilizarlas conjuntamente. Por ejemplo, podemos desarrollar una aplicacin en RichFacesy aadir algn componente adicional desarrollado por OpenFaces.

1.6.2. Pginas JSF

La aplicacin ejemplo contendr una nica pgina JSF, que permite al usuario escribir enun campo y que muestra lo que va escribiendo a su derecha. La pgina (la llamaremossample.xhtml) es la siguiente:



http://javaserverfaces.java.net/http://myfaces.apache.org/core20/index.htmlhttp://www.jboss.org/richfaceshttp://www.primefaces.org/http://www.icefaces.org/main/home/http://www.openfaces.org/

RichFaces Sample

Destacamos lo siguiente:

El texto introducido por el usuario se guarda en el bean gestionado richBean, enconcreto en su campo name.

El componente genera una etiqueta de HTML en la que se incluyeel campo de entrada nameInput. El atributo prependId=false hace que el motor deJSF no aada ningn prefijo a los identificadores de los componentes dentro delformulario. Esto reduce el tamao de la pgina HTML generada.

El texto de salida se encuentra dentro de un PanelGroup con el identificador output.El componente hace que cada vez que se produzca el evento keyup en elcampo de entrada se redibuje el panel y todos los componentes incluidos.

El atributo rendered de un componente permite definir si se muestra o no. En estecaso depende del valor devuelto por la expresin EL #{not empty richBean.name}.

1.6.3. Directivas en el fichero web.xml

El motor de JSF es el servlet que procesa las peticiones de los navegadores y realiza elprocesamiento de las pginas JSF para generar el HTML resultante. Es necesario declarareste servlet en el fichero web.xml y definir ciertas propiedades de la aplicacin web,como el mapeado de nombres o las pginas de bienvenida.

En concreto, el fichero WEB-INF/web.xml de la aplicacin ejemplo es el siguiente:

javax.faces.PROJECT_STAGE



Development

Faces Servletjavax.faces.webapp.FacesServlet1

Faces Servlet/faces/*

30

faces/index.xhtml

Podemos destacar los siguientes elementos:

El servlet que procesa todas las peticiones es javax.faces.webapp.FacesServlet Se definen dos patrones de nombres de peticin que se redirigen a ese servlet: *.jsf

y /faces/*. Cuando se realiza una peticin (por ejemplo, /faces/login/registro.xhtmlo /login/registro.jsf) el servlet elimina el prefijo o la extensin .jsf y procesa la pginaXHTML definida en la ruta de la peticin (/login/registro.xhtml).

La pgina de bienvenida es la faces/index.xhtml. El navegador realiza la peticin aesa ruta y se carga la pgina JSF index.xhtml

1.6.4. Fichero faces-config.xml

El fichero faces-config.xml define la configuracin de la aplicacin JSF:

Beans de la aplicacin, sus nombres y propiedades iniciales. Reglas de validacin de los componentes de entrada. Reglas de navegacin entre distintas pginas de la aplicacin. Ficheros de recursos para la internacionalizacin de la aplicacin.

Sin embargo, nos aprovecharemos de las anotaciones que JSF2 provee para no tener lanecesidad de declarar nuestros Beans en este fichero, con lo que en este momento no es nisiquiera necesaria su existencia.

1.6.5. Clase Java con el bean gestionado

La clase Java que define el bean gestionado richBean es un sencillo JavaBean con lapropiedad name:

A partir JSF 2.0 se hace todava ms sencillo la definicin de un bean gestionado. Comohemos dicho, no es necesario hacerlo en el fichero faces-config.xml. Basta utilizar lasanotaciones @ManagedBean y @ViewScoped en la propia clase. La primera define el



carcter del bean como gestionado y la segunda su mbito (otros posibles valores son:@RequestScoped, @SessionScoped o @ApplicationScoped).

El nombre por defecto que se utilizar en las pginas JSF ser el de la clase del beangestionado, cambiando la primera letra mayscula por una minscula. Es posible definirun nombre distinto utilizando el atributo name de la anotacin @ManagedBean.

package es.ua.jtech.jsf.ejemplo;

import java.io.Serializable;

import javax.faces.bean.ManagedBean;import javax.faces.bean.ViewScoped;

@ManagedBean@ViewScopedpublic class RichBean implements Serializable {

private static final long serialVersionUID = -2403138958014741653L;private String name;

public RichBean() {name = "John";

}

public String getName() {return name;

}

public void setName(String name) {this.name = name;

}}

1.6.6. Probando la aplicacin

Ejecutaremos la aplicacin para probar el cdigo escrito (se encuentra enhttp://localhost:8080/jsf-expertojava/faces/sample.xhtml)



http://localhost:8080/jsf-expertojava/faces/sample.xhtml

2. Ejercicios sesin 1 - Introduccin a JSF

Dentro de las sesiones prcticas de JSF, vamos a realizar una pequea aplicacin degestin de tareas. Y dentro de sta, lo que realizaremos ser:

Login Registro Administracin de tareas

Haz un fork del repositorio inicial java_ua/jsf-expertojava, desactivando la opcinde heredar los permisos de acceso. Aade el usuario java_ua con permiso de lectura.

Clona el repositorio en tu disco duro y crea un nuevo espacio de trabajo en el repositoriorecin clonado.

2.1. Creando nuestro proyecto con Maven (1 punto)

Dado que la prctica va a consistir en un nico ejercicio, lo que vamos a hacer es crear unproyecto JSF + RichFaces, que ya contiene todos los elementos que vamos a necesitar alo largo de las sesiones.

Crearemos el proyecto segn las indicaciones establecidas en los apuntes de teora

2.2. Mini-aplicacin de ejemplo (1 punto)

Para probar que la importacin ha sido correcta, crearemos la aplicacin de ejemplo delfinal de los apuntes de teora

2.3. Pantalla de login (1 punto)

Con lo que hemos visto hasta ahora, podemos crear la pantalla de login en nuestro gestorde tareas.

De momento, tendremos una estructura de dos pginas: una con el formulario de acceso,y otra de error que nos devolver de nuevo a la pgina de login.

En primer lugar tendremos la plantilla general. Empezar siendo una simple plantilla (quecolocaremos en la carpeta templates/template.xhtml) como la que sigue:



jsfTasks - Application

Title

Default content

Vemos que lo nico que contiene es la posibilidad de insertar el cuerpo que queramos, ascomo determinar parte del ttulo de la pgina

El cdigo de la pantalla de login (login.xhtml) ser el siguiente:

Acceso

Por su parte, el cdigo de la pantalla de error (errorPage.xhtml) tendr la siguienteforma:



Error

Se ha producido un error..

Modifica ahora el fichero web.xml para que la pgina de login se corresponda con lapgina de inicio

No te preocupes si no entiendes partes del cdigo. Lo iremos viendo todo a lo largo de lassucesivas sesiones.



3. El MVC en JavaServer Faces

3.1. Modelo-Vista-Controlador

JSF utiliza el framework MVC (Modelo-Vista-Controlador) para gestionar lasaplicaciones web. Vamos a verlo con cierto detalle.

La mejor forma de comprobar estas caractersticas de JSF es mediante un ejemploconcreto. Consideremos una versin muy simplificada de una aplicacin web dematriculacin de estudiantes a cursos. Tenemos una pgina en la que el estudiante debeescribir su correo electrnico y marcar los cursos de los que desea matricularse. Cuandose pulsa el botn para enviar los datos, la aplicacin debe realizar una llamada a unmtodo de negocio en el que se realiza la matrcula del estudiante.

La siguiente figura muestra el aspecto de esta pgina web.

Veamos cmo podemos implementar este sencillo ejemplo con JSF, separando lasdistintas responsabilidades de la aplicacin segn el modelo MVC.

3.1.1. Vista

La forma ms comn de definir la vista en JSF (2.0) es utilizando ficheros XHTML conetiquetas especiales que definen componentes JSF. Al igual que en JSP, estoscomponentes se convierten al final en cdigo HTML (incluyendo JavaScript en lasimplementaciones ms avanzadas de JSF) que se pasa al navegador para que lo muestre alusuario. El navegador es el responsable de gestionar la interaccin del usuario.

Veamos el cdigo JSF que genera el ejemplo visto anteriormente. El fichero llamadoselec-cursos.xhtml define la vista de la pgina web. A continuacin se muestra laparte de este fichero donde se define el rbol de componentes JSF.

Fichero selec-cursos.xhtml



Direccin e-mail:

Tecnologas Java de inters

/>

Los componentes JSF son un sencillo campo de texto (h:inputText) para el correoelectrnico y una caja de seleccin de opcin mltiple (h:selectManyCheckbox) con laque marcar los cursos seleccionados. Cada curso a seleccionar es a su vez un componentede tipo f:selectItem. Para lanzar la accin de matricular de la capa de negocio se utilizael componente botn (h:commandButton). Todos los componentes se encuentran dentrode un h:form que se traducir a un formulario HTML.

Los componentes tienen un conjunto de atributos con los que se especifican suscaractersticas. Por ejemplo, el componente f:selectItem utiliza el atributo itemLabelpara definir el texto que aparece en la pgina y el atributo itemValue para indicar el valorque se enviar a la aplicacin.

Un aspecto muy importante de JSF es la conexin de las vistas con la aplicacin mediantelos denominados beans gestionados. En nuestro ejemplo, la vista utiliza dos beans:selecCursosBean y selecCursosController. El primero se utiliza para guardar losdatos introducidos por el usuario, y el segundo proporciona el mtodo manejador al quese llamar cuando se pulse el botn de la pgina. El primer bean mantiene el modelo de lavista y el segundo su controlador..

La conexin entre las clases Java y las pginas JSF se realiza mediante el Lenguaje deExpresiones JSF (JSF EL), una versin avanzada del lenguaje de expresiones de JSP. Coneste lenguaje, podemos definir conexiones (bindings) entre las propiedades de los beans ylos valores de los componentes que se muestran o que introduce el usuario.

En el ejemplo anterior se define un binding entre el componente h:selectManyCheckboxy la propiedad cursosId del bean selecCursosBean mediante la expresin

De esta forma, los valores de los datos seleccionados por el usuario se guardarn en esa



propiedad del bean y podremos utilizarlos en la accin grabarDatosCursos que seejecuta cuando se pulsa el botn.

3.1.2. Modelo: beans gestionados

El modelo JSF se define mediante beans idnticos a los que se utilizan en JSP. Un bean esuna clase con un conjunto de atributos (denominados propiedades) y mtodos getters ysetters que devuelven y actualizan sus valores. Las propiedades del bean se pueden leer yescribir desde las pginas JSF utilizando el lenguaje de expresiones EL.

Por ejemplo, en la anterior pgina selec-cursos.xhtml se utiliza el beanselecCursosBean para guardar los datos seleccionados por el usuario. La definicin delbean es la siguiente:

Clase SelecCursosBean.java

public class SelecCursosBean {private String email;private String[] cursosId;

public String getEmail() {return email;

}

public void setEmail(String email) {this.email = email;

}

public String[] getCursosId() {return cursosId;

}

public void setCursosId(String[] cursosId) {this.cursosId = cursosId;

}}

El bean define dos propiedades:

email: un String que guardar el correo electrnico introducido por el usuario.Asociado a este atributo se definen los mtodos getEmail() y setEmail(Stringemail).

cursosId: un array de Strings que guardar la seleccin de cursos realizada por elusuario. Tambin se definen en el bean los mtodos get y set asociados a estapropiedad, que devuelven y toman como parmetro un array de cadenas.

Para escoger el nombre de la clase hemos seguido el convenio de utilizar el nombre de lapgina en la que se usa el bean y el sufijo Bean. De esta forma remarcamos que lasinstancias de esta clase van a ser beans gestionados que van a contener los datosmostrados y obtenidos en esa pgina.

En las expresiones JSF EL de la pgina en la que se usa el bean se puede acceder a suspropiedades utilizando el nombre de la propiedad. Si la expresin es slo de lectura se



utilizar internamente el mtodo get para recuperar el contenido del bean y mostrarlo enla pgina. Si la expresin es de lectura y escritura, se utilizar adems el set paramodificarlo con los datos introducidos por el usuario de la pgina.

Por ejemplo, en el siguiente fragmento de cdigo se est mapeando la propiedadcursoIds del bean selecCursosBean con el valor del componenteh:selectManyCheckbox. De esta forma, los valores de los cursos seleccionados por elusuario se guardarn en la propiedad cursosIds como un array de cadenas utilizando elmtodo setCursosId. Despus la aplicacin podr utilizar el mtodo getCursosId pararecuperar esos valores.

Dnde se declaran los beans en una aplicacin JSF? Hemos visto hasta ahora el uso deun bean en una pgina JSF y su definicin como una clase Java. Nos falta explicar cmose indica que el bean selecCursosBean es un objeto de la clase selecCursosBean.Histricamente, los beans de una aplicacin se han declarado en su fichero deconfiguracin WEB-INF/faces-config.xml.

En el siguiente fragmento de cdigo podemos comprobar cmo se define un bean llamadoselecCursosBean de la clase jtech.jsf.presentacion.SelecCursosBean con elmbito de sesin. El mbito determina cundo se crea un bean nuevo y desde dnde sepuede acceder a l. El mbito de sesin indica que se debe crear un bean nuevo en cadanueva sesin HTTP y que va a ser accesible en todas las vistas JSF que compartan esamisma sesin.

Fichero faces-config.xml

...

selecCursosBean

jtech.jsf.presentacion.SelecCursosBean

session

...

Sin embargo, con la llegada de la versin 2 de JSF, podemos usar anotaciones para definirbeans gestionados y como el mbito de los mismos. As, declararemos la claseSelecCursosBean.java como bean gestionado de la siguiente manera:

@ManagedBean@SessionScopepublic class SelecCursosBean {

private String email;private String[] cursosId;

...



3.1.2.1. mbito de los beans gestionados

El mbito de los beans determina su ciclo de vida: cundo se crean y destruyen instanciasdel bean y cundo se asocian a las pginas JSF. Es muy importante definir correctamenteel mbito de un bean, porque en el momento de su creacin se realiza su incializacin.JSF llama al mtodo constructor de la clase, donde habremos colocado el cdigo parainicializar sus valores, creando una instancia de la clase que pasar a ser gestionada por elframework.

En JSF se definen los siguientes mbitos para los beans: peticin, sesin, vista yaplicacin. El mbito de vista es un elemento nuevo de JSF 2.0. Los otros mbitos sonsimilares a los definidos con los JavaBeans de JSP.

Peticin: Se define con el valor request en la propiedad managed-bean-scope delfaces-config.xml o con la anotacin @RequestScoped en la clase. El bean se asociaa una peticin HTTP. Cada nueva peticin (cuando desde el navegador se abre unapgina por primera vez una pgina o se recarga) crea un nuevo bean y lo asocia con lapgina. Dada su corta vida, se recomienda usar este mbito para el paso de mensajes(bien sea de error o de estatus), o para cualquier otro tipo de dato que no sea necesariopropagar a lo largo de la aplicacin

Sesin: Se define con el valor session en el faces-config.xml o con la anotacin@SessionScoped en la clase. Las sesiones se definen internamente con el API deServlets. Una sesin est asociada con una visita desde una navegador. Cuando sevisita la pgina por primera vez se incia la sesin. Cualquier pgina que se abra dentrodel mismo navegador comparte la sesin. La sesin mantiene el estado de loselementos de nuestra aplicacin a lo largo de las distintas peticiones. Se implementautilizando cookies o reescritura de URLs, con el parmetro jsessionid. Una sesinno finaliza hasta que se invoca el mtodo invalidate en el objeto HttpSession, ohasta que se produce un timeout.

Aplicacin: Se define con el valor application y con la anotacin@ApplicationScoped. Los beans con este mbito viven asociados a la aplicacin.Definen singletons que se crean e inicializa slo una vez, al comienzo de laaplicacin. Se suelen utilizar para guardar caractersticas comunes compartidas yutilizadas por el resto de beans de la aplicacin.

Vista (JSF 2.0): Se define con el valor view en el faces-config.xml o con laanotacin @ViewScoped en la clase. Un bean en este mbito persistir mientras serepinte la misma pgina (vista = pgina JSF), al navegar a otra pgina, el bean sale delmbito. Es bastante til para aplicaciones que usen Ajax en parte de sus pginas.

Custom (@CustomScoped): Un mbito al fin y al cabo no es ms que un mapa queenlaza nombres y objetos. Lo que distingue un mbito de otro es el tiempo de vida deese mapa. Los tiempos de vida de los mbitos estndar de JSF (sesin, aplicacin,vista y peticin) son gestionados por la implementacin de JSF. En JSF 2.0 podemoscrear mbitos personalizados, que son mapas cuyo ciclo de vida gestionamosnosotros. Para incluirlo en ese mapa, usaremos la anotacin@CustomScoped("#{expr}"), donde #{expr} indica el mapa. Nuestra aplicacin ser



la responsable de eliminar elementos de ese mapa. Conversacin (@ConversationScoped) - provee de persistencia de datos hasta que se

llega a un objetivo especfico, sin necesidad de mantenerlo durante toda la sesin.Est ligado a una ventana o pestaa concreta del navegador. As, una sesin puedemantener varias conversaciones en distintas pginas. Es una caracterstica propia deCDI, no de JSF.

3.1.2.2. Inicializacin de los beans

Existen dos formas de inicializar el estado de un bean. Una es hacerlo por cdigo,incluyendo las sentencias de inicializacin en su constructor. La otra es porconfiguracin, utilizando el fichero faces-config.xml.

Supongamos que queremos incializar la propiedad e-mail del bean selecCursosBean alvalor Introduce tu e-mail, para que aparezca este String cuando se carga la pgina porprimera vez.

Para hacer la inicializacin por cdigo basta incluir la actualizacin de la propiedad en elconstructor de la clase:

public class SelecCursosBean {private String email;private String[] cursosId;

public SelecCursosBean() {email="Introduce tu e-mail";

}...

La otra forma de inicializar la propiedad es aadiendo al fichero faces-config.xml laetiqueta managed-property con el nombre de la propiedad que se quiere inicializar y elvalor. Sera de esta forma:

selecCursosBean

org.especialistajee.jsf.SelecCursosBean

request

emailIntroduce to e-mail

Incluso existe una tercera forma con JSF 2.0: utilizando la anotacin @ManagedPropertyy el atributo value:

@ManagedBean@RequestScopedpublic class SelecCursosBean {

@ManagedProperty(value="Introduce tu e-mail")private String email;private String[] cursosId;...



Podemos poner como valor cualquier expresin EL vlida. Por ejemplo, podramosllamar a algn mtodo de otro bean ya existente y guardar en la propiedad el resultado.Aqu una expresin muy sencilla:

selecCursosBean

org.especialistajee.jsf.SelecCursosBean

request

email#{1+2+3+4}

3.1.2.3. Relaciones entre beans

Es posible utilizar la inicializacin de propiedades para crear relaciones entre distintosbeans, almacenando un bean en una propiedad de otro. Esto es muy til para implementarcorrectamente un modelo MVC. Veremos en el siguiente apartado que para seguir esteenfoque necesitamos un bean haga el papel de controller y que defina las acciones aejecutar en la aplicacin. Estas acciones son mtodos definidos en el bean. Los datosintroducidos por el usuario se encuentran en otro bean (o incluso en ms de un beanasociado a una pgina) Cmo acceder desde el bean controller a los beans del modelo?.

Para solucionar este problema JSF provee tres soluciones.

Inyeccin de dependencias

En caso de disponer de un servidor de aplicaciones que tenga soporte para CDI, sta es laopcin recomendada. El objetivo de CDI, entre otros, unificar el modelo de componentesgestionados de JSF con el modelo de componentes de EJB, con lo que el desarrollo sesimplifica considerablemente.

@Named @RequestScopedpublic class EntradaBlogBean {@Inject private UsuarioBean usuario;

public void setUsuario(UsuarioBean usuario){this.usuario = usuario;

}

public UsuarioBean getUsuario(){return usuario;

}}

Inyeccin de beans gestionados

Caso y declaracin muy similares a la anterior. La nica diferencia es que la inyeccin dedependencias de JSF no es tan potente como la de CDI. Es el modelo que utilizaremos en



http://jcp.org/en/jsr/summary?id=299

los ejercicios, dado que la versin 7 de Apache Tomcat por defecto no incorpora soportepara CDI.

@ManagedBean @RequestScopedpublic class EntradaBlogBean {@ManagedProperty(value="#{usuarioBean}")private UsuarioBean usuario;

public void setUsuario(UsuarioBean usuario){this.usuario = usuario;

}

public UsuarioBean getUsuario(){return usuario;

}}

Configurar los beans gestionados con XML

JSF 2 mantiene la configuracin previa de beans a travs de un fichero XML. Es msfarragosa, pero permite la configuracin en tiempo de despliegue. Este fichero XMLpuede estar en:

WEB-INF/faces-config.xml. Sitio tradicional por defecto. Cualquier fichero que finalice en .faces-config.cdml dentro del directorio META-INF

de un jar. Muy til para elaborar componentes reusables y distribuirlos en un jar Ficheros listados en el parmetro de inicializacin javax.faces.CONFIG_FILES en el

web.xml. Esto resulta muy til para separar navegacin de configuracin de beans, etc

javax.faces.CONFIG_FILESWEB-INF/navigation.xml,WEB-INF/managedbeans.xml

...

En El fichero XML, los beans se definen de la siguiente manera:

usuario

org.especialistajee.beans.UsuarioBean

session

(opcional)

nombre



Alejandro

A modo de resumen, as declararemos un bean en el fichero xml:

En cualquiera de los tres casos vistos, hay que tener en cuenta que el mbito de lapropiedad no puede ser inferior al del bean contenedor.

Cuando nuestro bean tiene el mbito... ...su propiedades pueden ser beans de losmbitos

none none

application none, application

session none, application, session

view none, application, session, view

request none, application, session, view, request

Anotaciones para controlar el ciclo de vida de los beans

Las anotaciones @PostConstruct y @PreDestroy sirven para especificar mtodos que seinvocan automticamente nada ms construir un bean, o justo antes de que ste salga delmbito:

public class MiBean {@PostConstructpublic void initialize() {

// Cdigo de inicializacin}@PreDestroypublic void shutdown() {

// Cdigo de finalizacin}// resto de mtodos del bean

}



3.1.3. Navegacin

Antes de ver el controlador, es interesante comprender mejor la navegacin en JSF. Lanavegacin se refiere al flujo de pginas a lo largo de nuestra aplicacin. Veremos cmonavegar de una pgina a otra de distintas maneras.

3.1.3.1. Navegacin esttica

La navegacin esttica se refiere a aquella situacin en que hacemos click en un botn oenlace, y el destino de esa accin va a ser siempre el mismo. sta se hace dndole a undeterminado enlace una accin. Por ejemplo:

En la navegacin esttica, y si no se provee un mapeo como veremos ms adelante, laaccin se transformar en un identificador de vista de la siguiente manera:

Si el nombre no tiene una extensin, se le asigna la misma extensin que la vistaactual.

Si el nombre no empieza por /, se pone como prefijo el mismo que la vista actual.

Por ejemplo, la accin welcome en la vista /index.xhtml nos lleva al identificador devista /welcome.xhtml, y en la vista /user/index.xhtml nos llevara a/user/welcome.xhtml

3.1.3.2. Navegacin dinmica

sta es muy comn en muchas aplicaciones web, donde el flujo no depende del botn quese pulse, sino de los datos introducidos. Por ejemplo: hacer login lleva a dos pginasdistintas en funcin de si el par usuario/password introducidos son correctos (la pgina delogin errneo, o la pgina de inicio de la parte privada).

Para implementar esta navegacin dimmica, el botn de login debera apuntara unmtodo:

Aqu, se llamar al mtodo verificarUsuario() del bean loginController (sea de la claseque sea), que puede tener cualquier tipo de retorno que pueda ser convertible a String.

String verificarUsuario() {if (...)

return "success";else

return "failure";}



Este retorno "success"/"failure" ser el que determine la siguiente vista.

Este mapeo cadena-vista se realiza en un fichero de configuracin, permitindonosseparar la presentacin de la lgica de negocio. Porque, para qu tengo que decir quevaya a la pgina /error.xhtml? Y si luego cambio mi estructura?. stas salidas lgicasnos dan esta flexibilidad. La configuracin se realiza mediante reglas de navegacin en elfichero faces-config.xml. Un ejemplo de reglas de navegacin sera:

/index.xhtml

success/welcome.xhtml

failure/index.xhtml

Esta regla determina que la salida "success" nos llevar de la vista /index.xhtml a la vista/welcome.xhtml. Si es "failure", llevar de nuevo al /index.xhtml

Si especificamos una regla sin incluir un from-view-id, sta se aplicar a todas las pginasde nuestra aplicacin.

Tambin podemos aadir wildcards en el elemento from-view-id para que se aplique aciertas vistas nada ms. Slo se permite un nico *, que debe estar al final de la cadena

/secure/*

. . .

Otros casos de navegacin dinmica

Segn accin

Otro caso de navegacin que podemos incluir es from-action, que combinado con el tagfrom-outcome permite tener cadenas iguales que desemboquen en diferentes destinos

#{loginController.cerrarSesion}success/index.xhtml

#{entradaController.anyadirEntrada}success/verEntrada.xhtml

Casos de navegacin condicionales



Estos casos de navegacin son exclusivos de JSF2, y nos permiten hacer comparacionessimples haciendo uso del lenguaje de expresiones para determinar la siguiente vista.

login.xhtml

success#{user.powerUser}/index_power.xhtlm

success#{user.vipUser}/index_vip.xhtlm

success/index_user.xhtlm

Obviamente, sera equivalente al siguiente cdigo java:

if(user.isPowerUser()){return "powerUser";

} else if(user.isVipUser()){return "vipUser";

}

return "user"

Sin embargo, el empleo de reglas condicionales en este caso nos permite dotar alcontrolador de login de una nica responsabilidad: validar al usuario.

Dynamic Target View IDs

El elemento to-view-id puede ser una expresin EL, que se evaluar en tiempo deejecucin.

/main.xhtml

#{quizBean.nextViewID}

Esta regla es exclusiva de JSF2

3.1.4. Controlador

Llegamos al ltimo pilar del patrn MVC aplicado a JSF. Hemos visto cmo en JSF sedefine la vista de una aplicacin y cmo se obtienen y se guardan los datos del modelo.Nos falta el controlador. Cmo se define el cdigo que se debe ejecutar cundo elusuario realiza alguna accin sobre algn componente?

Debemos diferenciar dos tipos de acciones, las acciones del componente y las acciones de



la aplicacin. En el primer tipo de acciones es el propio componente el que contiene elcdigo (HTML o JavaScript) que le permite reaccionar a la interaccin del usuario. Es elcaso, por ejemplo, de un men que se despliega o un calendario que se abre. En este casono hay ninguna peticin al controlador de la aplicacin para obtener datos o modificaralgn elemento, sino que toda la interaccin la maneja el propio componente. ConRichFaces y JSF 2.0 es posible utilizar eventos JavaScript para configurar estecomportamiento.

Las acciones de la aplicacin son las que determinan las funcionalidades de negocio de laaplicacin. Se trata de cdigo que queremos que se ejecute en el servidor cuando elusuario pulsa un determinado botn o pincha en un determinado enlace. Este cdigorealizar llamadas a la capa de negocio de la aplicacin y determinar la siguiente vista amostrar o modificar la vista actual.

Como hemos visto en la navegacin dinmica, las acciones se definen en beansgestionados de la pgina JSF. Son mtodos del bean que se ligan al elemento action delcomponente que vaya a lanzar esa accin.

Por ejemplo, en la pgina selec-curso se define llama a la accin grabarDatosCursosdel bean selecCursosController asocindola a un :

El mtodo grabarDatosCursos se ejecuta, realizando la lgica de negocio, y devuelveuna cadena que determina en el fichero faces-config.xml la siguiente vista a mostrar.

3.1.4.1. Llamadas a la capa de negocio

En el controlador se guarda la relacin con el bean en el que se recogen los datos de laforma que hemos visto antes y se define el mtodo que realiza la llamada a la capa denegocio (el mtodo grabarDatosCursos):

Fichero jtech.jsf.controlador.SelecCursosController.java

@ManagedBean@SessionScopedpublic class SelecCursosController {@ManagedProperty(value="#{selecCursosBean}")private SelecCursosBean datosCursos;

public SelecCursosBean getDatosCursos() {return datosCursos;

}

public void setDatosCursos(SelecCursosBean datosCursos) {this.datosCursos = datosCursos;

}

public String grabarDatosCursos() {EstudianteBO estudianteBO = new EstudianteBO();String email = datosCursos.getEmail();String[] cursosId = datosCursos.getCursosId();estudianteBO.grabarAsignaturas(email, cursosId);



return "OK";}

}

Vemos en el mtodo grabarDatosCursos() la forma tpica de proceder del controlador.Se obtiene el objeto de negocio con el mtodo de negocio al que se quiere llamar y serealiza la llamada, pasndole los parmetros introducidos por el usuario. En nuestro caso,realizamos una llamada a un mtodo grabarAsignaturas que realiza la matrcula delestudiante a esas asignaturas.

El email y los cursos seleccionados han sido introducidos por el usuario y, como hemosvisto, se encuentran en el bean selecCursosBean.

3.1.4.2. Determinando la nueva vista de la aplicacin

Adems de lanzar la lgica de negocio requerida por la seleccin del usuario, el beancontrolador debe definir tambin qu sucede con la interfaz una vez realizada la accin.

Recordemos que la definicin de la accin en la pgina JSF es:

JSF obliga a que todas las acciones devuelvan una cadena. Esa cadena es el valor quetermina guardndose en el atributo action y ser evaluado en las reglas de navegacin.

3.1.5. Resumen de los elementos de JSF

Veamos un resumen rpido de cmo se relacionan los distintos elementos de JSF.

En primer lugar, la vista se define mediante pginas con componentes JSF que utilizanbeans gestionados para almacenar los datos. Los beans se declaran en el fichero deconfiguracin faces-config.xml. La siguiente figura muestra las relaciones entre ambosen nuestro ejemplo. Para acceder a los datos, JSF utiliza un lenguaje de expresiones (JSFEL) similar al de JSP. El lenguaje de expresiones se puede utilizar tambin en el ficherofaces-config.xml para inicializar los valores de las propiedades de los beans. En estecaso, se utiliza para poder acceder a un bean desde otro.



En segundo lugar, el modelo se define mediante los beans. Son beans Java normales conpropiedades y mtodos getters y setters.



Por ltimo, el controlador se define mediante mtodos de los beans ligados a acciones dela vista. La accin a ejecutar se define en el cdigo del mtodo y la vista resultantedepende de la cadena devuelta y del fichero de configuracin faces-config.xml.

3.2. Expresiones EL

Las expresiones JSF EL son muy similares a las vistas en JSP. Son expresionesevaluables utilizadas en los atributos de las etiquetas JSF, normalmente el atributo value.Su sintaxis es #{...}. Por ejemplo, la siguiente expresin se utiliza en el atributo valuede un para definir un valor que se mostrar en la pgina HTML:

expresionEL)

La evaluacin de las expresiones se realiza en la fase Apply request values cuando JSFllama al mtodo decode del componente.

El uso ms frecuente de las expresiones EL es el binding de una propiedad de un bean auna propiedad del componente. Por ejemplo:

cookie: para acceder a los valores almacenados en las cookies en forma de objetosjavax.servlet.http.Cookie

initParam: para acceder a los valores de inicializacin de la aplicacin. facesContext: para acceder al objeto javax.faces.context.FacesContext

asociado a la aplicacin actual. view: para acceder al objeto javax.faces.component.UIViewRoot asociado a la

vista actual.

Veamos algunos ejemplos de utilizacin de estas variables.

#{view.children[0].children[0].valid}

Aqu se accede a la propiedad valid del primer hijo, del primer hijo de la raz del rbolde componentes.

FacesContext.getCurrentInstance().getExternalContext().getSessionMap().put("variable Name", value);

Este cdigo se debe ejecutar en el bean (en un evento o una accin) para actualizar unadeterminada variable de la sesin JSF.

3.3. Componentes estndar de JSF

En JSF se definen un nmero de componentes estndar que implementan las interfacesdefinidas en el punto anterior. Cada clase est asociada normalmente a una etiqueta JSP yse renderiza en cdigo HTML.

Hay que notar que en JSF los componentes se definen en base a su funcin, no a suaspecto. El aspecto se modifica mediante el render asociado al componente. As, porejemplo, un campo de entrada de texto y un campo de entrada de contraseas serepresentan por el mismo tipo de componente JSF pero tienen distintos Rendersasociados.

Normalmente, existe una relacin uno a uno entre componentes JSF y etiquetas.

Referencias:

JavaDoc del API de JSF 2.0: http://java.sun.com/j2ee/javaserverfaces/1.2/docs/api Etiquetas de JSF: http://java.sun.com/j2ee/javaserverfaces/1.2/docs/tlddocs

3.3.1. Un ejemplo: el componente

El componente permite generar una tabla HTML a partir de una lista oun array de objetos Java.

La forma ms sencilla de utilizarlo es la siguiente:



http://javaserverfaces.java.net/nonav/docs/2.0/javadocs/http://javaserverfaces.java.net/nonav/docs/2.0/vdldocs/facelets/index.html

La propiedad cursos contiene una lista de cursos que se muestran en la tabla. La variablecurso definida en el atributo var toma el valor de cada uno de los cursos de la lista y seutiliza para construir las filas de la tabla. La etiqueta define cada una de lascolumnas de la tabla, y en ella se utiliza la variable curso para acceder a las distintaspropiedades que queremos mostrar en la tabla.

Supongamos que la lista cursos ha sido inicializada as:

cursos.add(new Curso("JSP","Miguel ngel Lozano",2));cursos.add(new Curso("JSF", "Domingo Gallardo", 1));cursos.add(new Curso("Struts", "Otto Colomina", 1));

La tabla resultante ser:

JSP Miguel ngel Lozano 2JSF Domingo Gallardo 1Struts Otto Colomina 1

Para definir una cabecera en la tabla hay que utilizar la etiqueta en la columna, y generar el contenido de la cabecera con un:

La tabla resultante ser:

Curso Profesor CrditosJSP Miguel ngel Lozano 2JSF Domingo Gallardo 1Struts Otto Colomina 1



En la etiqueta tambin se definen atributos para generar clases CSS que permiten definirel aspecto de las tablas, lo que da mucha versatilidad a la presentacin. Tambin esposible definir distintos tipos de elementos dentro de la tabla; no slo texto, sino tambinotros componentes como botones, campos de texto o mens. De esta forma es posibledefinir formularios complejos.

3.3.2. Otro ejemplo: el componente ui:repeat

Una de las novedades de JSF 2 es el uso del tag ui:repeat, para ser usado en lugar deh:dataTable. El funcionamiento es similar en el sentido de que ambos iteran sobre unconjunto de datos. La diferencia radica en que ui:repeat no genera una estructura detabla, sino que tenemos que definirla nosotros:

#{name.last},#{name.first}

Pese a que puede ser un poco ms tedioso ya que tenemos que declarar nosotros lasetiquetas para darle un aspecto tabular, este tag nos permite que mostremos lainformacin en la forma que nosotros queramos con DIVs, listas o el aspecto que ms nosinterese.

Adems, el tag ui:repeat expone algunos atributos que pueden ser muy interesantes siquisiramos recorrer un subconjunto de la coleccin:

offset es el ndice por el que empieza la iteracin (valor por defecto: 0) step es la diferencia entre sucesivos valores de ndice (valor por defecto: 1) size es el nmero de iteraciones (valor por defecto: (tamao de la coleccin -

offset) / step)

As, si quisiramos mostrar los elementos 10, 12, 14, 16, 18 de una coleccin, usaramos:

El atributo varStatus determina una variable con informacin del estado de la iteracin.La variable declarada tendr las siguientes propiedades:

De tipo Boolean: even, odd, first, last, muy tiles para determinar estilos. De tipo Integer: index, begin, step, end, que dan el ndice de la iteracin

actual, el offset inicial, step, size y offset final. Fijos que begin = offset y end =offset + step size, siendo offset y size los valores de los atributos del tagui:repeat

La propiedad index puede usarse para numerar filas:



#{status.index + 1}#{name.last},#{name.first}

3.3.3. Componentes HTML

Veamos una rpida descripcin de todas las posibles etiquetas con el prefijo

Etiqueta Descripcin

Se utiliza dentro de una etiqueta pararepresentar una columna de datos tabulares. Podemos aadirleuna etiqueta o .

Ejemplo:

...

Etiqueta Descripcin

Representa un comando que se renderiza como un botn HTMLde tipo entrada. Cuando el usuario cliquea el botn, se enva elformulario al que pertenece y se lanza un evento ActionEvent.

Ejemplo:

Etiqueta Descripcin

Representa un comando que se renderiza como un enlace.Cuando el usuario pincha en el enlace, se ejecuta un cdigojavascript que enva el formulario al que pertenece y se lanza unevento ActionEvent.

Ejemplo:



Etiqueta Descripcin

Se renderiza en un elemento HTML . Los elementoshijo

Etiqueta Descripcin

Se renderiza como un elemento con un atributo typedefinido como hidden.

Ejemplo:

Etiqueta Descripcin

Se renderiza como un elemento con un atributo typedefinido como password.

Ejemplo:

Etiqueta Descripcin

Se renderiza como un elemento con un atributo typedefinido como text.

Ejemplo:

Etiqueta Descripcin

Se renderiza como un elemento .

Ejemplo:

Etiqueta Descripcin

Este elemento obtiene el primer mensaje encolado para elcomponente identificado por el atributo for.

Ejemplo:



Etiqueta Descripcin

Este elemento obtiene todos los mensajes encolados.

Ejemplo:

Etiqueta Descripcin

Define un mensaje parametrizado que ser rellenado por loselementos definidos en parmetros

Ejemplo:

Etiqueta Descripcin

Define un elemento HTML .

Ejemplo:

Etiqueta Descripcin

Se renderiza como un elemento con un atributo hrefdefinido como el valor del atributo value.

Ejemplo:

Etiqueta Descripcin

Se renderiza como texto.

Ejemplo:

Etiqueta Descripcin

Se renderiza como una tabla de HTML, con el nmero decolumnas definido por el atributo columns. Los componentes del



panel pueden tener las facetas header y footer.

Ejemplo:

Etiqueta Descripcin

El componente acta como un contenedor de otros componentesen situaciones en las que slo se permite que exista uncomponente, por ejemplo cuando un grupo de componentes seusa como una faceta dentro de un panelGroup. Se renderizarcomo un elemento . Si le ponemos el atributolayout="block", se renderizar como un >div

...

Etiqueta Descripcin

Carga un fichero de recursos y lo hace disponible a travs deuna variable. El path del fichero debe estar disponible en elclasspath de la aplicacin web (esto es, en el directorioWEB-INF/classses).

Ejemplo:

Etiqueta Descripcin

Define un parmetro de una expresin de texto.

Ejemplo:

Etiqueta Descripcin

Crea una instancia de un tem y se lo asigna al componentepadre.

Ejemplo:

Etiqueta Descripcin

Crea mltiples instancias de tems y los asigna al componentepadre.

Ejemplo:



Etiqueta Descripcin

Crea un grupo de componentes dentro de una vista.

Ejemplo:

...

Etiqueta Descripcin

Crea una instancia de validador de rango doble y lo asigna alcomponente padre.

Ejemplo:

Etiqueta Descripcin

Crea una instancia de validador de longitud de texto y lo asignaal componente padre.

Ejemplo:

Etiqueta Descripcin

Crea una instancia de validador de rango long y l

JSF DEFINICIONES

Documents

Transcript of JSF DEFINICIONES