Fork me on GitHub

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.

1. Installation du plugin dans l’IDE

Consulter la documentation :

2. Créer un projet Vaadin

Les instructions pour créer un projet Vaadin à l’aide d’un template sont disponibles ici.

Utiliser :

  • soit l’archétype Maven

  • soit en téléchargeant l’archive ZIP

Il est conseillé d’utiliser la pile technologique "Plain Java Servlet" jusqu’à la section JPA

3. Exploration des composants

  • Créer un projet Vaadin vaadin-components

  • Créer une classe qui hérite de VerticalLayout

  • A l’aide du sampler, ajouter les composants suivantes au layout :

    1. Text

    2. TextField

    3. DatePicker

    4. Grid

    5. Button

  • Les types TextField et DatePicker ont un constructeur qui prend un String en premier parameètre. A quoi correspond-il?

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

Pour afficher le layout et ses composants, annoter la class avec @Route("")

4. Exploration des layouts

  • En conservant le même projet, changer le VerticalLayout en :

    • HorizontalLayout

    • FormLayout

  • Qu’observez-vous ?

  • A l’aide du navigateur, identifier les éléments 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 :

    1. A la soumission du formulaire

    2. Chaque fois qu’un champ est modifié

  • Vérifier à l’aide des outils de développement du navigateur comment Vaadin gères les requêtes HTTP

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 sur l’interface utilisateur

  • 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.