Al trabajar con desarrollo web en frameworks probablemente te hayas cruzado con Thymeleaf de Spring Boot. Este es un motor de plantillas que hace posible integrar la capa de viesta de una aplicación. En este artículo queremos contarte un poco acerca de thymeleaf de spring boot, cómo configurarlo y cómo funciona.
¿Qué es Thymeleaf?
Thymeleaf de spring boot es un motor de plantillas para Java que hace posible que se genere HTML dinámico en aplicaciones web. Se diferencia de otros motores como JSP, porque el thymeleaf de spring boot tiene una gran ventaja y es que sus plantillas son “naturales”, es decir, pueden verse en un navegador sin que sea necesario que el server las procese.
Cuando haces uso de thymeleaf de spring boot, este motor se puede integrar con el framework, lo que facilita la creación de aplicaciones web con el patrón Modelo Vista Controlador.
Configuración básica de Thymeleaf de Spring Boot
La mayor parte del proceso del thymeleaf de spring boot la hace el propio Spring Boot con sus starters. Vamos a ver paso a paso cómo configurarlo:
Crear un proyecto con Spring Initializr
Lo primero que haremos para empezar a usar Thymeleaf es crear un proyecto en Spring Boot. Para ello, puedes utilizar Spring Initializr, una herramienta que te permite configurar tu proyecto:
- Selecciona las dependencias básicas: Spring Web y Thymeleaf.
- Descarga el proyecto.
Configuración del archivo pom.xml
Una vez descargado el proyecto, verás que Spring Boot ya ha añadido las dependencias necesarias para Thymeleaf de spring boot en tu archivo pom.xml. El archivo debe tener una estructura similar a esta:
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
</dependencies>Esto es todo lo que necesitas para comenzar a trabajar con Thymeleaf de Spring Boot. Ahora bien, el paso que sigue es crear las plantillas y el controlador que renderizará esas vistas.
Crear un controlador en Spring Boot
Si queremos mostrar contenido dinámico en una vista lo que debemos hacer es buscar un controlador que maneje las solicitudes HTTP y pase datos a la plantilla thymeleaf de spring boot. Creemos un controlador básico en Sprig Boot para que veas cómo es:
package com.example.demo.controller;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
@Controller
public class DemoController {
@GetMapping("/saludo")
public String saludo(Model model) {
model.addAttribute("mensaje", "¡Hola desde Thymeleaf y Spring Boot!");
return "saludo";
}
}Este controlador maneja la ruta /saludo y añade un mensaje al modelo que luego se mostrará en la vista Thymeleaf de spring boot.
Crear una plantilla con Thymeleaf
Una vez creado el controlador, debemos crear la plantilla que mostrará el mensaje. Las plantillas Thymeleaf en Spring Boot se colocan en el directorio resources/templates.
Crea un archivo llamado saludo.html en ese directorio con el siguiente contenido:
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<title>Saludo</title>
</head>
<body>
<h1 th:text="${mensaje}">Mensaje de bienvenida</h1>
</body>
</html>Aquí estamos usando la expresión th:text para renderizar el valor de la variable mensaje que pasamos desde el controlador.
Integración de Thymeleaf con Spring Boot
Una de las cosas más interesantes que puedes hacer con el thymeleaf de spring boot es integrar ambas plataformas. No es necesario que configures muchas cosas, ya que al tener el starter de thymeleaf en las dependencias, Spring boot ya sa be cómo manejar las plantillas. Si accedes a http://localhost:8080/saludo, podrás ver el mensaje que dice “hola desde Thymeleaf y Spring Boot” dentro del navegador.
¿Qué otras funciones tiene el Thymeleaf de Spring Boot?
Thymeleaf de spring boot no solo muestra texto dinámico, sino que permite realizar otras operaciones, entre ellas:
Bucles y condicionales
Con Thymeleaf puedes iterar sobre colecciones y añadir condiciones para mostrar o esconder elementos. Veamos un ejemplo:
Bucles con th:each:
<ul><li th:each="item : ${items}" th:text="${item}"></li>
</ul>
Condicionales con th:if:
<p th:if="${condicion}">Esta es una condición verdadera.</p>Formularios
Si tu aplicación web necesita manejar formularios, Thymeleaf ofrece un soporte sencillo para trabajar con formularios vinculados a objetos en Spring.
<form th:action="@{/procesar}" th:object="${usuario}" method="post">
<input type="text" th:field="*{nombre}" placeholder="Nombre"/>
<input type="submit" value="Enviar"/>
</form>El día de hoy en keepcoding queremos darte una oportunidad única para que aprendas programación, aun si no tienes ningún conocimiento en ello. Se trata del bootcamp en programación web, en donde aprenderás a crear páginas web impresionantes y rápido. ¡Únete y recibe grandes beneficios ahora!
