Tutoriel sur les extracteurs en JavaFX

Comment recevoir des notifications de mise à jour des éléments contenus dans des listes observables

Cet article a pour but de vous expliquer comment utiliser des extracteurs et recevoir des notifications de mise à jour provenant des éléments qui sont contenus dans une liste observable.

Pour réagir à cet article, un espace de dialogue vous est proposé sur le forum Commentez Donner une note  l'article (5) 

Article lu   fois.

L'auteur

Site personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Introduction

Les listes observables sont partout présentes dans JavaFX, elles sont littéralement à la base du concept du SceneGraph qui permet d’afficher des nœuds graphiques dans une interface utilisateur. En effet chaque nœud parent, groupe ou gestionnaire de mise en page dispose d’une liste observable de nœuds enfants. Au niveau des contrôles, ces listes sont également utilisées par les boites déroulantes et autres listes, arbres et tables graphiques.

De base, ces listes observables permettent de recevoir, via des écouteurs de type ListChangeListener, des événements de notification classiques tels que d’ajout, retrait, remplacement ou encore permutation des éléments contenus dans une de ces listes. Bref, tout ce qui se rapporte aux manipulations classiques d’une liste.

Cependant, il existe un autre type de notification : la notification de mise à jour qui permet d’être averti lorsque la propriété observable d’un élément de la liste est modifiée. Cette fonctionnalité peu connue permet d’être averti que l’état d’un des objets de la liste a changé ! Elle nécessite l’utilisation d’un nouveau concept : l’extracteur de propriétés.

II. Liste observable en JavaFX

Nous allons effectuer un rapide rafraichissement sur la manière d’utiliser les listes observables. La classe ObservableList ainsi que les autres collections observables et les événements et classes utilitaires qui leur sont attachées font partie du module javafx.base et n’ont donc aucune dépendance graphique.

Contrairement aux listes Java classiques qui sont muettes lorsque leur contenu est modifié, une ObservableList de JavaFX émet des événements de type ListChangeListener.Change qui peuvent être reçus par un écouteur de type ListChangeListener. Cet événement peut avoir plusieurs états :

Type Description La taille de la liste change ? Les indices de la liste changent ? Méthodes
Added Ajout d’un élément dans la liste Oui Oui, décalage vers la droite à partir de l’indice d’ajout add();
Removed Suppression d’un élément dans la liste Oui Oui, décalage vers la gauche à partir de l’indice de suppression remove();
Replaced Remplacement d’un élément dans la liste par une valeur externe Non Non set();
Permutated Permutation de deux éléments dans la liste Non Non, les indices des deux valeurs sont cependant permutés sort();
Updated Mise à jour d’une propriété d’un élément de la liste Non Non n/a

À noter qu’un événement de replacement peut être vu comme une composition d’un retrait suivi d’un ajout. Tous les types d’événements, sauf celui de mise à jour, impliquent l’utilisation de méthodes définies dans l’interface java.util.List.

Ces événements existent pour tenir notre programme informé de toutes modifications dans notre liste. C’est, bien sûr, très utile pour des interfaces graphiques que ce soit pour changer le contenu d’une liste déroulante ou encore pour rafraichir un graphe de scène et c’est bien pour cela que le cœur de la partie graphique de JavaFX est construit autour de ce concept. Cependant cela a aussi son utilité pour créer des programmes non graphiques pour, par exemple, réagir automatiquement à l’arrivée d’un nouveau message dans une file d’attente d’une couche business ou encore réagir au changement de statut d’un client connecté sur un serveur sans devoir tout coder à la main.

III. Utilisation normale

Nous allons maintenant créer un exemple simple permettant de tester les propagations d’événements lorsque nous manipulons une liste observable.

III-A. Modèle

Commençons par créer le type d’objets que nous allons stocker dans la liste observable. Ce même modèle nous servira également plus tard lorsque nous utiliserons des extracteurs.

Nous allons créer une classe Person qui peut, par exemple, représenter un utilisateur tel que stocké dans une base de données. Cette personne disposera de deux propriétés observables, son nom (name) et son prénom (surname) que nous pourrons éditer dans une interface graphique.

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
public final class Person {
            
