Relier une liste dans Thymeleaf

Reliure d'une liste dans Thymeleaf

1. Vue d'ensemble

Dans ce rapide tutoriel, nous allons montrerhow to bind a List object in Thymeleaf.

Pour apprendre à intégrer Thymeleaf à Spring, vous pouvez consulterour main Spring article here - où vous pouvez également apprendre à afficher des champs, accepter des entrées, afficher des erreurs de validation ou convertir des données pour l'affichage.

2. Listes dans l'exemple Thymeleaf

Nous allons commencer par afficherhow to display elements of a List in a Thymeleaf page and how to bind a list of objects as user’s inputs in a Thymeleaf form.

À cette fin, nous utiliserons un modèle simple illustré dans le code suivant:

public class Book {
    private long id;

    private String title;

    private String author;

    // getters and setters
}

En plus d'afficher les livres existants dans notre exemple, nous allons permettre à l'utilisateur d'ajouter plusieurs livres à la collection et également de modifier tous les livres existants à la fois.

3. Affichage des éléments de liste

Jetons un œil à la méthodeController suivante qui renvoie la pageallBooks:

@GetMapping("/all")
public String showAll(Model model) {
    model.addAttribute("books", bookService.findAll());
    return "books/allBooks";
}

Ici, nous avons ajoutéList des objetsBook comme attribut de modèle envoyé à la vue, où nous allons l'afficher à l'aide d'un tableau HTML:


    
        
             Title 
             Author 
        
    
    
    
             No Books Available 
        
        
             Title 
             Author

Title	Author
No Books Available
Title	Author

Ici,we’re using the th:each property to iterate through the list et affiche les propriétés de chaque objet qu'il contient.

4. Lier une liste à l'aide d'une expression de sélection

Pour envoyer la liste des objets de la vue au contrôleur via la soumission de formulaire, nous ne pouvons pas utiliser l'objetList lui-même.

Au lieu de cela,we have to add a wrapper object that will hold the submitted list:

public class BooksCreationDto {
    private List books;

    // default and parameterized constructor

    public void addBook(Book book) {
        this.books.add(book);
    }

    // getter and setter
}

Permettons maintenant à l'utilisateur d'ajouter trois livres en un seul formulaire.

Tout d'abord, nous allons préparer la page de formulaire, en passant notre objet de commande en tant qu'attributModel:

@GetMapping("/create")
public String showCreateForm(Model model) {
    BooksCreationDto booksForm = new BooksCreationDto();

    for (int i = 1; i <= 3; i++) {
        booksForm.addBook(new Book());
    }

    model.addAttribute("form", booksForm);
    return "books/createBooksForm";
}

Comme nous pouvons le voir, nous avons passé une liste de 3 objetsBook vides à la vue via la classe wrapper.

Ensuite, nous devons ajouter le formulaire à une page Thymeleaf:

Et voici à quoi ressemblera la page ci-dessus:

Examinons de plus près ce que nous avons fait ici. Tout d'abord,we used the th:object=”${form}” to specify the command object (celui que nous avons passé comme attributModel).

La chose suivante à noter est que nous avons accédé à la liste avec une expression de sélection en utilisant:

Et enfin,we’re mapping our inputs as properties of the list elements using th:field.

Cependant, nous devons également utiliser la variableitemStat pour définir à quel élément de liste nous faisons référence, comme illustré dans:

th:field="*{books[__${itemStat.index}__].title}"

La dernière étape consiste en fait à manipuler les données soumises sur le back-end. Nous allons utiliser l'objet de commande comme@ModelAttribute dans notre méthode@PostMapping dans le contrôleur, enregistrer la liste des livres récupérés et renvoyer tous les livres existants à l'utilisateur:

@PostMapping("/save")
public String saveBooks(@ModelAttribute BooksCreationDto form, Model model) {
    bookService.saveAll(form.getBooks());

    model.addAttribute("books", bookService.findAll());
    return "redirect:/books/all";
}

Après avoir soumis le formulaire au point de terminaison/save, nous obtiendrons la page avec tous les livres nouvellement ajoutés:

5. Lier une liste à l'aide d'une expression variable

Pour cet exemple, nous allons d'abord charger tous les livres existants dans l'objet de commande:

@GetMapping("/edit")
public String showEditForm(Model model) {
    List books = new ArrayList<>();
    bookService.findAll().iterator().forEachRemaining(books::add);

    model.addAttribute("form", new BooksCreationDto(books));
    return "books/editBooksForm";
}

La page HTML est similaire, avec les différences les plus notables dans le blocth:each:

Comme indiqué dans<tr th:each=”book, itemStat : $\{form.books}”>, nous avons accédé à la liste d'une manière légèrement différente, en utilisant cette fois l'expression variable. Lesnotice that we provided name and value for input elements to properly submit data sont particulièrement pertinents.

Nous avons également dû ajouter une entrée masquée qui liera l'ID du livre actuel, car nous ne voulons pas créer de nouveaux livres, mais modifier les livres existants.

6. Conclusion

Dans cet article, nous avons illustré comment utiliser l'objetList dans Thymeleaf et Spring MVC. Nous avons montré comment afficher la liste des objets envoyés à la vue, mais nous nous sommes principalement concentrés sur deux façons de lier les entrées utilisateur sous forme de liste sous forme de feuille de thymel.

Tous les extraits de code mentionnés dans l'article se trouvent dansour GitHub repository.

TOC