- Ejemplo JSF con Eclipse y Tomcat La idea de este proyecto son dos pginas.

La primera da una bienvenida; tambin pide el nombre y la edad. Para avanzar a la segunda pantalla se presiona el boton Siguiente, en la parte inferior.

La segunda pgina lo que va a mostrar es el nombre y la edad ingresada.

Es una aplicacin simple, pero as y todo se ven unos cuantos conceptos de Jsf, como Managed Beans, navegacin, actions y Expression Language. Backing beans La pginas Jsf, tienen un respaldo para mostrar y capturar informacin, los Backing beans. Son beans exactamente igual a los que conocemos, salvo que no son de negocio, sino que se utilizan para trabajar con la pgina.Se dan de alta en elfaces-config.xml. Por ejemplo, podemos asociar un input y un bean mediante la propiedad value="#{miBean.nombre}"; cuando hagamos submit, el valor del input se mapea automticamente a la propiedad nombre de miBean y cuando despleguemos la pgina, si nombre contiene algun valor, el input toma autmticamente ese valor. Como vemos la ventaja es clara. Creemos un Backing Bean de nombre InicioBean para gestionar la informacin de la pgina de inicio. No es mas que una clase con sus getters y setters, como muestra la imagen a continuacin.

El cdigo de la clase:

