Thymeleaf: Dialecto DiseƱo + Spring Boot 2

El dialecto de diseƱo es un dialecto de Thymeleaf que permite a los usuarios crear diseƱos y plantillas para reutilizar el cĆ³digo HTML. Tiene un enfoque jerĆ”rquico y utiliza una plantilla decoradora para "decorar" archivos de diseƱo. Dialecto de diseƱo es un proyecto independiente y no se envĆ­a con Thymeleaf. Sin embargo, es un cĆ³digo fuente abierto disponible en GitHub, estĆ” bien documentado y parece mantenerse tambiĆ©n en buenas condiciones.

InstalaciĆ³n


Tendremos que agregar el paquete de inicio Thymeleaf a tu pom Spring Boot:

<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency> 

Sin embargo, comenzando con Spring Boot 2, esto ya no es suficiente. El dialecto de Pom no es parte de Spring Boot, y debemos agregarlo nosotros mismos:

  <dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> <version>2.3.0</version> </dependency> 

Los ejemplos de cĆ³digo tambiĆ©n usan Bootstrap, por lo que tambiĆ©n debe agregar archivos web:

  <dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0</version> </dependency> 

Como paso final, necesitamos crear un bean LayoutDialect en la clase @Configuration anotada.

  @Bean public LayoutDialect layoutDialect() { return new LayoutDialect(); } 

Vamos mƔs allƔ.

Ejemplo de dialecto de diseƱo


Este ejemplo mostrarĆ” cĆ³mo podemos usar Dialecto de diseƱo para definir diseƱos para nuestras pĆ”ginas, de modo que podamos usar mejor el cĆ³digo nuevamente: usando la pĆ”gina index.html, que usa layout.html como diseƱo. El nombre Layout.html es arbitrario y puede ser cualquier cosa. AllĆ­ se agregan algunos archivos mĆ”s, pero son solo para demostraciĆ³n.



La imagen muestra la estructura de la carpeta de recursos. Spring Boot encontrarƔ automƔticamente todas las plantillas de Thymeleaf en el directorio de recursos / plantillas.

Layout.html


 <!DOCTYPE html> <html> <head> <title layout:title-pattern="$LAYOUT_TITLE - $CONTENT_TITLE">Igorski.co</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <link th:href="@{/webjars/bootstrap/4.0.0/css/bootstrap.min.css}" rel="stylesheet" media="screen" /> </head> <body> <div th:replace="fragments/header :: header"> This header content is going to be replaced.</div> <div class="container"> <div class="row"> <div class="col-2" layout:fragment="sidebar"> <h1>This is the layout's sidebar</h1> <p>This content will be replaced if the page using the layout also defines a layout:fragment="sidebar" segment.</p> </div> <div class="col" layout:fragment="content"> <h1>This is the Layout's main section</h1> <p>This content will be replaced if the page using the layout also defines a layout:fragment="content" segment. </p> </div> </div> </div> <footer th:insert="fragments/footer :: footer" class="footer"> This content will remain, but other content will be inserted after it. </footer> </body> </html> 

Layout.html utiliza dos de los cinco procesadores proporcionados por el Dialecto de diseƱo. El primero es el diseƱo: el procesador de plantillas de encabezado . El procesador de plantillas de encabezado ayuda al usuario a determinar el mejor tĆ­tulo para la pĆ”gina resultante. En este ejemplo, define el tĆ­tulo final como una combinaciĆ³n del tĆ­tulo de la pĆ”gina y el encabezado del diseƱo. Para esto, se utilizan dos tokens especiales, que se presentan en Dialecto de diseƱo, $ LAYOUT_TITLE y $ CONTENT_TITLE .

De la mayor importancia en layout.html son dos marcadores de posiciĆ³n (o fragmentos) definidos por el diseƱo: procesador de fragmentos . Este procesador nos permite definir marcadores de posiciĆ³n de contenido en nuestros diseƱos. El contenido de estos marcadores de posiciĆ³n luego serĆ” reemplazado por el contenido de las pĆ”ginas que usan el diseƱo. El ejemplo define dos fragmentos diferentes, uno para la barra lateral y otro para el contenido principal. Sin embargo, podemos tener tantos fragmentos como queramos, siempre que todos tengan nombres diferentes.

Index.html


  <!DOCTYPE html> <html xmlns:layout="http://www.w3.org/1999/xhtml" layout:decorate="~{layouts/layout}"> <head> <title>Home Page</title> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <link th:href="@{/css/core.css}" rel="stylesheet" media="screen" /> </head> <body> <div class="container"> <div class="row"> <div class="col-2" layout:fragment="sidebar"> <h1>Sidebar</h1> <a href="#">Login</a> </div> <div class="col" layout:fragment="content"> <h1>Welcome to the Index page</h1> <br>This content is replacing the content of the layout:fragment="content"<br> placeholder in layout.html</p> </div> </div> </div> </body> </html> 

Declaramos que index.html usa layout.html como su diseƱo con el diseƱo: decorar procesador. Una vez hecho esto, declaramos que index.html usarĆ” la plantilla layout.html. Lo mĆ”s importante aquĆ­ es el uso del procesador de fragmentos . Indica el contenido que se utilizarĆ” en lugar del contenido de fragmentos del diseƱo con el mismo nombre. Otra cosa que vale la pena mencionar es el titular . En la pĆ”gina resultante index.html, que obtenemos, despuĆ©s del procesamiento, el encabezado serĆ” una combinaciĆ³n de dos encabezados, uno de index.html y el otro del diseƱo. Se combinarĆ”n.

Tanto layout.html como index.html se pueden ver en el navegador sin ningĆŗn procesamiento. Pero despuĆ©s del procesamiento, vemos que index.html es muy diferente. El contenido de index.html se usa para diseƱar el diseƱo y colocar el contenido dentro del diseƱo en funciĆ³n de lo que define el diseƱo.

Otros dos elementos estĆ”n presentes en el ejemplo: el encabezado y el pie de pĆ”gina. Sin embargo, utilizan Thymeleaf Standard Layout th: replace y th: insert procesadores. Muy similar a los dos Ćŗltimos de los cinco procesadores presentados en Diagrama de diseƱo, diseƱo: insertar y diseƱo: reemplazar . MĆ”s o menos hacen lo mismo. A diferencia de los procesadores anteriores que discutimos, estos dos no utilizan un enfoque jerĆ”rquico, sino inclusivo. Esto es mĆ”s caracterĆ­stico de la forma Thymeleaf.



La imagen muestra la vista final de la pƔgina. Tiene un encabezado y un pie de pƔgina, aunque ninguno de ellos se menciona en el marcado index.html.

Source: https://habr.com/ru/post/442386/


All Articles