Thymeleaf #Spring MVC

By Eugenia Pérez | 19 March, 2018

Otro tema que será incluido en el libro de Spring es el motor de plantillas Thymeleaf, muy utilizado en Spring MVC

En este post hablaré de esta librería y también de sus expresiones básicas. En sucesivos posts iré ampliando su funcionalidad.

Thymeleaf es un lenguaje de plantillas que puede integrarse perfectamente con las aplicaciones Spring MVC, siendo además una nueva alternativa que está desplazando a las tradicionales páginas JSP.

Una de las mayores ventajas de Thymeleaf es, sin duda, su casi nula influencia en la apariencia de una plantilla cuando no está procesada. Es decir, un diseñador o cualquier persona que tenga que retocar el aspecto de una plantilla vería una página totalmente normal. En lugar de utilizar etiquetas especiales, Thymeleaf utiliza atributos de las etiquetas existentes para el procesamiento dinámico, dejando los valores normales de las etiquetas como valores por defecto; esto provoca que las plantillas Thymeleaf, las cuales tienen extensión HTML sean cómodamente visibles y editables offline.

Además de permitirnos cargar las plantillas Thymeleaf como vistas desde los controladores, también obtenemos las siguientes ventajas:

  • Posibilidad de utilizar el SpEL en las plantillas
  • Formularios integrados con componentes
  • Internacionalización de mensajes
  • Estructuras de control básicas
  • Etiquetas de seguridad

Para disponer de Thymeleaf en un proyecto Spring Boot basta con añadir una dependencia en el fichero pom.xml. Sin Spring Boot, sería preciso, además de la dependencia de Thymeleaf, configurar la resolución de plantillas bien a través de XML o a través de beans.

Esta línea, aunque no es imprescindible, se suele poner al inicio de las plantillas:

 <html xmlns:th="http://www.thymeleaf.org">

Thymeleaf puede procesar plantillas XML, xHTML y HTML5, válidas o no.

Expresiones básicas

El aspecto que tiene una etiqueta, por ejemplo, h1, en una plantilla Thymeleaf sería el siguiente:

<h1 th:text="#{title}">This is default title</h1>

En ese caso, se añade un atributo th:text que indica el texto que se quiere meter en la etiqueta. En este caso, el texto proviene de un mensaje configurado en los ficheros de mensajes que se utilizan en la internacionalización. En caso de no haber valor o de que la página no esté procesada por Thymeleaf, lo que se vería en el navegador sería “This is default title”.

Si ese texto contenido en la variable tuviera etiquetas HTML, estás serían modificadas. Para preservar las etiquetas y que sean interpretadas por el navegador, se debería poner

 <h1 th:utext="#{title}">This is default title</h1>

En cuanto a los tipos de expresiones que se utilizan, en resumen, serían las siguientes:

  • #{variable}: mensajes de texto de ficheros de properties.
  • ${variable}: referencia a variables y a objeto del modelo, por ejemplo, objetos que se nos pasan desde el controlador, como resultados de una consulta, una lista de entidades, un registro, etc.
  • *{campo}: un campo que forma parte de una referencia a un objeto, se aplica cuando se utiliza una expresión ${variable}, por ejemplo en los campos de un formulario.
  • @{campo}: expresiones para crear enlaces.

En el acceso a variables se utiliza el símbolo $. Por ejemplo, para sacar el atributo name de una instancia de Person:

<span th:text="${person.name}">Default name</span>

Aunque también se pueden usar los corchetes:

<span th:text="${person['name']}">Default name</span>

En el caso de querer mostrar lo que contiene un objeto o una instancia y sus campos, podemos utilizar el atributo object.

<ul th:object="${customer}">
 <li><b>Name:</b> <span th:text="*{name}">Sebastian</span>.</li>
 <li><b>Email:</b> <span th:text="*{email}">Pepper</span>.</li>
 <li><b>Address:</b> <span th:text="*{address}">Saturn</span>.</li>
</ul>

En cuanto a expresiones básicas, dentro de los atributos de Thymeleaf se pueden usar las siguientes:

  • Literales de texto o de número: ‘hello’, 42, 0, 1, -42.0
  • Literales booleanas: true, false
  • Literal nula: null
  • Concatenaciones de cadenas: +
  • Sustituciones de literales:  Hello ${name}
  • Opedores aritméticos: +, -, *, /, %
  • Conversión a negativo: -
  • Operadores booleanos: and, or, not, !
  • Operadores de comparación: >, gt, <, lt,  >=, ge, <=, le, ==, eq, !=, en
  • Operador condicional if: cond ? then
  • Operador condicional if-then-else: cond ? then : else
  • Valor por defecto: cond ?: default

Todas estas expresiones pueden utilizarse tanto en literales, como en expresiones condicionales que se verán más adelante.

<span th:text="'Hello' + ${name}">Hello</span>

En cuanto a los mensajes con traducción, en algunos casos pueden contener variables.

thanks.msg=Thanks for visiting us {0}
<h1 th:utext="#{thanks.msg(${loginname})}">Thanks dude</h1>

 <div th:unless="${#lists.isEmpty(posts)}">
   <table><tr><th th:thymeleaf"#{id}">Id</th></tr>
 </div>
facebooktwittergoogle_plusredditpinterestlinkedinmailby feather