Introduction à l'utilisation de Thymeleaf au printemps

1. Introduction

Thymeleaf est un moteur de modèle Java pour le traitement et la création de HTML, XML, JavaScript, CSS et texte.

Dans cet article, nous expliquerons comment utiliser Thymeleaf avec Spring ainsi que quelques cas d'utilisation de base dans la couche de vue d'une application Spring MVC.

La bibliothèque est extrêmement extensible et sa capacité naturelle de création de modèles garantit que les modèles peuvent être prototypés sans back-end - ce qui rend le développement très rapide par rapport à d'autres moteurs de modèles populaires tels que JSP.

2. Intégration de Thymeleaf avec Spring

Voyons tout d'abord les configurations requises pour s'intégrer à Spring. La bibliothèque thymeleaf-spring est requise pour l'intégration.

Ajoutez les dépendances suivantes à votre fichier Maven POM:

 org.thymeleaf thymeleaf 3.0.11.RELEASE   org.thymeleaf thymeleaf-spring5 3.0.11.RELEASE 

Notez que, pour un projet Spring 4, la bibliothèque thymeleaf-spring4 doit être utilisée à la place de thymeleaf-spring5 .

La classe SpringTemplateEngine effectue toutes les étapes de configuration. Vous pouvez configurer cette classe en tant que bean dans le fichier de configuration Java:

@Bean @Description("Thymeleaf Template Resolver") public ServletContextTemplateResolver templateResolver() { ServletContextTemplateResolver templateResolver = new ServletContextTemplateResolver(); templateResolver.setPrefix("/WEB-INF/views/"); templateResolver.setSuffix(".html"); templateResolver.setTemplateMode("HTML5"); return templateResolver; } @Bean @Description("Thymeleaf Template Engine") public SpringTemplateEngine templateEngine() { SpringTemplateEngine templateEngine = new SpringTemplateEngine(); templateEngine.setTemplateResolver(templateResolver()); templateEngine.setTemplateEngineMessageSource(messageSource()); return templateEngine; }

Le préfixe et le suffixe des propriétés du bean templateResolver indiquent respectivement l'emplacement des pages de vue dans le répertoire webapp et leur extension de nom de fichier.

L' interface ViewResolver de Spring MVC mappe les noms de vue renvoyés par un contrôleur aux objets de vue réels. ThymeleafViewResolver implémente l' interface ViewResolver et est utilisé pour déterminer les vues Thymeleaf à rendre, en fonction d'un nom de vue.

La dernière étape de l'intégration consiste à ajouter le ThymeleafViewResolver en tant que bean:

@Bean @Description("Thymeleaf View Resolver") public ThymeleafViewResolver viewResolver() { ThymeleafViewResolver viewResolver = new ThymeleafViewResolver(); viewResolver.setTemplateEngine(templateEngine()); viewResolver.setOrder(1); return viewResolver; }

3. Thymeleaf dans Spring Boot

Spring Boot fournit une configuration automatique pour Thymeleaf en ajoutant la dépendance spring-boot-starter-thymeleaf :

 org.springframework.boot spring-boot-starter-thymeleaf 2.3.3.RELEASE  

Aucune configuration explicite n'est nécessaire. Par défaut, les fichiers HTML doivent être placés à l' emplacement des ressources / modèles .

4. Affichage des valeurs à partir de la source du message (fichiers de propriétés)

L' attribut de balise th: text = ”# {key}” peut être utilisé pour afficher les valeurs des fichiers de propriétés. Pour que cela fonctionne, le fichier de propriétés doit être configuré en tant que bean messageSource :

@Bean @Description("Spring Message Resolver") public ResourceBundleMessageSource messageSource() { ResourceBundleMessageSource messageSource = new ResourceBundleMessageSource(); messageSource.setBasename("messages"); return messageSource; }

Voici le code HTML Thymeleaf pour afficher la valeur associée à la clé welcome.message :

5. Affichage des attributs de modèle

5.1. Attributs simples

L' attribut de balise th: text = "$ {attributename}" peut être utilisé pour afficher la valeur des attributs de modèle. Ajoutons un attribut de modèle avec le nom serverTime dans la classe du contrôleur:

model.addAttribute("serverTime", dateFormat.format(new Date()));

Le code HTML pour afficher la valeur de l' attribut serverTime :

Current time is 

5.2. Attributs de collection

