Thymeleaf (1)

Thymeleaf
C’est quoi Thymeleaf ?

• un moteur de Template écrit en Java
• pouvant être utilise dans un environnement web utilisant
l’API, Servlet
• étendant les EL (Expression Language) de la librairie JSTL et
simplifiant encore plus l’écriture d’un contenu dynamique
pour les pages web
• genérant des pages d’extensions HTML, XHTML ou XML.
Integration
Ajoutons la dépendance suivante dans pom.xml
(dernière version stable de Thymeleaf)
• <dependency>
– <groupId>org.thymeleaf</groupId>
– <artifactId>thymeleaf-spring5</artifactId>
– <version>3.0.11.RELEASE</version>
• </dependency>
Un premier Hello World avec Thymeleaf
Pour utiliser Thymeleaf dans une vue
• déclarer un espace de nom Thymeleaf
• utiliser cet espace de nom comme attribut de balise HTML
Créons la vue view.html

<!DOCTYPE html>
<html xmlns:th="www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>First Thymeleaf Page</title>
</head>
<body>
<p th:text = "${ message }"></p>
</body>
</html>
Les expressions
Cinq expressions possibles
• ${ } : pour les expressions de variable

• *{ } : pour les expressions de sélection
• @{ } : pour les expressions de lien (href)
• ∼{ } : pour les expressions de fragment
• #{ } : pour les expressions de message (i18n)
Les expressions
Pour afficher le contenu d’une variable définie
comme attribut dans Model


Les expressions
Pour afficher le contenu d’une variable définie comme
attribut dans Model

Pour concaténer deux chaînes :
<p th:text = "${ message } + ‘from Marrakech’"></p>


Les expressions
Pour afficher le contenu d’une variable définie comme attribut dans Model

Pour concaténer deux chaînes
<p th:text = "${ message } + ’ from Marrakech’"></p>

Ou aussi
<p th:text = "| ${ message } from Marrakech|"></p>

Les expressions
Il est aussi possible de combiner les deux operateurs
(Supposant que ‘${ personne.nom } = Safi et $
{ personne.prenom } = Ahmed)
<p th:text = "’Bonjour ’ + |${ personne.prenom } ${

personne.nom } |"></p>


Les expressions
Il est aussi possible de combiner les deux operateurs (Supposant que ´ $
{ personne.nom } = Safi et ${ personne.prenom } = Ahmed)
<p th:text = "’Bonjour ’ + |${ personne.prenom } ${

personne.nom } |"></p>

Ceci déclenche une exception
<p th:text = "${ message } ’ from Marrakech’"></p>

Les expressions
Pour faire un affichage conditionnel
<div th:if="${ message.length() >= 5 }">

<p th:text = "${ message }"> </p>
</div>
Les expressions
Pour faire un affichage conditionnel
<div th:if="${ message.length() >= 5 }">

<p th:text = "${ message }"> </p>
</div>
Ou aussi en utilisant le format (if) ? (then)
<p th:text = "${ message.length() >= 5 } ? ${message }"> </p>

Les expressions
Pour faire un affichage conditionnel que la condition soit vraie ou non
<div th:if="${ message.length() >= 15 }" th:text="long"></div>
<div th:unless="${ message.length() >= 15 }" th:text="court"></div>

Ou aussi en utilisant le format (if) ? (then) : (else) (Elvis operator)

<div th:text="${ message.length() <= 15 } ? ’court’ : ’long’" > </div>

Les expressions
Pour définir une valeur par défaut (la variable ´
msg n’existe pas), on utilise le format (value) ?:
(defaultValue)
<p th:text = "${ msg } ?: ${ message }"> </p>

Les expressions
Autres operateurs de comparaison
• supérieur : > ou gt
• inferieur : < ou lt
• supérieur ou égal : >= ou ge
• inferieur ou égal : <= ou le
Operateurs d’égalité
• égal : == ou eq
• inégal : != ou neq ou ne
Les expressions
Operateurs arithmétiques
• addition : +
• soustraction : -
• multiplication : *
• division : / ou div
• reste de la division : % ou mod
Operateurs logiques (booléens)

