143. Motor de plantillas thymeleaf¶

La sintaxis de Thymeleaf se centra en el uso de atributos especiales, prefijados generalmente con th: que se procesan en el servidor para renderizar HTML dinámico. A continuación, te presento un resumen de los aspectos clave de la sintaxis de Thymeleaf

Atributos Thymeleaf (th:) 1. Textos: th:text: Sustituye el texto del elemento con el valor proporcionado.

<span th:text="${mensaje}">Texto por defecto</span>

2. Variables:

th:object: Especifica el objeto del modelo que se utilizará en el formulario.

<form th:object="${usuario}" ...></form>

Acceso a propiedades: ${objeto.propiedad} accede a la propiedad de un objeto.

<span th:text="${usuario.nombre}"></span>

3. Enlaces y URLs:

th:href, th:src, etc.: Construyen URLs para enlaces, imágenes, etc.

<a th:href="@{/ruta}">Enlace</a>
<img th:src="@{/images/imagen.png}" />

4 Iteración:

th:each: Utilizado para iterar sobre colecciones.

<tr th:each="usuario : ${usuarios}">
  <td th:text="${usuario.nombre}"></td>
</tr>

5. Condiciones:

th:if, th:unless: Para renderizar elementos condicionalmente.

<div th:if="${condicion}">
  Contenido condicional
</div>

6. Inclusión de Fragmentos:

th:insert, th:replace: Incluir fragmentos de otros archivos HTML.

<div th:insert="~{fragments/cabecera :: cabecera}"></div>

Atributos Literales:

th:attr: Define atributos dinámicamente.

<input th:attr="value=${valor}" />

Mensajes Internacionalizados:

th:text="#{mensaje.clave}": Para mensajes internacionalizados.

<span th:text="#{bienvenida.mensaje}"></span>

Procesamiento del Lado del Servidor
Thymeleaf procesa estos atributos en el servidor y genera HTML estándar.
Los atributos th:* son ignorados por el navegador y solo son relevantes para Thymeleaf.

143.1 INPUTROW fragment¶

Se utiliza con Thymeleaf para simplificar el manejo de formularios.

Ejemplo de uso:

<form th:action="${requestUri}" method="post">
    <div th:replace="~{fragments/forms::inputRow(object='todoList', field='listType', type='radio')}" />
    <div th:replace="~{fragments/forms::inputRow(object='todoList', field='name')}" />
    <div th:replace="~{fragments/forms::inputRow(object='todoList', field='owner', type='select')}" />
    <input type="submit" th:value="#{todoList.add.headline}" class="btn btn-primary mt-4" />
</form>

Las lineas del formulario se crean usando el fragment y pasando object='todolist'siendo todolist el objeto que tenemos en el modelo Spring y field='name' uno de sus propiedades(campos)

143.2 Como usar y funcioalidad de inputrow¶

Se generan cinco atributos:

object (requerido), tipo String definen el objeto presente en al modelo
field (requerido) igual String y en el modelo
type (opcional): puede ser Text checkbox select
required (opcional) required=true/false

Usando el preprocesado de Thymeleaf, como por ejemplo __${field}__ se pueden usar el valor de los campos como las expresiones actuales:

El siguiente codigo es parte de fragments/forms.html

<div th:fragment="inputRow(object, field)" th:with="type=${type} ?: 'text', required=${required},
        inputClassappend=${#fields.hasErrors(field) ? 'is-invalid ' : ''} + ${inputClass}"
        th:object="${__${object}__}" class="row mb-3">
    <div th:if="${type == 'checkbox'}" class="col-md-10 offset-md-2">
    <!-- ... -->
    </div>
    <div th:if="${type != 'checkbox'}" class="col-md-10">
        <input th:if="${type == 'text' || type == 'password' || type == 'email' || type == 'tel' || type == 'number'}"
                th:type="${type}" th:field="*{__${field}__}" th:classappend="${inputClassappend}" class="form-control" />
        <!-- ... --->
    </div>
</div>

Explicación de este fragmento html:

Elemento <select>: Este es un elemento HTML estándar para crear un menú desplegable. Thymeleaf lo extiende con sus atributos específicos, los cuales permiten manipular el contenido dinámicamente en función de los datos proporcionados por el servidor Spring Boot.
Atributo th:if: Este atributo controla la renderización del elemento <select>. El elemento solo se renderizará si la condición ${type == 'select' || type == 'multiselect'} es verdadera. Esto significa que el menú desplegable solo aparecerá si el tipo (type) es 'select' o 'multiselect'.
Atributo th:field: Establece el campo que será enlazado con este elemento select. La expresión *{__${field}__} indica que el nombre del campo se determina dinámicamente basado en el valor de la variable field.
Atributo th:disabled: Controla si el elemento select está deshabilitado. Usa el valor de la variable disabled para determinarlo.
Atributo th:multiple: Este atributo convierte el select en un menú de selección múltiple si el tipo (type) es 'multiselect'.
Atributo th:classappend: Añade clases adicionales al elemento select, definidas por la variable inputClassappend.
Elemento <option> para seleccionar vacío: Este es un elemento de opción que se muestra si el tipo es 'select'. La etiqueta [[#{select.empty.label}]] es una expresión de mensajes internacionalizados en Thymeleaf, que muestra un mensaje traducido para "Seleccione vacío".
Elemento <option> para valores dinámicos: Este bloque crea dinámicamente opciones de menú adicionales.
La condición th:if="${!(__${field}__Values instanceof T(java.util.Map))}" verifica si los valores no son una instancia de Map.
La expresión th:each="optionValue : ${__${field}__Values}"itera sobre los valores proporcionados por __${field}__Values, creando una opción para cada valor.
th:value="${optionValue}" establece el valor de la opción, y [[${optionValue}]] muestra el valor.

Alguna explicación sobre la anterior explicación:

En la expresión __${field}__Values utilizada en Thymeleaf dentro de un proyecto de Spring Boot, hay varios componentes que se combinan para formar una referencia dinámica a una propiedad o un conjunto de valores. Aquí está el desglose:

${field} : Esta es una variable que contiene el nombre de un campo o propiedad. Su valor es dinámico, es decir, se determina en tiempo de ejecución.
__${...}__: Esta sintaxis es utilizada en Thymeleaf para la interpolación de expresiones. Permite que el contenido de la variable (en este caso, field) sea evaluado y utilizado como parte del nombre de otra variable. Por ejemplo, si field tiene el valor "country", entonces __${field}__Values se convierte en countryValues.
Values: Esta es simplemente una parte del nombre de la variable que se concatena con el valor de field. Indica que estamos refiriéndose a una colección o lista de valores asociados con el campo especificado.

Por lo tanto, __${field}__Values se refiere a una colección de valores que está relacionada con el campo especificado por la variable field. Este patrón de nomenclatura es común en los formularios dinámicos de Spring Boot con Thymeleaf, donde el nombre de la variable que contiene los valores de las opciones de un campo de formulario se construye dinámicamente.

143.3 Apendice¶

Enlaces: * https://www.thymeleaf.org/doc/tutorials/3.1/thymeleafspring.html