Tutorial Java Web: JSF + Hibernate + BootsFaces [Parte 10: Usando BootsFaces]
Hola 👋 y bienvenido a la décima y última parte de este tutorial en el que construiremos nuestra propia aplicación de tareas. Si has seguido los tutoriales anteriores, en este punto debes tener una aplicación web totalmente funcional, sin embargo no puedo dejarte ir con un front-end tan insulso. El objetivo de este tutorial será embellecer nuestras vistas utilizando la tecnología de BootsFaces.
BootsFaces es un framework JSF basado en Bootstrap y jQuery, utilizado para armar componentes de nuestra interfaz gráfica de una forma sencilla y eficaz, además el resultado final es agradable a la vista. Aquí el link a la página oficial del proyecto:
Debes saber que BootsFaces es solo uno de los varios frameworks JSF que existen, otras alternativas que, recomiendo, debes estudiar incluyen:
- PrimeFaces
- RichFaces
Para empezar, abre tu proyecto JSFTutorial en tu IDE Eclipse, dirígete a tu pom.xml y agrega la siguiente dependencia:
BootsFaces carga un tema por defecto para aplicar a sus componentes, sin embargo el framework implementa los mismos temas que BootsWatch (tecnología de temas para Bootstrap), así que puedes ir a su sitio web y elegir el que más te guste:
Una vez lo tengas, ubica el archivo web.xml en tu proyecto y agrega las siguientes líneas de código:
En las etiquetas de param_value coloca el nombre del tema que más te haya gustado, en mi caso yo elegiré flatly.
Por último agrega el namespace de BootsFaces a todas tus vistas:
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:b="http://bootsfaces.net/ui">Lo primero que vamos a hacer es quitar ese remedo de barra de navegación y colocar en su lugar algo más llamativo. Dirígete a tu archivo usuarios.xhtml y remueve las etiquetas <ul> junto con su contenido y en su lugar coloca lo siguiente:
Tu archivo debería verse así:
Y si ahora ejecutas tu aplicación verás algo parecido a esto (depende del tema que hayas elegido):
Mucho mejor que lo que teníamos antes ¿cierto? Nota además que el estilo de los demás elementos también ha cambiado ligeramente.
Sin embargo si vamos a nuestra vista de tareas vemos que tiene el estilo anterior. Para solucionar eso podríamos simplemente copiar y pegar el código del <b:navBar> allá, pero eso es sólo la salida fácil.
¿Recuerdas la carpeta templates? Por allá en el primer tutorial la mencionamos, diciendo que era el lugar dónde guardamos trozos de código que están presentes en todas nuestras vistas, pero no hicimos nada con ella hasta ahora. La idea es crear lo que se conoce como una plantilla, que contenga la barra de navegación, de manera que nuestras dos vistas principales solo tengan que agregar lo que es propio de cada una.
Para crear una plantilla nos apoyamos en las etiquetas facelets de JSF, las que usamos en el tutorial número 8 para iterar sobre nuestra lista, resulta que además de eso también tienen un conjunto de etiquetas especiales para ayudarnos en esta tarea:
<ui:insert>: Sirve para definir los espacios en nuestra plantilla dónde vamos a poder insertar código personalizado<ui:define>: Cuando usemos la plantilla, sirve para especificar que parte de ella queremos cambiar<ui:include>: Incluye el contenido de un archivoxhtmlen otro archivo del mismo tipo<ui:composition>: Carga una plantilla a través del atributo template
Para crear nuestra plantilla, dirígete a tu carpeta WebContent > templates y borra el archivo commons que está ahí (sí no lo has hecho ya) y en su lugar crea un nuevo archivo layout.xhtml . Cuando estés listo, copia y pega el siguiente código en el archivo:
No es muy diferente del código que hemos desarrollado en nuestras vistas hasta ahora. Observa que además de agregar la barra de navegación, hacemos uso de <ui:insert> para:
- El título de la página
- El contenido de la página
Pues es diferente para cada una. Ahora dirígete a tu archivo usuarios.xhtml y reemplaza el código que tengas ahí por el siguiente:
Lo que estamos haciendo aquí es:
- Cargar la plantilla que acabamos de hacer con la etiqueta
<ui:composition> - Utilizar la etiqueta
<ui:define>para sobreescribir el contenido dinámico de la plantilla
Observa que hemos eliminado las etiquetas <h:head> y <h:body> pues ya están definidas en la plantilla y no hace falta volverlas a colocar. Repite el proceso para tareas.xhtml y ejecuta tu aplicación, verás que ahora la barra de navegación aparece en ambas páginas y sin necesidad de repetir código.
Ahora que tenemos la la navegación cubierta, vamos a trabajar en la recolección de datos.
Estilizando la Vista de Usuarios
Hay muchas formas en las que podríamos adaptar la página para recolectar la información pero a mi siempre me han gustado las ventanas modales y ya que BootsFaces las soporta, ¿Porque no usarlas?
Además del modal, estamos aprovechando las etiquetas estilizadas inputText de BootsFaces dentro de una etiqueta <h:panelGrid> para organizarlas en columnas y agregamos un botón extra en el tope para activar la ventana modal. El resto es lo mismo que teníamos anteriormente pero usando las etiquetas de BootsFaces. Ese código produce el siguiente resultado:
Sin duda mucho mejor que lo que teníamos anteriormente. Ya nuestra página empieza a tomar forma, nos falta estilizar la manera como mostramos los registros guardados, hay muchas formas de hacerlo sin embargo, para mí, es más conveniente mostrar los datos en una tabla. BootsFaces nos ofrece una etiqueta para crear tablas muy parecida a <ui:repeat> llamada <b:dataTable> en el sentido de que tienen los mismos atributos value y var que tienen la misma función.
Para crear las columnas dentro de la tabla utilizamos la etiqueta:
<b:dataColumn value="#{var}"/>
Dónde value es el atributo que controla lo que se verá en la columna y podemos acceder a los atributos del objeto especificado en el atributo var justo como en <ui:repeat> . Aplicando eso a nuestra página tendríamos algo como esto (reemplazando la etiqueta <ui:repeat> y su contenido):
Por defecto la tabla toma los nombres de los atributos para colocarlos como los nombres de las columnas, podemos sobreescribir este comportamiento utilizando un facet (un facet no es más que un contenedor) con el nombre de header. Además de eso la tabla viene con widgets de paginación, sin embargo para que la página no se vea muy compleja, decidí quitarlos, pero puedes agregarlos si deseas.
Con esto nuestra página se ve así:
Sin duda se aprecia la diferencia. Podemos dar por terminada nuestra página de usuarios, ahora vamos a estilizar la página de tareas.
Estilizando la Vista de Tareas
En lo que respecta a la recolección de datos, el proceso es igual al de la sección anterior, por ello te invito a realizarlo por ti mismo.
En lo que vamos a enfocarnos es en cómo podemos mostrar la información de las tareas, podríamos mostrarlo en forma de tabla también, pero dado que la descripción de una tarea es considerablemente más grande en términos de caracteres, puede que no se vea muy bien. Por ello vamos a diseñar un panel del mismo ancho que la página, de esa manera podremos mostrar la información sin miedo a que se verá mal.
BootsFaces nos ofrece soporte para crear un panel con la etiqueta <b:panel> , y podemos introducir dentro la información de cada tarea. Un posible acercamiento sería el siguiente:
Como ves, seguimos manteniendo la etiqueta <ui:repeat> , dentro de ella estamos creando un panel colocando el título de la etiqueta como la cabecera del panel y mostrando la demás información como ya hemos visto anteriormente. Este código produce el siguiente resultado:
Se ve bien, sin embargo nota que en caso de que la tarea no tenga una descripción, solo se imprime un espacio en blanco, cuando deberíamos indicarle al usuario que en efecto la tarea carece de descripción. Para ese fin podemos hacer uso del atributo rendered , si es true entonces el contenido de la etiqueta se muestra, caso contrario si es false. Luego entonces podríamos hacer lo siguiente:
- Le decimos al
<h:outputText>de la descripción a través del atributorenderedque se muestre sólo sí el stringtarea.descripciónno es nulo - Creamos una etiqueta
<h:outputText>adicional que muestre el mensaje “No hay descripción disponible” en caso contrario
Aplicando eso a nuestra código, quedaría:
Y si ejecutamos, nuestra página ahora le avisa al usuario cuando una tarea no tiene descripción, como es de esperarse:
¡Hurra 🎉🎉! Con esto hemos integrado satisfactoriamente BootsFaces a nuestro proyecto, creando páginas estilizadas para los usuarios y las tareas. Espero que esto te sirva de inspiración y que te motive a crear nuevas y originales formas de mostrar información utilizando esta poderosa herramienta.
Archivo usuarios.xhtml terminado:
Archivo tareas.xhtml terminado:
¡Felicitaciones 🥳🥳! Has terminado con éxito esta serie de tutoriales. He aquí un repaso de todo lo que hicimos:
- Aprendimos como crear un proyecto Java web con JSF y transformarlo a un proyecto Maven
- Aprendimos a integrar Hibernate a nuestro proyecto
- Aprendimos a crear las entidades de nuestra aplicación y cómo mapearlas a tablas en nuestra base de datos
- Creamos la capa de repositorio con los metodos de manipulacion de datos (CRUD)
- Creamos la capa de servicios cuyos métodos complementan a los de los repositorios
- Creamos los Managed Beans que gestionan la información mostrada en la vista conocidos como controladores
- Aprendimos a enviar información desde nuestra vista hacia los controladores y guardarla en la base de datos consumiendo los métodos de la capa de servicios
- Aprendimos acerca de la Inyección de Dependencias
- Aprendimos como crear páginas bellas y llamativas utilizando BootsFaces
Podrás tomar estos conceptos y extrapolarlos a cualquier proyecto que involucre JSF e Hibernate o JPA. Me emociona pensar en lo que podrás lograr a partir de aquí.
Muchas gracias por por tomar esta serie de lecciones y espero verte en un próximo tutorial 👋.
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-571752c3a1c0
