13 27 Add Change 2

Il reste plusieurs petits réglages visuels à effectuer sur notre TodoList. Pour l'instant, la TextArea ne prend pas toute la place disponible, et le fond entre la zone de droite et la liste de gauche n'est pas uniforme. Et surtout, les détails ne s'affichent pas au démarrage tant qu'on n'a pas cliqué.

Faire grandir la TextArea

Pour que la TextArea occupe tout l'espace vertical disponible dans la VBox, on utilise la propriété VBox.vgrow="ALWAYS". Cela demande à JavaFX d'allouer à ce contrôle tout l'espace restant après que les Labels ont reçu leur hauteur naturelle. Une fois la propriété appliquée, la zone de texte respire et la description longue est confortablement lisible.

Uniformiser le fond blanc

Les Labels d'en-tête et de date sont sur un fond gris par défaut, alors que la TextArea est blanche. On harmonise en ajoutant un style inline aux deux Labels :

style="-fx-background-color: white;"

Le rendu est meilleur, mais le fond de la VBox elle-même reste visible derrière les Labels. On copie donc le même style sur la VBox pour rendre l'ensemble du panneau de droite uniformément blanc.

Présélectionner et écouter la sélection

Au démarrage, aucun élément n'est sélectionné, donc les Labels et la TextArea sont vides. On corrige cela dans initialize() :

todoListView.getSelectionModel().selectFirst();

Le premier élément est désormais sélectionné automatiquement, mais les détails n'apparaissent toujours pas car le clic est ce qui les met à jour. On ajoute donc un listener sur la propriété de sélection :

todoListView.getSelectionModel().selectedItemProperty()
    .addListener((obs, oldVal, newVal) -> {
        if (newVal != null) {
            detailsTextArea.setText(newVal.getDetails());
            deadlineLabel.setText(newVal.getDeadline().toString());
        }
    });

Ce gestionnaire d'événement générique se déclenche à chaque changement de sélection, qu'il soit programmatique ou utilisateur. Au lancement, le premier élément est sélectionné, et ses détails apparaissent immédiatement à droite. Mission accomplie. Dans la prochaine vidéo, nous nous concentrerons sur le formatage de la date d'échéance pour qu'elle soit plus lisible. À bientôt.

En résumé

Cette leçon couvre la mise en forme des éléments d'interface JavaFX et la gestion de la sélection dans une liste de tâches. Vous apprendrez à appliquer des styles XML pour personnaliser les arrière-plans des labels, à sélectionner automatiquement le premier élément au lancement, et à ajouter un gestionnaire d'événements pour afficher les détails correspondants dans une zone de texte.

Points clés

• Définir les styles XML pour les labels et les boîtes avec des arrière-plans personnalisés
• Utiliser SelectionModel.selectFirst() pour sélectionner le premier élément de la liste au démarrage
• Ajouter un ChangeListener pour réagir aux changements de sélection
• Mettre à jour dynamiquement la TextArea des détails quand la sélection change
• Utiliser le contrôleur pour lier les événements aux modifications de l'interface

Questions fréquentes

Comment appliquer un arrière-plan blanc à un label en JavaFX ?

Définissez un style dans le fichier XML avec la propriété de couleur d'arrière-plan (background-color: white) et appliquez-le au label via la balise de style.

Comment sélectionner le premier élément de la liste au lancement de l'application ?

Utilisez la méthode SelectionModel.selectFirst() du contrôleur dans la méthode initialize ou lors du chargement initial de l'application.

Comment afficher les détails du nouvel élément quand la sélection change ?

Ajoutez un ChangeListener à la propriété de sélection du modèle. Quand l'événement de changement est déclenché, récupérez la nouvelle valeur sélectionnée et mettez à jour la TextArea avec ses détails.