    public Person(final String name, final String surname) {
        setName(name);
        setSurname(surname);
    }
            
    private final StringProperty name = new SimpleStringProperty(this, "name"); // NOI18N.
            
    public final String getName() {
        return name.get();
    }
            
    public final void setName(final String value) {
        name.set(value);
    }
            
    public final StringProperty nameProperty() {
        return name;
    }
            
    private final StringProperty surname = new SimpleStringProperty(this, "surname"); // NOI18N.
            
    public final String getSurname() {
        return surname.get();
    }
            
    public final void setSurname(final String value) {
        surname.set(value);
    }
            
    public final StringProperty surnameProperty() {
        return surname;
    }
            
    @Override
    public String toString() {
        String name = getName();
        name = (name == null) ? "" : name.trim(); // NOI18N.
        String surname = getSurname();
        surname = (surname == null) ? "" : surname.trim(); // NOI18N.
        final StringBuilder builder = new StringBuilder();
        if (!name.isEmpty()) {
            builder.append(name.trim());
        }
        if (!name.isEmpty() && !surname.isEmpty()) {
            builder.append(" ");
        }
        if (!surname.isEmpty()) {
            builder.append(surname.trim());
        }
        return builder.toString();
    }
}

Note : la méthode toString() est ici uniquement destinée à aider le débogage en faisant des affichages en mode console.

III-B. Création de la liste

Il nous est alors possible d’instancier puis d’ajouter des personnes dans une liste observable, d’installer un écouteur sur cette liste et puis de faire quelques tests sur son contenu :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
// Création de la liste.
final ObservableList<Person> persons = FXCollections.observableArrayList(
    new Person("Dupond", "Valérie"), // NOI18N.
    new Person("Higgins", "Clark"), // NOI18N.
    new Person("Pantou", "Maurice"), // NOI18N.
    new Person("Parmentier", "Yvette")); // NOI18N.

Ou encore :

 
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
// Création de la liste.
final ObservableList<Person> persons = FXCollections.observableArrayList();
persons.setAll(
    new Person("Dupond", "Valérie"), // NOI18N.
    new Person("Higgins", "Clark"), // NOI18N.
    new Person("Pantou", "Maurice"), // NOI18N.
    new Person("Parmentier", "Yvette")); // NOI18N.

III-C. Écouteur

Nous connectons ensuite sur la liste un écouteur de type ListChangeListener<Person> et nous traitons l’événement de modification reçu :

Code JDK7
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
// Écouteur.
persons.addListener(new ListChangeListener<Person>() {
    @Override
    public void onChanged(ListChangeListener.Change<? extends Person> change) {
        // Rappel : plusieurs modifications peuvent être agrégées dans un seul événement.
        while (change.next()) {
            String changeLabel = "?"; // NOI18N.
            if (change.wasReplaced()) {
                changeLabel = "replaced"; // NOI18N.
            } else if (change.wasAdded()) {
                changeLabel = "added"; // NOI18N.
            } else if (change.wasRemoved()) {
                changeLabel = "removed"; // NOI18N.
            } else if (change.wasPermutated()) {
                changeLabel = "permutated"; // NOI18N.
            } else if (change.wasUpdated()) {
                changeLabel = "updated"; // NOI18N.
            }
            final String pattern = String.format("Element %s was %s%n", "%d", changeLabel); // NOI18N.
            if (change.wasAdded() || change.wasReplaced() || change.wasUpdated()) {
                // Parcours exclusif.
                for (int index = change.getFrom(); index < change.getTo(); index++) {
                    System.out.printf(pattern, index);
                }
            } else {
                // Parcours inclusif.
                for (int index = change.getFrom(); index <= change.getTo(); index++) {
                    System.out.printf(pattern, index);
                }
            }
        }
    }
});

Ou encore :

