Spring Boot Web 6/10 – Thymeleaf

18

En el tutorial anterior, revisamos cómo utilizar Controladores Web. En este tutorial, revisaremos cómo configurar Thymeleaf en Spring Boot. 🤓

Como lo mencionamos en el artículo inicial, el objetivo de esta serie de tutoriales es explicar cómo crear y configurar una aplicación web con Spring Boot, Webjars y autenticación OAUTH2 con Google. 🍃

Introducción

Thymeleaf es un sistema de templetes de HTML, nos permite desplegar información desde una aplicación web basada en Java sin necesidad de usar JSPs y de una forma muy sencilla. Provee de etiquetas para ello y los archivos que utiliza son de HTML puro.

Dependencias

Comenzaremos por agregar las dependencias necesarias de Thymeleaf, nota que la primera de ellas es un Starter de Spring Boot que agregamos con Spring Initializr. Las siguientes dos nos permitirán usar las capacidades de seguridad de Thymeleaf y Spring Boot.

Layout

Para comenzar agregaremos un templete principal en el que incluiremos el header y footer del proyecto, así como un segmento de HTML para insertar cada una de las diferentes páginas.

Es importante que veamos la etiqueta de main role, ya que dentro de esta etiqueta, se insertará el contenido de todas las páginas que ocupen este decorador.

Finalmente, observa como usamos el dialecto de seguridad para mostrar el botón de login si el usuario no está autenticado o mostrar el botón de logout si el usuario ya está autenticado. El tema de Logout lo veremos en próximos tutoriales.

Templates

A continuación se muestran un par de documentos HTML, que se insertan dentro del decorador revisado en el punto anterior, primeramente revisaremos el Index o página principal, en la cual únicamente mostramos un previo de la página y damos la bienvenida.

Para insertar nuestra vista en el decorador revisado en el punto anterior, solo incluiremos la propiedad layout:decorate=”~{layout.html}” dentro de nuestra etiqueta html. Nota como se usa el dialecto de seguridad para mostrar la bienvenida a un usuario autenticado o uno anónimo.

El siguiente template que revisaremos es el de la página que muestra los eventos, en ella tenemos una tabla qu despliega una colección de datos.

Para lograr esto, creamos la estructura de la tabla en HTML y luego mediante un for each de Thymeleaf, desplegaremos la información recibida desde el controller como variable.

Continúa con el tutorial

Recuerda que estar serie cuenta con muchos tutoriales, puedes encontrar el siguiente sobre Webjars a continuación:

Spring Boot Web 7 – Webjars

Repositorio de Github

Recuerda que puedes encontrar todo el código de esta aplicación en mi repositorio de Github (no olvides darle estrellita 🌟):

https://github.com/chuucks/Spring-Boot-Web-OAUTH2


Recuerda que el uso y configuración de Thymeleaf en Spring Boot mostrado en este proyecto tiene únicamente fines ilustrativos para la comunidad de Codesolt.

Comments

comments