6.1.2 – Ajout / suppression / mise à jour

Cette section détaille les différentes méthodes pour manipuler une ObservableList : ajouter, supprimer et mettre à jour des éléments. Vous découvrirez les différentes approches selon vos besoins et les bonnes pratiques pour chaque opération.

📝 Ajouter des éléments

Il existe plusieurs façons d'ajouter des éléments à une ObservableList :

Méthode 1 : Ajouter un élément (add)

ObservableList<String> items = FXCollections.observableArrayList();

// Ajouter un élément à la fin
items.add("Nouvel élément");

// Ajouter à un index spécifique
items.add(0, "Premier élément"); // Ajoute au début
items.add(2, "Élément à l'index 2");

Méthode 2 : Ajouter plusieurs éléments (addAll)

// Ajouter plusieurs éléments à la fin
items.addAll("Élément 1", "Élément 2", "Élément 3");

// Ajouter plusieurs éléments à un index spécifique
items.addAll(0, "A", "B", "C"); // Ajoute A, B, C au début

// Ajouter depuis une autre collection
List<String> autresElements = Arrays.asList("X", "Y", "Z");
items.addAll(autresElements);

Méthode 3 : Remplacer tout le contenu (setAll)

// Remplacer tout le contenu de la liste
items.setAll("Nouveau 1", "Nouveau 2", "Nouveau 3");

// Cela déclenche un changement "replaced" dans le listener
// Utile pour réinitialiser complètement la liste

📝 Supprimer des éléments

Méthode 1 : Supprimer un élément spécifique (remove)

// Supprimer par valeur
items.remove("Élément à supprimer");

// Supprimer par index
items.remove(0); // Supprime le premier élément

// Supprimer le dernier élément
items.remove(items.size() - 1);

Méthode 2 : Supprimer plusieurs éléments (removeAll)

// Supprimer plusieurs éléments spécifiques
items.removeAll("Élément 1", "Élément 2", "Élément 3");

// Supprimer depuis une autre collection
List<String> aSupprimer = Arrays.asList("X", "Y");
items.removeAll(aSupprimer);

Méthode 3 : Vider complètement (clear)

// Vider toute la liste
items.clear();

// Utile pour réinitialiser ou nettoyer

Méthode 4 : Supprimer conditionnellement (removeIf)

// Supprimer tous les éléments qui correspondent à une condition
items.removeIf(element -> element.length() < 5); // Supprime les éléments de moins de 5 caractères

// Exemple avec objets personnalisés
ObservableList<Personne> personnes = FXCollections.observableArrayList();
personnes.removeIf(p -> p.getAge() < 18); // Supprime les mineurs

Méthode 5 : Garder seulement certains éléments (retainAll)

// Garder seulement les éléments spécifiés
items.retainAll("Élément 1", "Élément 2"); // Garde seulement ces deux éléments

// Tous les autres éléments sont supprimés

📝 Mettre à jour des éléments

Méthode 1 : Remplacer un élément (set)

// Remplacer un élément à un index spécifique
items.set(0, "Nouveau premier élément");

// Cela déclenche un changement "replaced" dans le listener

Méthode 2 : Modifier les propriétés d'un objet

Si vous modifiez les propriétés d'un objet dans la liste, la ListView ne se met pas à jour automatiquement. Vous devez utiliser refresh() :

ObservableList<Personne> personnes = FXCollections.observableArrayList();
ListView<Personne> listView = new ListView<>();
listView.setItems(personnes);

// Modifier une propriété d'un objet
Personne personne = personnes.get(0);
personne.setNom("Nouveau nom");

// La ListView ne se met pas à jour automatiquement !
// Il faut appeler refresh()
listView.refresh();

// Ou utiliser un extractor (voir section 6.1.3)

Méthode 3 : Remplacer tous les éléments (replaceAll)

// Remplacer tous les éléments selon une transformation
items.replaceAll(element -> element.toUpperCase()); // Met tout en majuscules

// Exemple avec objets
personnes.replaceAll(p -> {
    p.setAge(p.getAge() + 1); // Augmente l'âge de tous
    return p;
});

📝 Opérations en lot (batch operations)

Pour effectuer plusieurs modifications sans déclencher plusieurs notifications, vous pouvez utiliser des opérations en lot :

