Tutorial Java Web: JSF + Hibernate + BootsFaces [Parte 7: Introducción a los Managed Beans]

Hola 👋 y bienvenido a la séptima parte de este tutorial en el que construiremos nuestra propia aplicación de tareas en JSF. En tutoriales anteriores nos hemos enfocado en el back-end de nuestra aplicación y finalizamos en el tutorial pasado con el correcto guardado de nuestros usuario y tareas, sin embargo lo hicimos a través de una aplicación Java normal, no una aplicación Web, y es precisamente en lo que trabajaremos a partir de ahora.

Antes de saltar de lleno a la construcción de las vistas (la capa de presentación) vamos a indagar un poco en los controladores y en como JSF es capaz de gestionar la información que se muestra en las páginas.

Un Managed Bean es un Java Bean común y corriente que está siendo manejado a través del framework de JSF, es el trabajo del MB de gestionar la información (a través de atributos y métodos) que se muestra en las vistas XHTML, piensa en ellos como los controladores en el modelo MVC. Podemos registrar un MB a través de un archivo de configuración XML o, más fácilmente, a través de anotaciones.

¿Cómo registrar un Managed Bean?

Antes de la versión JSF2.3, un Managed Bean se registraba con la anotación:

• @ManagedBean(name="<bean>")

A partir de la versión JSF2.3 esta anotación se volvió obsoleta y fue reemplazada por:

• @Named("<name>")

Y es la que usaremos en nuestro proyecto. El atributo name sirve para darle un nombre a nuestro Bean y es opcional, de no pasarle ningún argumento tomará el nombre de la clase en formato camelCase.

Además de registrarlo, tenemos que definir el contexto en el que nuestro Bean va a desarrollarse. Piensa un momento en el ciclo de vida de una clase en una aplicación Java normal, los datos que guardemos vivirán en memoria mientras la aplicación siga corriendo, una vez se cierre (si no se persistieron los datos) los datos serán eliminados por el Garbage Collector. De la misma forma JSF define no una sino 5 contextos diferentes para nuestros MB que explicaremos a continuación.

Tipos de Contexto (Scope) en JSF

Los contextos (scopes) en JSF definen el ciclo de vida de los Managed Beans y podemos implementarlos usando una de las siguientes anotaciones:

1. @RequestedScope: El Bean es creado cuando se realiza una petición HTTP y es destruido cuando la respuesta asociada a la petición es enviada de vuelta
2. @NoneScoped : El Bean es creado durante el análisis de expresión de lenguaje de las vistas y es destruido una vez concluye [el análisis]. Hablaremos acerca del Lenguaje de Expresión más adelante.
3. @ViewScoped : El Bean es creado y existe mientras el usuario interactúa con la página que hace referencia al bean y es destruido cuando el usuario cambia a una vista diferente
4. @SessionScoped : El Bean es creado cuando la primera petición HTTP es enviada a la aplicación y existe mientras la sesión HTTP exista, una vez se invalide, el bean es destruido
5. @ApplicationScoped : El Bean es creado cuando la aplicación inicia y sobrevive el tiempo que la aplicación se esté ejecutando y es destruido cuando deje de estarlo, similar a lo que mencionamos anteriormente con las clases Java normales

Si no se coloca una anotación, el scope por defecto será @RequestScoped . Usar uno u otro dependerá de ti como programador y los requisitos que necesites cumplir. En nuestro proyecto usaremos la anotación @RequestScope en los controladores, pues nuestro Bean tendrá la capacidad de crear un nuevo Usuario o una nueva Tarea a través de un form y es lógico que los datos se reinicien cada vez que mandemos una petición HTTP.

El objetivo de este tutorial es tener un primer acercamiento a los controladores de nuestra aplicación y cómo podemos navegar entre diferentes páginas mostrando diferente información en cada una.

Para empezar, abre el proyecto JSFTutorial en tu IDE Eclipse y dentro de la carpeta source de tu código Java crea un nuevo paquete llamado controllers, en él crea una nueva clase llamada UsuarioController (el nombre puede ser cualquiera que desees, sin embargo ten en cuenta que deberás referenciar tu bean en la vista con el nombre que desees colocar) tal que así:

