2.4.2 – Génération et liaison du contrôleur

Scene Builder peut vous aider à générer automatiquement la structure de base d'un contrôleur et à le lier à votre FXML. Cette section vous montre comment procéder.

🎯 Déclarer le contrôleur dans le FXML

Avant de générer le contrôleur, vous devez d'abord le déclarer dans le FXML :

1. Ouvrez votre fichier FXML dans Scene Builder
2. Sélectionnez l'élément racine (VBox, BorderPane, etc.)
3. Dans l'onglet Code de l'inspecteur, dans le champ Controller, entrez le nom complet de la classe (par exemple application.MonController)
4. Sauvegardez le fichier

📝 Créer le contrôleur manuellement

Pour créer un contrôleur dans Eclipse :

1. Dans Eclipse, faites un clic droit sur le package application (ou le package où vous voulez créer le contrôleur)
2. Sélectionnez New → Class
3. Donnez un nom à la classe (par exemple MonController)
4. Cliquez sur Finish
5. Ajoutez les annotations et méthodes nécessaires

🔗 Générer automatiquement les fx:id

Scene Builder peut vous aider à générer automatiquement les références dans le contrôleur :

1. Dans Scene Builder, définissez les fx:id pour vos composants (onglet Code)
2. Sauvegardez le fichier FXML
3. Dans Eclipse, créez votre classe contrôleur
4. Ajoutez les champs correspondants avec l'annotation @FXML

💻 Structure de base d'un contrôleur

Voici la structure de base que vous devez créer :

package application;

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

public class MonController {
    
    // Références aux composants du FXML
    @FXML
    private Label labelMessage;
    
    @FXML
    private TextField champNom;
    
    @FXML
    private Button btnValider;
    
    // Méthode d'initialisation (optionnelle)
    @FXML
    private void initialize() {
        // Code exécuté après le chargement du FXML
        // Par exemple : initialiser les valeurs par défaut
    }
    
    // Gestionnaires d'événements
    @FXML
    private void handleValider() {
        // Code exécuté quand on clique sur le bouton
    }
}

🔍 Vérifier la liaison FXML ↔ Contrôleur

Pour vérifier que la liaison fonctionne correctement :

1. Vérifiez le package : Le package dans fx:controller doit correspondre au package de votre classe
2. Vérifiez les fx:id : Les fx:id dans le FXML doivent correspondre aux noms des champs dans le contrôleur
3. Vérifiez les méthodes : Les noms dans onAction doivent correspondre aux méthodes dans le contrôleur
4. Testez l'application : Lancez l'application et vérifiez qu'il n'y a pas d'erreurs

⚠️ Erreurs courantes et solutions

Erreur 1 : Contrôleur introuvable

Symptôme : Erreur "Controller class not found"
Solution :

• Vérifiez que le package dans fx:controller est correct
• Vérifiez que la classe contrôleur existe et est compilée
• Vérifiez que le nom de la classe est correct (sensible à la casse)

Erreur 2 : fx:id introuvable

Symptôme : Erreur "fx:id 'xxx' has not been injected"
Solution :

• Vérifiez que le fx:id dans le FXML correspond exactement au nom du champ
• Vérifiez que le champ est annoté @FXML
• Vérifiez que le type du champ correspond au type du composant

Erreur 3 : Méthode d'événement introuvable

Symptôme : Erreur "Method 'xxx' not found"
Solution :

• Vérifiez que la méthode existe dans le contrôleur
• Vérifiez que la méthode est annotée @FXML
• Vérifiez que le nom de la méthode correspond à celui dans onAction

📋 Exemple complet : Créer un contrôleur de A à Z

Voici un exemple complet de création d'un contrôleur :

Étape 1 : Créer le FXML dans Scene Builder

1. Créez un fichier formulaire.fxml
2. Ajoutez un VBox comme racine
3. Ajoutez un Label avec fx:id="labelMessage"
4. Ajoutez un TextField avec fx:id="champNom"
5. Ajoutez un Button avec fx:id="btnValider" et onAction="handleValider"
6. Dans l'onglet Code du VBox, définissez Controller : application.FormulaireController
7. Sauvegardez

Étape 2 : Créer le contrôleur dans Eclipse

1. Dans Eclipse, créez une nouvelle classe FormulaireController dans le package application
2. Ajoutez les imports nécessaires
3. Ajoutez les champs avec @FXML
4. Ajoutez la méthode handleValider()

Étape 3 : Code du contrôleur

package application;

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

public class FormulaireController {
    
    @FXML
    private Label labelMessage;
    
    @FXML
    private TextField champNom;
    
    @FXML
    private Button btnValider;
    
    @FXML
    private void initialize() {
        // Initialisation : désactiver le bouton au départ
        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();
        }
    }
}

Étape 4 : Charger le FXML dans Main.java

