SpringBoot

Tutorial SpringBoot: Vista en Spring MVC con Thymeleaf

Spring Boot Thymeleaf: integración y uso. Domina la integración y uso de Thymeleaf en Spring Boot con ejemplos prácticos y detallados.

Spring MVC es un framework que facilita la creación de aplicaciones web siguiendo el patrón Modelo-Vista-Controlador. Spring MVC se encarga de la infraestructura necesaria para manejar solicitudes HTTP y delegar la lógica de negocio a los controladores correspondientes.

Thymeleaf se integra perfectamente con Spring MVC y puede ser utilizado para generar las vistas de las aplicaciones web. Thymeleaf utiliza expresiones de Spring para enlazar los datos del modelo a las vistas y generar el HTML resultante.

Thymeleaf

Thymeleaf es un motor de plantillas Java que se puede utilizar para generar HTML, XML, JavaScript, CSS y texto sin formato. Ha sido diseñado para ser utilizado en un entorno web, donde las plantillas HTML pueden ser procesadas en el servidor y enviadas al cliente como documentos HTML estáticos.

Thymeleaf proporciona una sintaxis especial que se puede usar en las plantillas para enlazar los datos del modelo a los elementos de la plantilla. Esta sintaxis se basa en atributos personalizados de los elementos HTML (los que comienzan con th:), conocidos como dialectos de Thymeleaf. Estos atributos son procesados por Thymeleaf en el servidor y eliminados del HTML resultante.

Por ejemplo, en la siguiente plantilla Thymeleaf:

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="es">
<body>
    <p th:text="${message}" />
</body>
</html>

El atributo th:text es un atributo de Thymeleaf que establece el contenido del elemento <p> al valor de la variable message del modelo. Cuando se procesa la plantilla en el servidor, Thymeleaf sustituye th:text por el valor de message y elimina el atributo th:text del HTML resultante.

Thymeleaf se integra perfectamente con Spring MVC, lo que le permite acceder directamente a los objetos del modelo de Spring y utilizar las expresiones de Spring (SpEL) para interactuar con ellos. Esto permite una integración sólida y coherente entre la lógica de control de las aplicaciones y la presentación de los datos.

Configuración de Thymeleaf en Spring MVC

La configuración de Thymeleaf en Spring MVC con Spring Boot es bastante sencilla debido a la autoconfiguración que proporciona Spring Boot. La primera parte de la configuración es agregar la dependencia necesaria al archivo pom.xml del proyecto.

<dependencies>
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-starter-thymeleaf</artifactId>
    </dependency>
</dependencies>

Con esta dependencia, Spring Boot autoconfigura Thymeleaf en la aplicación. Por defecto, Spring Boot configura Thymeleaf para buscar las plantillas en el directorio src/main/resources/templates.

Aunque la configuración por defecto suele ser suficiente para la mayoría de los proyectos, Spring Boot permite personalizar la configuración de Thymeleaf si es necesario. Para ello, se pueden establecer diversas propiedades en el archivo application.properties o application.yml de la aplicación.

Por ejemplo, para cambiar la ubicación de las plantillas, se puede establecer la propiedad spring.thymeleaf.prefix:

spring.thymeleaf.prefix=classpath:/mytemplates/

Para cambiar el sufijo de las plantillas (la extensión de archivo), se puede establecer la propiedad spring.thymeleaf.suffix:

spring.thymeleaf.suffix=.htm

Para deshabilitar el caché de las plantillas (útil durante el desarrollo para poder ver los cambios en las plantillas sin tener que reiniciar la aplicación), se puede establecer la propiedad spring.thymeleaf.cache:

spring.thymeleaf.cache=false

Estas son solo algunas de las propiedades que se pueden establecer para personalizar la configuración de Thymeleaf en una aplicación Spring Boot. La documentación de Spring Boot proporciona una lista completa de las propiedades disponibles.

Creación y uso de vistas con Thymeleaf

La creación y el uso de vistas con Thymeleaf en una aplicación Spring Boot es un proceso en el que se combinan el controlador de Spring y las plantillas de Thymeleaf.

Creación de Plantillas

Las plantillas de Thymeleaf son básicamente archivos HTML con una sintaxis especial de Thymeleaf que permite enlazar los datos del modelo a los elementos de la plantilla. Estos archivos HTML deben colocarse en la carpeta src/main/resources/templates de la aplicación.

Por ejemplo, supongamos que queremos crear una página de bienvenida que muestre un mensaje personalizado. Podríamos crear la siguiente plantilla (src/main/resources/templates/welcome.html):

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="es">
<body>
    <h1 th:text="${title}"></h1>
    <p th:text="${message}"></p>
</body>
</html>

Aquí, los atributos th:text son atributos de Thymeleaf que establecen el contenido de los elementos <h1> y <p> a los valores de las variables title y message del modelo.

Uso de Plantillas en los Controladores

En un controlador de Spring MVC con @Controller, se puede preparar un modelo y seleccionar una plantilla de Thymeleaf para presentarlo.

Por ejemplo, podríamos tener el siguiente controlador que maneja las solicitudes GET a /welcome:

@Controller
public class WelcomeController {

    @GetMapping("/welcome")
    public String welcome(Model model) {
        model.addAttribute("title", "Bienvenido a nuestra aplicación");
        model.addAttribute("message", "Esperamos que disfrutes de tu estancia.");
        return "welcome";
    }
}

Aquí, el método welcome agrega los atributos title y message al modelo, y luego devuelve el nombre de la plantilla Thymeleaf ("welcome") que se utilizará para presentar el modelo.

Cuando se procesa la solicitud GET a /welcome, el controlador prepara el modelo y Spring MVC selecciona la plantilla welcome.html. Thymeleaf procesa la plantilla, sustituyendo los atributos th:text por los valores correspondientes del modelo, y el resultado se envía al cliente como un documento HTML.

