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 aborderonshow to use Thymeleaf with Spring avec 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 gabarit permet aux prototypes de prototyper sans back-end - ce qui rend le développement très rapide par rapport aux autres moteurs de gabarit populaires tels que JSP.
2. Intégration de Thymeleaf avec Spring
Voyons tout d’abord les configurations requises pour intégrer Spring. La bibliothèquethymeleaf-spring est requise pour l'intégration.
Ajoutez les dépendances suivantes à votre fichier Maven POM:
org.thymeleaf
thymeleaf
3.0.9.RELEASE
org.thymeleaf
thymeleaf-spring4
3.0.9.RELEASE
Notez que, pour un projet Spring 4, la bibliothèquethymeleaf-spring4 doit être utilisée à la place dethymeleaf-spring5.
La classeSpringTemplateEngine 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;
}Les propriétés du beantemplateResolverprefix etsuffix indiquent respectivement l'emplacement des pages d'affichage dans le répertoirewebapp et leur extension de nom de fichier.
L'interfaceViewResolver de Spring MVC mappe les noms de vue renvoyés par un contrôleur aux objets de vue réels. ThymeleafViewResolver implémente l'interfaceViewResolver et est utilisé pour déterminer les vues Thymeleaf à restituer, en fonction d'un nom de vue.
La dernière étape de l'intégration consiste à ajouter lesThymeleafViewResolver 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. Affichage des valeurs à partir de la source du message (fichiers de propriétés)
L'attribut de baliseth: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 beanmessageSource:
@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:
4. Affichage des attributs de modèle
4.1. Attributs simples
L'attribut de baliseth:text=”${attributename}” peut être utilisé pour afficher la valeur des attributs de modèle. Ajoutons un attribut de modèle avec le nomserverTime dans la classe de contrôleur:
model.addAttribute("serverTime", dateFormat.format(new Date()));Le code HTML pour afficher la valeur de l'attributserverTime:
Current time is 4.2. Attributs de collection
Si l'attribut model est une collection d'objets, l'attribut de baliseth:each peut être utilisé pour l'itérer. Définissons une classe de modèleStudent avec deux champs,id etname:
public class Student implements Serializable {
private Integer id;
private String name;
// standard getters and setters
}Nous allons maintenant ajouter une liste d’étudiants en tant qu’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:
5. Évaluation conditionnelle
5.1. if etunless
L'attributth:if=”${condition}” est utilisé pour afficher une section de la vue si la condition est remplie. L'attributth:unless=”${condition}” est utilisé pour afficher une section de la vue si la condition n'est pas remplie.
Ajoutez un champgender au modèleStudent:
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» à la place du caractère unique, nous pourrions le faire en utilisant le code suivant de Thymeleaf:
5.2. switch etcase
Les attributsth:switch etth: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 pouvait être réécrit à l'aide des attributsth:switch etth:case:
6. Gestion des entrées utilisateur
L'entrée de formulaire peut être gérée à l'aide des attributsth:action=”@{url}” etth:object=”${object}”. Leth:action est utilisé pour fournir l'URL d'action de formulaire etth:object est utilisé pour spécifier un objet auquel les données de formulaire soumises seront liées. Les champs individuels sont mappés à l'aide de l'attributth:field=”*{name}”, oùname est la propriété correspondante de l'objet.
Pour la classeStudent, nous pouvons créer un formulaire d'entrée:
Dans le code ci-dessus,/saveStudent est l'URL d'action de formulaire et unstudent est l'objet qui contient les données de formulaire soumises.
La classeStudentController gère la soumission du formulaire:
@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
}
}Dans le code ci-dessus, l'annotation@RequestMapping mappe la méthode du contrôleur avec l'URL fournie dans le formulaire. La méthode annotéesaveStudent() effectue le traitement requis pour le formulaire soumis. L'annotation@ModelAttribute lie les champs du formulaire à l'objetstudent.
7. Affichage des erreurs de validation
La fonction#fields.hasErrors() peut être utilisée pour vérifier si un champ contient des erreurs de validation. La fonction#fields.errors() peut être utilisée pour afficher des erreurs pour un champ particulier. Le nom du champ est le paramètre d'entrée pour ces deux fonctions.
Code HTML pour itérer et afficher les erreurs pour chacun des champs du formulaire:
Au lieu du nom de champ, les fonctions ci-dessus acceptent le caractère générique* ou la constanteall pour indiquer tous les champs. L'attributth:each est utilisé pour itérer les multiples erreurs qui peuvent être présentes pour chacun des champs.
Le code HTML précédent réécrit à l'aide du caractère générique*:
ou en utilisant la constanteall:
De même, les erreurs globales dans Spring peuvent être affichées en utilisant la constanteglobal.
Le code HTML pour afficher les erreurs globales:
L'attributth:errors peut également être utilisé pour afficher des messages d'erreur. Le code précédent pour afficher les erreurs dans le formulaire peut être réécrit à l'aide de l'attributth:errors:
8. Utiliser les conversions
La syntaxe des doubles crochets\{\{}} est utilisée pour formater les données à afficher. Cela utilise lesformatters configurés pour ce type de champ dans le beanconversionService du fichier de contexte.
Le champ de nom de la classeStudent est formaté:
Le code ci-dessus utilise la classeNameFormatter, configurée en remplaçant la méthodeaddFormatters() de l'interfaceWebMvcConfigurer. Pour cela, notre classe@Configuration remplace la classeWebMvcConfigurerAdapter:
@Configuration
public class WebMVCConfig extends WebMvcConfigurerAdapter {
// ...
@Override
@Description("Custom Conversion Service")
public void addFormatters(FormatterRegistry registry) {
registry.addFormatter(new NameFormatter());
}
}La classeNameFormatter implémente l'interface SpringFormatter.
L'utilitaire#conversions peut également être utilisé pour convertir des objets à afficher. La syntaxe de la fonction utilitaire est#conversions.convert(Object, Class) oùObject est converti en typeClass.
Pour afficher le champstudent objetpercentage avec la partie fractionnaire supprimée:
9. Conclusion
Dans ce didacticiel, nous avons vu comment intégrer et utiliser Thymeleaf dans une application Spring MVC.
Nous avons également vu des exemples montrant comment afficher des champs, accepter des entrées, afficher des erreurs de validation et convertir des données pour affichage. Une version fonctionnelle du code présenté dans cet article est disponible ena GitHub repository.