// Méthode 1 : Utiliser beginChange() et endChange()
items.beginChange();
try {
    items.add("Élément 1");
    items.add("Élément 2");
    items.remove("Ancien élément");
    // Toutes ces opérations sont groupées en une seule notification
} finally {
    items.endChange();
}

// Méthode 2 : Utiliser setAll() pour remplacer tout
// Plus simple et plus efficace pour un remplacement complet
items.setAll("Nouveau 1", "Nouveau 2", "Nouveau 3");

📝 Exemple complet : Gestion avancée d'une liste

package application;

import javafx.fxml.FXML;
import javafx.scene.control.ListView;
import javafx.scene.control.TextField;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;

public class MainController {
    
    @FXML
    private ListView<String> listViewItems;
    
    @FXML
    private TextField txtRecherche;
    
    private ObservableList<String> items;
    private ObservableList<String> itemsComplets; // Liste complète pour la recherche
    
    @FXML
    private void initialize() {
        // Liste complète
        itemsComplets = FXCollections.observableArrayList(
            "Pomme", "Banane", "Orange", "Fraise", "Cerise", "Kiwi"
        );
        
        // Liste filtrée (affichée dans la ListView)
        items = FXCollections.observableArrayList(itemsComplets);
        listViewItems.setItems(items);
    }
    
    @FXML
    private void ajouterItem() {
        String nouvelItem = txtNouvelItem.getText().trim();
        if (!nouvelItem.isEmpty()) {
            // Ajouter à la liste complète
            itemsComplets.add(nouvelItem);
            
            // Si l'élément correspond au filtre, l'ajouter aussi à la liste affichée
            if (txtRecherche.getText().trim().isEmpty() || 
                nouvelItem.toLowerCase().contains(txtRecherche.getText().toLowerCase())) {
                items.add(nouvelItem);
            }
        }
    }
    
    @FXML
    private void supprimerItem() {
        String selectionne = listViewItems.getSelectionModel().getSelectedItem();
        if (selectionne != null) {
            // Supprimer des deux listes
            items.remove(selectionne);
            itemsComplets.remove(selectionne);
        }
    }
    
    @FXML
    private void filtrer() {
        String recherche = txtRecherche.getText().toLowerCase().trim();
        
        if (recherche.isEmpty()) {
            // Afficher tous les éléments
            items.setAll(itemsComplets);
        } else {
            // Filtrer selon le critère
            items.setAll(
                itemsComplets.stream()
                    .filter(item -> item.toLowerCase().contains(recherche))
                    .collect(java.util.stream.Collectors.toList())
            );
        }
    }
    
    @FXML
    private void trier() {
        // Trier la liste
        FXCollections.sort(items);
    }
    
    @FXML
    private void supprimerDoublons() {
        // Créer une nouvelle liste sans doublons
        items.setAll(items.stream().distinct().collect(java.util.stream.Collectors.toList()));
    }
}

💡 Points clés à retenir

• add() / addAll() : Pour ajouter des éléments
• remove() / removeAll() / removeIf() : Pour supprimer des éléments
• set() : Pour remplacer un élément à un index
• setAll() : Pour remplacer tout le contenu (plus efficace que clear + addAll)
• clear() : Pour vider complètement la liste
• refresh() : Nécessaire si vous modifiez les propriétés d'objets dans la liste
• Opérations en lot : Utilisez beginChange()/endChange() pour grouper les modifications

6.1.3 – Binding liste ↔ vue

Le binding (liaison) permet de créer des connexions automatiques entre les données et l'interface utilisateur. JavaFX offre plusieurs mécanismes de binding pour synchroniser les ObservableList avec les composants de l'interface, y compris la détection des changements dans les propriétés des objets.

🎯 Types de binding

Il existe deux types principaux de binding :

• Binding unidirectionnel : Les données → Vue (les changements dans la liste mettent à jour la vue)
• Binding bidirectionnel : Les données ↔ Vue (les changements dans la liste ou la vue se synchronisent)

📝 Binding unidirectionnel (liste → vue)

Le binding unidirectionnel est le plus courant. Il est automatique quand vous utilisez setItems() :

ObservableList<String> items = FXCollections.observableArrayList();
ListView<String> listView = new ListView<>();

// Binding unidirectionnel : items → listView
listView.setItems(items);

// Maintenant, toute modification de 'items' met à jour automatiquement 'listView'
items.add("Nouvel élément"); // La ListView se met à jour automatiquement
items.remove(0);              // La ListView se met à jour automatiquement
items.clear();                 // La ListView se met à jour automatiquement

