[JAVA] Passer de JSP + JSTL à Thymeleaf

C'est le 7ème jour du Calendrier de l'Avent Asoview 2019.

Je suis Azuma, le rat brun de l'équipe de développement backend. Cette fois, je présenterai la table de correspondance lors du remplacement de la fonction JSP + JSTL utilisée depuis longtemps dans les applications Web Java par Thymeleaf.

Transfert de JSP + JSTL vers Thymeleaf

JSP était la méthode de facto pour créer des applications Web Java, mais maintenant que Spring Boot a adopté Thymeleaf, il y a des cas où la présentation est remplacée de JSP à Thymeleaf lorsque l'application existante est remplacée [^ 2].

Cette fois, je vais vous présenter comment remplacer la fonction utilisée dans JSTL de la bibliothèque de balises JSP + utilisée dans l'ancienne application Web Java par Thymeleaf, ainsi que la table de correspondance des fonctions.

[^ 2]: À l'origine, HTML était sorti sous forme de chaîne de caractères par un servlet, mais JSP permet d'écrire du code Java en considérant HTML comme un modèle. Cependant, la vitesse de fonctionnement de JSP n'est pas bonne, la lisibilité se détériore car la balise est superposée dans la balise et le code JSP est ajouté au HTML d'origine, donc si la conception ou la mise en page de l'écran est modifiée, le HTML et le JSP La maintenabilité n'était pas bonne, comme la correction de la différence.

Ce qui est ciblé cette fois

En plus des balises JSTL, nous présenterons également des éléments liés à l'utilisation des expressions JSP et EL.

N'est pas applicable

[^ 1]: Il existe une méthode pour faire référence à la source de données et à la sortie du bean de gestion Spring, en particulier la classe avec @ Service et @ Repository, en utilisant le plug-in Thymeleaf-Spring. Cependant, une gestion des transactions et une allocation de ressources appropriées doivent être effectuées, et le contenu mis en cache doit être renvoyé si nécessaire.

Core (espace de nom: c)

La balise principale est une balise fréquemment utilisée comme la sortie de valeur et le branchement conditionnel.

Maintenant, je vais présenter chaque fonction et exemple d'utilisation tout en les comparant.

