Bienvenue !

Pierre-Julien VILLOUD

https://linkedin.com/pjvilloud

Introduction

Nous avons vu dans le cours précédent comment générer dynamiquement des pages HTML avec les servlets. Pour l'instant nous avons géré la partie HTML dans le contrôleur. Afin de mieux coller aux principes du MVC, nous allons voir la technologie Thymeleaf.

Thymeleaf est un moteur de template Java permettant le développement d'applications web générées côté serveur.

Utilisation avec Spring

On peut utiliser les contrôleurs de Spring avec les templates Thymeleaf.

IndexController.java

@Controller
public class IndexController {

    @GetMapping(value = "/")
    public String index(final ModelMap model) {
        model.put("nom", "IPI");
        return "index";
    }

}

index.html

<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
      <title>Thymeleaf</title>
  </head>
  <body>
  <h1>Hello <span th:text="${nom}"></span> !</h1>
  </body>
</html>

On garde le principe de mapping d'url de Spring, on précise simplement le template Thymeleaf utilisé en retour de la fonction, ici index. Lorsqu'on accède à la page localhost:8080 cela affiche Hello IPI !.

Affichage

Maintenant que nous savons comment passer des objets du contrôleur à la vue, voyons les syntaxes à notre disposition pour manipuler et afficher ces objets côté vue.

Affichage dans une balise HTML
Affichage inline
Attributs HTML

Balise HTML

Il est possible d'utiliser n'importe quelle balise HTML à laquelle nous ajoutons un attribut th:text ou data-th-textqui sera interprété par Thymeleaf.
La valeur est alors interprétée puis injectée à l'intérieur de la balise.

@Controller
public class IndexController {

    @GetMapping(value = "/")
    public String index(final ModelMap model) {
        model.put("nom", "IPI");
        model.put("htmlText", "How are <strong>you</strong> ?");
        model.put("otherText", "Have a nice day !");
        return "index";
    }

}

<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
      <title>Thymeleaf</title>
  </head>
  <body>
  <h1>Hello <span th:text="${nom}">World</span> !</h1>
  <p th:utext="${htmlText}"></p>
  <p data-th-text="${otherText}"></p>
  </body>
</html>

L'intérêt de Thymeleaf par rapport à d'autres moteurs de templates est que le fichier reste du simple HTML affichable statiquement dans un navigateur. Cela permet de réduire le temps de passage d'une page en pur HTML à un template Thymeleaf (Natural Templating).

Affichage Inline

