TP Java.

Fx (version francaise)

TPs :
Le but de ce TP est d’offrir une introduction à la programmation graphique en java.
Les notions abordées sont :
- L’utilisation des composants graphiques : Label, Bouton, ListView, TableView,
GridPane, …
- L’utilisation des ObservableList,
- Le Biding,
- Les rôles,
-…
TP 1 : Comprendre/Copier/Coller//Exécuter

Problème : Vous souhaitez créer une application GUI contenant deux contrôles
d'affichage de liste permettant à l'utilisateur de passer des éléments entre les deux listes.

Solution

Profitez des javafx.collections.ObservableList et javafx.scene.control.ListView de JavaFX

Classes pour fournir un mécanisme de modèle-vue-contrôleur (MVC) qui met à jour le
contrôle de vue de liste de l'interface utilisateur chaque fois que le retour la liste de fin est
manipulée. Le code suivant crée une application GUI contenant deux listes qui permettent
à l'utilisateur d'envoyer éléments contenus dans une liste à envoyer à l'autre. Ici, vous
allez créer une application artificielle pour choisir le candidats à être considérés comme
des héros. L'utilisateur choisira les candidats potentiels dans la liste de gauche à déplacé
dans la liste sur la droite pour être considéré comme des héros. Cela montre les contrôles
de liste d'interface utilisateur (ListView) possibilité d'être synchronisé avec les listes de
magasins back-end (ObservableList).
On donne le code ci-
dessous permettant de
mettre en œuvre une IHM
semblable à celle
de la figure ci-contre :

primaryStage.setTitle("Creating and Working with ObservableLists");

Group root = new Group();
Scene scene = new Scene(root, 400, 250, Color.WHITE);
// create a grid pane
GridPane gridpane = new GridPane();
gridpane.setPadding(new Insets(5));
gridpane.setHgap(10);
gridpane.setVgap(10);
// candidates label
Label candidatesLbl = new Label("Candidates");
GridPane.setHalignment(candidatesLbl, HPos.CENTER);
gridpane.add(candidatesLbl, 0, 0);
Label heroesLbl = new Label("Heroes");
gridpane.add(heroesLbl, 2, 0);
GridPane.setHalignment(heroesLbl, HPos.CENTER);
// candidates
final ObservableList<String> candidates =
FXCollections.observableArrayList("Superman", "Spiderman", "Wolverine",
"Police", "Fire
Rescue", "Soldiers", "Dad & Mom", "Doctor", "Politician", "Pastor", "Teacher");
final ListView<String> candidatesListView = new
ListView<String>(candidates);
candidatesListView.setPrefWidth(150);
candidatesListView.setPrefHeight(150);
gridpane.add(candidatesListView, 0, 1);
// heros
final ObservableList<String> heroes = FXCollections.observableArrayList();
final ListView<String> heroListView = new ListView<String>(heroes);
heroListView.setPrefWidth(150);
heroListView.setPrefHeight(150);
gridpane.add(heroListView, 2, 1);
// select heroes
Button sendRightButton = new Button(">");
sendRightButton.setOnAction(new EventHandler<ActionEvent>() {
public void handle(ActionEvent event) {
String potential =
candidatesListView.getSelectionModel().getSelectedItem();
if (potential != null) {
candidatesListView.getSelectionModel().clearSelection();
candidates.remove(potential);
heroes.add(potential);
}
}
});
VBox vbox = new VBox(5);
vbox.getChildren().addAll(sendRightButton, sendLeftButton);
gridpane.add(vbox, 1, 1);
GridPane.setConstraints(vbox, 1, 1, 1, 2, HPos.CENTER, VPos.CENTER);
root.getChildren().add(gridpane);
primaryStage.setScene(scene);
primaryStage.show();

Comment ça fonctionne :

Lorsque vous traitez des collections Java, vous remarquerez qu'il y a tellement de classes
de conteneurs utiles qui représentent toutes sortes de structures de données. Une
collection couramment utilisée est la classe java.util.ArrayList. Lors de la création
d'applications avec domaine objets qui contiennent un ArrayList, un développeur peut
facilement manipuler des objets à l'intérieur de la collection. Mais, dans le passé (retour
dans la journée), lorsque l'utilisation de composants Java Swing combinés à des
collections peut souvent être un défi, en particulier la mise à jour l'interface graphique
pour refléter les changements dans l'objet de domaine. Comment résolvons-nous ce
problème? Eh bien, la liste ObservableList de JavaFX au porter secours! En parlant de
sauvetage, j'ai créé une application GUI pour permettre aux utilisateurs de choisir leurs
héros préférés. C’est assez similaire aux écrans d'application qui gèrent les rôles des
utilisateurs en ajoutant ou en supprimant des éléments de la zone de liste composants.
Dans JavaFX, nous utiliserons un contrôle ListView pour contenir des objets String.
Avant de créer une instance d'un ListView, nous créons un ObservableList contenant nos
candidats. Ici, vous remarquerez l'utilisation d'une classe d'usine appelée FXCollections,
dans laquelle vous pouvez transmettre des types de collection communs à encapsuler et
renvoyé à l'appelant en tant que ObservableList. Dans la recette, j'ai passé un tableau de
chaînes au lieu d'un ArrayList, j'espère que vous aurez une idée de l'utilisation de la classe
FXCollections.

