Sujet Précédent Sujet Suivant

Spring Java: thymeleaf - étendre un template [Résolu]

Signaler
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021
 -
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021
 -
Bonjour, je souhaiterais réutiliser certaines parties communes (header, footer) à plusieurs pages d'un site. J'ai donc utilisé l'attribut layout comme ceci:

La page que j'aimerais réutiliser dans différentes pages (skeleton.html): 

<!DOCTYPE html>
<html lang="en"
      xmlns:th="http://www.thymeleaf.org"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout">
    <head>
        <meta charset="UTF-8">
        <title>Message</title>
        <link th:href="@{/css/general.css}" rel="stylesheet" />
    </head>

    <body>
        <header th:insert="fragments/header.html :: header"> </header>

        <h1>Skeleton</h1>
        <div layout:fragment="content">
            <p>Changing contents</p>
        </div>

        <footer th:insert="fragments/footer.html :: footer"> </footer>
        <script type="text/javascript" th:src="@{/js/littlescript.js}"></script>
    </body>
</html>


La page qui doit faire appel à skeleton (test.html): 
<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="skeleton.html">

  <body>
    <div layout:fragment="content">

      <!--Content of the page-->
      <h3>this is a page injected in another page</h3>

    </div>
  </body>
</html>


Cependant, lorsque j'affiche la page test.html, le contenu de skeleton n'est pas affiché, comme si je ne l'appelais pas.

Pourtant, j'ai l'impression d'avoir bien respecté la syntaxe, etc.

Une idée du problème ?



Configuration: Windows / Firefox 88.0
A voir également:

3 réponses

Réponse 1 / 3
Messages postés
16358
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
7 juin 2021
 2 842
Bonjour,

Il faudrait que tu regardes la documentation, elle est plutôt bien faite, mais ton code est loin de correspondre à ce qu'elle décrit.
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html#template-layout

Exemple :

template.html 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <div th:fragment="header">Mon header</div>
    <div th:fragment="footer">Mon footer</div>
  </body>
</html>

test.html 
<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <div>Avant header</div>
    <div th:insert="~{template :: header}"></div>
    <div>Entre header et footer</div>
    <div th:insert="~{template :: footer}"></div>
    <div>Après footer</div>
  </body>
</html>
Réponse 2 / 3
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021
 1
Bonjour,

J'avais suivi ces tutos :
- https://www.kindsonthegenius.com/how-to-use-layout-page-in-spring-boot-with-thymeleaf-master-and-content-page/
- https://stackoverflow.com/questions/22212512/extend-a-view-with-thymeleaf

Du coup je trouve ça un peu étonnant que les gens parlent de xmlns:layout et layout:decorate alors que la doc officielle n'en parle pas.


J'ai essayé ton code, mais je ne vois pas trop la différence. Je peux déjà afficher mon header et mon footer dans skeleton.html qui a l'air de fonctionner correctement, mais je n'arrive pas à afficher le contenu de test.html + skeleton.html sur une seule et même page.
Signaler
Messages postés
16358
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
7 juin 2021
 2 842
"je trouve ça un peu étonnant que les gens parlent de xmlns:layout et layout:decorate alors que la doc officielle n'en parle pas" 

xmlns
permet de définir des noms pour les éléments que tu utilises, un peu comme des variables, le nom définit ensuite permet de savoir de quel type on parle. En l'occurrence ce qui est nommé par th: et layout: ce ne sont pas les mêmes choses. 

xmlns:th="http://www.thymeleaf.org"
c'est le ThymeLeaf de Spring Boot, via la dépendance org.springframework.boot:spring-boot-starter-thymeleaf et dont je t'ai donné la documentation Spring précédemment :
https://www.thymeleaf.org/doc/tutorials/3.0/usingthymeleaf.html 

  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
c'est une bibliothèque complémentaire (qui n'est pas géré par Spring) via la dépendance nz.net.ultraq.thymeleaf:thymeleaf-layout-dialect dont la documentation est ici :
https://ultraq.github.io/thymeleaf-layout-dialect/
Signaler
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021
 1 >
Messages postés
16358
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
7 juin 2021
J'étais déjà tombée sur https://ultraq.github.io un peu plus tôt. Dans la section Getting started, ils disent:
"This will introduce the layout namespace, and 5 new attribute processors that you can use in your templates: decorate, title-pattern, insert, replace, and fragment."
Etant donné que je peux déjà utiliser insert et replace, j'en conclus que je peux utiliser les autres tags également.
Signaler
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021
 1 >
Messages postés
16358
Date d'inscription
samedi 31 mai 2008
Statut
Modérateur
Dernière intervention
7 juin 2021
Au final, ce que j'avais fait est correct. J'avais juste oublié une dépendance dans le fichier pom.xml... A présent, tout fonctionne correctement.

Merci pour ton aide!
Réponse 3 / 3
Messages postés
203
Date d'inscription
lundi 14 août 2017
Statut
Membre
Dernière intervention
9 juin 2021
 1
Pour mon fichier test.html, j'ai essayé également ce code: 

<!DOCTYPE html>
<html lang="en"
      xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
      layout:decorate="~{skeleton}"
      xmlns:th="http://www.thymeleaf.org">

  <body>
    <div layout:fragment="content">

      <!--Content of the page-->
      <h3>this is a page injected in another page</h3>

    </div>
  </body>
</html>


donc avec cette syntaxe: 
layout:decorate="~{skeleton}"
mais ma page skeleton ne s'affiche toujours pas. J'obtiens seulement le contenu de test.html.
Répondre Posez votre question