Aprenda cómo integrar este motor de plantillas en sus aplicaciones Spring.

Thymeleaf es un motor de plantillas Java. Desarrolla plantillas para aplicaciones web e independientes. Este motor de plantillas utiliza el concepto de plantillas naturales para inyectar lógica en su diseño, sin comprometer su diseño. Con Thymeleaf, tendrás control sobre cómo una aplicación procesará las plantillas que crees.

Puede utilizar Thymeleaf para procesar seis tipos de plantillas: HTML, XML, texto, JavaScript, CSS y RAW. Thymeleaf se refiere a cada una de las plantillas como modo de plantilla, siendo HTML la plantilla más popular creada en este motor.

Inicializando Thymeleaf en su aplicación

Hay dos formas de agregar Thymeleaf a su aplicación Spring Boot. Puede seleccionar Thymeleaf como dependencia al generar su texto estándar con Herramienta de inicialización de Spring. También tiene la opción de agregarlo más tarde a su archivo de especificación de compilación en la sección de dependencias.

Si seleccionó una de las opciones del proyecto Gradle, el archivo que contiene las dependencias es el

instagram viewer
construir.gradle archivo. Sin embargo, si elige Maven, entonces ese archivo es pom.xml.

Su pom.xml El archivo debe contener la siguiente sección de dependencia:

<dependency>
<groupId>org.springframework.bootgroupId>


<artifactId>spring-boot-starter-thymeleafartifactId>
dependency>

mientras tu construir.gradle El archivo debe contener la siguiente sección de dependencia:

dependencies {
 implementation 'org.springframework.boot: spring-boot-starter-thymeleaf'
}

La aplicación de muestra utilizada en el artículo está disponible en este repositorio de GitHub y su uso es gratuito bajo la licencia MIT.

Al agregar Thymeleaf a su aplicación Spring, obtendrá acceso a su biblioteca principal, que le permite utilizar el dialecto estándar Spring de Thymeleaf. El dialecto estándar de Spring contiene atributos y sintaxis únicos que puede utilizar para agregar diferentes funciones a sus diseños.

Usando Thymeleaf en Spring Boot

Cuando utilice Thymeleaf en su aplicación Spring, el primer paso es crear su documento de plantilla. Para esta aplicación de ejemplo, el documento de plantilla es HTML. Siempre debes crear tus plantillas de Thymeleaf en Spring Boot. plantillas carpeta, que está disponible en el archivo de recursos.

El archivo home.html

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


<head>


<title>Generic Websitetitle>


head>


<body>body>
html>

La plantilla Thymeleaf anterior es una plantilla HTML5 general, con un atributo externo (xmlns: th). El propósito de xmlns: th El atributo es proporcionar el alcance para todos los e:* atributos que utilizará en este documento HTML. Los demás atributos y etiquetas en una plantilla de Thymeleaf son tradicionales. Etiquetas y atributos HTML.

Creando un encabezado

Uno de los primeros y más importantes aspectos de cualquier sitio web o aplicación es el encabezado. Indica de qué se trata la aplicación (a través del logotipo) y le ayuda a navegar fácilmente por ella. Un encabezado básico debe tener un logotipo, así como varios enlaces de navegación.

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


 <body>


<divid="nav">


<h1>LOGOh1>


<ul>


<li><aid="current">Home a>li>


<li><a>Abouta>li>


<li><a>Servicesa>li>


ul>


div>


 body>


html>

Thymeleaf le permite agregar el encabezado anterior a cualquier página de su aplicación web usando el th: insertar atributo. El th: insertar y th: reemplazar Los atributos aceptan lo que Thymeleaf llama valores de expresión de fragmentos. Las expresiones de fragmentos le permiten colocar fragmentos de marcado en cualquier ubicación de su diseño.

<divth: insert="~{header:: #nav}">div>

Insertando el marcado de arriba en la parte superior de la inicio.html La etiqueta insertará el marcado del encabezado en la parte superior de su página de inicio. Una expresión de fragmento tiene varios componentes, dos son opcionales y dos son obligatorios:

  • Una tilde (~), que es opcional.
  • Un par de llaves ({}), que es opcional.
  • El nombre de la plantilla que contiene el marcado que desea insertar (encabezado.html).
  • El selector CSS del marcado que desea insertar (#nav).

Entonces, el siguiente marcado produce el mismo resultado que el anterior.

"header:: #nav">

Completando el cuerpo de su plantilla

Thymeleaf te permite utilizar cinco tipos de expresiones en tus plantillas:

  • Expresión de fragmento (~{...})
  • Expresión de mensaje (#{…})
  • Expresión de URL de enlace (@{…})
  • Expresión variable (${…})
  • Expresión de variable de selección (*{…})

Una expresión de mensaje le permite agregar fragmentos de texto externalizados a su diseño. Con las expresiones de mensaje, puede reemplazar o reutilizar fácilmente el texto en su diseño. Cuando utilice una expresión de mensaje, siempre debe colocar los fragmentos de texto externos en un .propiedades archivo bajo el recursos carpeta.

Para esta aplicación de ejemplo, ese archivo es mensajes.propiedades, que contiene el siguiente fragmento de texto:

placeholder.text=Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dolorem porro non quae obcaecati illo laboriosam.

Debes tener en cuenta que el fragmento de texto (o el mensaje) anterior tiene una clave única (texto del marcador). Esto se debe a que cada archivo de mensajes puede contener una colección de mensajes diferentes. Por lo tanto, necesitará una clave para insertar un mensaje específico en su diseño.

<pth: text="#{placeholder.text}">p>

Al insertar el marcado anterior en el cuerpo de su archivo HTML, se mostrará efectivamente el texto del marcador de posición como un párrafo en su vista. A diferencia de la expresión fragmentada, todos los aspectos de la expresión del mensaje son obligatorios. Una expresión de mensaje requiere:

  • Un signo numérico (#).
  • Un par de llaves ({}).
  • La clave que contiene el mensaje que desea insertar (texto del marcador).

Diseñar tu plantilla

Otro archivo importante en el recursos La carpeta es el archivo estático. Este archivo almacena sus archivos CSS y cualquier imagen que planee usar en su aplicación. Para vincular su archivo CSS externo a la plantilla HTML de Thymeleaf, deberá utilizar la expresión URL del enlace. Los procesos de expresión de URL del enlace URL relativas y absolutas.

<linkrel="stylesheet"th: href="@{/css/style.css}" />

Insertando el marcado de arriba en el de su archivo HTML le permitirá diseñar su plantilla usando un estilo.css archivo. Este archivo está disponible en un CSS carpeta bajo el estático sección de la recursos archivo de la aplicación de muestra. Siempre debe asignar la expresión URL del enlace al es: href atributo.

Thymeleaf proporciona varios otros atributos que puede utilizar para mejorar el diseño de su diseño. Uno de esos atributos es el th: estilo atributo, que puede utilizar para agregar imágenes a su diseño.

<divid="showcase"th: style="'background: url(/images/background.jpg) no-repeat center center fixed;'">

El marcado anterior utiliza el th: estilo atributo para agregar una imagen de fondo a una sección específica de su diseño. Thymeleaf tiene más de cien atributos diferentes que puedes usar para agregar estilo y funcionalidad a tus diseños.

La expresión variable

Las expresiones variables son las más populares y posiblemente las más complejas que utiliza Thymeleaf. Las expresiones variables de Thymeleaf le permiten recopilar datos del contexto de la aplicación o de un objeto en la aplicación e inyectar esos datos en la plantilla. Dependiendo del origen de los datos que desee representar en su vista, existen dos tipos de expresiones variables que puede utilizar.

La expresión de la variable principal utiliza el signo del dólar y le permite recopilar datos del contexto de la aplicación (que son datos asociados con las diferentes tareas que se ejecutan en el solicitud). Por ejemplo, si desea capturar los datos de un usuario a partir de un modal, entonces la expresión variable con signo de dólar es la opción más práctica. Si ejecuta el proyecto de muestra y navega hasta http://localhost: 8080/ en su navegador, verá el siguiente modal:

Después de cerrar el modal o enviar un nombre, la aplicación navegará a la página de inicio. En la página de inicio, verá un sitio web genérico que muestra la palabra "Bienvenido", seguida de la cadena que acaba de enviar en el modal.

La aplicación de ejemplo utiliza la expresión variable para completar este proceso. La forma simple en el modal.html El archivo tiene el siguiente marcado:

<formid="form"th: action="@{/home}"method="post">
<inputtype="text"name="userName"class="form-control"placeholder="Your Name" />


<buttontype="submit"class="btn">Submitbutton>


form>

Cuando un usuario envía el formulario, se activa el th: acción atributo que tiene el valor de una URL de publicación, que puede encontrar en la Controlador web clase.

@PostMapping("/home")
public String processName(String userName, Model model){


 model.addAttribute("userName", userName);


return"home";
 }

El nombre del proceso() El método acepta la cadena que el usuario proporciona al modal y luego asigna esa cadena a una variable llamada nombre de usuario. Usando la expresión de variable, el controlador luego inyecta la variable de nombre de usuario en el diseño.

<h1>Welcome <spanth: text="${userName}">span>!h1>

La expresión de la variable de selección utiliza un asterisco y es más útil cuando se trata de aplicaciones más complejas. Por ejemplo, una aplicación que requiere que los usuarios inicien sesión puede utilizar la expresión de variable de selección. Puede recopilar el nombre de usuario del objeto de usuario e insertarlo en el diseño.

Opciones alternativas de plantilla y estilo

Aunque Thymeleaf es la opción de plantilla más popular para aplicaciones Spring Boot, existen otras opciones igualmente viables. Estas incluyen JavaServer Pages (JSP), plantillas basadas en Groovy, plantillas FreeMarker y plantillas Moustache. Además de crear un estilo CSS personalizado, también puedes optar por utilizar un marco CSS para diseñar tu diseño.