TOC

Travailler avec des fragments de thymeleaf

Travailler avec des fragments de thymeleaf

1. Vue d'ensemble

Dans ce didacticiel, nous allons montrer commentmake use of Thymeleaf Fragments to reuse some common parts of a site. Après avoir configuré un projet Spring MVC très simple, nous nous concentrerons sur les vues.

Si vous êtes nouveau sur Thymeleaf, vous pouvez consulter d'autres articles sur ce site commethis introduction, ainsi quethis one about the 3.0 version du moteur.

2. Dépendances Maven

Nous aurons besoin de quelques dépendances pour activer Thymeleaf: 


    org.thymeleaf
    thymeleaf
    3.0.9.RELEASE


    org.thymeleaf
    thymeleaf-spring5
    3.0.9.RELEASE

La dernière version dethymeleaf etthymeleaf-spring5 est disponible sur Maven Central.

3. Projet de printemps

3.1. Configuration Spring MVC

Pour activer Thymeleaf et définir le suffixe du modèle, nous avons besoin deconfigure MVC with a view resolver and template resolver.

Nous allons également définir le répertoire de certaines ressources statiques: 

@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;
}

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

@Override
public void addResourceHandlers(ResourceHandlerRegistry registry) {
    registry.addResourceHandler("/resources/**", "/css/**")
      .addResourceLocations("/WEB-INF/resources/", "/WEB-INF/css/");
}

Notez que si nous utilisons Spring Boot, cette configuration peut ne pas être nécessaire, sauf si nous devons appliquer nos propres personnalisations.

3.2. Le controlle

Dans ce cas, le contrôleur n'est qu'un véhicule pour les vues. Chaque vue présente un scénario d'utilisation de fragment différent.

Le dernier charge certaines données transmises par le modèle à afficher dans la vue: 

@Controller
public class FragmentsController {

    @GetMapping("/fragments")
    public String getHome() {
        return "fragments.html";
    }

    @GetMapping("/markup")
    public String markupPage() {
        return "markup.html";
    }

    @GetMapping("/params")
    public String paramsPage() {
        return "params.html";
    }

    @GetMapping("/other")
    public String otherPage(Model model) {
        model.addAttribute("data", StudentUtils.buildStudents());
        return "other.html";
    }
}

Note that the view names must contain the “.html” suffix because of the way we configured our resolver. Nous allons également spécifier le suffixe lorsque nous nous référons aux noms de fragments.

4. Les vues

4.1. Inclusion de fragments simples

Tout d’abord, nous utiliserons la réutilisation des parties communes dans nos pages.

Nous pouvons définir ces parties sous forme de fragments, soit dans des fichiers isolés, soit dans une page commune. Dans ce projet, ces pièces réutilisables sont définies dans un dossier nomméfragments.

Il existe trois méthodes de base pour inclure du contenu à partir d'un fragment:

  • insert – insère du contenu dans la balise

  • replace – remplace la balise courante par la balise définissant le fragment

  • include – ceci est obsolète mais il peut toujours apparaître dans un ancien code

L'exemple suivant,fragments.html, montre l'utilisation des trois méthodes. Ce modèle Thymeleaf ajoute des fragments dans la tête et le corps du document: 




Thymeleaf Fragments: home



    
 

    
Go to the next page to see fragments in action

Now, let’s take a look at a page that holds some fragments. Cela s'appellegeneral.html, et c'est comme une page entière avec certaines parties définies comme des fragments prêts à être utilisés: 








    

        
Thymeleaf Fragments sample

    

    
Go to the next page to see fragments in action

    
    
This is another sidebar

La section<head> contient juste une feuille de style, mais nous pourrions appliquer d'autres outils tels que Bootstrap, jQuery ou Foundation, soit directement, soit à l'aide de Webjars.

Notez que toutes les balises réutilisables de ce modèle ont l'attributth:fragment, mais nous verrons ensuite comment inclure toute autre partie de la page.

Après le rendu et l'inclusion des fragments, le contenu renvoyé est le suivant: 




Thymeleaf Fragments: home




    

        

            
Thymeleaf Fragments sample

        

    

    
Go to the next page to see fragments in action

4.2. Sélecteurs de balisage pour les fragments

L'un des grands avantages des fragments Thymeleaf est quewe can also grab any part of a template just using the simple selectors, via des classes, des identifiants ou simplement des balises.

Cette page, par exemple, comprend certains composants du fichiergeneral.html: un blocaside et le blocdiv.another:

4.3. Fragments paramétrés

Nous pouvons passer des paramètres à un sfragment afin d'en changer une partie spécifique. Pour ce faire, le fragment doit être défini comme un appel de fonction, où nous devons déclarer une liste de paramètres.

Dans cet exemple, nous définissons un fragment pour un champ de formulaire générique:

Et voici une utilisation simple de ce fragment où nous lui passons des paramètres:

Et voici à quoi ressemblera le champ retourné:

4.4. Expressions d'inclusion de fragments

Les fragments Thymeleaf offrent d'autres options intéressantes telles que la prise en charge deconditional expressions to determine whether to include a fragment.

En utilisant l'opérateurElvis avec l'une des expressions fournies par Thymeleaf (sécurité, chaînes et collections par exemple), nous sommes en mesure de charger différents fragments.

Par exemple, nous pouvons définir ce fragment avec du contenu que nous afficherons en fonction d’une condition donnée. Cela pourrait être un fichier contenant différents types de blocs: 

Data received


No data

Et voici comment nous pourrions les charger avec une expression:

Pour en savoir plus sur les expressions Thymeleaf, consultez notre articlehere.

4.5. Dispositions flexibles

L'exemple suivant montre également deux autres utilisations intéressantes de fragments àrender a table with data. Il s'agit du fragment de table réutilisable, avec deux parties importantes: un en-tête de table pouvant être modifié et le corps où les données sont rendues: 


    
        

        

    
    
        

            0
            Name

Lorsque nous voulons utiliser cette table, nous pouvons passer notre propre en-tête de table en utilisant la fonctionfields. L'en-tête est référencé avec la classemyFields. Le corps de la table est chargé en passant des données en tant que paramètre à la fonctiontableBody: 


    
 

    

        

        
            


                Id
                Name

Et voici à quoi ressemblera la dernière page: 


    

        
Thymeleaf Fragments sample

    

    
Data received

    

        
            


                Id
                Name
            

        
        
            

                1001
                John Smith
            

            

                1002
                Jane Williams

5. Conclusion

Dans cet article, nous avons montré comment réutiliser des composants de vue à l'aide de Thymeleaf Fragments, un outil puissant qui peut faciliter la gestion des modèles.

Nous avons également présenté d'autres fonctionnalités intéressantes qui vont au-delà des bases. Nous devrions en tenir compte lorsque nous choisissons Thymeleaf comme moteur de rendu de vue.

Si vous souhaitez en savoir plus sur les autres fonctionnalités de Thymeleaf, vous devez absolument consulter notre article surLayout Dialects.

Comme toujours, le code d'implémentation complet de l'exemple est disponibleover on GitHub.

Related