📝 Détecter les changements dans les objets (Extractor)

Par défaut, ObservableList détecte seulement les ajouts/suppressions d'éléments, pas les modifications des propriétés des objets. Pour détecter les changements dans les propriétés des objets, vous devez utiliser un extractor :

Exemple : ObservableList avec extractor

package application;

import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.beans.value.ObservableValue;
import javafx.util.Callback;

public class MainController {
    
    private ObservableList<Personne> personnes;
    
    @FXML
    private void initialize() {
        // Créer une ObservableList avec un extractor
        // L'extractor indique quelles propriétés observer
        personnes = FXCollections.observableArrayList(new Callback<Personne, ObservableValue[]>() {
            @Override
            public ObservableValue[] call(Personne personne) {
                // Retourner les propriétés à observer
                return new ObservableValue[] {
                    personne.nomProperty(),      // Observer le nom
                    personne.prenomProperty(),   // Observer le prénom
                    personne.ageProperty()        // Observer l'âge
                };
            }
        });
        
        // Version lambda (plus simple)
        personnes = FXCollections.observableArrayList(personne -> new ObservableValue[] {
            personne.nomProperty(),
            personne.prenomProperty(),
            personne.ageProperty()
        });
        
        listViewPersonnes.setItems(personnes);
    }
}

Classe Personne avec propriétés observables

Pour que l'extractor fonctionne, votre classe doit utiliser des propriétés observables JavaFX :

package application;

import javafx.beans.property.IntegerProperty;
import javafx.beans.property.SimpleIntegerProperty;
import javafx.beans.property.SimpleStringProperty;
import javafx.beans.property.StringProperty;

public class Personne {
    private StringProperty nom = new SimpleStringProperty();
    private StringProperty prenom = new SimpleStringProperty();
    private IntegerProperty age = new SimpleIntegerProperty();
    
    // Constructeur
    public Personne(String nom, String prenom, int age) {
        this.nom.set(nom);
        this.prenom.set(prenom);
        this.age.set(age);
    }
    
    // Getters pour les propriétés (nécessaires pour l'extractor)
    public StringProperty nomProperty() { return nom; }
    public StringProperty prenomProperty() { return prenom; }
    public IntegerProperty ageProperty() { return age; }
    
    // Getters classiques
    public String getNom() { return nom.get(); }
    public String getPrenom() { return prenom.get(); }
    public int getAge() { return age.get(); }
    
    // Setters
    public void setNom(String nom) { this.nom.set(nom); }
    public void setPrenom(String prenom) { this.prenom.set(prenom); }
    public void setAge(int age) { this.age.set(age); }
}

📝 Binding avec plusieurs vues

Vous pouvez lier la même ObservableList à plusieurs composants :

ObservableList<String> items = FXCollections.observableArrayList("A", "B", "C");

ListView<String> listView1 = new ListView<>();
ListView<String> listView2 = new ListView<>();
ComboBox<String> comboBox = new ComboBox<>();

// Lier la même liste à plusieurs composants
listView1.setItems(items);
listView2.setItems(items);
comboBox.setItems(items);

// Toute modification de 'items' met à jour les 3 composants automatiquement !
items.add("D"); // Les 3 composants se mettent à jour

📝 Binding bidirectionnel avec sélection

Pour créer un binding bidirectionnel entre la sélection de la ListView et une propriété, vous devez utiliser des listeners car selectedItemProperty() est en lecture seule (ReadOnlyObjectProperty) :

import javafx.beans.property.ObjectProperty;
import javafx.beans.property.SimpleObjectProperty;

public class MainController {
    
    private ObjectProperty<Personne> personneSelectionnee = new SimpleObjectProperty<>();
    
    @FXML
    private void initialize() {
        listViewPersonnes.setItems(personnes);
        
        // Note : selectedItemProperty() est ReadOnly, donc on utilise des listeners
        // pour créer un binding bidirectionnel manuel
        
        // ListView → Propriété : Quand la sélection change dans la ListView
        listViewPersonnes.getSelectionModel().selectedItemProperty().addListener((obs, oldVal, newVal) -> {
            personneSelectionnee.set(newVal);
        });
        
        // Propriété → ListView : Quand la propriété change depuis le code
        personneSelectionnee.addListener((obs, oldVal, newVal) -> {
            if (newVal != null) {
                listViewPersonnes.getSelectionModel().select(newVal);
            } else {
                listViewPersonnes.getSelectionModel().clearSelection();
            }
        });
        
        // Maintenant, vous pouvez modifier la sélection depuis le code
        personneSelectionnee.set(personnes.get(0)); // Sélectionne le premier élément
        
        // Et écouter les changements de sélection
        personneSelectionnee.addListener((obs, oldVal, newVal) -> {
            System.out.println("Nouvelle sélection : " + newVal);
        });
    }
}