Uso de Expresiones en las Plantillas

Thymeleaf soporta una variedad de tipos de expresiones que permiten un enlace de datos más sofisticado. Algunos de los más utilizados incluyen:

Expresiones de variables: ${...} para acceder a los datos del modelo.
Expresiones de selección: *{...} para acceder a los datos del objeto de selección (utilizado en combinación con th:object).
Expresiones literales: 'one text', 1, true, null.
Expresiones de operaciones binarias y ternarias: +, -, *, /, %, and, or, ? :.
Expresiones de funciones de utilidad: #strings, #dates, #numbers, #calendars, #objects, #bools.

Con estas expresiones, se puede manipular y presentar los datos del modelo de muchas formas en las plantillas Thymeleaf.

Integración con Spring Boot

Al agregar la dependencia de Thymeleaf a un proyecto Spring Boot, este configura automáticamente Thymeleaf en la aplicación. Esta configuración por defecto incluye:

La configuración de un TemplateResolver que busca las plantillas en el directorio src/main/resources/templates.
La configuración de un TemplateEngine que procesa las plantillas con el dialecto de Thymeleaf para Spring.
La configuración de un ViewResolver que resuelve las vistas devueltas por los controladores como plantillas Thymeleaf.

Además de la configuración por defecto, Spring Boot permite personalizar la configuración de Thymeleaf a través de las propiedades de configuración que se pueden establecer en el archivo application.properties o application.yml.

Con la integración de Spring Boot, la utilización de Thymeleaf en una aplicación Spring MVC es tan sencilla como agregar la dependencia adecuada y luego utilizar Thymeleaf en las plantillas y controladores. Spring Boot se encarga del resto.

Finalmente, Thymeleaf también está integrado en la funcionalidad de recarga automática de Spring Boot (también conocida como "hot swapping"), lo que significa que los cambios en las plantillas Thymeleaf son automáticamente recogidos y aplicados sin necesidad de reiniciar la aplicación. Esta característica puede ser particularmente útil durante el desarrollo. Para activarla, necesitarás la dependencia spring-boot-devtools en tu archivo pom.xml:

<dependencies>
    ...
    <dependency>
        <groupId>org.springframework.boot</groupId>
        <artifactId>spring-boot-devtools</artifactId>
        <optional>true</optional>
    </dependency>
    ...
</dependencies>

Gracias a la integración de Spring Boot con Thymeleaf, desarrollar aplicaciones web con Spring MVC y Thymeleaf es una experiencia fluida y eficiente.

Conclusión

En resumen, la combinación de Spring MVC, Thymeleaf y Spring Boot proporciona una plataforma robusta y flexible para el desarrollo de aplicaciones web en Java.

Spring MVC ofrece un framework bien estructurado basado en el patrón de diseño Model-View-Controller (MVC), que promueve la separación de responsabilidades y facilita el desarrollo y el mantenimiento de aplicaciones web.

Thymeleaf complementa a Spring MVC proporcionando un potente motor de plantillas que se integra perfectamente con Spring. Gracias a su sintaxis natural y a su soporte para expresiones de Spring, Thymeleaf permite crear plantillas HTML dinámicas de manera fácil y eficiente. Además, su enfoque de "HTML natural" hace que las plantillas Thymeleaf sean legibles y utilizables incluso como HTML estático, lo que puede facilitar la colaboración entre desarrolladores y diseñadores.

Finalmente, Spring Boot agrega una capa adicional de conveniencia, proporcionando configuraciones por defecto y autoconfiguración para simplificar la configuración y el arranque de las aplicaciones. Gracias a la integración de Spring Boot con Thymeleaf, todo lo que se necesita para empezar a usar Thymeleaf en una aplicación Spring MVC es agregar la dependencia correspondiente.

Juntas, estas tres tecnologías forman una pila de desarrollo potente y flexible que puede ayudar a los desarrolladores a crear aplicaciones web de alta calidad de manera eficiente. Ya sea que se esté creando una pequeña aplicación web o un sistema empresarial a gran escala, Spring MVC, Thymeleaf y Spring Boot ofrecen las herramientas y las capacidades necesarias para hacer el trabajo.

Certifícate en SpringBoot con CertiDevs PLUS

Ejercicios de esta lección Vista en Spring MVC con Thymeleaf

Evalúa tus conocimientos de esta lección Vista en Spring MVC con Thymeleaf con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.

Spring Boot Thymeleaf: integración y uso. Domina la integración y uso de Thymeleaf en Spring Boot con ejemplos prácticos y detallados.

Thymeleaf

Configuración de Thymeleaf en Spring MVC

Creación y uso de vistas con Thymeleaf

Creación de Plantillas

Uso de Plantillas en los Controladores

Uso de Expresiones en las Plantillas

Integración con Spring Boot

Conclusión

Ejercicios de esta lección Vista en Spring MVC con Thymeleaf

Todas las lecciones de SpringBoot

Introducción Y Entorno

Introducción Y Entorno

Introducción Y Entorno

Spring Web

Spring Web

Spring Web

Spring Web

Spring Web

Persistencia Con Spring Data

Persistencia Con Spring Data

Persistencia Con Spring Data

Persistencia Con Spring Data

Persistencia Con Spring Data

Persistencia Con Spring Data

Persistencia Con Spring Data

Persistencia Con Spring Data

Persistencia Con Spring Data

Persistencia Con Spring Data

Persistencia Con Spring Data

Integración Frontend

Integración Frontend

Integración Frontend

Seguridad Con Spring Security

Seguridad Con Spring Security

Seguridad Con Spring Security

Objetivos de aprendizaje de esta lección