Crea tu primer proyecto con Thymeleaf

Lo primero que necesitamos es tener instalado un entorno de desarrollo, en particular os recomendamos trabajar con Spring Tool Suite, ya que crearemos nuestro primer proyecto de Thymeleaf en el marco de una aplicación de Spring.

Para ello una vez que lo tengamos descargado e instalado, haremos estos pasos:

• Crearlo desde File > New > Spring Starter Project
• Rellenar los datos iniciales
• Añadir características al proyecto

Creación del proyecto

Para crear nuestro primero proyecto de prueba, seguiremos estos pasos:

• Creamos el proyecto de tipo Spring Starter y le damos un nombre.
• Podemos dejar los datos por defecto:
  • Trabajar con Maven
  • Usar la versión 8 de Java
  • Empaquetamiento en un archivo .jar
  • Trabajar con lenguaje Java
  • Los datos del artefacto pueden ser los que consideremos convenientes
  • El paquete por defecto podemos dejar el paquete de ejemplo o utilizar otro, teniendo en cuenta que tenemos que meter siempre los subpaquetes dentro del paquete raíz
• En este caso, añadimos dos características, una sería la característica web y otra que nuestro motor de plantillas sea Thymeleaf.
• Finalizamos y se crea nuestro primer proyecto.
• Si tenemos añadido el plugin de Thymeleaf, podemos añadir al proyecto la naturaleza de Thymeleaf, para que así en las plantillas podamos utilizar la ayuda y el autocompletado que ofrece el mismo.

Estructura del proyecto

La estructura del proyecto va a ser sencilla, ya que al ser un proyecto de Spring Boot viene bastante configurado por debajo. De hecho únicamente nos aparece una clase, pero ya trae mucha configuración por detrás.

Tenemos otra parte, que sería la carpeta de recursos, donde tenemos los recursos estáticos, las plantillas, en este caso las de Thymeleaf y algunas propiedades.

Para no tener problemas con los puertos, recomendamos cambiar el puerto al 9000 para evitar problemas si tenemos corriendo algo en el puerto 8080, que es el que utiliza por defecto.

Nuestra aplicación va a constar de dos elementos sencillos, primero un controlador básico, y por otro lado una plantilla que va a recoger los datos de este controlador.

Controlador del proyecto

El controlador es propio de Spring, va a ser una clase anotada con la clase @Controller, y que va a tener un método que se va a dedicar a escuchar una o más rutas, y que, en función de si se invoca, hará una serie de cosas y nos redirigirá a la plantilla.

Para ello crearíamos una nueva clase llamada MainController, desde New > Class. Al usar Spring MVC, las clases controladoras no tienen que heredar de nadie, sino que tan solo con anotarlas pueden ser clases Java normales.

A partir de aquí vamos a crear método controlador:

public String welcome() {
return “index”;
}

Esta estructura lo que hace es que, al devolver un string, está esperando devolver el nombre de una plantilla.

Cuando hemos añadido Thymeleaf a la configuración de este proyecto, al ser parte de Spring Boot, éste añade una configuración mediante la cual nosotros sólo indicamos el nombre de la plantilla, y tanto el prefijo como el sufijo de la misma lo añade por defecto.

De esta manera buscaría la plantilla siempre inicialmente en la ruta /src/main/resources/templates, y con la extensión .html.

También añadimos las rutas de escucha, para que atienda a peticiones Get en el directorio raíz:

@GetMapping(”/”)

Y añadimos algunos elementos. Primero sería el modelo, mediante el cual vamos a poder trasladar nuestros objetos o algunos valores o variables, desde el controlador a la plantilla:

public String welcome(Model model) {
	model.addAttribute(“nombre”, “Luismi”);
	return “index”;
}

Podríamos añadir algún elemento más, como que recogiera un parámetro desde el query de la URL, lo que haríamos añadiendo esta anotación de @RequestParam:

public String welcome(@RequestParam(name=”name”, required=false, defaultValue=”Mundo”) String nombre, Model, model) {
	model.addAttribute(“nombre”, “Luismi”);
	return “index”;
}

Plantilla del proyecto

Para crear la plantilla lo hacemos como un fichero HTML, desde la ruta New > Other > HTML File

La llamamos index.html y la almacenamos dentro de /templates o un subdirectorio del mismo, como documento HTML5.

Después tendríamos que hacer es añadir este espacio de nombres a la etiqueta HTML:

<!DOCTYPE html>
<html lang=”es” xmlns:th=http://www.thymeleaf.org>
	<head>
		<meta charset=”utf-8”>
		…

Por último, para recoger el valor que estamos enviando a la plantilla desde el modelo, lo que tendríamos que hacer es actualizar para poder rescatarlo.

Como podeis comprobar, Thymeleaf va a permitir hacer plantillas muy sencillas, se basa en añadir atributos a etiquetas HTML que ya existen.

Aquí vamos a aprovechar para crear una etiqueta h1 con un mensaje "Hola Mundo", al que le vamos a añadir una etiqueta span, y dentro de la misma vamos a añadir atributo th:text=${nombre}” de Thymeleaf:

<h1>Hola <span th:text=”${nombre}”>Mundo</span></h1>

Si visualizamos esta plantilla de manera local, podemos comprobar que aparece el contenido estático "Hola Mundo".

Sin embargo, si ejecutamos nuestro proyecto como Spring Boot App, comenzaría la configuración, que como vemos lo ha hecho en el puerto 9000. Si cargamos aquí mismo el navegador, vemos que en este caso estaría recogiendo el argumento indicado desde el controlador, lo estaría inyectando dentro de la plantilla al procesarlo y ese sería el resultado que estamos obteniendo.