2.2.2 – Ajouter et configurer des éléments simples

Maintenant que vous connaissez l'interface de Scene Builder, apprenons à ajouter et configurer des composants simples. Nous allons créer une interface étape par étape avec des composants de base : Label, TextField et Button.

📝 Étape 1 : Créer un nouveau fichier FXML

Pour commencer, créez un nouveau fichier FXML dans Scene Builder :

1. Ouvrez Scene Builder
2. Fichier → New (ou Ctrl+N)
3. Choisissez un conteneur racine (par exemple VBox)

🏷️ Étape 2 : Ajouter un Label

Commençons par ajouter un Label qui affichera un texte :

1. Dans le panneau Library, trouvez la catégorie Controls
2. Glissez-déposez un Label dans la zone de conception
3. Sélectionnez le Label (il sera surligné)
4. Dans l'onglet Properties de l'inspecteur, modifiez la propriété Text : entrez "Bienvenue !"

📝 Étape 3 : Ajouter un TextField

Ajoutons maintenant un champ de texte pour que l'utilisateur puisse saisir du texte :

1. Dans le panneau Library, trouvez TextField dans Controls
2. Glissez-déposez le TextField dans la zone de conception, sous le Label
3. Sélectionnez le TextField
4. Dans l'onglet Properties, modifiez Prompt Text : entrez "Entrez votre nom"
5. Modifiez Pref Width : entrez 200 pour définir une largeur

🔘 Étape 4 : Ajouter un Button

Ajoutons un bouton pour valider la saisie :

1. Dans le panneau Library, trouvez Button dans Controls
2. Glissez-déposez le Button dans la zone de conception, sous le TextField
3. Sélectionnez le Button
4. Dans l'onglet Properties, modifiez Text : entrez "Valider"
5. Modifiez Pref Width : entrez 200 pour correspondre au TextField

⚙️ Étape 5 : Configurer le conteneur VBox

Maintenant, configurons le conteneur VBox pour organiser les composants :

1. Sélectionnez le VBox (cliquez sur un espace vide ou dans la vue hiérarchique)
2. Dans l'onglet Properties :
   • Spacing : entrez 20 (espacement entre les composants)
   • Alignment : sélectionnez CENTER (centrer les composants)
3. Dans l'onglet Layout :
   • Padding : cliquez sur les flèches pour définir 20 sur tous les côtés

👁️ Étape 6 : Prévisualiser l'interface

Avant de sauvegarder, prévisualisez votre interface pour voir le résultat final :

1. Cliquez sur le bouton Preview en haut de Scene Builder (ou Ctrl+P)
2. Une fenêtre de prévisualisation s'ouvre
3. Testez l'interface : cliquez sur le TextField, tapez du texte, etc.
4. Fermez la prévisualisation

💾 Étape 7 : Sauvegarder le fichier FXML

Une fois satisfait de votre interface, sauvegardez le fichier :

1. Fichier → Save (ou Ctrl+S)
2. Choisissez l'emplacement (dans le package application ou dans un dossier resources si vous l'avez créé)
3. Donnez un nom au fichier (par exemple formulaire.fxml)
4. Cliquez sur Save

📋 Résumé : Structure FXML créée

Voici à quoi ressemble le fichier FXML que vous avez créé :

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox spacing="20.0" alignment="CENTER" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
   <padding>
      <Insets top="20.0" right="20.0" bottom="20.0" left="20.0"/>
   </padding>
   <children>
      <Label text="Bienvenue !" />
      <TextField promptText="Entrez votre nom" prefWidth="200.0" />
      <Button text="Valider" prefWidth="200.0" />
   </children>
</VBox>

🎨 Personnalisation avancée

Vous pouvez personnaliser davantage vos composants :

Personnaliser un Label

• Font : Dans Properties, cliquez sur "Font" pour changer la police, la taille, le style
• Text Fill : Choisissez la couleur du texte
• Alignment : Alignement du texte dans le Label

Personnaliser un Button

• Graphic : Ajoutez une icône au bouton
• Style : Dans l'onglet Properties, section "Style", ajoutez du CSS inline
• Default Button : Cochez cette case pour que le bouton soit activé avec Entrée

2.2.3 – Associer des fx:id et gérer les événements

Pour que votre interface FXML puisse interagir avec le code Java, vous devez associer des fx:id aux composants et définir les gestionnaires d'événements. Cette section vous montre comment faire cela dans Scene Builder.

🏷️ Qu'est-ce qu'un fx:id ?

Un fx:id est un identifiant unique qui permet au contrôleur Java de référencer un composant du FXML. C'est l'équivalent d'un id en HTML/CSS.

📝 Étape 1 : Définir un fx:id dans Scene Builder

Pour définir un fx:id pour un composant :

1. Sélectionnez le composant dans la zone de conception (ou dans la vue hiérarchique)
2. Ouvrez l'onglet Code dans l'inspecteur (à droite)
3. Dans le champ fx:id, entrez un nom unique (par exemple labelMessage, champNom, btnValider)