A continuación coloca las anotaciones que discutimos anteriormente antes de la definción de tu clase y crea un nuevo atributo (puede ser el tipo y tener el valor que prefieras) con sus respectivos métodos getter y setter (recuerda que podemos usar Lombok para ello), en mi caso tengo lo siguiente:

Para probar nuestro nuevo MB, dirígete a la carpeta WebContent > pages y elimina los archivos que vienen ahí por defecto, en su lugar crea un nuevo archivo XHTML llamado usuarios.xhtml y copia y pega el siguiente código:

No es más que un poco de HTML común y corriente excepto por la línea 9. ¿Recuerdas aquello del Lenguaje de Expresión? Pues es justamente eso, es el lenguaje que JSF nos ofrece para poder evaluar la expresión que esté dentro del #{…}, esto es especialmente útil para:

• Referenciar propiedades guardadas dentro de las instancias de nuestros Beans
• Acceder a los elementos dentro de una colección como Listas, Mapas, etc
• Evaluar expresiones aritméticas

Antes de ejecutar la aplicación y ver esto en acción, debemos hacer unos cambios:

• Dirígete a tu archivo faces-config.xml y elimina el contenido dentro de las etiquetas principales (ya no son necesarias las reglas de navegación), debería quedarte así:

• Dirígete a tu archivo web.xml y reemplaza el código que tengas ahí con el siguiente (solo nos interesa el mapeo de archivos *.jsf):

• Cambia la extensión de tu archivo index.html por index.xhtml y reemplaza el código que tengas ahí por el siguiente:

Cuando hayas realizado esto y estés listo, ejecuta tu aplicación como una aplicación Java Web en tu servidor y…

¡Voilá! Nuestra aplicación funciona y nuestro mensaje se muestra en la página. Pero espera, se supone que al atributo mensaje en nuestro Managed Bean es privado ¿cómo JSF está accediendo a él? Pues por debajo de cuerdas lo que JSF hace durante el análisis del Lenguaje de Expresión es reemplazar la sentencia usuarioController.mensaje por usuarioController.getMensaje() y puedo demostrartelo.

Dirígete nuevamente a tu clase UsuarioController y remueve la anotación @Getter de Lombok, en su lugar crea el método de acceso manualmente de la siguiente forma:

Y si ahora ejecutamos nuevamente nuestra aplicación, obtenemos:

Justo como esperábamos, ¿genial, no? Ésta característica es particularmente útil si necesitamos efectuar una operación sobre el atributo antes de enviarlo a la vista.

Para terminar este tutorial, vamos a repetir el proceso para nuestra clase Tarea:

• En la carpeta pages crea un nuevo archivo llamado tareas.xhtml
• En el paquete controllers crea una clase llamada TareaController y repite el proceso que hicimos con la clase anterior (puedes copiar el mismo código):

• En el archivo usuarios.xhtml copia y pega el siguiente código:

• En el archivo tareas.xhtml copia el mismo código de arriba y cambia la línea 12 por <p>#{tareaController.mensaje}</p>

Ejecuta tu aplicación una vez más y verás que ahora puedes navegar entre ambas páginas, cada una accediendo a su propio Managed Bean controller:

Página usuarios

Página tareas

¡Felicidades 🥳! Acabas de crear una aplicación java web funcional. Lo que falta ahora es conectar nuestros controladores a los servicios que creamos en tutoriales anteriores, de manera que podamos registrar nuevos usuarios y tareas desde sus respectivas páginas, que es la finalidad de la capa de presentación, y empezaremos con ello a partir del próximo tutorial. Muchas gracias por leer hasta aquí y espero verte en una próxima ocasión.

Si te gustó el tutorial y quieres apoyarme para seguir creando más contenido así puedes hacerme una donación aquí.

Tutorial anterior: https://medium.com/@devtony101/tutorial-java-web-jsf-hibernate-bootsfaces-7031bec19abc

Tutorial siguiente: https://medium.com/@devtony101/tutorial-java-web-jsf-hibernate-bootsfaces-8aca49a41f44