Licence Creative Commons

Ce document est mis à disposition selon les termes de la Licence Creative Commons Attribution - Pas d’Utilisation Commerciale - Partage dans les Mêmes Conditions 4.0 International.

This documentation applies to version 8 of the framework!

1. Installation du plugin dans l’IDE

2. Exploration

3. Exploration des composants

  • Créer un projet Vaadin vaadin-components

  • A l’aide du sampler, ajouter des composants :

    • Label

    • TextField

    • DateField

    • Grid

    • Table

    • Button

  • A quoi correspond le premier argument du constructeur ?

  • A l’aide du navigateur, identifier les composants HTML correspondants

4. Exploration des layouts

  • En conservant le même projet, changer de layout :

    • VerticalLayout

    • HorizontalLayout

    • FormLayout

  • Qu’observez-vous ?

  • A l’aide du navigateur, identifier les composants HTML correspondants

5. Création de formulaire

  • Créer un projet Vaadin vaadin-form

  • Créer le formulaire suivant :

    Libellé Type de données

    Nom

    Chaîne de caractères

    Prénom

    Chaîne de caractères

    Date de Naissance

    Date

    Nationalité

    Liste multi-valuée

    Commune d’Origine

    Chaîne de Caractères

    S’enregistrer

    Bouton

6. Envoi du formulaire

Récupérer les valeurs des champs du formulaire côté serveur avec myComponent.getValue()

7. Gestion de l’envoi des évènements côté serveur

  • Valider les champs de deux manières différentes en modifiant l’immédiateté des champs :

    1. A la soumission du formulaire

    2. Chaque fois qu’un champ est modifié

  • Vérifier à l’aide de votre navigateur si la gestion des requêtes AJAX correspond à ce qui vous a été dit

8. Architecture

Modifier le code précédemment écrit pour avoir un code orienté objet, notamment en mettant en œuvre le Principe de Responsabilité Unique

9. Bus de données

Modifier le code précédemment écrit en introduisant un bus d’évènement (par exemple, Google Guava).

10. Gestion des erreurs

  • Reprendre le point ci-dessus en mettant en évidence les champs en erreur

  • Lancer une exception explicitement au clic d’un bouton. Que se passe-t-il ?

  • Ajouter un composant dédié chargé de traiter les erreurs de ce type en les affichant

  • Remplacer le composant par des notifications adaptées

11. Validation

  • Dupliquer le projet vaadin-form

  • Implémenter la validation précédente via la fonctionnalité de validation du framework

12. Modèle

Remplacer les différents champs découplés par un modèle que vous aurez conçu

13. Grid

Cette section permet de s’exercer à la manipulation de Grid.

Soit la classe suivante :

public class Person {

    private String firstName;
    private String lastName;
    private LocalDate birthDate;

    // Getters and setters
}

13.1. Données en dur

  • Créer une liste d’objets Person "en dur".

  • Les afficher dans un composant Grid.

  • Afficher le libellé des colonnes en français, par exemple "Nom", "Prénom" et "Date de naissance".

  • Modifier le format des cellules de date pour afficher une date comme "18 Novembre 1970".

  • Créer une colonne supplémentaire qui affiche un bouton pour supprimer l’élément.

13.2. Données en base de données

Modifier le code pour lire les données depuis une table PERSON préalablement initialisée d’une base de données.

Utiliser la source de données par défaut du serveur d’application TomEE.

13.3. JPA

Modifier le code pour utiliser l’API JPA.

Injecter l’objet EntityManager.

13.4. CDI

Modifier le code pour utiliser l’extension CDI de Vaadin.