Spring MVC Integrando Thymeleaf

Thymeleaf es un motor de plantillas, el mismo es usado para generar vistas a partir de plantillas HTML, se integra perfectamente con Spring MVC, soporta internacionalización, el uso y validación de formularios, Thymeleaf es una alternativa moderna, rápida y limpia en comparación con las tradicionales vistas JSP + JSTL.

Para integrar Thymeleaf a un proyecto web Spring MVC debemos agregar las siguientes dependencias a nuestro archivo pom.xml.

<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-webmvc</artifactId>
    <version>${spring.version}</version>
</dependency>

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>${thymeleaf.version}</version>
    <scope>compile</scope>
</dependency>

La dependencia thymeleaf-spring4 esta preparado para integrarse con la versión Spring 4.x por lo que si trabajamos con la versión Spring 3.x debemos cambiar a thymeleaf-spring3.

Para poder utilizar el motor de plantillas Thymeleaf en una aplicación web Spring MVC necesitamos agregar los siguientes beans a nuestra configuración.

@Bean
public SpringResourceTemplateResolver templateResolver() {
    SpringResourceTemplateResolver templateResolver = new SpringResourceTemplateResolver();
    templateResolver.setApplicationContext(this.applicationContext);
    templateResolver.setPrefix("/WEB-INF/templates/");
    templateResolver.setSuffix(".html");
    return templateResolver;
}

Este es el encargado de cargar los archivos de plantillas que serán usados para generar la vista, la propiedad prefix indica la carpeta donde se ubicarán las plantillas y suffix la extensión de las misma.

@Bean
public SpringTemplateEngine templateEngine() {
    SpringTemplateEngine templateEngine = new SpringTemplateEngine();
    templateEngine.setTemplateResolver(templateResolver());
    templateEngine.setEnableSpringELCompiler(true);
    return templateEngine;
}

Este se encargará de procesar la plantilla y generar la vista final, setEnableSpringELCompiler() habilita o desactiva el compilador SpringEL.

@Bean
public ThymeleafViewResolver viewResolver() {
    ThymeleafViewResolver viewResolver = new ThymeleafViewResolver();
    viewResolver.setTemplateEngine(templateEngine());
    return viewResolver;
}

El controlador nos indica el nombre lógico de la vista y el ThymeleafViewResolver es encarga de resolver el archivo físico a partir de este nombre lógico, en las vistas JSP esta tarea se delegaba al InternalResourceViewResolver.

Añadimos el archivo /WEB-INF/templates/home.html esta será nuestra primera plantilla.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8"/>
        <title>Spring Thymeleaf</title>
    </head>
    <body>
        
        <p th:text="'La fecha es: ' + ${fecha}" />
        
    </body>
</html>

Lo primer que debemos hacer es agregar el namespace xmlns:th="http://www.thymeleaf.org", usando th:text="'La fecha es: ' + ${fecha}" accedemos al atributo fecha del modelo, la sintaxis para obtener un atributo del modelo es: ${...} dentro indicamos el nombre correspondiente.

@Controller
public class HomeController {

    @RequestMapping("/home")
    public String viewHomePage(Model model) {
        model.addAttribute("fecha", LocalDate.now());
        return "home";
    }
}

Nuestro controlador añade el atributo fecha al modelo, si deseas saber más sobre los controladores Spring MVC, al correr la aplicación en el servidor Apache Tomcat 8.x tendremos el siguiente resultado.

Thymeleaf integrado a una aplicación web Spring MVC

A la hora de utilizar Thymeleaf contamos con diversas etiquetas, cada una con funcionalidades especificas, en nuestro primer ejemplo vimos th:text="..." la cual es usada para generar un texto, utilizando ${...} accedemos al atributo del modelo, indicando su nombre, también podemos utilizar #{...} para acceder a una clave en un archivo de propiedades, hacemos esto al crear mensajes i18n.

# archivo src/main/resources/messages_en.properties
mensaje.fecha=La fecha de hoy es:

Modificamos la vista para utilizar los mensajes del archivo de propiedades.

<p th:text="#{mensaje.fecha} + ${fecha}" />

Spring Thymeleaf i18n

Para recorrer los elementos de una lista usamos th:each, para el ejemplo vamos a agregar un atributo al modelo, lo haremos usando la anotación @ModelAttibute también podemos hacerlo a través del objeto Model como en los ejemplos anteriores.

@ModelAttribute("usuarios")
public List<Usuario> getUserList() {
    return Arrays.asList(
        new Usuario("Juan", "Perez", "jp@gmail.com", "1a", 20, true),
        new Usuario("Maria", "Lopez", "ml@gmail.com", "1b", 21, false),
        new Usuario("Beto", "Luna", "bluna@gmail.com", "1c", 20, true)
    );
}

Este fragmento de código debemos agregarlo al controlador HomeController, con él podremos acceder a la lista de usuarios en la vista Thymeleaf del siguiente modo:

<table>
    <tr th:each="user: ${usuarios}">
        <td th:text="${user.nombre}" />
        <td th:text="${user.apellido}" />
        <td th:text="${user.correo}" />
    </tr>
</table>

El secreto esta en th:each="user: ${usuarios}" con este código recorremos cada uno de los elementos de la lista, en ${...} indicamos el nombre del atributo, user es una variable que apuntará a cada uno de los elemento de la lista, luego usamos el ya conocido th:text para mostrar las respectivas propiedades de la clase Usuario.

image

En la clase Usuario tenemos un campo booleano que usamos para indicar si el mismo es hombre (true) o mujer (false), usaremos th:if y th:unless, el primero genera el tag HTML correspondiente si la condición es verdadera, el segundo hace lo contrario, genera el tag si la condición es falsa.

<td>
    <span th:if="${user.sexo}" th:text="Hombre"></span>
    <span th:unless="${user.sexo}" th:text="Mujer"></span>
</td>
  • Si la condición de th:if es TRUE se genera: <span>Hombre</span> .
  • Si la condición de th:unless es FALSE se genera: <span>Mujer</span> .

image

Es posible evaluar condicionales usando th:switch y th:case añadiremos un campo al que llamaremos tipo a nuestra clase Usuario, es campo es una enumeración que define el tipo de usuario.

public enum Tipo {
    Administrador, 
    Estandar,
    Anonimo
}

Para comprobar el tipo de usuario en la plantilla hacemos lo siguiente:

<td th:switch="${user.tipo.toString()}">
    <span th:case="'Administrador'" th:text="ADM" />
    <span th:case="'Estandar'" th:text="STD" />
    <span th:case="'Anonimo'" th:text="ANM" />
</td>

El resultado en el navegador es:

image

Aun existen muchas cosas por ver, lo haremos en el siguiente tutorial en cual veremos como trabajar con formularios y otras cosas sencillas pero muy útiles.

Comentarios

  1. Al usar el método setEnableSpringELCompiler(boolean) Eclipse muestra el siguiente error:

    The method setEnableSpringELCompiler(boolean) is undefined for the type SpringTemplateEngine

    ¿Alguna idea? Gracias

    ResponderEliminar

Publicar un comentario

Entradas populares de este blog

Conectar SQL Server con Java

Detección de rostros

Instalar OpenCV para Python en Windows