• et : and
• ou : or
• négation : ! ou not
Les expressions
Si on a plusieurs conditions
<div th:switch="${ message.length() }">

<p th:case="1">Un</p>
<p th:case="2">Deux</p>
<p th:case="*">Autre</p>
</div>

Les expressions
Pour faire des itérations
<div th:each="perso : ${ personnes }">

<span th:text="${ perso.nom }"></span>
<span th:text="${ perso[’prenom’] }"></span>
</div>
Les expressions
Et si on voudrait récupérer et afficher l’indice
(comme avec la JSTL)
<div th:each="perso, status : ${ personnes }">

<span th:text="${ status.index }"></span>
<span th:text="${ status.count }"></span>
</div>
• index commence de 0
• count commence de 1
Les expressions
On peut aussi faire (le résultat est le même)
<div th:each="perso : ${ personnes }">
<span th:text="${ persoStat.index }"></span>
<span th:text="${ persoStat.count }"></span>
</div>
Autres attributs de status

• odd contient true s’il s’agit d’un élément d’indice impair
• even contient true s’il s’agit d’un élément d’indice pair
• first contient true s’il s’agit du premier élément
• last contient true s’il s’agit du dernier élément
Les expressions
Pour déclarer une nouvelle variable (appelée
variable)
<div th:with="variable=${ message.length() }">

<p>
Le message de bienvenue contient
<span th:text="${ variable }"> </span> lettres.
</p>
</div>

Les expressions
On peut aussi déclarer plusieurs variables et utiliser une variable déclarée dans le
même bloc
<div th:with="variable=${ message.length() },
parity=${ variable % 2 == 0 ? ’pair’ : ’impair’ }">
<p>
Le message de bienvenue contient
<span th:text="${ variable }"> </span> lettres,
soit un nombre
<span th:text="${ parity }"> </span> de lettres
.
</p>
</div>

Les expressions
Récapitulatif
• Pour modifier le contenu textuel d’une balise, on utilise
th:text
• Pour déclarer une variable, on utilise th:with
• Pour faire un test, on utilise th:if, th:unless, th:switch, th:case
• Pour itérer, on utilise th:each
• ...
Remarque
Il existe plusieurs autres attributs Thymeleaf qui permet de
cibler plusieurs autres attributs HTML
Les expressions
Autres attributs
• Pour l’attribut class, on peut utiliser th:class
• Pour les formulaires, on peut utiliser th:action,
th:method...
• Pour les input, on peut utiliser th:value, th:name... ...
Si on ignore l’existence d’un attribut Thymeleaf
ciblant un attribut HTML
On peut utiliser
th:attr="nomAttribut=${ valeurAttribut }"
Les expressions
Pour afficher le contenu d’un objet de la classe
Personne
<div>
<span th:text="${ personne.num }"></span>
<span th:text="${ personne.nom }"></span>
<span th:text="${ personne.prenom }"></span>
</div>
Les expressions
On peut aussi simplifier l’écriture en utilisant
l’expression de sélection *{ }
<div th:object="${ personne }">

<span th:text="*{ num }"></span>
<span th:text="*{ nom }"></span>
<span th:text="*{ prenom }"></span>
</div>
Les expressions
Il est aussi possible de mixer les deux *{ } et ${ }
<div th:object="${ personne }">

<span th:text="*{ #object.nom }"></span>
<span th:text="*{ prenom }"></span>
</div>
Les expressions
Si aucune sélection d’objet n’a été effectuée,
*{ } et ${ } sont exactement équivalentes.
<div>
<span th:text="${ personne.nom }"></span>
<span th:text="*{ personne.prenom }"></span>
</div>
Les expressions
Pour définir un lien avec Thymeleaf
<a th:href="@{ thymeleaf }">Thymeleaf</a>