Code JDK8
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
// Écouteur.
persons.addListener (ListChangeListener.Change<? extends Person> change) -> {
    // Rappel : plusieurs modifications peuvent être agrégées dans un seul événement.
    while (change.next()) {
        String changeLabel = "?"; // NOI18N.
        if (change.wasReplaced()) {
            changeLabel = "replaced"; // NOI18N.
        } else if (change.wasAdded()) {
            changeLabel = "added"; // NOI18N.
        } else if (change.wasRemoved()) {
            changeLabel = "removed"; // NOI18N.
        } else if (change.wasPermutated()) {
            changeLabel = "permutated"; // NOI18N.
        } else if (change.wasUpdated()) {
            changeLabel = "updated"; // NOI18N.
        }
        final String pattern = String.format("Element %s was %s%n", "%d", changeLabel); // NOI18N.
        if (change.wasAdded() || change.wasReplaced() || change.wasUpdated()) {
            // Parcours exclusif.
            IntStream.range(change.getFrom(), change.getTo())
                    .forEach(index -> System.out.printf(pattern, index));
        } else {
            // Parcours inclusif.
            IntStream.rangeClosed(change.getFrom(), change.getTo())
                    .forEach(index -> System.out.printf(pattern, index));
        }
    }
});

III-D. Test

Nous pouvons ensuite tester les différents types d’opérations :

Code JDK7
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
// Opérations.
System.out.println(persons);
// Retrait.
System.out.println("== Remove ==");
persons.remove(0);
System.out.println(persons);
// Ajout.
System.out.println("== Add ==");
persons.add(0, new Person("Dupond", "Valérie")); // NOI18N.
System.out.println(persons);
// Remplacement.
System.out.println("== Replace ==");
            
persons.set(0, new Person("Langworth", "Cathy")); // NOI18N.
System.out.println(persons);
// Tri -> permutation.
System.out.println("== Permute ==");
Collections.sort(persons, new Comparator<Person>() {
    @Override
    public int compare(Person p1, Person p2) {
        int result = p1.getName().compareTo(p2.getName());
        if (result == 0) {
            result = p1.getSurname().compareTo(p2.getSurname());
        }
        return result;
    }
});
System.out.println(persons);
// Mise à jour.
System.out.println("== Update ==");
persons.get(0).setName("Smith"); // NOI18N.
persons.get(0).setSurname("Anny"); // NOI18N.
System.out.println(persons);

Ou :

Code JDK8
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
// Opérations.
System.out.println(persons);
// Retrait.
System.out.println("== Remove ==");
persons.remove(0);
System.out.println(persons);
// Ajout.
System.out.println("== Add ==");
persons.add(0, new Person("Dupond", "Valérie")); // NOI18N.
System.out.println(persons);
// Remplacement.
System.out.println("== Replace ==");
            
persons.set(0, new Person("Langworth", "Cathy")); // NOI18N.
System.out.println(persons);
// Tri -> permutation.
System.out.println("== Permute ==");
persons.sort((p1, p2) -> {
    int result = p1.getName().compareTo(p2.getName());
    if (result == 0) {
        result = p1.getSurname().compareTo(p2.getSurname());
    }
    return result;
});
System.out.println(persons);
// Mise à jour.
System.out.println("== Update ==");
persons.get(0).setName("Smith"); // NOI18N.
persons.get(0).setSurname("Anny"); // NOI18N.
System.out.println(persons);

Ce qui nous permet d’obtenir le résultat suivant :

 
Sélectionnez
[Dupond Valérie, Higgins Clark, Pantou Maurice, Parmentier Yvette]
== Remove ==
Element 0 was removed
[Higgins Clark, Pantou Maurice, Parmentier Yvette]
== Add ==
Element 0 was added
[Dupond Valérie, Higgins Clark, Pantou Maurice, Parmentier Yvette]
== Replace ==
Element 0 was replaced
[Langworth Cathy, Higgins Clark, Pantou Maurice, Parmentier Yvette]
== Permute ==
Element 0 was permutated
Element 1 was permutated
Element 2 was permutated
Element 3 was permutated
Element 4 was permutated
[Higgins Clark, Langworth Cathy, Pantou Maurice, Parmentier Yvette]
== Update ==
[Smith Anny, Langworth Cathy, Pantou Maurice, Parmentier Yvette]

Nous voyons bien que tous les types de modifications ont été répercutés sauf l’événement de mise à jour.

IV. Suivi des mises à jour

Le suivi des événements de mise à jour est en effet optionnel, comme spécifié dans la documentation de la classe ListChangeListener.Change, et la plupart des listes observables ne permettent pas de l’effectuer.

