13 26 Add Change

Dans la précédente vidéo, nous affichions détails et date d'échéance dans la TextArea centrale. Mais la TextArea ne gère que du texte brut, et nous voudrions en plus afficher la date d'échéance hors de cette zone, avec une mise en forme dédiée. C'est ce que nous allons faire dans cette vidéo.

Restructurer le centre du BorderPane

Dans le FXML, on remplace le simple <TextArea> placé au centre du BorderPane par une VBox qui contiendra plusieurs éléments empilés verticalement. À l'intérieur de cette VBox, on ajoute :

• un premier Label qui sert d'en-tête « Détails » ;
• la TextArea existante pour le corps de la description ;
• un second Label pour la date d'échéance, qu'on va piloter depuis le code.

Au lancement, on voit bien que la TextArea et les deux Labels sont positionnés dans la VBox côté droit. On ajuste les tailles de police pour distinguer en-têtes et contenu, puis on s'attaque à la partie code.

Brancher le label de deadline

Le second Label (la date) doit être piloté depuis le contrôleur. On lui assigne un fx:id="deadlineLabel" dans le FXML, et on déclare la variable correspondante annotée @FXML :

@FXML
private Label deadlineLabel;

Dans le handler de clic, on n'a plus besoin du StringBuilder. On met simplement à jour les deux contrôles séparément :

detailsTextArea.setText(item.getDetails());
deadlineLabel.setText(item.getDeadline().toString());

Au lancement, cliquer sur un élément remplit la TextArea avec les détails, et le Label en bas à droite affiche la date d'échéance formatée. Le rendu est nettement plus propre que la concaténation précédente, et chaque information a sa place visuellement dédiée. Dans la prochaine vidéo, nous continuerons l'amélioration de la mise en page. À bientôt.

En résumé

Cette leçon couvre l'ajout et la modification d'éléments d'interface pour afficher des détails de tâches avec date limite. Elle explique comment configurer des layouts (VBox, HBox), ajouter des labels pour le texte et la date limite, et synchroniser l'interface avec le code Java pour afficher correctement les informations des tâches.

Points clés

• Ajouter des éléments graphiques dans un fichier XML layout (labels, VBox, HBox)
• Configurer la date limite en dehors de la zone de texte brut pour une meilleure lisibilité
• Créer des références en Java correspondant aux nouveaux éléments graphiques (fx:id)
• Mettre à jour le contrôleur pour définir les textes des labels avec les détails et la date limite
• Convertir la date en chaîne de caractères pour l'affichage sur l'écran

Questions fréquentes

Pourquoi ajouter la date limite en dehors de la zone de texte brut ?

Parce que la zone de texte ne contient que les textes bruts simples. Pour afficher la date limite avec les autres détails sans la mélanger au texte principal, il faut un label séparé dans la structure du layout.

Quels éléments XML faut-il utiliser pour organiser l'affichage ?

Il faut utiliser VBox (disposition verticale) et HBox (disposition horizontale) pour organiser les labels et les zones de texte de manière claire et lisible.

Comment synchroniser l'interface graphique avec le code Java ?

Il faut créer des champs avec l'annotation @FXML et donner des identifiants (fx:id) aux éléments XML, puis dans le contrôleur, mettre à jour les textes de ces labels avec les informations des détails et de la date limite.