• Author / Uploaded
• Héctor Moreno

Citation preview

- Ejemplo JSF con Eclipse y Tomcat La idea de este proyecto son dos páginas. La primera da una bienvenida; también pide el nombre y la edad. Para avanzar a la segunda pantalla se presiona el boton Siguiente, en la parte inferior.

La segunda página lo que va a mostrar es el nombre y la edad ingresada.

Es una aplicación simple, pero así y todo se ven unos cuantos conceptos de Jsf, como Managed Beans, navegación, actions y Expression Language. Backing beans La páginas Jsf, tienen un respaldo para mostrar y capturar información, 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 página.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 automáticamente a la propiedad nombre de miBean y cuando despleguemos la página, si nombre contiene algun valor, el input toma autmáticamente ese valor. Como vemos la ventaja es clara. Creemos un Backing Bean de nombre “InicioBean” para gestionar la información de la página de inicio. No es mas que una clase con sus getters y setters, como muestra la imagen a continuación.

El código de la clase:

public class InicioBean { //Propiedades private String nombre; private Integer edad; //Métodos 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 diálogo y seleccionamos la solapa inferior ManagedBean.

Vamos a crear el bean con el scope de sesión. Esto quiere decir que los datos se mantendrán durante la estadía del usuario en el sitio. Si la sesión se invalida, la próxima vez que accedamos al bean perderá los valores. Si usamos el scope request, los valores del bean, serán 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 diálogo 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 opción 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 gráfica; 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 páginas Jsf que creemos y se hará referencia a él a través de su nombre, en este caso inicioBean.

Página de inicio

Creemos la página de inicio; se llamará inicio.jsp. Sobre el proyecto HolaMundo hacemos botón derecho con el mouse y vemos que se despliegan los posibles archivos a disponibles para el proyecto. Seleccionamos JSP.

Ingresamos el nombre inicio. La ubicación del Jsp, debe estar en la carpeta Webcontent. Todas las páginas Jsp, Html, recursos css, javascript, irán dentro de WebContent. Supongamos que copiamos dentro de dicho directorio, una página Html; hola.html. Esta página será visible al usuario; para accederla, abrimos el navegador y en la url escribimos http://localhost:8080/HolaMundo/hola.html. También 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 aplicación web y la configuración de Jsf respectivamente. Dentro de el también podemos poner páginas jsp, html; sólo que estas no serán visibles al usuario.

Pulsamos Next, y aparece un diálogo 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 permitirán crear las páginas jsf.

Agrego el código al JSP creado:

Probemos la navegación en JSF!


Su nombre:

Su edad:







Analicemos el código.

-Importamos la librería de tags core JSF, que posee tags para validar y manejar eventos.

-Importamos la librería de tags HTML, que nos brinda tags para insertar componentes, como tablas, textos, y demás.

Todo el código y tags de Jsf deben ir encerrado entre los tags y . El tag despliega texto en pantalla. representa un formulario, al clickear un botón se hará submit de la página. 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 continuación de otro; Jsf tomará dichos elementos de a 3 y creará la cantidad de filas necesarias. representa una caja de texto ( input type=text). La propiedad maxlenght es la máxima 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 página con el error correspondiente. Lo más llamativo es la propiedad value="#{inicioBean.nombre}". Aquí se produce una asociación entre la caja de texto y el bean llamado inicioBean. Cuando la página es enviada al navegador, la caja de texto tomará el valor de la propiedad nombre de inicioBean, si esta vacío se verá la caja de texto sin valor. En el otro extremo, al momento de hacer submit la página, 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 través #{},el Lenguaje de Expresiones JSF. Los strings encerrados entre #{} pueden hacer referencia o update a un bean, y también evaluar expresiones como ser #{inicioBean.edad > 40}. Para validar la edad ingresada usamos el tag . Note que el tag se encuentra dentro de los input. Podemos usar varios validadores dentro del input; Jsf nos brinda validadores standard, pero también podemos crear los nuestros. Este validador, se fija que la edad ingresada esté entre 1 y 100; si no cumple esa condición al llegar al servidor, enviará un mensaje de error y devolverá la página al cliente. despliega los errores que se produzcan para el componente que tenga el id "nombre". Los errores son de validación; 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 , desplegará los errores de validación 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 . Representa un botón submit de html. Al estar dentro de ejecutará el

submit de la página. Si no posee errores al validar, pasará a la segunda página. Como hace esto Jsf? Como sabe donde debe ir? Bien es muy simple, Jsf nos permite definir reglas de navegación en el facesconfig.xml. La forma es muy simple, miremos esta regla:

inicio /inicio.jsp

ok /saludo.jsp

Lo que creamos es un regla de navegación, especificamos que, si estamos en la página inicio.jsp y el resultado de un action method es OK, debe ir a la página saludo.jsp. El action method si nos fijamos en el botón de submit, devuelve OK si no hay errores de validación . No solamente podemos usar valores fijos en action, sino tambiénmétodos públicos escritos en los Backing Beans. Estos deben devolver un String para poder completar la navegación. Saludo.jsp

Creemos la página de saludo, recordemos que al presionar el botón siguiente de la página inicio.jspiremos a la página saludo.jsp, que nos va a mostrar el nombre y edad ingresados y almacenadosen el backing bean. Aquí está el código.

Si lees esto es porque todo ha ido bien



Intuitivamente deberíamos darnos cuenta que el tag despliega los valores de inicioBean que fueron llenados en la página inicio.jsp. Creando la regla de navegación Vamos a crear la regla de navegación 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 cuadrícula como muestra el gráfico.

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 línea que representa la regla de navegación.

Hacemos doble click sobre la línea 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 navegación desde inicio a saludo, si el resultado de alguna acción es ok. Si clickeamos la solapa Source, vemos como se actualizó el xml. Esta configuración la podríamos haber echo directamente sobre el xml, sin la parte gráfica.