💻 Étape 2 : Associer le fx:id dans le contrôleur

Une fois le fx:id défini dans Scene Builder, vous devez créer un champ correspondant dans votre contrôleur Java :

Dans Scene Builder :

Vous avez défini fx:id="labelMessage" pour un Label.

Dans le contrôleur Java :

package application;

import javafx.fxml.FXML;
import javafx.scene.control.Label;

public class MonController {
    
    @FXML
    private Label labelMessage;  // Le nom doit correspondre au fx:id
    
    // Maintenant vous pouvez utiliser labelMessage dans votre code
}

🎯 Étape 3 : Définir un gestionnaire d'événement

Pour qu'un bouton (ou autre composant) déclenche une action quand on clique dessus, vous devez définir un gestionnaire d'événement :

1. Sélectionnez le composant (par exemple un Button)
2. Ouvrez l'onglet Code dans l'inspecteur
3. Dans le champ onAction, entrez le nom de la méthode (par exemple handleValider)

💻 Étape 4 : Créer la méthode dans le contrôleur

Une fois le gestionnaire d'événement défini dans Scene Builder, créez la méthode correspondante dans votre contrôleur :

Dans Scene Builder :

Vous avez défini onAction="handleValider" pour un Button.

Dans le contrôleur Java :

package application;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

public class MonController {
    
    @FXML
    private Label labelMessage;
    
    @FXML
    private TextField champNom;
    
    @FXML
    private Button btnValider;
    
    // Méthode appelée quand on clique sur le bouton
    @FXML
    private void handleValider() {
        String nom = champNom.getText();
        if (!nom.trim().isEmpty()) {
            labelMessage.setText("Bonjour, " + nom + " !");
        } else {
            labelMessage.setText("Veuillez entrer un nom");
        }
    }
}

📋 Exemple complet : Formulaire avec fx:id et événements

Voici un exemple complet d'une interface créée dans Scene Builder avec des fx:id et des gestionnaires d'événements :

1. Interface dans Scene Builder

Créez une interface avec :

• Un Label avec fx:id="labelMessage" et text="Bienvenue !"
• Un TextField avec fx:id="champNom" et promptText="Entrez votre nom"
• Un Button avec fx:id="btnValider", text="Valider" et onAction="handleValider"

2. Fichier FXML généré

<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.scene.control.*?>
<?import javafx.scene.layout.*?>

<VBox spacing="20.0" alignment="CENTER" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1" 
      fx:controller="application.MonController">
   <padding>
      <Insets top="20.0" right="20.0" bottom="20.0" left="20.0"/>
   </padding>
   <children>
      <Label fx:id="labelMessage" text="Bienvenue !" />
      <TextField fx:id="champNom" promptText="Entrez votre nom" prefWidth="200.0" />
      <Button fx:id="btnValider" text="Valider" prefWidth="200.0" onAction="#handleValider" />
   </children>
</VBox>

3. Contrôleur Java

package application;

import javafx.fxml.FXML;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;

public class MonController {
    
    @FXML
    private Label labelMessage;
    
    @FXML
    private TextField champNom;
    
    @FXML
    private Button btnValider;
    
    @FXML
    private void initialize() {
        // Code d'initialisation exécuté après le chargement du FXML
        btnValider.setDisable(true);
        
        // Activer le bouton seulement si le champ n'est pas vide
        champNom.textProperty().addListener((obs, oldVal, newVal) -> {
            btnValider.setDisable(newVal.trim().isEmpty());
        });
    }
    
    @FXML
    private void handleValider() {
        String nom = champNom.getText();
        if (!nom.trim().isEmpty()) {
            labelMessage.setText("Bonjour, " + nom + " !");
            champNom.clear();
        }
    }
}

🎯 Autres types d'événements

En plus de onAction, Scene Builder permet de définir d'autres gestionnaires d'événements :

• onKeyPressed : Quand une touche est pressée
• onKeyReleased : Quand une touche est relâchée
• onMouseClicked : Quand on clique avec la souris
• onMouseEntered : Quand la souris entre dans le composant
• onMouseExited : Quand la souris sort du composant

⚠️ Erreurs courantes

Voici les erreurs les plus courantes et comment les éviter :

1. fx:id ne correspond pas au nom du champ

<!-- FXML : fx:id="labelMessage" -->

// ❌ Erreur : nom différent
@FXML
private Label message;

// ✅ Correct
@FXML
private Label labelMessage;

2. Méthode d'événement introuvable

<!-- FXML : onAction="handleValider" -->

// ❌ Erreur : méthode non annotée @FXML ou nom incorrect
private void valider() { }

// ✅ Correct
@FXML
private void handleValider() { }

3. Contrôleur non déclaré dans le FXML

<!-- ❌ Erreur : pas de fx:controller -->
<VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
<!-- ✅ Correct -->
<VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1" 
      fx:controller="application.MonController">