Spring Java: thymeleaf - étendre un template

Résolu
charline159 Messages postés 208 Date d'inscription   Statut Membre Dernière intervention   -  
charline159 Messages postés 208 Date d'inscription   Statut Membre Dernière intervention   -
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

KX Messages postés 16760 Date d'inscription   Statut Modérateur Dernière intervention   3 020
 
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>
0
charline159 Messages postés 208 Date d'inscription   Statut Membre Dernière intervention   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.
0
KX Messages postés 16760 Date d'inscription   Statut Modérateur Dernière intervention   3 020
 
"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/
0
charline159 Messages postés 208 Date d'inscription   Statut Membre Dernière intervention   1 > KX Messages postés 16760 Date d'inscription   Statut Modérateur Dernière intervention  
 
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.
0
charline159 Messages postés 208 Date d'inscription   Statut Membre Dernière intervention   1 > KX Messages postés 16760 Date d'inscription   Statut Modérateur Dernière intervention  
 
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!
0
charline159 Messages postés 208 Date d'inscription   Statut Membre Dernière intervention   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.
0