13.32 Charger et enregistrer les TodoItems partie 2

À la fin de la dernière vidéo, nous avions ajouté un MenuItem "New" qui permet de demander l'ajout d'un nouvel élément à la liste. Cette fois, nous devons construire le dialogue qui acceptera la description, les détails et la deadline. Lorsque l'utilisateur cliquera sur OK, nous créerons un nouveau TodoItem, l'ajouterons à la liste du modèle, puis mettrons à jour la ListView et sélectionnerons automatiquement l'élément.

Création du FXML du dialogue

Comme un fichier FXML ne peut avoir qu'une seule racine (un seul graphe de scène), nous créons un nouveau fichier todoItemDialog.fxml. Chaque instance de Dialog englobe une instance de DialogPane. Nous copions la première BorderPane du FXML principal comme base, puis remplaçons la racine par DialogPane. Nous changeons aussi l'attribut fx:controller pour pointer vers une nouvelle classe DialogController à créer côté Java.

Un DialogPane est un gestionnaire de mise en page spécialisé pour les dialogues. Il expose quatre propriétés : header, graphic, content et buttonTypes. Pour éviter d'imbriquer un Label dans le header, on dispose des propriétés pratiques headerText et contentText. Si à la fois la propriété structurelle et la propriété texte sont définies, la première l'emporte. Nous ajoutons donc un <headerText> avec un message.

Pour la zone de contenu, l'utilisateur doit saisir une description, des détails et une deadline. Nous avons besoin de trois labels, d'un TextField, d'un TextArea et d'un DatePicker. Pour aligner proprement les labels et les champs, on utilise un GridPane de 3 lignes et 2 colonnes. On ajoute donc une balise <content> contenant un GridPane avec hgap et vgap à 10. La suite couvrira les champs eux-mêmes.

En résumé

Cette leçon couvre le nettoyage du code hérité en supprimant les éléments codés en dur du contrôleur et en les remplaçant par une récupération des données du fichier via le singleton TodoData. Après avoir vérifié que l'application charge correctement les données depuis le fichier, le développeur commence à enrichir l'interface utilisateur en ajoutant une barre de menu avec des options de navigation.

Points clés

  • Remplacer les données codées en dur par un appel à TodoData.getInstance().getTodoItems() pour charger les données depuis le fichier
  • Nettoyer la classe TodoData en supprimant les méthodes temporaires devenues inutiles
  • Ajouter une MenuBar à l'application via la balise &lt;Top&gt; du BorderPane en FXML
  • Créer un menu &quot;File&quot; contenant des items de menu comme &quot;New&quot;, &quot;Exit&quot; et un séparateur
  • Vérifier le bon fonctionnement de l'application en exécutant et observant le chargement des données depuis le fichier

Questions fréquentes

Comment modifier le contrôleur pour utiliser les données du fichier au lieu de données codées en dur?

Remplacer l'initialisation manuelle des éléments par todoData.getInstance().getTodoItems() pour récupérer les données depuis le singleton TodoData.

Comment ajouter une barre de menu à l'application en FXML?

Utiliser la balise &lt;Top&gt; dans le BorderPane, puis ajouter &lt;MenuBar&gt; avec des éléments &lt;Menu&gt; et des &lt;MenuItem&gt; contenant du texte.

Pourquoi faut-il supprimer la méthode setTodoItems du contrôleur?

C'était une méthode temporaire utilisée uniquement pour tester avec des données codées en dur. Maintenant que l'application charge les données du fichier, elle n'est plus nécessaire.