Ticker

6/recent/ticker-posts

Thymeleaf con Spring Boot

Hadsonpar enero 11, 2023

Hoy en día los motores para la generación de plantillas para el front-end de las aplicaciones web es fundamental en la etapa de desarrollo, en este tutorial realizaremos los pasos necesarios para trabajar con Thymeleaf y Spring Boot.

Requisitos:

  • Java 17.
  • Maven 3.8.6.
  • Spring Boot 3.0.1.
  • Spring Tool Suite (STS).

Lo que veremos en este tutorial:

  1. ¿Que es Thymeleaf?
  2. Dependencias a considerar.
  3. Creando el Archivo HTML.
  4. Creando el Controlador.
  5. Ejecutando el proyecto.

1. ¿Qué es Thymeleaf?

Thymeleaf es el motor de plantillas basado en XML/XHTML/HTML5 que nos permite utilizar tanto en el desarrollo de entornos web como en otros entornos no web, es decir, es una tecnología que nos va a permitir definir nuestras plantillas teniendo en cuenta nuestro modelo de datos. El objetivo principal de Thymeleaf es facilitar plantillas naturales y elegantes a nuestro flujo de trabajo en la fase de desarrollo; en manera resumida podemos indicar que son HTML que se puede mostrar correctamente en los navegadores y también trabajar como prototipos, y todo esto, como consecuencia generá mayor colaboración en los equipos de desarrollo.

2. Dependencias a considerar.

Se necesaitan dos dependencias para nuestro proycto de Thymeleaf: Spring Web y Thymeleaf, ambas dependencias deben estar en el achivo pom.xml del proyecto creado:

Seleccionar la dependencias Spring Web y Thymeleaf, finalmente clic en Finish


<?xml version="1.0" encoding="UTF-8"?>

<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"

xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">

<modelVersion>4.0.0</modelVersion>

<parent>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-parent</artifactId>

<version>3.0.1</version>

<relativePath/> <!-- lookup parent from repository -->

</parent>

<groupId>com.hadsonpar</groupId>

<artifactId>thymeleaf-spring-boot</artifactId>

<version>0.0.1-SNAPSHOT</version>

<name>thymeleaf-spring-boot</name>

<description>Demo Thymeleaf project for Spring Boot</description>

<properties>

<java.version>17</java.version>

</properties>

<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>

<dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-test</artifactId>

<scope>test</scope>

</dependency>

</dependencies>

<build>

<plugins>

<plugin>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-maven-plugin</artifactId>

</plugin>

</plugins>

</build>

</project>


3. Creando el Archivo HTML

3.1. En el directorio templates del paquete de resources crearemos nuestro archivo index de tipo html:

Clic derecho en el directorio templates, seleccionar New, seguidamente seleccinar file...

Finalmente ingresar el nombre de "index.html"

3.2. Seguidamente agregamos código html.

<!DOCTYPE html>

<html>

<head>

<meta charset = "UTF-8" />

<link href = "css/styles.css" rel = "stylesheet"/>

<title>Spring Boot Application</title>

</head>

<body>

<h5>Welcome to Thymeleaf and Spring Boot</h5>

<h5>Others tutorials about spring boot</h5>

<ul>

<li type="square"><a href="http://blog.hadsonpar.com/2023/01/que-es-spring-boot.html" target="_blank">Qué es Spring Boot</a></li>

<li type="circle"><a href="http://blog.hadsonpar.com/2023/01/spring-boot-creando-la-aplicacion-hola.html" target="_blank">Creando una aplicación de "Hola mundo" paso a paso con Spring Boot</a></li>

<li type="disc"><a href="http://blog.hadsonpar.com/2023/01/estructura-de-un-proyecto-de-spring-boot.html" target="_blank">Estructura de un proyecto de Spring Boot</a></li>

</ul>

</body>

</html>


4. Creando el Controlador.

4.1. Para crear el controller, primero crearemos un NUEVO paquete de nombre com.hadsonpar.thymeleaf.controllers dentro del paquete PRINCIPAL del poryecto, es decir, se crea dentro de com.hadsonpar.thymeleaf:

Clic derecho en el paquete PRINCIPAL "com.hadsonpar.thymeleaf", clic en New, clic en Package

Ingresar el nombre del NUEVO paquete "com.hadsonpar.thymeleaf.controllers" y finalmente clic en Finish

4.2. Después de haber creado el paquete de controladores de nombre "com.hadsonpar.thymeleaf.controllers" se debe crear nuestro controlador de nombre "IndexController.java":

Clic derecho en el paquete, seleccionar New y clic en Class


Asignar el nombre de IndexController.java y finalmente clic en Finish.


4.3. Finalmente se debe implementar el controller "IndexController.java":

package com.hadsonpar.thymeleaf.controllers;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

@Controller

public class IndexController {

@RequestMapping(value = "/")

public String index() {

    return "index";

    }

}



Con la anotación @Requestmapping se esta indicando a Spring que asigne el método index() que esta en la raíz de la url "/" con relación al servidor. 

Devolvemos una cadena con relación al nombre de la plantilla o el archivo HTML que queremos mostrar, en este método devolvemos "index", por lo que Spring devolverá el archivo "index.html" ubicado dentro del directorio "templates".

5. Ejecutando el proyecto.

Ejecutar la aplicación desde la opción Run de STS y seguidamen en el browser o navegardor ingresar en liguiente link http://localhost:8080/

Clic en Run de STS


Resultado de Thymeleaf y Spring Boot  


Referencias:



Código disponible en GitHub

Hadsonpar

Publicadas por Hadsonpar

Apasionado por las nuevas tecnologías, la investigación, los patrones de diseño y las buenas prácticas; con experiencia y participación en diversos proyectos de banca y seguros desde la etapa de análisis, diseño, desarrollo, implementación, testing y certificación.

Publicar un comentario

0 Comentarios