Thymeleaf: Dialecte de disposition personnalisé
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 àthis write-up.
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 potentiellement beaucoup plus.
Thymeleaf s'adresse avec des dialectes personnalisés - vous pouvez créer des mises en page en utilisant leThymeleaf Standard Layout System ou leLayout Dialect - qui utilise le modèle décorateur pour travailler avec les fichiers de mise en page.
Dans cet article, nous allons discuter de quelques fonctionnalités deThymeleaf Layout Dialect - qui peuvent être trouvéeshere. Pour être plus précis, nous discuterons de ses fonctionnalités telles que la création de dispositions, de titres personnalisés ou la fusion d’éléments d’en-tête.
2. Dépendances Maven
Voyons d'abord la configuration requise pour intégrer Thymeleaf à Spring. La bibliothèquethymeleaf-spring est requise dans nos dépendances:
org.thymeleaf
thymeleaf
3.0.9.RELEASE
org.thymeleaf
thymeleaf-spring4
3.0.9.RELEASE
Notez que, pour un projet Spring 4, la bibliothèquethymeleaf-spring4 doit être utilisée à la place dethymeleaf-spring5. La dernière version des dépendances peut être trouvéehere.
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.3.0
La dernière version peut être trouvée dans leMaven Central Repository.
3. Configuration du dialecte de disposition Thymeleaf
Dans cette section, nous verrons comment configurer Thymeleaf pour utiliserLayout Dialect. Si vous voulez prendre du recul et voir comment configurer Thymeleaf 3.0 dans votre projet d'application Web, veuillez vérifier cecitutorial.
Une fois que nous avons ajouté la dépendance Maven dans le cadre d'un projet, nous devrons ajouter lesLayout Dialect à 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 des modèles de contenu et de présentation, le comportement par défaut consiste à placer tous les éléments de contenu après ceux de la présentation.
Parfois, nous avons besoin d’une fusion plus intelligente d’éléments, 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 mentionné ci-dessus, nous aurons tout trié et groupé.
Si aucune des stratégies ne convient à nos besoins, nous pouvons implémenter nos propresSortingStrategy et les transmettre au dialecte comme ci-dessus.
4. Fonctionnalités des processeurs d'espaces de noms et d'attributs
Une fois configuré, nous pouvons commencer à utiliser l'espace de nomslayout et cinq nouveaux processeurs d'attributs:decorate,title-pattern,insert,replace etfragment.
Afin de créer un 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 standardxmlns:th=”http://www.thymeleaf.org” enxmlns:layout=”http://www.ultraq.net.nz/thymeleaf/layout”.
Nous pouvons maintenant commencer à utiliser des processeurs d'attributs dans nos fichiers HTML.
4.1. layout: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'attributfragment dans le corps de notretemplate.html:
New dialect example
Your page content goes here
Notez que deux sections seront remplacées par notre contenu 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. layout:decorate
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
Comme indiqué sur la 3ème ligne, nous utilisonslayout:decorate et spécifions 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. layout:title-pattern
Étant donné que leLayout dialect 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 chemins de navigation ou conserver le nom du site Web dans le titre de la page. Le processeurlayout:title-pattern est fourni avec une aide dans un tel cas. Tout ce que vous avez besoin de spécifier dans votre fichier de mise en page est:
example Ainsi, le résultat final pour la mise en page et le fichier de contenu présentés dans le paragraphe précédent ressemblera à ceci:
example - Layout Dialect Example 4.4. layout:insert/layout:replace
Le premier processeur,layout:insert, est similaire auxth:insert d'origine de Thymeleaf, mais permet de transmettre l'intégralité des fragments HTML au modèle inséré. Cela est très utile si vous souhaitez réutiliser du code HTML, 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 deth: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 manières de mettre en œuvre des dispositions dans Thymeleaf.
Notez que les exemples utilisent la version 3.0 de Thymeleaf; si vous souhaitez apprendre à migrer votre projet, veuillez suivre cetteprocedure.
L'implémentation complète de ce didacticiel se trouve dansthe GitHub project.
How to test? Notre suggestion est de jouer d'abord avec un navigateur, puis de vérifier également les tests JUnit existants.
N'oubliez pas que vous pouvez créer des mises en page en utilisant lesLayout Dialectmentionnés ci-dessus ou vous pouvez facilement créer votre propre solution. Espérons que cet article vous donne plus de perspicacités sur le sujet et que vous trouverez votre approche préférée en fonction de vos besoins.