IV-A. Création de la liste

Nous allons donc changer la manière dont nous créons une instance de liste observable. Nous allons cette fois-ci utiliser la variante de la méthode de fabrique observableArrayList()(1) de la classe utilitaire FXCollections qui prend en paramètre un extracteur de valeurs observables… c’est-à-dire un objet qui pour chaque valeur contenue dans la liste va retourner ses propriétés d’intérêt.

IV-A-1. Extracteur

Dans notre cas, le type de l’extracteur est Callback<Person, Observable[]> : un objet dont nous devons surcharger la méthode call(), qui prend une instance de la classe Person en paramètre tandis qu’elle retournera un tableau des valeurs observables qui ne seront autres que les propriétés intéressantes de notre classe Person, ses propriétés name et surmane.

Code JDK7
Sélectionnez
1.
2.
3.
4.
5.
6.
final ObservableList<Person> persons = FXCollections.observableArrayList(new Callback<Person, Observable[]>() {
    @Override
    public Observable[] call(final Person person) {
        return new ObservableValue[]{person.nameProperty(), person.surnameProperty()};
    }
});

Ce que nous pouvons, bien évidemment, grandement simplifier en écrivant une expression lambda avec le JDK8 : une simple fonction qui prend une personne en paramètre et sort un tableau contenant ses propriétés observables en retour !

Code JDK8
Sélectionnez
final ObservableList<Person> persons = FXCollections.observableArrayList(person -> new ObservableValue[]{person.nameProperty(), person.surnameProperty()});

Lorsqu’une nouvelle personne est ajoutée dans la liste observable, cette dernière va invoquer l’extracteur qui va retourner les propriétés name et surname de la personne. La liste créera alors le câblage nécessaire pour surveiller l’état de ces propriétés et propagera leurs modifications de valeur si besoin. L’extracteur sera utilisé de manière similaire lorsque l’élément est retiré de la liste pour supprimer toute trace des écouteurs des propriétés (et éviter ainsi une fuite mémoire).

IV-A-2. Peuplement

La liste ainsi créée étant initialement vide, nous devons ensuite la peupler avec son contenu :

 
Sélectionnez
persons.setAll(
        new Person("Dupond", "Valérie"), // NOI18N.
        new Person("Higgins", "Clark"), // NOI18N.
        new Person("Pantou", "Maurice"), // NOI18N.
        new Person("Parmentier", "Yvette")); // NOI18N.

IV-B. Test

Voilà, nous sommes désormais fins prêts pour effectuer à nouveau nos tests. Les tests de retrait, d’ajout, remplacement et permutation produisent bien sûr les mêmes résultats, mais lorsque nous arrivons aux tests de mise à jour :

 
Sélectionnez
1.
2.
3.
persons.get(0).setName("Smith"); // NOI18N.
persons.get(0).setSurname("Anny"); // NOI18N.
System.out.println(persons);

Cette fois-ci la sortie montre bien que nous recevons des événements de modification sur l’élément à l’indice 0.

 
Sélectionnez
Element 0 was updated
Element 0 was updated
[Smith Anny, Langworth Cathy, Pantou Maurice, Parmentier Yvette]

Ici, nous n’avons pas modifié le contenu de la liste, nous avons modifié les valeurs des propriétés d’un des objets de la liste ce qui a provoqué des événements de mise à jour pour cet indice.

Et si nous modifions les propriétés de deux éléments distincts :

 
Sélectionnez
1.
2.
3.
persons.get(1).setSurname("Andy"); // NOI18N.
persons.get(2).setName("Cervantes"); // NOI18N.
System.out.println(persons);

Nous avons alors des notifications pour chacun des deux éléments impactés :

 
Sélectionnez
Element 1 was updated
Element 2 was updated
[Smith Anny, Langworth Andy, Cervantes Maurice, Parmentier Yvette]

V. Exemple

Nous allons maintenant créer une petite interface de saisie pour nous permettre d’éditer les personnes. Nous allons conserver l’exemple simple, mais cela devrait vous donner une idée de ce qu’il est possible de faire avec les extracteurs. Il est tout à fait possible de faire sans extracteur, mais cela demande bien plus de code, d’écouteurs ou de binding sur des propriétés.

