
Layouts et fragments avec Thymeleaf Layout Dialect
Apprenez à créer des mises en page réutilisables (layouts) et des sections de contenu modulaires (fragments) dans Thymeleaf en utilisant le Layout Dialect pour des applications web Spring Boot maintenables.
Le défi de la réutilisation dans les templates web
Lors du développement d'une application web avec plusieurs pages, on se retrouve très souvent avec des éléments structurels communs : un en-tête (header), un pied de page (footer), une barre de navigation, des menus latéraux, etc. Répéter ce code HTML dans chaque fichier de template est une mauvaise pratique : cela viole le principe DRY (Don't Repeat Yourself), rend la maintenance difficile (une modification doit être répercutée partout) et alourdit les fichiers.
Thymeleaf, le moteur de templates recommandé par Spring Boot, offre des mécanismes de base pour inclure des morceaux de code réutilisables via les attributs `th:insert` ou `th:replace`. Bien qu'utiles pour des composants plus petits (comme un bouton standard, une carte produit), ces attributs montrent leurs limites lorsqu'il s'agit de définir une structure de page complète (un layout) que plusieurs pages de contenu doivent "remplir".
Pour répondre spécifiquement à ce besoin de création de layouts complexes et héritables, la communauté a développé une extension très populaire pour Thymeleaf : le Thymeleaf Layout Dialect. Il introduit un ensemble d'attributs dédiés qui permettent de définir un template de base (le layout) et des pages de contenu qui viennent décorer ce layout en remplaçant des sections spécifiques (les fragments).
Le principe du Décorateur et les attributs clés (`layout:decorate`, `layout:fragment`)
Le Layout Dialect fonctionne sur le principe du pattern Décorateur. Vous créez un fichier HTML principal qui sert de "layout" ou de "décorateur". Ce fichier contient la structure HTML globale (, , , header, footer...) et définit des zones spécifiques remplaçables appelées fragments.
Ensuite, pour chaque page de contenu spécifique (par exemple, une page de détails produit, une page de profil utilisateur), vous créez un autre fichier HTML. Ce fichier de contenu va :
- Indiquer quel fichier layout il doit utiliser (décorer) grâce à l'attribut
layout:decorate="~{chemin/vers/layout}", généralement placé sur la balise. - Fournir le contenu spécifique pour les fragments définis dans le layout, en utilisant l'attribut
layout:fragment="nomDuFragment"sur les balises correspondantes.
Dans le fichier layout, les zones remplaçables sont également marquées avec layout:fragment="nomDuFragment". Lorsque Thymeleaf traite une page de contenu, il charge le layout spécifié par `layout:decorate`, puis remplace les balises marquées avec `layout:fragment` dans le layout par les balises correspondantes (ayant le même nom de fragment) trouvées dans la page de contenu.
Exemple simple :
Fichier layout (src/main/resources/templates/layouts/mainLayout.html):
Titre par Défaut
Mon Application Web
Contenu par défaut qui sera remplacé.
Fichier de contenu (src/main/resources/templates/home.html):
Page d'Accueil
Bienvenue sur la page d'accueil !
Ceci est le contenu spécifique à la page d'accueil.
Lorsque la page home.html est rendue, le contenu de la balise remplacera la balise du layout, et le titre de la page sera également remplacé.
Définir et Remplacer les Fragments (`layout:fragment`, `layout:insert`, `th:replace`)
L'attribut layout:fragment="nomDuFragment" est donc central. Il sert à la fois dans le layout pour définir une zone remplaçable et dans la page de contenu pour fournir le remplacement. Il est important de noter que c'est la balise entière contenant l'attribut layout:fragment dans la page de contenu qui remplace la balise correspondante dans le layout.
Parfois, vous ne voulez pas remplacer la balise entière du layout, mais seulement insérer le contenu du fragment de la page de contenu *à l'intérieur* de la balise du layout. C'est utile pour des éléments comme ou pour ajouter des classes CSS spécifiques à une page à un élément du layout. Pour cela, vous pouvez utiliser layout:insert="~{::nomDuFragment}" dans le layout. Dans ce cas, la page de contenu définit toujours le fragment avec layout:fragment, mais seul le contenu de cette balise sera utilisé.
Exemple avec layout:insert :
Layout (partie ) :
Page de contenu (partie ) :
Titre Spécifique de la Page
Ici, seul le texte "Titre Spécifique de la Page" sera inséré dans la balise du layout, et le lien CSS sera ajouté à l'intérieur du du layout.
N'oubliez pas que vous pouvez toujours utiliser les attributs Thymeleaf standard th:replace et th:include pour des fragments plus petits et autonomes (ex: un composant de navigation, un formulaire de recherche). th:replace remplace la balise hôte par le contenu du fragment, tandis que th:include insère le contenu du fragment à l'intérieur de la balise hôte. Ils peuvent être utilisés en complément du Layout Dialect pour structurer vos vues de manière modulaire.
Intégration dans Votre Projet Spring Boot
Le Thymeleaf Layout Dialect n'est pas inclus par défaut avec le starter Thymeleaf de Spring Boot. Vous devez l'ajouter explicitement comme dépendance dans votre projet.
Maven (pom.xml) :
nz.net.ultraq.thymeleaf
thymeleaf-layout-dialect
Gradle (build.gradle) :
implementation 'nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect' // Vérifiez la dernière versionUne fois cette dépendance ajoutée, Spring Boot (via l'auto-configuration de Thymeleaf) détectera automatiquement le Layout Dialect et l'enregistrera auprès du moteur de templates Thymeleaf. Aucune configuration Java supplémentaire n'est généralement nécessaire. Vous pouvez alors commencer à utiliser les attributs layout:* dans vos templates HTML.
Avantages et Conclusion
L'utilisation du Thymeleaf Layout Dialect apporte des avantages significatifs à vos projets web Spring Boot :
- Respect du principe DRY : La structure commune de la page est définie une seule fois dans le fichier layout.
- Maintenabilité améliorée : Les modifications apportées au layout (ex: changement dans le header ou le footer) sont automatiquement répercutées sur toutes les pages qui l'utilisent.
- Templates de contenu plus propres : Les fichiers de contenu se concentrent uniquement sur la partie spécifique de la page, rendant le code plus lisible et plus concis.
- Cohérence de l'interface utilisateur : Assure une apparence et une structure cohérentes sur l'ensemble de l'application.
En conclusion, le Thymeleaf Layout Dialect est un outil puissant et quasi indispensable pour tout développeur travaillant avec Thymeleaf et Spring Boot sur des applications web comportant plusieurs pages. Il fournit une solution élégante et efficace pour gérer les mises en page complexes, favorisant la création d'applications web bien structurées, maintenables et professionnelles.