TOC

Spring MVC Thymeleaf 3.0: Nouvelles fonctionnalités

1. Introduction

Thymeleaf est un moteur de template Java permettant de traiter et de créer du HTML, XML, JavaScript, CSS et du texte brut. Pour une introduction à Thymeleaf et Spring, consultez le lien:/thymeleaf-in-spring-mvc[cet article].

Dans cet article, nous aborderons les nouvelles fonctionnalités de Thymeleaf 3.0 dans Spring MVC avec l’application Thymeleaf. La version 3 comporte de nouvelles fonctionnalités et de nombreuses améliorations sous le capot. Pour être plus précis, nous aborderons les thèmes du traitement naturel et de l’inligne Javascript.

Thymeleaf 3.0 inclut trois nouveaux modes de modèles textuels: TEXT , JAVASCRIPT et CSS - destinés à être utilisés pour le traitement de modèles standard, JavaScript et CSS, respectivement.

2. Dépendances Maven

Voyons d’abord les configurations requises pour intégrer Thymeleaf avec Spring; La bibliothèque thymeleaf-spring est requise dans nos dépendances: 

<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>
<dependency>
    <groupId>org.thymeleaf</groupId>
    <artifactId>thymeleaf-spring4</artifactId>
    <version>3.0.9.RELEASE</version>
</dependency>

Notez que, pour un projet Spring 4, la bibliothèque thymeleaf-spring4 doit être utilisée à la place de thymeleaf-spring5 . La dernière version des dépendances est disponible à l’adresse ici .

3. Configuration Java Thymeleaf

Premièrement, nous devons configurer le nouveau moteur de modèle, les résolveurs de vues et de modèles. Pour ce faire, nous devons mettre à jour la classe de configuration Java, créée

Pour ce faire, nous devons mettre à jour la classe de configuration Java, lien créé:/thymeleaf-in-spring-mvc[ici]. En plus de nouveaux types de résolveurs, nos modèles implémentent l’interface Spring ApplicationContextAware : 

@Configuration
@EnableWebMvc
@ComponentScan({ "com.baeldung.thymeleaf" })
public class WebMVCConfig implements WebMvcConfigurer, ApplicationContextAware {

    private ApplicationContext applicationContext;

   //Java setter

    @Bean
    public ViewResolver htmlViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(htmlTemplateResolver()));
        resolver.setContentType("text/html");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("** .html"));
        return resolver;
    }

    @Bean
    public ViewResolver javascriptViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(javascriptTemplateResolver()));
        resolver.setContentType("application/javascript");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("** .js"));
        return resolver;
    }

    @Bean
    public ViewResolver plainViewResolver() {
        ThymeleafViewResolver resolver = new ThymeleafViewResolver();
        resolver.setTemplateEngine(templateEngine(plainTemplateResolver()));
        resolver.setContentType("text/plain");
        resolver.setCharacterEncoding("UTF-8");
        resolver.setViewNames(ArrayUtil.array("** .txt"));
        return resolver;
    }
}

Comme nous pouvons le constater ci-dessus, nous avons créé trois résolveurs de vues différents: un pour les vues HTML, un pour les fichiers Javascript et un pour les fichiers en texte brut.

Thymeleaf les différenciera en vérifiant les extensions de nom de fichier - .html , .js et .txt , respectivement.

Nous avons également créé la classe statique ArrayUtil afin d’utiliser la méthode array () qui crée le tableau String[] ​​requis avec les noms de vue.

Dans la partie suivante de cette classe, nous devons configurer le moteur de template: 

private <span class="pl-smi x x-first x-last">ISpringTemplateEngine</span> templateEngine(ITemplateResolver templateResolver) {
    SpringTemplateEngine engine = new SpringTemplateEngine();
    engine.setTemplateResolver(templateResolver);
    return engine;
}

Enfin, nous devons créer trois résolveurs de modèles distincts: 

private ITemplateResolver htmlTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/views/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.HTML);
    return resolver;
}

private ITemplateResolver javascriptTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/js/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.JAVASCRIPT);
    return resolver;
}

private ITemplateResolver plainTemplateResolver() {
    SpringResourceTemplateResolver resolver = new SpringResourceTemplateResolver();
    resolver.setApplicationContext(applicationContext);
    resolver.setPrefix("/WEB-INF/txt/");
    resolver.setCacheable(false);
    resolver.setTemplateMode(TemplateMode.TEXT);
    return resolver;
}

Notez que pour tester, il est préférable d’utiliser des modèles non mis en cache, c’est pourquoi il est recommandé d’utiliser la méthode setCacheable (false)

Les modèles Javascript seront stockés dans le dossier /WEB-INF/js/ , les fichiers de texte brut dans le dossier /WEB-INF/txt/ et, enfin, le chemin d’accès aux fichiers HTML est /WEB-INF/html .