Note : le code suivant sera au format JDK10.

Cette interface de test se composera de trois parties :

Image non disponible
  • À gauche, une table (composant TableView) affiche une vue détaillée des utilisateurs. Un éditeur est placé sous elle et permet d’ajouter, supprimer ou de modifier un utilisateur. C’est cette table qui affichera notre liste observable, en effet, souvenez-vous qu’en JavaFX TableView est construite autour d’une liste observable d’objets et chaque colonne de la table représente une vue spécialisée de cette liste. Ainsi la colonne nom affiche une vue sur la propriété name d’un objet de type Person tandis que la colonne prénom affiche une vue sur la propriété surname de cette même classe.
  • Au centre, une liste (composant ListView) se contente d’afficher les utilisateurs. Il s’agit d’une simple vue sur la liste d’objets qui sont affichés dans la table de manière à pouvoir rapidement contrôler les données.
  • Enfin à droite nous avons un affichage du résumé des derniers traitements effectués sur nos utilisateurs. Le contenu de ce résumé sera modifié en fonction des événements levés par la liste observable affichée dans la table.

V-A. Montage de l’UI

Nous allons maintenant créer chacune des trois parties composant notre UI en commençant par la table et son éditeur. Il s’agit du genre de composants que vous serez amené à créer et utiliser dans vos propres formulaires et UI.

V-A-1. Table & éditeur

Commençons par initialiser la table graphique :

Code JDK10
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
// Colonne nom.
final var nameColumn = new TableColumn<Person, String>("Nom"); // NOI18N.
nameColumn.setCellValueFactory(feature -> feature.getValue().nameProperty());
// Ou :
//nameColumn.setCellValueFactory(new PropertyValueFactory<>("name")); // NOI18N.
// Colonne prénom.
final var surnameColumn = new TableColumn<Person, String>("Prénom"); // NOI18N.
surnameColumn.setCellValueFactory(feature -> feature.getValue().surnameProperty());
// Ou :
//surnameColumn.setCellValueFactory(new PropertyValueFactory<>("surname")); // NOI18N.
// Table.
final var personTableView = new TableView<Person>();
personTableView.setColumnResizePolicy(TableView.CONSTRAINED_RESIZE_POLICY);
personTableView.getColumns().addAll(nameColumn, surnameColumn);
personTableView.setItems(persons);
VBox.setVgrow(personTableView, Priority.ALWAYS);

Nous créons ensuite un éditeur permettant de créer une nouvelle personne, de changer le nom et le prénom ou encore d’effacer une personne existante. Pour rendre l’éditeur actif, nous allons placer un écouteur sur le modèle de sélection de la table, ce qui permettra de réagir lorsque l’utilisateur sélectionne une nouvelle personne avec la souris ou le clavier :