public class InicioBean { //Propiedades private String nombre; private Integer edad; //Mtodos public InicioBean(){} public String getNombre() { return nombre; } public void setNombre(String nombre) { this.nombre = nombre; } public Integer getEdad() { return edad; } public void setEdad(Integer edad) { this.edad = edad; } }

Ya tenemos creada la clase, pero no deja de ser una clase plana. Para indicar que sea

Backing Bean, abrimos el faces-config.xml, haciendo doble click.

Se abre el siguiente dilogo y seleccionamos la solapa inferior ManagedBean.

Vamos a crear el bean con el scope de sesin. Esto quiere decir que los datos se mantendrn durante la estada del usuario en el sitio. Si la sesin se invalida, la prxima vez que accedamos al bean perder los valores. Si usamos el scope request, los valores del bean, sern validos por cada pedido del usuario; cosa que no nos sirve, ya que si ingresamos el usuario y queremos imprimirlo en la segunda pantalla, el bean habr perdido el valor ingresado en la propiedad nombre al pasar a la segunda pantalla. Seleccionamos Session y presionamos Add. El siguiente dilogo que se abre, pregunta si usamos una clase existente o creamos una nueva para dicho Bean. Como

ya creamos la clase InicioBean, seleccionamos la primer opcin y apretamos Browse, para buscar la clase.

Escribimos el nombre de la clase InicioBean.

Apretamos Enter y luego Next. Vemos un resumen del bean que creamos.

Presionamos Finish, y vemos en el faces-config.xml el detalle del bean creado. El nombre, la clasey el scope del bean.

Esta es una vista grfica; si queremos ver el xml como qued, presionamos en la parte inferior sourcey veremos el esqueleto del faces-config.xml. El bean que creamos estar disponible en las pginas Jsf que creemos y se har referencia a l a travs de su nombre, en este caso inicioBean.

Pgina de inicio

Creemos la pgina de inicio; se llamar inicio.jsp. Sobre el proyecto HolaMundo hacemos botn derecho con el mouse y vemos que se despliegan los posibles archivos a disponibles para el proyecto. Seleccionamos JSP.

Ingresamos el nombre inicio. La ubicacin del Jsp, debe estar en la carpeta Webcontent. Todas las pginas Jsp, Html, recursos css, javascript, irn dentro de WebContent. Supongamos que copiamos dentro de dicho directorio, una pgina Html; hola.html. Esta pgina ser visible al usuario; para accederla, abrimos el navegador y en la url escribimos http://localhost:8080/HolaMundo/hola.html. Tambin podemos crear directorios dentro de WebContent. Si creamos dentro del directorio, la carpeta ejemplos y dentro agregamos hola.html; la forma de acceder el html en el navegador ser escribiendohttp://localhost:8080/HolaMundo/ejemplos/hola.html. Si nos fijamos dentro de WebContent vemos la carpeta WEB-INF. Estas carpetas tienendos archivos xml, web.xml y faces-config.xml; el descriptor de la aplicacin web y la configuracin de Jsf respectivamente. Dentro de el tambin podemos poner pginas jsp, html; slo que estas no sern visibles al usuario.

Pulsamos Next, y aparece un dilogo preguntando que tipo de template para jsp vamos a usar. Seleccionamos el template superior, como muestra la imagen. Vemos en el preview, que este template viene con los prefijos h y f, que nos permitirn crear las pginas jsf.

Agrego el cdigo al JSP creado:

<body> <f:view> <h1><h:outputText value="Bienvenido a Java Server Faces"></h:outputText></h1> <h2>Probemos la navegacin en JSF!</h2> <br /> <h:form> <h:panelGrid columns="3"> <h:outputText>Su nombre: </h:outputText> <h:inputText id="nombre" value="#{inicioBean.nombre}" maxlength="35" required="true"></h:inputText> <h:message for="nombre"></h:message> <h:outputText>Su edad: </h:outputText> <h:inputText id="edad" value="#{inicioBean.edad}" required="true"> <f:validateLongRange minimum="1" maximum="100"></f:validateLongRange> </h:inputText> <h:message for="edad"></h:message> </h:panelGrid> <h:commandButton action="ok" value="Siguente"> </h:commandButton> </h:form> </f:view> </body>

Analicemos el cdigo.

-Importamos la librera de tags core JSF, que posee tags para validar y manejar eventos. <%@ taglib prefix="f" uri="http://java.sun.com/jsf/core"%> -Importamos la librera de tags HTML, que nos brinda tags para insertar componentes, como tablas, textos, y dems. <%@ taglib prefix="h" uri="http://java.sun.com/jsf/html"%> Todo el cdigo y tags de Jsf deben ir encerrado entre los tags <f:view> y </f:view>. El tag <h:outputText value="Bienvenido a Java Server Faces"> despliega texto en pantalla. <h:form> representa un formulario, al clickear un botn se har submit de la pgina. <h:panelGrid columns="3"> este tag, nos brinda una forma simple de crear tablas html. Se le especifica la cantidad de columnas y dentro se insertan los elementos ( texto, inputs, botones) uno a continuacin de otro; Jsf tomar dichos elementos de a 3 y crear la cantidad de filas necesarias. <h:inputText id="nombre" value="#{inicioBean.nombre}" maxlength="35" required="true">representa una caja de texto ( input type=text). La propiedad maxlenght es la mxima cantidad letras que se podr tipear en la caja. Required hace que el campo sea obligatorio, si al hacer submit no se llena con valores, Jsf devuelve la pgina con el error correspondiente. Lo ms llamativo es la propiedad value="#{inicioBean.nombre}". Aqu se produce una asociacin entre la caja de texto y el bean llamado inicioBean. Cuando la pgina es enviada al navegador, la caja de texto tomar el valor de la propiedad nombre de inicioBean, si esta vaco se ver la caja de texto sin valor. En el otro extremo, al momento de hacer submit la pgina, Jsf toma los valores enviados y los mapea en la propiedad nombre de inicioBean. Si nosotros en la caja de texto, tipeamos Ariel e hicimos submit; cuando los valores llegan al servidor, este sabe que debe llenar inicioBean.nombre con el valor de la caja de texto. Note que la forma de fererirse a la propiedad del bean es nombreBean.propiedad, no necesitamos ni getPropiedad(), ni setPropiedad(); pero si necesitamos que la clase del bean, tenga los getters y setters. La forma de referenciar a un bean y a sus propiedades es a travs #{},el Lenguaje de Expresiones JSF. Los strings encerrados entre #{} pueden hacer referencia o update a un bean, y tambin evaluar expresiones como ser #{inicioBean.edad > 40}. Para validar la edad ingresada usamos el tag <f:validateLongRange minimum="1" maximum="100" />. Note que el tag se encuentra dentro de los input. Podemos usar varios validadores dentro del input; Jsf nos brinda validadores standard, pero tambin podemos crear los nuestros. Este validador, se fija que la edad ingresada est entre 1 y 100; si no cumple esa condicin al llegar al servidor, enviar un mensaje de error y devolver la pgina al cliente. <h:message for="nombre"></h:message> despliega los errores que se produzcan para el componente que tenga el id "nombre". Los errores son de validacin; en el caso de este componente, solo se valida que sea obligatorio. Si se hace submit sin haberlo completado, se desplegar el mensaje correspondiente. Si no se pone este tag, Jsf informa de igual manera el error, pero no lo muestra por pantalla, sino que se ve en la consola. Los mensajes son predeterminados por Jsf; igualmente se pueden cambiar a nuestro gusto. Si observamos <h:message for="edad"></h:message>, desplegar los errores de validacin para el ingreso de edad; aqu puede ser que o no se llen el campo o la edad no est en el rango permitido. Por ltimo tenemos el tag <h:commandButton action="ok" value="Siguiente">. Representa un botn submit de html. Al estar dentro de <h:form> ejecutar el

submit de la pgina. Si no posee errores al validar, pasar a la segunda pgina. Como hace esto Jsf? Como sabe donde debe ir? Bien es muy simple, Jsf nos permite definir reglas de navegacin en el facesconfig.xml. La forma es muy simple, miremos esta regla: <navigation-rule> <display-name>inicio</display-name> <from-view-id>/inicio.jsp</from-view-id> <navigation-case> <from-outcome>ok</from-outcome> <to-view-id>/saludo.jsp</to-view-id> </navigation-case> </navigation-rule> Lo que creamos es un regla de navegacin, especificamos que, si estamos en la pgina inicio.jsp y el resultado de un action method es OK, debe ir a la pgina saludo.jsp. El action method si nos fijamos en el botn de submit, devuelve OK si no hay errores de validacin <h:commandButtonaction="ok" value="Siguiente">. No solamente podemos usar valores fijos en action, sino tambinmtodos pblicos escritos en los Backing Beans. Estos deben devolver un String para poder completar la navegacin.
Saludo.jsp

Creemos la pgina de saludo, recordemos que al presionar el botn siguiente de la pgina inicio.jspiremos a la pgina saludo.jsp, que nos va a mostrar el nombre y edad ingresados y almacenadosen el backing bean. Aqu est el cdigo.
<body> <f:view> <h2> Si lees esto es porque todo ha ido bien </h2> <h:outputText value="Tu nombre es: #{inicioBean.nombre} y tu edad: #{inicioBean.edad}"></h:outputText> </f:view> </body>

Intuitivamente deberamos darnos cuenta que el tag <h:outputText value="Tu nombre es #{inicioBean.nombre} y tu edad #{inicioBean.edad}."/> despliega los valores de inicioBean que fueron llenados en la pgina inicio.jsp. Creando la regla de navegacin Vamos a crear la regla de navegacin para pasar de inicio.jsp a saludo.jsp. Hacemos doble click sobre el faces-config.xml y seleccionamos la solapa inferior "Navigation Rule". En el package explorer del eclipse, seleccionamos inicio.jsp y lo arrastramos a la cuadrcula como muestra el grfico.

Hacemos lo mismo con saludo.jsp y luego seleccionamos en la parte derecha Link, que nos permite crear la regla para navegar de un jsp a otro.

Una vez que seleccionamos Link nos posicionamos sobre inicio, hacemos click y manteniendolo apretado nos dirigimos a saludo. Se dibujar una lnea que representa la regla de navegacin.

Hacemos doble click sobre la lnea dibujada, se habilita la solapa inferior Properties, ah llenamos el campo From Outcome con el valor ok. Esto significa que se crea una regla de navegacin desde inicio a saludo, si el resultado de alguna accin es ok. Si clickeamos la solapa Source, vemos como se actualiz el xml. Esta configuracin la podramos haber echo directamente sobre el xml, sin la parte grfica.