Thymeleaf: Dialecte de mise en page personnalisée

1. Introduction

Thymeleaf est un moteur de template Java pour le traitement et la création de HTML, XML, JavaScript, CSS et texte brut. Pour une introduction à Thymeleaf et Spring, jetez un œil à cet article.

Dans cet article, nous nous concentrerons sur la création de modèles - quelque chose que la plupart des sites raisonnablement complexes doivent faire d'une manière ou d'une autre. En termes simples, les pages doivent partager des composants de page communs tels que l'en-tête, le pied de page, le menu et bien plus encore.

Thymeleaf s'adresse avec des dialectes personnalisés - vous pouvez créer des mises en page à l'aide du système de mise en page standard Thymeleaf ou du dialecte de mise en page - qui utilise le modèle de décoration pour travailler avec les fichiers de mise en page.

Dans cet article, nous aborderons quelques fonctionnalités de Thymeleaf Layout Dialect - que vous pouvez trouver ici. Pour être plus précis, nous discuterons de ses fonctionnalités telles que la création de mises en page, de titres personnalisés ou la fusion d'éléments de tête.

2. Dépendances de Maven

Tout d'abord, voyons la configuration requise pour intégrer Thymeleaf à Spring. La bibliothèque thymeleaf-spring est requise dans nos dépendances:

 org.thymeleaf thymeleaf 3.0.11.RELEASE   org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Notez que, pour un projet Spring 4, la bibliothèque thymeleaf-spring4 doit être utilisée à la place de thymeleaf-spring5 . La dernière version des dépendances peut être trouvée ici.

Nous aurons également besoin d'une dépendance pour le dialecte des mises en page personnalisées:

 nz.net.ultraq.thymeleaf thymeleaf-layout-dialect 2.4.1 

La dernière version peut être trouvée dans le référentiel central Maven.

3. Configuration du dialecte de disposition de Thymeleaf

Dans cette section, nous discuterons de la façon de configurer Thymeleaf pour utiliser Layout Dialect . Si vous souhaitez prendre du recul et voir comment configurer Thymeleaf 3.0 dans votre projet d'application Web, veuillez consulter ce tutoriel.

Une fois que nous avons ajouté la dépendance Maven dans le cadre d'un projet, nous devons ajouter le Dialect de mise en page à notre moteur de modèle Thymeleaf existant. Nous pouvons le faire avec la configuration Java:

SpringTemplateEngine engine = new SpringTemplateEngine(); engine.addDialect(new LayoutDialect());

Ou en utilisant la configuration de fichier XML:

Lors de la décoration des sections du contenu et des modèles de mise en page, le comportement par défaut consiste à placer tous les éléments de contenu après ceux de mise en page.

Parfois, nous avons besoin d'une fusion d'éléments plus intelligente, permettant de regrouper des éléments similaires (scripts js ensemble, feuilles de style ensemble, etc.).

Pour y parvenir, nous devons ajouter une stratégie de tri à notre configuration - dans notre cas, ce sera la stratégie de regroupement:

engine.addDialect(new LayoutDialect(new GroupingStrategy()));

ou en XML:

La stratégie par défaut consiste à ajouter des éléments. Avec ce qui précède, nous aurons tout trié et groupé.

Si aucune de ces stratégies ne répond à nos besoins, nous pouvons mettre en œuvre notre propre stratégie de tri et la transmettre au dialecte comme ci-dessus.

4. Caractéristiques des processeurs d’espaces de noms et d’attributs

Une fois configuré, nous pouvons commencer à utiliser un espace de noms de disposition et cinq nouveaux processeurs d'attributs: décorer , motif de titre , insérer , remplacer et fragmenter.

Afin de créer le modèle de mise en page que nous voulons utiliser pour nos fichiers HTML, nous avons créé le fichier suivant, nommé template.html :

  ... 

Comme nous pouvons le voir, nous avons changé l'espace de noms du standard xmlns: th = ”// www.thymeleaf.org” à xmlns: layout = ”// www.ultraq.net.nz/thymeleaf/layout” .

Nous pouvons maintenant commencer à travailler avec des processeurs d'attributs dans nos fichiers HTML.

4.1. mise en page: fragment

Afin de créer des sections personnalisées dans notre mise en page ou des modèles réutilisables qui peuvent être remplacés par des sections qui partagent le même nom, nous utilisons l' attribut fragment dans notre corps template.html :

Your page content goes here

My custom footer

Your custom footer here

Notez qu'il y a deux sections qui seront remplacées par notre HTML personnalisé - le contenu et le pied de page.

Il est également important d'écrire le code HTML par défaut qui sera utilisé si l'un des fragments n'est pas trouvé.

4.2. mise en page: décorer

La prochaine étape que nous devons faire est de créer un fichier HTML, qui sera décoré par notre mise en page:

   Layout Dialect Example    

This is a custom content that you can provide

This is some footer content that you can change

Comme il est montré dans la 3ème ligne, nous utilisons la mise en page: décorer et spécifier la source du décorateur. Tous les fragments du fichier de mise en page qui correspondent aux fragments d'un fichier de contenu seront remplacés par son implémentation personnalisée.

4.3. mise en page: motif-titre

Étant donné que le dialecte de mise en page remplace automatiquement le titre de la mise en page par celui qui se trouve dans le modèle de contenu, vous pouvez conserver des parties du titre trouvées dans la mise en page.

Par exemple, nous pouvons créer des fils d'Ariane ou conserver le nom du site Web dans le titre de la page. Le processeur layout: title-pattern vient avec une aide dans un tel cas. Tout ce que vous devez spécifier dans votre fichier de mise en page est:

Baeldung

Ainsi, le résultat final du fichier de mise en page et de contenu présenté dans le paragraphe précédent ressemblera à ceci:

Baeldung - Layout Dialect Example

4.4. mise en page: insérer / mise en page: remplacer

Le premier processeur, layout: insert , est similaire au th: insert original de Thymeleaf , mais permet de transmettre les fragments HTML entiers au modèle inséré. C'est très utile si vous avez du HTML que vous souhaitez réutiliser, mais dont le contenu est trop complexe pour être déterminé ou construit avec des variables de contexte uniquement.

Le second, layout: replace , est similaire au premier, mais avec le comportement de th: replace , qui remplacera en fait la balise hôte par le code du fragment défini.

5. Conclusion

Dans cet article, nous avons décrit quelques façons d'implémenter des dispositions dans Thymeleaf.

Notez que les exemples utilisent la version 3.0 de Thymeleaf; si vous souhaitez apprendre à migrer votre projet, veuillez suivre cette procédure.

L'implémentation complète de ce didacticiel se trouve dans le projet GitHub.

Comment tester? Notre suggestion est de commencer par jouer avec un navigateur, puis de vérifier également les tests JUnit existants.

N'oubliez pas que vous pouvez créer des mises en page à l'aide du dialecte de mise en page mentionné ci-dessus ou créer facilement votre propre solution. Espérons que cet article vous donne plus d'informations sur le sujet et que vous trouverez votre approche préférée en fonction de vos besoins.