th: text: sortie vers le texte de la balise (= valeur de l'élément)

Sortie vers la valeur de l'élément

<div>message</div>

Pour afficher cela, comparons le cas du passage par nom: message et valeur: message.

Thymeleaf renvoie les caractères de texte écrits dans la valeur d'élément du div comme contenu de th: text. Dans JSP, il est affiché même s'il n'est pas sorti via <c: out>, mais il passe toujours par <c: out> de JSTL pour nettoyer la valeur de sortie.

Sortie vers la valeur d'attribut

<input type="text" value="message" />

Pour afficher cela, la façon d'écrire lors du passage par nom: message, valeur: message,

La valeur est réécrite comme ** Spécifiez le même nom d'attribut que l'attribut que vous souhaitez générer **, qui est également une fonctionnalité de Thymeleaf. En revanche, dans JSP / JSTL, c'est un peu difficile à lire car c'est une description qui renvoie la valeur à l'intérieur de la valeur d'attribut de la balise et l'enferme davantage dans la balise.

Concaténation de chaînes

La concaténation de chaînes est également possible dans les attributs de Thymeleaf. Lorsque vous écrivez directement la chaîne de caractères, placez-la entre guillemets simples.

<div th:text="'c'est,' + ${message} + 'est'">texte</div>

Le résultat en sortie est

<div>Ceci est un message</div>

th: with: Stocker la valeur dans une variable temporaire

Vous pouvez utiliser la valeur de sortie à plusieurs reprises lors de la sortie HTML, ou vous pouvez réaffecter la valeur pour modifier le contenu de sortie.

Les variables temporaires définies dans les modèles Thymeleaf peuvent être référencées par l'élément qui définit la variable temporaire ainsi que ses éléments enfants. À Thymeleaf Nom: message, Valeur: Lorsqu'il est passé en tant que message

<div th:with="anotherMessage='c'est,' + ${message} + 'est'" th:text="${anotherMessage}">texte</div>

Le résultat en sortie est

<div>Ceci est un message</div>

Définir plusieurs variables temporaires

Si vous souhaitez définir plusieurs variables temporaires, connectez-les avec des virgules. Bien entendu, le traitement et le calcul des chaînes de caractères sont possibles même si plusieurs définitions sont décrites.

<div th:with="i=3, anotherMessage=${message} + 'est'">
	<span th:text="${anotherMessage}">texte</span>
	<span th:text="${i}">texte</span>
</div>

Le résultat en sortie est

<div>
	<span>Est un message</span>
	<span>3</span>
</div>

Définissez le même nom de variable

Que faire si je les stocke sous le même nom de variable?

<div th:with="message=${message} + 'est'">
	<span th:text="${message}">Texte 1</span>
</div>
<div th:text="${message}">Texte 2</div>

Dans ce cas, l'attribution de message ** est effectuée uniquement dans l'élément ** th: with.

<div>
	<span>Est un message</span>
</div>
<div>message</div>

La valeur temporairement définie dans th: with de Thymeleaf est ** valide uniquement pour cet élément et ses éléments enfants **. D'autre part, JSP + JSTL conserve le contenu stocké et le même contenu jusqu'à la sortie du texte 2. C'est une grande différence. Par conséquent, dans JSP, la valeur est supprimée avec <c: remove> et le traitement suivant se poursuit.

Lorsque vous traitez des variables temporaires dans Thymeleaf, utilisez-les en combinaison avec des attributs ultérieurs tels que le branchement conditionnel et le traitement en boucle tels que th: if et th: each.

Sortie de l'élément enfant et traitement de l'attribut thymeleaf suivant lorsque la condition th: if est remplie

Sortez le contenu de l'élément enfant ou exécutez la balise de l'élément enfant uniquement lorsque certaines conditions sont remplies. C'est la même chose pour JSP / JSTL et Thymeleaf, mais Thymeleaf génère les éléments qui définissent th: if. De plus, l'attribut thymeleaf (th: 〇〇) dans le même élément est exécuté.

Vous pouvez utiliser presque la même méthode et la même méthode pour écrire des expressions conditionnelles dans les valeurs d'attribut.

Système de base d'expression conditionnelle

À Thymeleaf Nom: message, Valeur: Lorsqu'il est passé en tant que message

<div th:if="${message == 'message'}">
	<span th:text="${message}">texte</span>
</div>

Ce résultat de sortie est

<div>
	<span>message</span>
</div>

Utiliser le code Java pour les expressions conditionnelles

Différents codes Java peuvent être écrits dans l'expression conditionnelle de th: if. Le plus utilisé est d'appeler une méthode de classe Java, et il est également possible de l'incorporer dans une expression conditionnelle ou de générer une valeur d'affichage uniquement.

<div th:if="${message.startsWith('Messe')}">
	<span th:text="${message}">texte</span>
</div>

Puisque le message variable était un message avec String, startsWith () est true, donc ce résultat de sortie est

<div>
	<span>message</span>
</div>

Ce sera.

Pour la sortie lorsque la condition n'est pas remplie, par exemple, ce qui suit détermine si la longueur de la chaîne de caractères du message variable est de 256 ou plus.

<div th:if="${message.length() >= 256}">
	<span th:text="${message}">texte</span>
</div>

Si la condition de cette instruction if n'est pas satisfaite, l'élément et les éléments enfants ne seront pas affichés dans leur intégralité. En d'autres termes, cet élément

<div th:switch="${message}">
	<span th:case="message" th:text="${message}"></span>
	<span th:case="*">Il n'y avait pas de message correspondant</span>
</div>

<div>
	<span>message</span>
	
</div>

<div>
	
	<span>Il n'y avait pas de message correspondant</span>
</div>

<div th:switch="${price}">
	<span th:case="100" th:text="${price}">prix</span>
	<span th:case="200" th:text="${price}">prix</span>
	<span th:case="300" th:text="${price}">prix</span>
	<span th:case="*" th:text="Il n'y a pas de prix applicable"></span>
</div>

<div>

	<span>200</spam>


</div>

<div>



	<span>Il n'y a pas de prix applicable</spam>
</div>

public enum Direction {
	North, South, East , West ;

	public String getValue() {
		return name();
	}
}

<div th:switch="${direction.getValue()}">
	<span th:case="North" th:text="Nord"></span>
	<span th:case="East" th:text="est"></span>
	<span th:case="South" th:text="Sud"></span>
	<span th:case="West" th:text="Ouest"></span>
	<span th:case="*" th:text="N'est pas applicable"></span>
</div>

<select>
  <c:forEach var="result" items="${list}">
    <option value="<c:out value="${result.value}" />"><c:out value="${result.label}" /></option>
  </c:forEach>
</select>

<select>
  <option th:each="result : ${list}" th:value="${result.value}" th:inline="text">[[${result.label}]]</option>
</select>