Code JDK10
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
final var persons = personTableView.getItems();
// Nom.
final var nameField = new TextField();
GridPane.setConstraints(nameField, 1, 0);
GridPane.setHgrow(nameField, Priority.ALWAYS);
final var nameLabel = new Label("Nom"); // NOI18N.
nameLabel.setLabelFor(nameField);
GridPane.setConstraints(nameLabel, 0, 0);
// Prénom.
final var surnameField = new TextField();
GridPane.setConstraints(surnameField, 1, 1);
GridPane.setHgrow(surnameField, Priority.ALWAYS);
final var surnameLabel = new Label("Prénom"); // NOI18N.
surnameLabel.setLabelFor(surnameField);
GridPane.setConstraints(surnameLabel, 0, 1);
// Binding booléens.
final var hasNoName = nameField.textProperty().isEmpty();
final var hasNoSurame = surnameField.textProperty().isEmpty();
final var selectionIsNull = personTableView.getSelectionModel().selectedItemProperty().isNull();
// Ajout d'une personne.
final var addButton = new Button("Ajouter"); // NOI18N.
addButton.disableProperty().bind(hasNoName.or(hasNoSurame));
addButton.setOnAction(event -> {
    final var name = nameField.getText().trim();
    final var surname = surnameField.getText().trim();
    final var person = new Person(name, surname);
    persons.add(person);
    personTableView.getSelectionModel().select(person);
});
// Mise à jour d'une personne.
final var updateButton = new Button("Modifier"); // NOI18N.
updateButton.disableProperty().bind(selectionIsNull.or(hasNoName.or(hasNoSurame)));
updateButton.setOnAction(event -> {
    final var name = nameField.getText().trim();
    final var surname = surnameField.getText().trim();
    final var person = personTableView.getSelectionModel().getSelectedItem();
    person.setName(name);
    person.setSurname(surname);
});
// Suppression d'une personne.
final var removeButton = new Button("Supprimer"); // NOI18N.
removeButton.disableProperty().bind(selectionIsNull);
removeButton.setOnAction(event -> {
    final int index = personTableView.getSelectionModel().getSelectedIndex();
    persons.remove(index);
});
// Regroupement des boutons.
final var buttonHBox = new HBox();
buttonHBox.setSpacing(6);
buttonHBox.setAlignment(Pos.CENTER_RIGHT);
buttonHBox.getChildren().setAll(addButton, updateButton, removeButton);
GridPane.setConstraints(buttonHBox, 0, 3, 2, 1);
// Mettre à jour l'éditeur lors d'une sélection dans la table.
personTableView.getSelectionModel().selectedItemProperty().addListener((observable, oldValue, newValue) -> {
    // Retrait de l'ancien élément.
    Optional.ofNullable(oldValue)
            .ifPresent(value -> {
                nameField.setText(null);
                surnameField.setText(null);
            });
    // Mise en place du nouvel élément.
    Optional.ofNullable(newValue)
            .ifPresent(value -> {
                nameField.setText(value.getName());
                surnameField.setText(value.getSurname());
            });
});
// Mise en place de la grille.
final var personEditor = new GridPane();
personEditor.setHgap(6);
personEditor.setVgap(6);
// Configuration des colonnes de la grille.
personEditor.getColumnConstraints().setAll(
        IntStream.range(0, 1)
                .mapToObj(column -> new ColumnConstraints())
                .toArray(ColumnConstraints[]::new));
// Configuration des lignes de la grille.
personEditor.getRowConstraints().setAll(
        IntStream.range(0, 2)
                .mapToObj(row -> new RowConstraints())
                .toArray(RowConstraints[]::new));
personEditor.getChildren().setAll(
        nameLabel, nameField,
        surnameLabel, surnameField,
        buttonHBox);
VBox.setVgrow(personEditor, Priority.NEVER);

Et enfin nous pouvons assembler les deux contrôles dans notre UI :

Code JDK10
Sélectionnez
1.
2.
3.
4.
5.
// Panneau de gauche.
final var leftVBox = new VBox();
leftVBox.setSpacing(6);
leftVBox.setPadding(new Insets(6));
leftVBox.getChildren().setAll(personTableView, personEditor);

V-A-2. Liste

La mise en place de la liste graphique est beaucoup plus rapide, nous nous contentons de créer une ListView qui a pour source de données la liste même qui est contenue dans la table.

Code JDK10
Sélectionnez
1.
2.
3.
// Liste.
final var personListView = new ListView<Person>();
personListView.setItems(persons);

V-A-3. Zone de message

Ici, nous allons utiliser un composant TextFlow qui va nous permettre d’écrire des messages en utilisant du texte avec des mises en forme riches.

Code JDK10
Sélectionnez
1.
2.
3.
4.
5.
6.
final var messageFlow = new TextFlow();
AnchorPane.setTopAnchor(messageFlow, 0d);
AnchorPane.setLeftAnchor(messageFlow, 0d);
AnchorPane.setRightAnchor(messageFlow, 0d);
final var messageAnchor = new AnchorPane(messageFlow);
final var messageScroll = new ScrollPane(messageAnchor);

V-A-4. Scène

Et enfin nous allons monter notre UI dans la scène attachée à notre fenêtre en assemblant les trois composants :

Code JDK10
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
// UI finale.
final var root = new SplitPane(leftVBox, personListView, messageScroll);
final var scene = new Scene(root, 600, 600);
primaryStage.setTitle("Gestion des utilisateurs"); // NOI18N.
primaryStage.setScene(scene);
primaryStage.show();
Platform.runLater(() -> root.setDividerPositions(0.33d, 0.66d));

