7.1.2 – Modifier le root FXML

Parfois, vous voulez changer le contenu d'un écran sans créer une nouvelle Scene complète. Au lieu de changer de Scene, vous pouvez simplement remplacer le root (l'élément racine) de votre FXML. C'est plus rapide et plus simple pour des changements de contenu dans le même écran.

🎯 Quand utiliser cette méthode ?

Modifier le root FXML est utile quand :

• Vous voulez changer le contenu d'un écran sans changer de fenêtre
• Vous avez un menu latéral qui reste fixe et seul le contenu central change
• Vous voulez éviter de créer trop de Scenes différentes
• Le changement est simple (juste remplacer une partie de l'interface)

📝 Exemple simple : Changer le contenu central

Créons un exemple très simple : un écran avec un BorderPane qui a un menu à gauche et un contenu à droite. Quand on clique sur un bouton du menu, on change juste le contenu de droite.

Étape 1 : Créer l'écran principal dans Scene Builder

Créez un fichier ecranPrincipal.fxml dans Scene Builder :

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Button?>
<?import javafx.scene.layout.BorderPane?>
<?import javafx.scene.layout.VBox?>

<BorderPane xmlns="http://javafx.com/javafx"
            xmlns:fx="http://javafx.com/fxml"
            fx:controller="application.EcranPrincipalController"
            stylesheets="style="".css">
   <left>
      <VBox spacing="10.0">
         <children>
            <Button fx:id="btnAccueil" onAction="#afficherAccueil" text="Accueil" />
            <Button fx:id="btnProfil" onAction="#afficherProfil" text="Profil" />
            <Button fx:id="btnParametres" onAction="#afficherParametres" text="Paramètres" />
         </children>
      </VBox>
   </left>
   <center>
      <VBox fx:id="zoneContenu" />
   </center>
</BorderPane>

Étape 2 : Créer les contenus à afficher dans Scene Builder

Créez maintenant trois petits FXML pour les différents contenus. Commençons par le contenu d'accueil :

Créez un fichier contenuAccueil.fxml dans Scene Builder :

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.control.Label?>
<?import javafx.scene.layout.VBox?>

<VBox xmlns="http://javafx.com/javafx"
      xmlns:fx="http://javafx.com/fxml"
      spacing="20.0">
   <children>
      <Label text="Bienvenue sur la page d'accueil !" />
      <Label text="Ceci est le contenu principal" />
   </children>
</VBox>

Créez de la même manière contenuProfil.fxml et contenuParametres.fxml avec des textes différents.

Étape 3 : Le contrôleur (très simple !)

Le contrôleur charge les différents contenus et les affiche dans la zone centrale :

package application;

import javafx.fxml.FXML;
import javafx.fxml.FXMLLoader;
import javafx.scene.layout.VBox;
import java.io.IOException;

public class EcranPrincipalController {
    
    // La zone où on va changer le contenu
    @FXML
    private VBox zoneContenu;
    
    // Méthode appelée quand on clique sur "Accueil"
    @FXML
    private void afficherAccueil() {
        chargerContenu("contenuAccueil.fxml");
    }
    
    // Méthode appelée quand on clique sur "Profil"
    @FXML
    private void afficherProfil() {
        chargerContenu("contenuProfil.fxml");
    }
    
    // Méthode appelée quand on clique sur "Paramètres"
    @FXML
    private void afficherParametres() {
        chargerContenu("contenuParametres.fxml");
    }
    
    // Méthode qui charge un FXML et le met dans zoneContenu
    private void chargerContenu(String cheminFXML) {
        try {
            // Charger le FXML
            FXMLLoader loader = new FXMLLoader(getClass().getResource(cheminFXML));
            VBox nouveauContenu = loader.load();
            
            // Vider la zone de contenu actuelle
            zoneContenu.getChildren().clear();
            
            // Ajouter le nouveau contenu
            zoneContenu.getChildren().add(nouveauContenu);
            
        } catch (IOException e) {
            System.err.println("Erreur lors du chargement de " + cheminFXML);
            e.printStackTrace();
        }
    }
}

Étape 4 : La classe Main (très simple aussi)

La classe Main charge juste l'écran principal :

package application;

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

public class Main extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        try {
            // Charger l'écran principal
            FXMLLoader loader = new FXMLLoader(getClass().getResource("/ecranPrincipal.fxml"));
            Scene scene = new Scene(loader.load());
            
            // Afficher la fenêtre
            primaryStage.setScene(scene);
            primaryStage.setTitle("Mon Application");
            primaryStage.setWidth(800);
            primaryStage.setHeight(600);
            primaryStage.show();
            
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

🔄 Comment ça fonctionne ?

Voici ce qui se passe étape par étape :

1. Au démarrage : Main charge ecranPrincipal.fxml qui affiche le menu à gauche et une zone vide au centre
2. L'utilisateur clique sur "Accueil" dans le menu
3. JavaFX appelle afficherAccueil() dans le contrôleur
4. Le contrôleur charge contenuAccueil.fxml
5. Le contrôleur vide la zone centrale avec clear()
6. Le contrôleur ajoute le nouveau contenu dans la zone
7. L'écran se met à jour : le menu reste à gauche, seul le contenu de droite change !

🎨 Amélioration : Afficher un contenu par défaut

Pour afficher un contenu dès le démarrage, ajoutez une méthode initialize() dans le contrôleur :

@FXML
private void initialize() {
    // Afficher le contenu d'accueil au démarrage
    afficherAccueil();
}

💡 Points clés à retenir

• Modifier le root : Changez le contenu d'une zone sans changer de Scene complète
• getChildren().clear() : Vide une zone de son contenu
• getChildren().add() : Ajoute un nouveau contenu dans une zone
• FXML séparés : Créez des FXML séparés pour chaque contenu dans Scene Builder
• FXMLLoader : Utilisez cette classe pour charger les FXML de contenu
• initialize() : Méthode appelée automatiquement pour initialiser l'écran
• Couleurs distinctes : Utilisez des couleurs différentes pour chaque contenu afin de voir clairement le changement

7.1.3 – Structure multi-écrans simple

Quand votre application a plusieurs écrans (3, 4, 5 ou plus), il devient important d'organiser votre code de manière claire. Cette section vous montre comment structurer un projet avec plusieurs écrans de façon simple et maintenable.

🎯 Pourquoi organiser son code ?

Quand vous avez seulement 2 écrans, mettre toute la logique dans Main.java fonctionne. Mais avec plus d'écrans, cela devient vite difficile à gérer :

• Le fichier Main.java devient très long
• Il est difficile de trouver quelle méthode charge quel écran
• Ajouter un nouvel écran nécessite de modifier plusieurs endroits
• Le code devient difficile à maintenir

📁 Structure organisée d'un projet

Voici comment organiser un projet avec plusieurs écrans :

src/application/
├── Main.java                    # Point d'entrée (très simple)
├── NavigationManager.java        # Gère tous les écrans
├── AccueilController.java       # Contrôleur de l'écran d'accueil
├── ProfilController.java        # Contrôleur de l'écran de profil
├── ParametresController.java    # Contrôleur de l'écran de paramètres
└── AProposController.java       # Contrôleur de l'écran "À propos"

resources/
├── accueil.fxml
├── profil.fxml
├── parametres.fxml
├── aPropos.fxml
└── style.css

💻 Étape 1 : Créer NavigationManager (le cœur du système)

La classe NavigationManager est responsable de charger tous les écrans et de les afficher. C'est elle qui centralise toute la navigation :

package application;

import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;
import java.util.HashMap;
import java.util.Map;

public class NavigationManager {
    
    // Le Stage (la fenêtre) de l'application
    private Stage stage;
    
    // On stocke toutes les Scenes dans une Map (comme un dictionnaire)
    // Clé = nom de l'écran, Valeur = la Scene
    private Map<String, Scene> scenes = new HashMap<>();
    
    // Constructeur : on lui donne le Stage
    public NavigationManager(Stage stage) {
        this.stage = stage;
    }
    
    // Méthode pour charger un écran (si pas déjà chargé)
    private Scene chargerScene(String nomFXML, String nomEcran) {
        // Si on l'a déjà chargé, on le récupère
        if (scenes.containsKey(nomEcran)) {
            return scenes.get(nomEcran);
        }
        
        // Sinon, on le charge
        try {
            FXMLLoader loader = new FXMLLoader(getClass().getResource(nomFXML));
            Scene scene = new Scene(loader.load());
            
            // On le stocke pour ne pas le recharger
            scenes.put(nomEcran, scene);
            
            // On donne la référence au contrôleur (s'il en a besoin)
            Object controller = loader.getController();
            if (controller instanceof AccueilController) {
                ((AccueilController) controller).setNavigationManager(this);
            } else if (controller instanceof ProfilController) {
                ((ProfilController) controller).setNavigationManager(this);
            } else if (controller instanceof ParametresController) {
                ((ParametresController) controller).setNavigationManager(this);
            } else if (controller instanceof AProposController) {
                ((AProposController) controller).setNavigationManager(this);
            }
            
            return scene;
            
        } catch (Exception e) {
            System.err.println("Erreur lors du chargement de " + nomFXML);
            e.printStackTrace();
            return null;
        }
    }
    
    // Méthodes publiques pour afficher chaque écran
    public void afficherAccueil() {
        Scene scene = chargerScene("accueil.fxml", "accueil");
        if (scene != null) {
            stage.setScene(scene);
        }
    }
    
    public void afficherProfil() {
        Scene scene = chargerScene("profil.fxml", "profil");
        if (scene != null) {
            stage.setScene(scene);
        }
    }
    
    public void afficherParametres() {
        Scene scene = chargerScene("parametres.fxml", "parametres");
        if (scene != null) {
            stage.setScene(scene);
        }
    }
    
    public void afficherAPropos() {
        Scene scene = chargerScene("aPropos.fxml", "aPropos");
        if (scene != null) {
            stage.setScene(scene);
        }
    }
}

💻 Étape 2 : Modifier les contrôleurs (très simple)

Les contrôleurs deviennent encore plus simples. Ils appellent juste NavigationManager :

Exemple : AccueilController

package application;

import javafx.fxml.FXML;

public class AccueilController {
    
    private NavigationManager navigationManager;
    
    // Méthode appelée quand on clique sur "Voir le profil"
    @FXML
    private void allerAuProfil() {
        if (navigationManager != null) {
            navigationManager.afficherProfil();
        }
    }
    
    // Méthode appelée quand on clique sur "Paramètres"
    @FXML
    private void allerAuxParametres() {
        if (navigationManager != null) {
            navigationManager.afficherParametres();
        }
    }
    
    // Méthode appelée quand on clique sur "À propos"
    @FXML
    private void allerAAPropos() {
        if (navigationManager != null) {
            navigationManager.afficherAPropos();
        }
    }
    
    // NavigationManager appelle cette méthode pour se connecter
    public void setNavigationManager(NavigationManager navigationManager) {
        this.navigationManager = navigationManager;
    }
}

💻 Étape 3 : La classe Main (ultra simple)

La classe Main devient très simple. Elle crée juste le NavigationManager et affiche l'écran d'accueil :

package application;

import javafx.application.Application;
import javafx.stage.Stage;

public class Main extends Application {
    
    @Override
    public void start(Stage primaryStage) {
        // Créer le gestionnaire de navigation
        NavigationManager navigationManager = new NavigationManager(primaryStage);
        
        // Afficher l'écran d'accueil
        navigationManager.afficherAccueil();
        
        // Configurer la fenêtre
        primaryStage.setTitle("Mon Application Multi-Écrans");
        primaryStage.setWidth(800);
        primaryStage.setHeight(600);
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

🎨 Étape 4 : Créer les écrans dans Scene Builder

Créez vos écrans normalement dans Scene Builder. Par exemple, pour l'écran d'accueil :

1. Créez accueil.fxml dans Scene Builder
2. Ajoutez un BorderPane
3. Ajoutez des boutons : "Voir le profil", "Paramètres", "À propos"
4. Définissez le contrôleur : application.AccueilController
5. Ajoutez le CSS : style.css
6. Donnez des actions aux boutons : #allerAuProfil, #allerAuxParametres, #allerAAPropos

Faites de même pour les autres écrans (profil.fxml, parametres.fxml, aPropos.fxml).

🔄 Comment ajouter un nouvel écran ?

Pour ajouter un nouvel écran (par exemple "Contact"), suivez ces étapes :

1. Créer le FXML : contact.fxml dans Scene Builder
2. Créer le contrôleur : ContactController.java
3. Ajouter dans NavigationManager :
   • Ajouter un else if dans chargerScene() pour donner la référence
   • Ajouter la méthode afficherContact()
4. C'est tout ! Vous pouvez maintenant naviguer vers cet écran depuis n'importe où

✅ Avantages de cette structure

• Code organisé : Chaque classe a une responsabilité claire
• Facile à étendre : Pour ajouter un nouvel écran, ajoutez juste une méthode dans NavigationManager
• Contrôleurs simples : Les contrôleurs sont très courts et faciles à comprendre
• Main simple : La classe Main reste très courte
• Performance : Les écrans sont chargés une seule fois et réutilisés

💡 Points clés à retenir

• NavigationManager : Centralise toute la gestion des écrans
• Map pour stocker les Scenes : Évite de recharger les écrans plusieurs fois
• Contrôleurs simples : Ils appellent juste navigationManager.afficherXXX()
• Main très simple : Crée juste le NavigationManager et affiche l'accueil
• Facile à étendre : Ajouter un nouvel écran nécessite juste quelques lignes
• Structure claire : Chaque classe a une responsabilité bien définie