Introducción a JSF

1.  Crear una aplicación JavaSever Faces sencilla

Vamos al lío… El ejemplo va a consistir en la típica página de envío de mensajes, de estas que nos encontramos como formulario de contacto, nos pedirá en nombre, la dirección de correo, etc… Cuando pulsemos el botón “Aceptar”, nos llevará a una página de confirmación. Si confirmamos el mensaje es enviado y se nos mandará a la página “resultado”. Por el contrario, si decidimos editar el mensaje, nos llevará de vuelta a la página inicial.

Puede ser interesante consultar este post, en el que se crea un proyecto Jsf sencillo, de modo que podamos utilizarlo como punto de partida para la creación de nuestros ejemplos.

Preparando Eclipse

Antes de empezar, hay que configurar el entorno de desarrollo. Nos bajaremos alguna implementación de jsf de sun, por ejemplo desde http://javaserverfaces.java.net/

Luego en Eclipse vamos a “Windows >> preferentes >> Java >> buid path >> User Libraries”:

Nos creamos unas variables de usuario, donde metemos las referencias al jar de jsf que vamos a usar. Yo he creado dos librerías de usuario, una con un jar, y otra con otros dos, que me he bajado de la misma página para probar.

Añadiendo la librería de JSF

Añadiendo la librería de JSF (pincha para agrandar)

A continuación vamos a las propiedades del proyecto (botón derecho) y localizamos los “Proyect Facets”. Marcamos la casilla de JavaServer faces y configuramos las user libraries que nos interese.

Configurando los Facets en Eclipse

Configurando los Facets en Eclipse (pincha para agrandar)

Seleccionando la librería

Seleccionando la librería

Con esto, cuando añadamos un proyecto JSF al tomcat, sabrá de donde tomar las librerías. Si se configuran correctamente las librerías en Maven, esto no hace falta, pero tampoco viene mal.

Configurando el Web.xml

En primer lugar se configura el servlet que va a atender las peticiones jsf:

Es el controlador que se encargará de las peticiones de “facets”, como se puede ver, está mapeado para que intercepte las peticiones bajo el path del mismo nombre.

El “context-param” que figura a continuación indica que estamos en el entorno de desarrollo, lo que permitirá mostrar cierta información adicional en el caso de que el nos equivoquemos en algo:

Las páginas a utilizar

Como hemos comentado, vamos a necesitar tres páginas:

  • mensaje.xhtml → Donde se escriben los datos del mensaje
  • confirmar.xhtml → Donde de muestra los datos y las opciones de enviar o editar
  • resultado.xhtml → Que muestra el mensaje de confirmación
Formularios

Formularios (pincha para agrandar)

La página “mensaje.xhtml”

En lo primero en lo que nos tenemos que fijar es en el espacio de nombres de nuestra página xhtml:

El primero es el estándar xhtml y los otros dos permiten usar etiquetas para el core jsf y para elementos html. Hay que tener en cuenta que las etiquetas jsf están pensadas para mostrar componentes en cualquier plataforma, pda, etc… y no solo en navegadores web.

En la página tenemos un h:head, un h:body y un h:form. Todos los componentes de un formulario jsf, deben ir dentro de un h:form. A continuación se ha definido una tabla, para colocar los elementos. Vamos a observar uno de ellos:

Se puede ver que es obligatorio (required=”true”), si no se rellena, se mostrará el mensaje en h:message for=”fremitente”. El mensaje de error se puede poner en cualquier sitio del formulario, hace referencia al campo por su etiqueta “fremitente”. En el mensaje de error, se usa lo que se pone en “label”. Lo siguiente en lo que nos tenemos que fijar es en: value=”#{userBean.firstName}”, que enlaza la propiedad del mismo nombre en el bean manejado (managed bean).

¿Qué es un managed bean?

Bien, son beans (pojo’s) que se registran en el contexto para que las usen los componentes jsf. Para que una aplicación jsf haga referencia a un bean y a sus métodos y propiedades, la clase debe encontrarse en el classpath y registrada en el “faces-config.xml”, o bien, anotada, como en el siguiente ejemplo:

La anotación @ManagedBean puede tener un atributo “name”, pero si se omite, usa el nombre de la clase poniendo el primer carácter en minúscula.

Hemos visto el campo “remitente”, que se “mapea” con la propiedad del bean. Vamos a ver otros campos. Si queremos un campo “fecha” que se mapee con una propiedad de tipo “Date” en el bean, hay que hacer la conversión:

Lo que podemos ver es que se usa la función que realiza la conversión aplicando el patrón que se indique, dicha función está entre etiquetas de apertura y cierre de h:inputText. Nos podemos ayudar de eclipse para cargar sugerencias, situando el cursor donde nos interese y pulsando “ctrl. + espacio”:

Propuestas de Eclipse

Propuestas de Eclipse (pincha para agrandar)

Aquí vemos otro ejemplo de edición:

Propuestas de Eclipse

Propuestas de Eclipse para campos JSF (pincha para agrandar)

Si nos fijamos, en el campo de tupo “email”, se invoca a la función “validaEmail(…)” del bean manejado:

Si se añade una etiqueta en el formulario se nos mostrarán todos los mensajes, vamos a ver un ejemplo del resultado:

Ejemplo mostrando los mensajes

Ejemplo mostrando los mensajes (pincha para agrandar)

He señalado en rojo el lugar donde se muestran todos los mensajes, que son los mismos que los que aparecen en cada uno de los campos.

Vamos a fijarnos ahora en el botón del formulario:

Con esto se está indicando que cuando se pulse el botón, si no hay ningún error, se vaya a la página “confirmar.xhtml”. Esto se llama “navegación implícita” y ocurre cuando no se define ninguna regla en el fichero facets-config.xml.

La página “confirmar.xhtml” y “resultado.xhtml”

La página es idéntica a  “mensaje.xhtml”, contiene un “h:head”, un “h:body” y un “h:form” que contiene una tabla, como en el caso anterior. Las únicas dos diferencias son, que por un lado, los campos tendrán la forma:

Es decir, una salida de texto, que muestra el contenido del bean manejado. La segunda diferencia está en los botones que hay que definir en el formulario:

Creo que se explica sólo. Si pulsamos el botón Editar, nos iremos a “mensaje.xhtml” y si pulsamos el botón “Confirmar” ejecutará la función “enviarMensaje” del bean manejado. Si analizamos la implementación de ese método que pusimos más arriba, se rellena un mensaje y se envía de manera “hardcode” a la página “resultado.xhtml”.

La implementación de la página “resultado.xhtml” es la misma que “confirmar.xhtml” pero sin los botones.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *