Este documento presenta una introducción a Thymeleaf, un marco de plantillas para Java que se puede usar para desarrollar aplicaciones web. Explica los conceptos básicos de Thymeleaf como etiquetas y expresiones, y cómo se puede integrar con Spring Framework. También muestra ejemplos de cómo usar atributos simples y de colección en plantillas Thymeleaf.

1. Desarrollo de
Software 2
Tema: 3 Frameworks UI Java
Mg. Luis Fernando Aguas Bucheli
+593 984015184
@Aguaszoft
Laguas@uisrael.edu.ec

2. Deséalo, espéralo, suéñalo, pero por todos los medios…
¡Hazlo!

3. Objetivo
1. Adquirir los conceptos
básicos relacionados con la
programación web
2. Reconocer las
características de la
programación web
● 3.1 Thymeleaf Básico
Contenido

4. ODS
● 4.3 De aquí a 2030, asegurar
el acceso igualitario de todos
los hombres y las mujeres a
una formación técnica,
profesional y superior de
calidad, incluida la enseñanza
universitaria
META

5. 3.1 Thymeleaf Básico

6. Thymeleaf
• Thymeleaf es un motor de plantillas Java XML / XHTML / HTML5 que se puede
utilizar en entornos web y no web.
• Es más adecuado para servir XHTML / HTML5 en la capa de vista de aplicaciones
web basadas en MVC, pero puede manejar cualquier archivo XML incluso en un
entorno fuera de línea.
• Proporciona una integración completa de Spring Framework.

7. Uso básico de Thymeleaf
El uso de Thymeleaf se compone de dos partes: etiquetas + expresiones, las etiquetas
son la estructura de sintaxis de Thymeleaf, y las expresiones son la implementación
del contenido en la sintaxis.
A través de la etiqueta + expresión, los datos se combinan con la plantilla, y
finalmente se convierten en código html y se devuelven al usuario.
El uso básico de Thymeleaf se divide en 2 partes:
• Uso de etiquetas
• Uso de la expresión

8. Uso de etiquetas
• th: salida de información básica de texto

9. Uso de etiquetas

10. Thymeleaf
• Es un moderno motor de plantillas Java del lado del servidor para
entornos web e independientes.
• El objetivo principal de Thymeleaf es traer elegantes plantillas naturales a
su flujo de trabajo de desarrollo: HTML que se puede mostrar
correctamente en los navegadores y que también funcionan como
prototipos estáticos, lo que permite una colaboración más sólida en los
equipos de desarrollo.
• Con módulos para Spring Framework, una gran cantidad de integraciones
con sus herramientas favoritas y la capacidad de conectar su propia
funcionalidad, Thymeleaf es ideal para el desarrollo web HTML5 JVM de
hoy en día, aunque hay mucho más que puede hacer.

11. Plantillas Naturales
• Las plantillas HTML escritas en Thymeleaf aún se ven y funcionan como
HTML, lo que permite que las plantillas reales que se ejecutan en su
aplicación sigan funcionando como artefactos de diseño útiles.

12. Integraciones
• Eclipse, IntelliJ IDEA, Spring, Play, incluso la nueva API Model-View-
Controller para Java EE 8.
• Escriba Thymeleaf en sus herramientas favoritas, utilizando su marco de
desarrollo web favorito.

13. ¿Quién usa Thymeleaf?

14. Integración de Thymeleaf con Spring
• Se requiere la biblioteca thymeleaf-spring para la integración.
• Agregue las siguientes dependencias a su archivo Maven POM:

15. Integración de Thymeleaf con Spring
• La clase SpringTemplateEngine realiza todos los pasos de configuración.
Puede configurar esta clase como un bean en el archivo de configuración
de Java:

16. Integración de Thymeleaf con Spring
• La interfaz ViewResolver en Spring MVC asigna los nombres de vista
devueltos por un controlador a los objetos de vista reales.
• ThymeleafViewResolver implementa la interfaz ViewResolver y se utiliza
para determinar qué vistas de Thymeleaf representar, dado un nombre
de vista.
• El paso final en la integración es agregar ThymeleafViewResolver como un
bean:

17. Thymeleaf en Spring Boot
• Spring Boot proporciona configuración automática para Thymeleaf
agregando la dependencia spring-boot-starter-thymeleaf :

18. Visualización de valores del origen del mensaje (archivos de propiedades)
• El atributo de etiqueta th: text = ”# {key}” se puede utilizar para mostrar
valores de archivos de propiedades. Para que esto funcione, el archivo de
propiedades debe configurarse como bean messageSource :

19. Atributos simples
• El atributo de etiqueta th: text = ”$ {attributename}” se puede utilizar
para mostrar el valor de los atributos del modelo.
• Agreguemos un atributo de modelo con el nombre serverTime en la clase
del controlador:

20. Atributos de colección
• Si el atributo del modelo es una colección de objetos, el atributo th: cada
etiqueta se puede usar para iterar sobre él.
• Definamos una clase modelo Student con dos campos, id y name :

21. Atributos de colección
• Ahora agregaremos una lista de estudiantes como atributo modelo en la
clase del controlador:

22. Atributos de colección
• Finalmente, podemos usar el código de plantilla de Thymeleaf para iterar
sobre la lista de estudiantes y mostrar todos los valores de campo:

23. Ejemplo de Spring Boot Thymeleaf
Creemos una aplicación Spring Boot e implementemos la plantilla Thymeleaf.
Paso 1: Abra Spring Inicializar http://start.spring.io .
Paso 2: seleccione Spring Boot versión 2.3.0.M1.
Paso 2: proporcione el nombre del grupo . Hemos proporcionado com.javatpoint .
Paso 3: proporcione el Id. Del artefacto . Hemos proporcionado spring-boot-
thymeleaf-view-example.
Paso 5: agregue las dependencias Spring Web y Thymeleaf .
Paso 6: Haga clic en el botón Generar . Cuando hacemos clic en el botón Generar,
envuelve las especificaciones en un archivo Jar y lo descarga al sistema local.

24. Ejemplo de Spring Boot Thymeleaf

25. Gracias
Responsabilidad con pensamiento positivo