4. Configuration du contrôleur à ressort

Afin de tester notre nouvelle configuration, nous avons créé le contrôleur Spring suivant: 

@Controller
public class InliningController {

    @RequestMapping(value = "/html", method = RequestMethod.GET)
    public String getExampleHTML(Model model) {
        model.addAttribute("title", "Baeldung");
        model.addAttribute("description", "<strong>Thymeleaf</strong> tutorial");
        return "inliningExample.html";
    }

    @RequestMapping(value = "/js", method = RequestMethod.GET)
    public String getExampleJS(Model model) {
        model.addAttribute("students", StudentUtils.buildStudents());
        return "studentCheck.js";
    }

    @RequestMapping(value = "/plain", method = RequestMethod.GET)
    public String getExamplePlain(Model model) {
        model.addAttribute("username", SecurityContextHolder.getContext()
          .getAuthentication().getName());
        model.addAttribute("students", StudentUtils.buildStudents());
        return "studentsList.txt";
    }
}

Dans l’exemple de fichier HTML, nous montrerons comment utiliser la nouvelle fonctionnalité en ligne, avec et sans balises HTML d’échappement.

Pour l’exemple JS, nous allons générer une requête AJAX, qui chargera le fichier js avec les informations sur les étudiants. Veuillez noter que nous utilisons la méthode simple buildStudents () à l’intérieur de la classe StudentUtils , à partir de ce lien:/thymeleaf-in-spring-mvc[article].

Enfin, dans l’exemple en texte en clair, nous afficherons les informations sur les étudiants sous forme de fichier texte. Un exemple typique d’utilisation du mode modèle de texte brut pourrait être utilisé pour envoyer un courrier électronique en texte brut.

De plus, nous utiliserons SecurityContextHolder pour obtenir le nom d’utilisateur enregistré.

5. Exemples de fichiers HTML/JS/TEXT

La dernière partie de ce didacticiel consiste à créer trois types de fichiers différents et à tester l’utilisation des nouvelles fonctionnalités de Thymeleaf. Commençons par le fichier HTML: 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Inlining example</title>
</head>
<body>
    <p>Title of tutorial:[[${title}]]</p>
    <p>Description:[(${description})]</p>
</body>
</html>

Dans ce fichier, nous utilisons deux approches différentes. Afin d’afficher le titre, nous utilisons une syntaxe à l’échappement, qui supprimera toutes les balises HTML, l’affichage ne contenant que du texte. Dans le cas de la description, nous utilisons une syntaxe non échappée, pour conserver les balises HTML. Le résultat final ressemblera à ceci: 

<p>Title of tutorial: Baeldung</p>
<p>Description: <strong>Thymeleaf</strong> tutorial</p>

qui sera bien sûr analysé par notre navigateur en affichant le mot Thymeleaf avec un style gras

Ensuite, nous testons les fonctionnalités du modèle js: 

var count =[[${students.size()}]];
alert("Number of students in group: " + count);

Les attributs en mode modèle JAVASCRIPT n’auront pas de contenu JavaScript.

Il en résultera la création d’une alerte js. Nous chargeons cette alerte, en utilisant jQuery AJAX, dans le fichier listStudents.html: 

<script>
    $(document).ready(function() {
        $.ajax({
            url : "/spring-thymeleaf/js",
            });
        });
</script>

La dernière fonction, mais non la moindre, que nous voulons tester est la génération de fichier en texte brut. Nous avons créé le fichier studentsList.txt avec le contenu suivant: 

Dear[(${username})],

This is the list of our students:[# th:each="s : ${students}"]   -[(${s.name})]. ID:[(${s.id})][/]Thanks,
The Baeldung University

Notez que, comme pour les modes de modèle de balisage, les dialectes standard incluent un seul élément traitable ( [# …​]) et un ensemble d’attributs traitables ( th: texte, th: utext, th: if, th: à moins que , th: each , etc.). Le résultat sera un fichier texte, que nous pourrions utiliser par exemple dans le courrier électronique, comme indiqué à la fin de la section 3.

  • Comment tester? ** Notre suggestion est de commencer par utiliser le navigateur, puis de vérifier également le test JUnit existant.

6. Conclusion

Dans cet article, nous avons présenté les nouvelles fonctionnalités implémentées dans la structure Thymeleaf, en mettant l’accent sur la version 3.0.

L’implémentation complète de ce didacticiel est disponible à l’adresse le projet GitHub - c’est un projet basé sur Eclipse, facile à tester dans tous les environnements modernes. Navigateur Internet.

Enfin, si vous envisagez de migrer un projet de la version 2 vers cette dernière version, consultez ici au guide de migration . Et notez que vos modèles Thymeleaf existants sont presque 100% compatibles avec Thymeleaf 3.0, vous ne devrez donc apporter que quelques modifications à votre configuration.

Related