Si l'attribut model est une collection d'objets, l' attribut th: each tag peut être utilisé pour itérer dessus. Définissons une classe de modèle Student avec deux champs, id et name :

public class Student implements Serializable { private Integer id; private String name; // standard getters and setters }

Nous allons maintenant ajouter une liste d'étudiants comme attribut de modèle dans la classe de contrôleur:

List students = new ArrayList(); // logic to build student data model.addAttribute("students", students);

Enfin, nous pouvons utiliser le code de modèle Thymeleaf pour parcourir la liste des étudiants et afficher toutes les valeurs de champ:

6. Évaluation conditionnelle

6.1. si et à moins que

L' attribut th: if = "$ {condition}" est utilisé pour afficher une section de la vue si la condition est remplie. L' attribut th: sauf = "$ {condition}" est utilisé pour afficher une section de la vue si la condition n'est pas remplie.

Ajoutez un champ de genre au modèle Student :

public class Student implements Serializable { private Integer id; private String name; private Character gender; // standard getters and setters }

Supposons que ce champ ait deux valeurs possibles (M ou F) pour indiquer le sexe de l'élève. Si nous souhaitons afficher les mots «Homme» ou «Femme» au lieu du caractère unique, nous pouvons le faire en utilisant le code Thymeleaf suivant:

6.2. interrupteur et boîtier

Les attributs th: switch et th: case sont utilisés pour afficher le contenu de manière conditionnelle à l'aide de la structure d'instruction switch.

Le code précédent pourrait être réécrit à l'aide des attributs th: switch et th: case :

7. Gestion des entrées utilisateur

Form input can be handled using the th:action=”@{url}” and th:object=”${object}” attributes. The th:action is used to provide the form action URL and th:object is used to specify an object to which the submitted form data will be bound. Individual fields are mapped using the th:field=”*{name}” attribute, where the name is the matching property of the object.

For the Student class, we can create an input form:


    

In the above code, /saveStudent is the form action URL and a student is the object that holds the form data submitted.

The StudentController class handles the form submission:

@Controller public class StudentController { @RequestMapping(value = "/saveStudent", method = RequestMethod.POST) public String saveStudent(@ModelAttribute Student student, BindingResult errors, Model model) { // logic to process input data } }

In the code above, the @RequestMapping annotation maps the controller method with URL provided in the form. The annotated method saveStudent() performs the required processing for the submitted form. The @ModelAttribute annotation binds the form fields to the student object.

8. Displaying Validation Errors

The #fields.hasErrors() function can be used to check if a field has any validation errors. The #fields.errors() function can be used to display errors for a particular field. The field name is the input parameter for both these functions.

HTML code to iterate and display the errors for each of the fields in the form:


    

Instead of field name the above functions accept the wild card character * or the constant all to indicate all fields. The th:each attribute is used to iterate the multiple errors that may be present for each of the fields.

The previous HTML code re-written using the wildcard *:


    

or using the constant all:


    

Similarly, global errors in Spring can be displayed using the global constant.

The HTML code to display global errors:


    

The th:errors attribute can also be used to display error messages. The previous code to display errors in the form can be re-written using th:errors attribute:


    

9. Using Conversions

The double bracket syntax {{}} is used to format data for display. This makes use of the formatters configured for that type of field in the conversionService bean of the context file.

The name field in the Student class is formatted:

The above code uses the NameFormatter class, configured by overriding the addFormatters() method from the WebMvcConfigurer interface. For this purpose, our @Configuration class overrides the WebMvcConfigurerAdapter class:

@Configuration public class WebMVCConfig extends WebMvcConfigurerAdapter { // ... @Override @Description("Custom Conversion Service") public void addFormatters(FormatterRegistry registry) { registry.addFormatter(new NameFormatter()); } }

The NameFormatter class implements the Spring Formatter interface.

L' utilitaire #conversions peut également être utilisé pour convertir des objets à afficher. La syntaxe de la fonction utilitaire est # conversions.convert (Object, Class)Object est converti en type Class .

Pour afficher le champ de pourcentage d' objet étudiant avec la partie fractionnaire supprimée:

10. Conclusion

Dans ce didacticiel, nous avons vu comment intégrer et utiliser Thymeleaf dans une application Spring MVC.

Nous avons également vu des exemples sur la façon d'afficher des champs, d'accepter des entrées, d'afficher des erreurs de validation et de convertir des données à afficher. Une version fonctionnelle du code présenté dans cet article est disponible dans un référentiel GitHub.