J'espère que vous l'utiliserez à bon escient : « Avec un grand pouvoir, il doit aussi venir
une grande responsabilité ». Cette ligne de code appelle la classe FXCollections
pourrenvoie une liste observable (ObservableList): ObservableList<String> candidats =
FXCollections.observableArrayList(...); Après avoir créé une ObservableList, une classe
ListView est instanciée à l'aide d'un constructeur qui reçoit la liste observable. Voici le
code pour créer et remplir un objet ListView : ListView<String> candidatsListView =
new ListView<String>(candidats); Dans le dernier point, notre code manipulera les
ObservableLists comme si elles étaient java.util.ArrayLists. Une fois manipulé, le
ListView sera notifié et automatiquement mis à jour pour reflètent les changements de
l'ObservableList. L'extrait de code suivant implémente le gestionnaire d'événements et
événement d'action lorsque l'utilisateur appuie sur le bouton droit d'envoi :

//select heroes
Button sendRightButton = new Button(">");
sendRightButton.setOnAction(new EventHandler<ActionEvent>()

{
public void handle(ActionEvent event)

{
String potential =
candidatesListView.getSelectionModel().getSelectedItem();
if (potential != null)
{
candidatesListView.getSelectionModel().clearSelection();
candidates.remove(potential);
heroes.add(potential);
}
}
}

Lors de la définition d'une action, nous utilisons la classe générique EventHandler pour
créer une classe interne anonyme avec le handle() méthode pour écouter un événement
d'appui sur un bouton. Lorsqu'un événement d'appui sur un bouton arrive, le code
déterminera quel élément de la ListView a été sélectionné. Une fois l'élément déterminé,
nous effaçons la sélection, supprimons l'élément et ajoutons l'élément au

ObserverableList du héros.

Questions:
a) Définir : Evenement, Auditeur.
b) C’est quoi une classe anonyme en java ? donner un exemple d’utilisation de telles
classes.
c) En quoi consiste le « binding » ? Illustrer par un exemple
d) Dans quel(s) cas de figure(s) doit-on déclarer l’attribut d’une classe comme étant une
propriété ?
e) En javafx, c’est quoi une « ObservableList » ? illustrez votre propos à l’aide d’un
exemple précis.
f) A-t-on utilisé le binding pour mettre en œuvre l’application précédente ?
g) Quels rôles jouent les « observableList » ainsi que les « listView » dans la mise en
œuvre de l’application précédente ?
h) Donner le code permettant de désélectionner un hero.

TP 2 : SceneBuilder
a) Reprendre le TP 1 entièrement en utilisant SceneBuilder
b) Donner le code de la classe Controleur de l’application précédente. On veillera à ce
que les membres (attributs + méthodes) de cette classe soient accessibles dans
SceneBuilder dans le cas où on montait l’interface avec cet outil.

TP 3 : Ajout de la fenêtre de connexion, de celle de gestion des utilisateurs et des

« roles »
On souhaite modifier l’application précédente de sorte que :
- Elle dispose de : une fenêtre d'accueil publique (fenêtre de connexion), une fenêtre de
gestion des héros (choix des héros – voir TP1 -, ajout/suppression/màj d’un héro
candidat), une fenêtre gestion des utilisateurs : ajout/suppression/màj d’un utilisateur.
- Elle gère plusieurs utilisateurs possédants chacun un « rôle ». Un utilisateur est soit un
« simpleUser », soit un « admin », soit un « superAdmin ». On a donc trois rôles :
« simpleUser », « admin » et « superAdmin ».
o A la création d’un utilisateur, il possède par défaut le rôle « simpleUser ». Avec
un tel rôle, on ne peut que se connecter à l’application, puis opérer le choix de
ses héros dans la liste des candidats.
o Un utilisateur possédant le role « admin » peut en plus de ce que peut faire celui
possédant le rôle « simpleUser », ajouter, supprimer, mettre à jour la liste des
candidats. On doit prévoir les boutons sur l’interphase graphique pour
déclencher ces actions.
o Le « superAdmin» en plus des prérogatives que possède un « admin » peut
changer le role d’un utilisateur (de )
- • La!page!d'accueil!listera!les!tâches!publiques!et!offrira!un!bouton!de!connexion
• La!page!de!gestion!des!tâches!affichera!les!tâches!qui!appartiennent!ou!qui!sont!
assignées!à!l'utilisateur.
• Une!fois!l'utilisateur!authentifié!il!pourra!procéder!à!la!gestion!des!tâches!(ajout,!
édition,!modification!et!suppression!de!tâches).
• On! pourra! afficher! le! détail! d'une! tâche et l’application! fournira! un! lien! direct!
vers!cette!tâche!et!offrira la!possibilité!d'envoyer!le!descriptif!de!la!tâche!par!eU
mail.
• La! page! de! gestion! des! utilisateurs! proposera! des! options! d'administration! et!
notemment!l’ajout!d’utilisateurs!en!base!après!recherche!dans!un!annuaire! LDAP.
• Un! web4 service exposera! entre! autre! une! méthode! permettant de! récupérer! la!
liste!des! 10!dernières! tâches!d'un!utilisateur.