Pour ajouter des paramètres de requête (Supposant que ${ personne.nom } =

Safi)
<a th:href="@{ hello(nom=${ personne.nom }) }">Hello</a>


Pour ajouter des variables de chemin (Supposant que ${ personne.nom } = Safi)

<a th:href="@{ hello/{nom}(nom=${ personne.nom }) }">
Hello</a>

Les expressions
Considérons la vue menu.html
<!DOCTYPE html>
<body>
<ul>
<li><a href="">Item 1</a>
</ul>
</body>
</html>
Pour inclure ce menu dans toutes nos pages HTML, il faut

• le définir comme un fragment
• l’insérer dans les vues là où on le souhaite
Les expressions
Pour définir le menu comme un fragment
<!DOCTYPE html>
<body>
<div th:fragment="fragment">
<ul>
</ul>
</div>
</body>
</html>
Pour inclure ce fragment dans les autres vues

<div th:insert="˜{ menu :: fragment }"></div>
Les expressions
Ou aussi sans utiliser les expressions de
fragment
<div th:include="menu :: fragment"></div>
Les expressions
On peut aussi charger un fragment sans l’attribut th:fragment
<!DOCTYPE html>
<body>
<div id="premierMenu">
<ul>
</ul>
</div>
</body>
</html>
Les expressions
Pour inclure ce fragment dans les autres vues :
<div th:include="˜{ menu :: #premierMenu }"></div>


<div th:insert="˜{ menu :: #premierMenu }"></div>

<div th:replace="˜{ menu :: #premierMenu }"></div>

Thymeleaf (1)

Transféré par

Droits d'auteur :

Formats disponibles

Thymeleaf (1)

Transféré par

Informations du document

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Thymeleaf (1)

Transféré par

Droits d'auteur :

Formats disponibles

Thymeleaf

C’est quoi Thymeleaf ?

Créons la vue view.html

• ${ } : pour les expressions de variable

<p th:text = "${ message }"></p>

<p th:text = "${ message }"></p>

Pour concaténer deux chaînes :

<p th:text = "${ message } + ‘from Marrakech’"></p>

<p th:text = "${ message }"></p>

Pour concaténer deux chaînes

<p th:text = "${ message } + ’ from Marrakech’"></p>

<p th:text = "| ${ message } from Marrakech|"></p>

<p th:text = "’Bonjour ’ + |${ personne.prenom } ${

<p th:text = "’Bonjour ’ + |${ personne.prenom } ${

Ceci déclenche une exception

<p th:text = "${ message } ’ from Marrakech’"></p>

<div th:if="${ message.length() >= 5 }">

<div th:if="${ message.length() >= 5 }">

Ou aussi en utilisant le format (if) ? (then)

<p th:text = "${ message.length() >= 5 } ? ${message }"> </p>

Ou aussi en utilisant le format (if) ? (then) : (else) (Elvis operator)

<p th:text = "${ msg } ?: ${ message }"> </p>

Operateurs logiques (booléens)

<div th:switch="${ message.length() }">

<div th:each="perso : ${ personnes }">

<div th:each="perso, status : ${ personnes }">

Autres attributs de status

<div th:with="variable=${ message.length() }">

<!-- Le message de bienvenue contient 12 lettres,

<div th:object="${ personne }">

<div th:object="${ personne }">

Pour ajouter des paramètres de requête (Supposant que ${ personne.nom } =

<a th:href="@{ hello(nom=${ personne.nom }) }">Hello</a>

Pour ajouter des variables de chemin (Supposant que ${ personne.nom } = Safi)

Pour inclure ce menu dans toutes nos pages HTML, il faut

Pour inclure ce fragment dans les autres vues

<div th:include="˜{ menu :: #premierMenu }"></div>

Vous aimerez peut-être aussi