V-B. Réaction aux modifications de la liste

En l’état notre UI fonctionne avec les modifications de notre éditeur qui sont reprises dans la liste graphique puisque nous avons créé une liste de données avec un extracteur. Cependant nous n’avons pas encore de retour dans l’onglet des messages. Pour régler ces soucis, nous devons mettre en place un écouteur sur la liste :

Code JDK10
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
private int added = 0;
private int removed = 0;
private int updated = 0;
            
[...]
            
persons.addListener((ListChangeListener<Person>.Change change) -> {
    while (change.next()) {
        int oldAdded = added;
        int oldRemoved = removed;
        int oldUpdated = updated;
        if (change.wasPermutated()) {
        } else if (change.wasReplaced()) {
        } else if (change.wasAdded()) {
            System.out.println("Was added.");
            added++;
        } else if (change.wasRemoved()) {
            System.out.println("Was removed.");
            removed++;
        } else if (change.wasUpdated()) {
            System.out.println("Was updated.");
            updated++;
        }
        // Mise à jour du message.
        updateMessage(oldAdded, oldRemoved, oldUpdated, added, removed, updated);
    }
});

V-C. Publication du message

Lorsque la méthode updateMessage() est invoquée, nous recréons le contenu du TextFlow pour signaler les événements d’ajout, de retrait ou de modification :

JDK10
Sélectionnez
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
private void updateMessage(final int oldAdded, final int oldRemoved, final int oldUpdated, final int newAdded, final int newRemoved, final int newUpdated) {
    final var bits = messageFlow.getChildren();
    messageFlow.getChildren().clear();
    if (newAdded > 0 || newRemoved > 0 || newUpdated > 0) {
        bits.add(new Text("La liste a été modifiée :")); // NOI18N.
        if (newAdded > 0) {
            final var text = new Text("\n\tajout(s) : " + newAdded); // NOI18N.
            if (oldAdded != newAdded) {
                text.setFill(Color.RED);
            }
            bits.add(text);
        }
        if (newRemoved > 0) {
            final var text = new Text("\n\tretrait(s) : " + newRemoved); // NOI18N.
            if (oldRemoved != newRemoved) {
                text.setFill(Color.RED);
            }
            bits.add(text);
        }
        if (newUpdated > 0) {
            final var text = new Text("\n\tmodification(s) : " + newUpdated); // NOI18N.
            if (oldUpdated != newUpdated) {
                text.setFill(Color.RED);
            }
            bits.add(text);
        }
    }
}

VI. Code source

Le code source de cet article est disponible sur GitHub.com à l’URL https://github.com/fabricebouye/dvp-collection-extractor-javafx. Vous trouverez à cette adresse des projets pour l’IDE JetBrain Intellij IDEA. Certains de ces projets sont disponibles au format JDK7, JDK 8 ou JDK 10.

VII. Conclusion

Dans cet article nous nous sommes penchés sur l’utilisation des extracteurs qui permettent d’ajouter un nouveau niveau de fonctionnalité aux listes observables : nous pouvons désormais être notifiés lorsque l’état d’un objet contenu dans une liste observable est modifié. Et ceci peut être fait sans devoir pour autant coder toute une tuyauterie complexe d’écouteurs sur chacune des propriétés observées.

VIII. Remerciements

Je tiens à remercier toute l'équipe du forum Développez ainsi que Mickael Baron pour ses suggestions et sa relecture du présent article. Je tiens également à remercier Claude Leloup pour sa correction orthographique.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   


Il est également possible d’utiliser la variante de la méthode de fabrique observableList() de la classe utilitaire FXCollections qui prend en paramètres une liste préexistante et un extracteur pour créer une telle liste observable sur une collection qui existe déjà.

  

Les sources présentées sur cette page sont libres de droits et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une œuvre intellectuelle protégée par les droits d'auteur. Copyright © 2017 Fabrice Bouyé. Aucune reproduction, même partielle, ne peut être faite de ce site ni de l'ensemble de son contenu : textes, documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.