Exemple : Binding bidirectionnel avec ComboBox

Contrairement à ListView, le ComboBox permet d'utiliser bindBidirectional() directement :

// Avec ComboBox, vous pouvez utiliser bindBidirectional() directement
ObjectProperty<Personne> personneSelectionnee = new SimpleObjectProperty<>();

// Binding bidirectionnel direct avec ComboBox
comboBoxPersonnes.valueProperty()
    .bindBidirectional(personneSelectionnee);

// Maintenant, les changements dans les deux sens sont synchronisés automatiquement
personneSelectionnee.set(personnes.get(0)); // Met à jour le ComboBox
comboBoxPersonnes.setValue(personnes.get(1)); // Met à jour la propriété

📝 Exemple complet : Application avec binding avancé

package application;

import javafx.fxml.FXML;
import javafx.scene.control.Label;
import javafx.scene.control.ListView;
import javafx.scene.control.TextField;
import javafx.collections.FXCollections;
import javafx.collections.ObservableList;
import javafx.beans.value.ObservableValue;
import javafx.util.Callback;

public class MainController {
    
    @FXML
    private ListView<Personne> listViewPersonnes;
    
    @FXML
    private TextField txtNom;
    
    @FXML
    private TextField txtPrenom;
    
    @FXML
    private TextField txtAge;
    
    @FXML
    private Label lblNombrePersonnes;
    
    // ObservableList avec extractor pour détecter les changements dans les objets
    private ObservableList<Personne> personnes;
    
    @FXML
    private void initialize() {
        // Créer ObservableList avec extractor
        personnes = FXCollections.observableArrayList(personne -> 
            new ObservableValue[] {
                personne.nomProperty(),
                personne.prenomProperty(),
                personne.ageProperty()
            }
        );
        
        // Ajouter des personnes initiales
        personnes.addAll(
            new Personne("Dupont", "Jean", 25),
            new Personne("Martin", "Marie", 30)
        );
        
        // Lier à la ListView
        listViewPersonnes.setItems(personnes);
        
        // Binding : sélection → champs de texte
        listViewPersonnes.getSelectionModel().selectedItemProperty().addListener((obs, oldVal, newVal) -> {
            if (newVal != null) {
                txtNom.setText(newVal.getNom());
                txtPrenom.setText(newVal.getPrenom());
                txtAge.setText(String.valueOf(newVal.getAge()));
            }
        });
        
        // Binding : taille de la liste → label
        lblNombrePersonnes.textProperty().bind(
            javafx.beans.binding.Bindings.size(personnes).asString("Nombre de personnes : %d")
        );
        
        // Maintenant :
        // - Modifier une propriété d'une personne met à jour automatiquement la ListView
        // - Sélectionner une personne met à jour les champs de texte
        // - Ajouter/supprimer une personne met à jour le compteur automatiquement
    }
    
    @FXML
    private void modifierPersonne() {
        Personne selectionnee = listViewPersonnes.getSelectionModel().getSelectedItem();
        if (selectionnee != null) {
            // Modifier les propriétés
            selectionnee.setNom(txtNom.getText());
            selectionnee.setPrenom(txtPrenom.getText());
            selectionnee.setAge(Integer.parseInt(txtAge.getText()));
            
            // La ListView se met à jour automatiquement grâce à l'extractor !
            // Pas besoin d'appeler refresh()
        }
    }
}

💡 Points clés à retenir

• setItems() : Crée un binding unidirectionnel automatique
• Extractor : Permet de détecter les changements dans les propriétés des objets
• Propriétés observables : Utilisez StringProperty, IntegerProperty, etc. dans vos classes
• Binding bidirectionnel : Utilisez des listeners pour ListView (selectedItemProperty est ReadOnly), ou bindBidirectional() pour ComboBox (valueProperty)
• Plusieurs vues : Une ObservableList peut être liée à plusieurs composants
• Binding de taille : Utilisez Bindings.size() pour les compteurs automatiques