Red social para profesionales IT

Ingresar
Java

Java

Dudas, soluciones, alternativas, consejos y todo lo que se te pueda ocurrir respecto al lenguaje Java

Historial de páginas


Hola mundo con Jsf, Eclipse y Tomcat: Revision creada por %s para %s


Hola mundo con Jsf, Eclipse y Tomcat

Últimas actualizaciones de hace 1589 dias para Run IT

Categorias: Programación, tutorial

Voy a comenzar esta explicación, asumiendo que tenemos creado el proyecto web dinámico HolaMundo, como se explicó en "Como empezar con JSF en Eclipse":

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.

image

 

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

image

 

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 el faces-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.

image

 

El código de la clase:

package ar.com.runit.beans;

public class InicioBean {

private String nombre; // nombre del usuario

private Integer edad; // edad del usuario

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.

image

 

Se abre el siguiente diálogo y seleccionamos la solapa inferior ManagedBean.

image

 

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 scop 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.

image

 

Escribimos el nombre de la clase InicioBean.

image

 

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

image

 

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

image

Esta es una vista gráfica; si queremos ver el xml como quedó, presionamos en la parte inferior source y 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.

image

 

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.

 

image

 

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á escribiendo http://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. 

image

 

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.

image

 

Vamos a agregar código al Jsp creado.

image

 

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 ="Bienvenido a Java Server Faces"> 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 <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 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.

<h:message for="nombre">  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 faces-config.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 action="ok" value="Siguiente">.  No solamente podemos usar valores fijos en action, sino también mé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.jsp iremos a la página saludo.jsp, que nos va a mostrar el nombre y edad ingresados y almacenados en el backing bean.

Aquí está el código.

image

 

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.

 

image

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.  

image

 

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.

image

 

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.

image

 

Run HolaMundo

En la solapa inferior Server (donde se encuentra la consola), hacemos restart del Tomcat.

image

Luego sobre el Tomcat, hacemos botón derecho y seleccionamos Add and Remove.  Seleccionamos el proyecto HolaMundo y apretamos Add.  

image

 

Presionamos Finish, y volvemos a hacer restart del Tomcat.  Abrimos un navegador y en la url escribimos http://localhost:8080/HolaMundo/faces/inicio.jsp.  

Otra forma apara correr el proyecto es  seleccionar el archivo inicio.jsp, hacer botón derecho y seleccionar RunAs-->RunOnServer.

Espero les halla servido y si tengan dudas me las hagan llegar.

Aquí les dejo los fuentes del proyecto.

Para mas información visite JSF en la página de Sun.