package application;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.scene.layout.VBox;
import javafx.stage.Stage;

public class Main extends Application {
    
    @Override
    public void start(Stage primaryStage) throws Exception {
        // Charger le fichier FXML
        FXMLLoader loader = new FXMLLoader(getClass().getResource("formulaire.fxml"));
        VBox root = loader.load();
        
        // Créer la Scene
        Scene scene = new Scene(root, 400, 300);
        
        // Afficher
        primaryStage.setScene(scene);
        primaryStage.setTitle("Mon Formulaire");
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

2.4.3 – Organisation du dossier resources

Une bonne organisation de vos fichiers est essentielle pour maintenir un projet JavaFX propre et facile à maintenir. Cette section vous présente les bonnes pratiques pour organiser le dossier resources.

📁 Structure par défaut vs Structure recommandée

Structure par défaut d'e(fx)clipse

Quand vous créez un projet JavaFX avec e(fx)clipse, la structure par défaut est :

src/
└── application/
    ├── Main.java          # Classe principale
    ├── application.css    # Fichier CSS (créé automatiquement)
    └── (vos fichiers FXML ici si vous les créez)

Structure recommandée (avec dossier resources)

Pour une meilleure organisation, vous pouvez créer manuellement un dossier resources dans src et le configurer comme Source Folder :

src/
├── application/
│   ├── Main.java
│   ├── AccueilController.java
│   ├── ProfilController.java
│   └── ...
└── resources/             # Dossier à créer manuellement (Source Folder)
    ├── main.fxml          # Fichier FXML principal
    ├── accueil.fxml       # Fichier FXML pour l'écran d'accueil
    ├── profil.fxml        # Fichier FXML pour l'écran de profil
    ├── style.css          # Fichier CSS principal
    ├── theme-light.css    # Thème clair
    ├── theme-dark.css     # Thème sombre
    ├── images/            # Dossier pour les images
    │   ├── logo.png
    │   ├── icon.png
    │   └── ...
    └── styles/            # Dossier pour organiser les CSS
        └── style.css      # Exemple : CSS dans un sous-dossier
    └── fonts/             # Dossier pour les polices personnalisées
        └── custom-font.ttf

📂 Organisation par fonctionnalité

Pour des projets plus complexes, vous pouvez organiser par fonctionnalité :

resources/
├── vues/                  # Tous les fichiers FXML
│   ├── accueil.fxml
│   ├── profil.fxml
│   ├── parametres.fxml
│   └── ...
├── styles/                # Tous les fichiers CSS
│   ├── style.css
│   ├── theme-light.css
│   ├── theme-dark.css
│   └── components/
│       ├── buttons.css
│       └── forms.css
├── images/                # Images
│   └── ...
└── fonts/                 # Polices
    └── ...

🔗 Charger les fichiers depuis des sous-dossiers

Si vous organisez vos fichiers en sous-dossiers, vous devez adapter les chemins dans votre code :

Charger un FXML depuis un sous-dossier

Si vous utilisez un dossier resources configuré comme Source Folder :

// FXML dans src/resources/vues/accueil.fxml
// Le / au début indique la racine du classpath (resources devient partie du classpath)
FXMLLoader loader = new FXMLLoader(getClass().getResource("/vues/accueil.fxml"));
VBox root = loader.load();

Si vos fichiers sont dans le package application :

// FXML dans src/application/vues/accueil.fxml
// Pas de / au début : chemin relatif au package de la classe
FXMLLoader loader = new FXMLLoader(getClass().getResource("vues/accueil.fxml"));
VBox root = loader.load();

Lier un CSS depuis un sous-dossier

Si vous utilisez un dossier resources configuré comme Source Folder :

<!-- CSS dans src/resources/styles/style.css -->
<!-- Le @/ indique la racine du classpath (resources) -->
<VBox stylesheets="@/styles/style.css" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
   <!-- Contenu -->
</VBox>

Si vos fichiers sont dans le package application :

<!-- CSS dans src/application/styles/style.css -->
<!-- Le @ indique un chemin relatif au package -->
<VBox stylesheets="@styles/style.css" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
   <!-- Contenu -->
</VBox>

📋 Bonnes pratiques d'organisation

1. Nommage des fichiers

• FXML : Utilisez des noms en minuscules avec des tirets si nécessaire : formulaire-connexion.fxml
• CSS : Utilisez des noms descriptifs : style.css, theme-dark.css
• Images : Utilisez des noms clairs : logo.png, icone-bouton.png

2. Regrouper les fichiers liés

• Placez les fichiers FXML, CSS et contrôleurs liés dans le même package ou dossier
• Utilisez des noms cohérents : accueil.fxml → AccueilController.java

3. Séparer les ressources par type

• Créez des dossiers séparés pour les images, les polices, les sons, etc.
• Évitez de mélanger différents types de fichiers dans le même dossier

4. Documenter la structure

• Créez un fichier README.md dans le dossier resources pour documenter l'organisation
• Indiquez où se trouvent les différents types de fichiers

🎯 Exemple : Structure pour une application complète

Voici un exemple de structure pour une application avec plusieurs écrans :

src/
└── application/
    ├── Main.java
    ├── controllers/
    │   ├── AccueilController.java
    │   ├── ProfilController.java
    │   └── ParametresController.java
    └── models/
        └── Utilisateur.java

resources/
├── vues/
│   ├── accueil.fxml
│   ├── profil.fxml
│   └── parametres.fxml
├── styles/
│   ├── style.css
│   ├── theme-light.css
│   └── theme-dark.css
├── images/
│   ├── logo.png
│   ├── icones/
│   │   ├── home.png
│   │   └── settings.png
│   └── avatars/
│       └── default.png
└── fonts/
    └── custom-font.ttf

📝 Charger les ressources dans le code

Voici comment charger les différents types de ressources :

Charger un FXML

Avec dossier resources :

// Depuis src/resources/vues/accueil.fxml
FXMLLoader loader = new FXMLLoader(getClass().getResource("/vues/accueil.fxml"));
VBox root = loader.load();

Dans le package application :

// Depuis src/application/vues/accueil.fxml
FXMLLoader loader = new FXMLLoader(getClass().getResource("vues/accueil.fxml"));
VBox root = loader.load();

Charger une image

Avec dossier resources :

// Depuis src/resources/images/logo.png
Image logo = new Image(getClass().getResourceAsStream("/images/logo.png"));
ImageView imageView = new ImageView(logo);

Dans le package application :

// Depuis src/application/images/logo.png
Image logo = new Image(getClass().getResourceAsStream("images/logo.png"));
ImageView imageView = new ImageView(logo);

Charger un CSS

Avec dossier resources :

// Depuis src/resources/styles/style.css
scene.getStylesheets().add(getClass().getResource("/styles/style.css").toExternalForm());

Dans le package application :

// Depuis src/application/styles/style.css
scene.getStylesheets().add(getClass().getResource("styles/style.css").toExternalForm());

Charger une police

Avec dossier resources :

// Depuis src/resources/fonts/custom-font.ttf
Font customFont = Font.loadFont(getClass().getResourceAsStream("/fonts/custom-font.ttf"), 16);

Dans le package application :

// Depuis src/application/fonts/custom-font.ttf
Font customFont = Font.loadFont(getClass().getResourceAsStream("fonts/custom-font.ttf"), 16);

📥 Projet d'exemple

Pour voir un exemple concret d'organisation avec le dossier resources, vous pouvez télécharger ce projet Eclipse :

⚠️ Erreurs courantes

Erreur 1 : Fichier introuvable

Symptôme : NullPointerException ou "Resource not found"
Solution :

• Vérifiez que le fichier existe bien (dans src/application/ ou src/resources/)
• Vérifiez que le chemin est correct (sensible à la casse)
• Vérifiez que le fichier est bien inclus dans le build (dans les propriétés du projet Eclipse)
• Si vous utilisez un dossier resources : Assurez-vous qu'il est bien dans src et qu'il est configuré comme Source Folder (clic droit → Build Path → Use as Source Folder). Vérifiez dans .classpath qu'il y a une entrée <classpathentry kind="src" path="resources"/>

Erreur 2 : Chemin incorrect

Symptôme : Le fichier n'est pas trouvé malgré qu'il existe
Solution :

• Si le fichier est dans le package application : Utilisez un chemin relatif sans / au début (ex: "main.fxml" ou "vues/accueil.fxml")
• Si le fichier est dans resources (Source Folder) : Utilisez / au début pour indiquer la racine du classpath (ex: "/main.fxml" ou "/vues/accueil.fxml"). Le / cherche à la racine du classpath, et comme resources est un Source Folder, il fait partie du classpath.
• Vérifiez les séparateurs de dossier : utilisez / même sur Windows
• Important : Assurez-vous que resources est bien configuré comme Source Folder, sinon les chemins avec / ne fonctionneront pas

📋 Checklist d'organisation

Utilisez cette checklist pour vérifier que votre projet est bien organisé :

• ✅ Les fichiers sont organisés de manière logique (dans application ou dans resources si créé)
• ✅ Les fichiers FXML sont regroupés dans un dossier dédié
• ✅ Les fichiers CSS sont regroupés dans un dossier dédié
• ✅ Les images sont dans un dossier séparé
• ✅ Les noms de fichiers sont cohérents et descriptifs
• ✅ Les chemins dans le code correspondent à la structure réelle (avec ou sans / selon l'emplacement)
• ✅ Toutes les ressources sont accessibles depuis le code