Le dialecte de
mise en page est un dialecte Thymeleaf qui permet aux utilisateurs de créer des mises en page et des modèles pour réutiliser le code HTML. Il a une approche hiérarchique et utilise un modèle de décorateur pour «décorer» les fichiers de mise en page. Layout Dialect est un projet autonome et n'est pas fourni avec Thymeleaf. Cependant, il est open source, disponible sur GitHub, il est bien documenté et semble également être maintenu en bon état.
L'installation
Nous devrons ajouter le pack de démarrage Thymeleaf à votre pom Spring Boot:
<dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-thymeleaf</artifactId> </dependency>
Cependant, à partir de Spring Boot 2, cela ne suffit plus. Le dialecte Pom ne fait pas partie de Spring Boot, et nous devons l'ajouter nous-mêmes:
<dependency> <groupId>nz.net.ultraq.thymeleaf</groupId> <artifactId>thymeleaf-layout-dialect</artifactId> <version>2.3.0</version> </dependency>
Les exemples de code utilisent également Bootstrap, vous devez donc également ajouter des fichiers Web:
<dependency> <groupId>org.webjars</groupId> <artifactId>bootstrap</artifactId> <version>4.0.0</version> </dependency>
Comme étape finale, nous devons créer un bean LayoutDialect dans la classe @Configuration annotée.
@Bean public LayoutDialect layoutDialect() { return new LayoutDialect(); }
Allons plus loin.
Exemple de dialecte de mise en page
Cet exemple montrera comment nous pouvons utiliser le dialecte de mise en page pour définir les mises en page de nos pages afin que nous puissions mieux utiliser le code à nouveau: en utilisant la page index.html, qui utilise layout.html comme mise en page. Le nom Layout.html est arbitraire et peut être n'importe quoi. Quelques fichiers supplémentaires y sont ajoutés, mais ils sont juste pour la démonstration.
L'image montre la structure du dossier de ressources. Spring Boot trouvera automatiquement tous les modèles Thymeleaf dans le répertoire resources / templates.
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 utilise
deux des cinq processeurs fournis par le Layout Dialect. Le premier est la mise en page:
le processeur de modèle d'en-tête . Le processeur de modèle d'en-tête aide l'utilisateur à déterminer le meilleur titre pour la page résultante. Dans cet exemple, il définit le titre final comme une combinaison du titre de la page et de l'en-tête de mise en page. Pour cela, deux jetons spéciaux sont utilisés, qui sont présentés dans Layout Dialect,
$ LAYOUT_TITLE et
$ CONTENT_TITLE .
Dans le fichier layout.html, deux espaces réservés (ou fragments) définis par le layout sont les plus importants: le
processeur de fragments . Ce processeur nous permet de définir des espaces réservés de contenu dans nos mises en page. Le contenu de ces espaces réservés sera ultérieurement remplacé par le contenu des pages utilisant la mise en page. L'exemple définit deux fragments différents, un pour la barre latérale et un pour le contenu principal. Cependant, nous pouvons avoir autant de fragments que nous le souhaitons, à condition qu'ils aient tous des noms différents.
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>
Nous déclarons que index.html utilise layout.html comme mise en page avec le processeur layout: decorate. Cela fait, nous déclarons que index.html utilisera le modèle layout.html. La chose la plus importante ici est l'utilisation du
processeur de fragments . Il indique le contenu qui sera utilisé au lieu du contenu des fragments de la mise en page avec le même nom. Une autre chose qui mérite d'être mentionnée est le
titre . Sur la page index.html résultante, que nous obtenons, après traitement, l'en-tête sera une combinaison de deux en-têtes, l'un de index.html et l'autre de la mise en page. Ils seront combinés.
Layout.html et index.html peuvent être affichés dans le navigateur sans aucun traitement. Mais après le traitement, nous voyons que index.html est très différent. Le contenu de index.html est utilisé pour styliser la disposition et placer le contenu à l'intérieur de la disposition en fonction de ce que la disposition définit.
Deux autres éléments sont présents dans l'exemple: l'en-tête et le pied de page. Cependant, ils utilisent Thymeleaf Standard Layout th: replace et th: insert processors. Très similaire aux
deux derniers des cinq processeurs présentés dans Layout Dialect, layout: insert et layout: replace . Ils font plus ou moins la même chose. Contrairement aux processeurs précédents dont nous avons discuté, ces deux n'utilisent pas une approche hiérarchique, mais une approche inclusive. Ceci est plus caractéristique de la forme Thymeleaf.
L'image montre la vue finale de la page. Il a à la fois un en-tête et un pied de page, bien qu'aucun d'entre eux ne soit mentionné dans le balisage index.html.