L'ajout obligatoire d'une balise supplémentaire pouvant être vue comme un problème (même si l'utilisation de balises comme span permet un affichage neutre), il est possible d'utiliser une notation inline à l'aide de la syntaxe [[...]] équivalente de th:text et [(...)] équivalente de th:utext.

@Controller
public class IndexController {

    @GetMapping(value = "/")
    public String index(final ModelMap model) {
        model.put("nom", "IPI");
        model.put("htmlText", "How are <strong>you</strong> ?");
        return "index";
    }

}

<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
      <title>Thymeleaf</title>
  </head>
  <body>
  <h1>Hello [[${nom}]] !</h1>
  <p>[(${htmlText})]</p>
  <p th:inline="none">[[crochets]] non interprétés!</p>
  </body>
</html>

Cette notation est pratique mais ne permet pas le Natural Templating et complexifie l'affichage statique.

Attributs HTML

Il est également possible d'injecter dans un attribut HTML une valeur interprétée par Thymeleaf.

@Controller
public class IndexController {

    @GetMapping(value = "/")
    public String index(final ModelMap model) {
        model.put("message", "Hello");
        model.put("nom", "IPI");
        model.put("htmlText", "How are <strong>you</strong> ?");
        return "index";
    }

}

<html lang="en" xmlns:th="http://www.thymeleaf.org">
  <head>
      <title>Thymeleaf</title>
  </head>
  <body>
  <input value="Hi" th:attr="value=${message}" />
  <input value="World" th:value="${nom}" />
  <input th:attr="placeholder=${nom},value=${nom}" />
  <a th:href="@{/sayHello(nom=${nom})}">Lien 1</a>
  <!-- générera le lien vers /sayHello?nom=IPI-->
  <a th:href="@{/sayHello2/{message}}">Lien 2</a>
  <!-- générera le lien vers /sayHello2/Hello-->
  </body>
</html>

Tous les attributs standards HTML5 ont leur équivalent th:*. On peut également utiliser n'importe quel attribut non standard avec th:*.
Utiliser <span th:toto="${nom}"></> sera interprété <span toto="IPI"></>. Noter l'utilisation de @{} pour la gestion des URLs.

Expressions et objets

Voyons les différentes syntaxes des expressions standards Thymeleaf qui vont nous permettre de développer des templates aboutis, ainsi que les différents objets à notre disposition à l'intérieur des templates.

Objets Web Context
Objets utilitaires
Expressions simples et litérales
Opérations, comparaisons et conditions

Objets `Web context`

Il est possible d'accéder aux objets de contexte web HttpServletRequest, la HttpSession et la ServletContext respectivement par #request, #session et #servletContext. Les objets param, session et application sont des raccourcis permettant d'accéder aux attributs ou paramètres.

@Controller
public class IndexController {

  @Autowired
  ServletContext context;

  @GetMapping(value = "/say")
  public String index(final ModelMap m, 
    HttpSession s, HttpServletRequest r) {
    m.put("foo", "Hello");
    s.setAttribute("bar", "World");
    context.setAttribute("foobar", "IPI");
    //ou
    r.getServletContext().setAttribute("foobar", "IPI");
    return "index";
  }
}

localhost:8080/say?msg=Hey

<span th:text="${#request.getAttribute('foo')}">Hello</span>

<span th:text="${#request.getParameter('msg')}">Hey</span>
<span th:text="${param.msg}">Hey</span>
<span th:text="${param.msg[0]}">Hey</span>

<span th:text="${#request.getRequestURI()}">say</span>

<span th:text="${#session.getAttribute('bar')}">World</span>
<span th:text="${session.bar}">World</span>
<span th:text="${#session.id}">BA7CD710FE9610F1CEF5174DFB3C04AE</span>

<span th:text="${#servletContext.getAttribute('foobar')}">IPI</span>
<span th:text="${application.foobar}">IPI</span>
<span th:text="${#servletContext.getServerInfo()}">Tomcat/9.0.36</span>

Il existe aussi #ctx, #vars, #locale, #response... L'ensemble des objets disponibles sont décrits dans la documentation de Thymeleaf

Objets utilitaires

D'autres objets sont disponibles permettant d'effectuer divers traitements. Notamment #messages, #temporals, #strings, #numbers ou #lists

#application.properties
message.hello=Hello
message.hello2=Hi

@Controller
public class IndexController {
  @GetMapping(value = "/say")
  public String index(final ModelMap m) {
    m.put("now", LocalDate.now());
    m.put("codePostal", 7600);
    m.put("prix", 1500);
    m.put("reduction", 0.1012);
    m.put("liste", Arrays.asList(5,3,9,6));
    return "index";
  }
}

localhost:8080/say?name=World

<span th:text="${#messages.msg('message.hello')}">Hello</span>
<span th:text="${#messages.msg('message.hello2', param.name)}">Hello</span>

<span th:text="${#temporals.format(now, 'dd/MM/YYYY')}"></span>

<span th:text="${#strings.defaultString(notDefined,'Non renseigné')}">Non renseigné</span>
<span th:text="${#strings.containsIgnoreCase(param.name,'or')}">true</span>
<span th:text="${#strings.toUpperCase(param.name)}">WORLD</span>

<span th:text="${#numbers.formatInteger(codePostal,5)}">07600</span>
<span th:utext="${#numbers.formatCurrency(prix)}">1 500,00 €</span>
<span th:utext="${#numbers.formatPercent(reduction, 1, 0)}">10 %</span>

<span th:utext="${#lists.size(liste)}">4</span>
<span th:utext="${#lists.sort(liste)}">[3, 5, 6, 9]</span>

Il existe aussi #calendars, #objects, #bools, #arrays... L'ensemble des objets disponibles sont décrits dans la documentation de Thymeleaf

Expressions simples et litérales

Il est possible d'utiliser du texte, des nombres, des booléens ou encore null dans les expressions Thymeleaf.

localhost:8080/say?name=World

<span th:text="'Hello ' + ${param.name}">Hello World</span>
<span th:text="|Hello ${param.name}|">Hello World</span>
<span th:text="25 * 2">50</span>
<span th:text="false == true">false</span>
<span th:text="${param.message} == null">true</span>

Toutes les expressions litérales sont décrites dans la documentation de Thymeleaf

Opérations, comparaisons et conditions

Il est possible d'effectuer des opérations arithmétiques à l'intérieur d'une expression (+, -, *, /, %), effectuer des comparaisons ou afficher une valeur de manière conditionnelle.

@Controller
public class IndexController {
  @GetMapping(value = "/")
  public String index(final ModelMap m) {
    m.put("montant", 100.0);
    m.put("tva", 20);
    return "index";
  }
}

<span th:text="${montant} * (100 + ${tva}) / 100">120</span>
<span th:text="${montant} % 3">1</span>
<span th:text="${montant} - 10">90</span>
<span th:text="${tva} &gt; 10">true</span>
<span th:text="${montant} &lt; 150">true</span>
<span th:text="${tva} == null ? 'HT'">HT</span>
<span th:text="${tva} == 20 ? 'TTC' : 'HT'">TTC</span>
<span th:text="${montant} ?: 'Montant non renseigné'">Montant non renseigné</span>
<span th:text="${montant} ?: _">Montant non renseigné</span>

Toutes les opérations sont décrites dans la documentation de Thymeleaf, les comparaisons et conditions sont décrites dans les sections suivantes.

Conditions et itérations

Il est possible d'afficher un fragment HTML en fonction d'une condition ou de le répéter plusieurs fois.

Conditions
Itérations

Voyons comment utiliser ces éléments avec Thymeleaf

Conditions

Il est souvent nécessaire d'afficher des éléments HTML seulement lorsqu'une condition est satisfaite, ou de faire varier l'affichage en fonction des cas. Thymeleaf propose les attributs th:if, th:unless et th:switch.

@Controller
public class IndexController {
  @GetMapping(value = "/")
  public String index(final ModelMap m) {
    m.put("idProduit", 4);
    m.put("typeProduit", "book");
    m.put("items", Arrays.asList("Item 1", "Item 2"));
    return "index";
  }
}

<a href="/saveExisting" th:if="${idProduit} != null">Enregistrer</a>
<a href="/saveNew" th:unless="${idProduit}">Créer</a>
<a href="/details" th:if="${not #lists.isEmpty(items)}">Voir le détail</a>

<div th:switch="${typeProduit}">
  <span th:case="book">Livre</span>
  <span th:case="dvd">DVD</span>
  <span th:case="*">Autre</span>
</div>
<!-- Produira l'affichage suivant -->
<a href="/saveExisting">Enregistrer</a>
<a href="/details">Voir le détail</a>
<div>
  <span>Livre</span>
</div>

A noter qu'il n'y a pas de notion de else au niveau du th:if.

Itérations

Voyons comment répéter plusieurs fois un fragment HTML grâce à th:each

@Controller
public class IndexController {
  @GetMapping(value = "/")
  public String index(final ModelMap m) {
    String[] typesProduits = new String[{"DVD", "Livre", "Autre"}];
    m.put("typesProduit", typesProduits);
    m.put("items", Arrays.asList("Item 1", "Item 2", "Item 3"));
    return "index";
  }
}

<ul th:each="item : ${items}">
  <li th:text="${item}"></li>
</ul>
<div th:each="typeP : ${typesProduit}">
  <a th:href="@{/typesProduits(type=${typeP})">${typeP}</a>
</div>
<!-- Produira l'affichage suivant -->
<ul>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
</ul>
<div>
  <a href="/typesProduits?type=DVD">DVD</a>
  <a href="/typesProduits?type=Livre">Livre</a>
  <a href="/typesProduits?type=Autre">Autre</a>
</div>

th:each fonctionne avec les java.util.List mais également n'importe quel objet implémentant java.util.Iterable, java.util.Enumeration ou java.util.Map ainsi qu'avec les tableaux primitifs.

Les fragments

Lorsque l'on souhaite réutiliser des portions d'HTML dans une application (pour définir un menu, un footer par exemple), il est possible avec Thymeleaf, de définir puis d'inclure des fragments d'HTML dans un template.

Inclusion
Fragments paramétrés
Autres fonctionnalités

Voyons comment définir et inclure ces fragments, et comment il est possible de les paramétrer pour les rendre plus dynamiques.

Inclusion de fragments

Pour définir un fragment, il suffit de créer un template HTML, puis de définir une ou plusieurs balises en utilisant l'attribut Thymeleaf th:fragment. On peut alors inclure le fragment dans un template en utilisant l'attribut th:insert ou th:replace.

                  <!-- Template common.html -->
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <div class="nav-div" th:fragment="menu">
      <ul class="nav">
        <li class="nav-item">
          <a class="nav-link" href="#">Accueil</a>
        </li>
        ...
      </ul>
    </div>
    <div th:fragment="tab">...</div>
    <div class="footer" th:fragment="footer">
      &copy; Copyright 2020 Tous droits réservés
    </div>
  </body>
</html>

                  <!-- Autre template -->
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <div class="container"th:insert="common :: menu"></div>
    ...
    <div class="container" th:replace="common :: footer"></div>
  </body>
</html>
<!-- Donnera -->
<html>
<body>
  <div class="container">
    <div class="nav-div">
      <ul class="nav">...</ul>
    </div>
  </div>
  ...
  <div class="footer">&copy; Copyright 2020 Tous droits réservés</div>
</body>
</html>

Il existe aussi th:include mais qui est déprécié depuis la version 3.0 de Thymleaf.

Fragments paramétrés

Lorsque l'on souhaite rendre dynamique le contenu d'un fragment, on peut définir des paramètres sur le fragment.

                  <!-- Template common.html -->
<html xmlns:th="http://www.thymeleaf.org">
<body>
  <div th:fragment="menu(title, elements)">
    <h3 th:text="${title}"></h3>
    <ul th:each="elem : ${elements}" class="nav">
      <li class="nav-item"><a href="#">${elem}</a></li>
    </ul>
  </div>
</body>
</html>

              @Controller
public class IndexController {
  @GetMapping(value = "/")
  public String index(final ModelMap m) {
    m.put("listElem", Arrays.asList("Accueil", "A propos"));
    return "index";
  }
}

                  <!-- Autre template -->
<html xmlns:th="http://www.thymeleaf.org">
  <body>
    <div th:insert="common :: menu('Menu', ${listElem})"></div>
  </body>
</html>
<!-- Donnera -->
<html>
<body>
  <div>
    <h3>Menu</h3>
    <div class="nav-div">
      <ul class="nav">
        <li class="nav-item"><a href="#">Accueil</a></li>
        <li class="nav-item"><a href="#">A propos</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

Lorsqu'on insère un fragment paramétré, il suffit de spécifier les paramètres.

Autres fonctionnalités

D'autres fonctionnalités sont disponibles dans l'utilisation de template

Flexible Layouts
Suppression de fragments
Héritage de fragments

Nous n'évoquerons pas ces fonctionnalités relativement avancées. La documentation est disponible ici

Bienvenue !

Pierre-Julien VILLOUD

pjvilloud@protonmail.com

https://github.com/pjvilloud

https://linkedin.com/pjvilloud

https://pjvilloud.github.io

Introduction

Utilisation avec Spring

Affichage

Balise HTML

Affichage Inline

Attributs HTML

Expressions et objets

Objets `Web context`

Objets utilitaires

Expressions simples et litérales

Opérations, comparaisons et conditions

Conditions et itérations

Conditions

Itérations

Les fragments

Inclusion de fragments

Fragments paramétrés

Autres fonctionnalités

Bienvenue !

Pierre-Julien VILLOUD

pjvilloud@protonmail.com

https://github.com/pjvilloud

https://linkedin.com/pjvilloud

https://pjvilloud.github.io

Introduction

Utilisation avec Spring

Affichage

Balise HTML

Affichage Inline

Attributs HTML

Expressions et objets

Objets Web context

Objets utilitaires

Expressions simples et litérales

Opérations, comparaisons et conditions

Conditions et itérations

Conditions

Itérations

Les fragments

Inclusion de fragments

Fragments paramétrés

Autres fonctionnalités

Objets `Web context`