Le patron décorateur avec Thymeleaf

Dans le précédent article de thymeleaf, nous avons utilisé l'approche par défaut des templates. Nous avions une page principal, product et about. Pour chacune d'elle, nous avions un fragment menu, footer. Tous ces pages avaient une structure similaire. 

Nous allons maintenant utiliser une approche différente. Nous allons utiliser le patron décorateur.

Nous allons utiliser le même exemple, mais avec cette approche.Le header sera mis dans un fragment cette fois.

Les sources sont disponibles sur github

Le fragment header

<head th:fragment="my-header">
    <title>Good Thymes Virtual Grocery</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link rel="stylesheet" type="text/css" media="all" href="../../css/main.css" th:href="@{/css/main.css}" />
</head>

 

Layout Decorator

Nous allons créer un fichier main-layout avec les sections similaires au niveau des fragments.

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
    <head th:replace="fragments/header :: my-header">
<body>
    <div th:replace="fragments/menu :: my-menu"></div>
    <div class="container" id="mainContent">
        <div layout:fragment="content"></div>
    </div>
    <div th:replace="fragments/footer :: my-footer"></div>
</body>
</html>

Les templates

Le fichier products ressemblera a 

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="layout/mainLayout">
<head>
    <title>Products</title>
</head>
<body>
<div layout:fragment="content">
    <table>
        <tr>
            <td>Id</td>
            <td>Name</td>
            <td>Description</td>
            <td>Price</td>
        </tr>
        <tr th:each="product: ${products}">
            <td th:text="${product.id}"/>
            <td th:text="${product.name}"/>
            <td th:text="${product.description}"/>
            <td th:text="${product.price}"/>
        </tr>
    </table>
</div>
</body>
</html>

Le fichier about ressemblera a 

<!DOCTYPE html>
<html xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout" layout:decorate="layout/mainLayout">
<head>
    <title>About</title>
</head>
<body>
<div layout:fragment="content">
    <p>Grocery exist since 1985</p>
</div>
</body>
</html>

 
Il suffit d'indiquer dans nos templates  dans la section layout:decorate celui qu'on désire utiliser.

Le patron décorateur n'est pas l'approche standard de thymeleaf. Cependant, c'est celle qui demeure la plus efficace pour une application de grande envergure.