13 24 Base interface

Nous continuons notre TodoList. Retour au fichier FXML créé précédemment : il faut maintenant lier la ListView au code Java. On lui ajoute un fx:id="todoListView" pour pouvoir y accéder depuis le contrôleur.

Brancher la ListView et son modèle

Côté contrôleur, on déclare la variable correspondante, annotée @FXML : 

@FXML
private ListView todoListView;

Dans la méthode initialize(), on remplit la liste avec les items d'exemple : 

todoListView.getItems().setAll(todoItems);
todoListView.getSelectionModel().setSelectionMode(SelectionMode.SINGLE);

Le mode de sélection est passé en SINGLE car on n'affichera les détails que d'un seul élément à la fois. Le mode multi-sélection n'aurait pas de sens ici.

Au premier test, la ListView affiche bien les éléments… mais sous la forme de leur référence d'objet (TodoItem@xyz), ce qui n'est pas ce qu'on veut. Par défaut, JavaFX appelle toString() sur chaque élément pour l'affichage. Il suffit donc d'overrider toString() dans TodoItem pour qu'il retourne la description courte (et uniquement elle, sans en-tête généré par l'IDE).

Afficher les détails au clic

Reste à afficher les détails lorsqu'on clique sur un élément. On ajoute un contrôle TextArea au centre du BorderPane (dans une balise <center>). Sur Mac, la différence n'est pas visible ; sur Windows, on voit clairement la zone blanche apparaître.

Côté contrôleur, on crée un handler de clic annoté @FXML : 

@FXML
public void handleClickListView() {
    TodoItem item = (TodoItem) todoListView.getSelectionModel().getSelectedItem();
    System.out.println("Élément sélectionné : " + item);
}

Puis dans le FXML, sur la ListView, on ajoute onMouseClicked="#handleClickListView". Au lancement, cliquer sur un élément affiche bien sa description dans la console. La connexion entre UI et code est faite. À bientôt dans la prochaine vidéo, où nous afficherons les détails complets dans la TextArea.

En résumé

Cette leçon couvre la création d'une interface utilisateur de base dans une application JavaFX de gestion de tâches. On apprend à configurer une ListView pour afficher les tâches, à définir le mode de sélection unique et à ajouter une TextArea pour afficher les détails. La leçon montre également comment implémenter un gestionnaire d'événements pour récupérer l'élément sélectionné via le SelectionModel.

Points clés

  • Ajouter un identifiant (fx:id) aux contrôles FXML et les annoter avec @fxml dans le contrôleur pour accéder aux composants depuis le code Java
  • Remplir une ListView dynamiquement avec getItems().setAll() en utilisant les données de la liste Java
  • Configurer le mode de sélection à SINGLE via getSelectionModel().setSelectionMode(SelectionMode.Single) pour restreindre à un seul élément
  • Override la méthode toString() de la classe métier pour contrôler l'affichage des objets dans la ListView
  • Récupérer l'élément sélectionné via getSelectionModel().getSelectedItem() et le caster au type approprié
  • Ajouter des gestionnaires d'événements en annotant les méthodes avec @fxml et en les liant via l'attribut onMouseClicked du FXML

Questions fréquentes

Pourquoi est-il nécessaire d'ajouter un fx:id et l'annotation @fxml au contrôle ListVi­ew ?

L'fx:id permet de donner un identifiant au contrôle dans le FXML, et l'annotation @fxml sur la variable du contrôleur établit automatiquement le lien entre le contrôle FXML et la variable Java, ce qui les relie ensemble.

Comment afficher la description des tâches au lieu de la référence d'objet dans la ListView ?

Il faut override la méthode toString() de la classe TodoItem pour retourner la description souhaitée, car la ListView affiche par défaut le résultat de toString() pour chaque élément de la liste.

Quel est l'intérêt de définir le mode de sélection en SINGLE plutôt qu'en MULTIPLE ?

Puisque l'interface n'affiche les détails que d'une seule tâche à la fois sur le côté droit, le mode SINGLE est plus cohérent avec la logique applicative et évite une expérience utilisateur confuse.