2.1.2 – Avantages du FXML vs code Java

Utiliser FXML pour créer vos interfaces JavaFX offre de nombreux avantages par rapport à la création purement en code Java. Cette section explore ces avantages en détail.

🎨 Séparation de la vue et de la logique

Le principal avantage de FXML est la séparation claire entre la présentation (vue) et la logique métier :

• FXML : Contient uniquement la description de l'interface (quels composants, comment ils sont organisés)
• Contrôleur Java : Contient la logique (que faire quand on clique sur un bouton, comment traiter les données)

🔄 Réutilisabilité

Un fichier FXML peut être réutilisé dans différentes parties de votre application :

• Composants réutilisables : Créez un composant personnalisé dans un FXML et réutilisez-le plusieurs fois
• Modularité : Divisez votre interface en plusieurs fichiers FXML plus petits et gérables
• Chargement dynamique : Chargez différents FXML selon le contexte de l'application

🛠️ Maintenance facilitée

FXML rend la maintenance de votre code plus simple :

• Modifications visuelles sans recompilation : Modifiez le FXML et rechargez l'application sans recompiler le code Java
• Code Java plus propre : Le code Java se concentre sur la logique, pas sur la création de composants
• Lisibilité : La structure hiérarchique du FXML est plus facile à comprendre que du code Java imbriqué

👁️ Édition visuelle avec Scene Builder

FXML peut être édité visuellement avec Scene Builder :

• Glisser-déposer : Ajoutez des composants en les glissant depuis la palette
• Prévisualisation en temps réel : Voyez immédiatement le résultat de vos modifications
• Configuration des propriétés : Modifiez les propriétés des composants via une interface graphique
• Pas besoin de connaître le code : Les designers peuvent créer des interfaces sans écrire de code

📊 Comparaison détaillée

Voici un tableau comparatif entre FXML et code Java pur :

💡 Quand utiliser FXML vs Code Java ?

Bien que FXML soit recommandé pour la plupart des cas, il y a des situations où le code Java peut être préférable :

✅ Utilisez FXML pour :

• La structure principale de l'interface
• Les écrans complets de l'application
• Les composants réutilisables
• Quand vous voulez utiliser Scene Builder

✅ Utilisez le code Java pour :

• Les interfaces très simples (une fenêtre avec un Label)
• Les composants générés dynamiquement (créés en boucle)
• Les prototypes rapides
• Quand la structure change beaucoup selon les données

📝 Exemple comparatif complet

Voici le même formulaire de connexion créé de deux manières différentes :

Version Java (code impératif)

VBox root = new VBox(10);
root.setPadding(new Insets(20));
root.setAlignment(Pos.CENTER);

Label titre = new Label("Connexion");
titre.setFont(new Font("Arial", 24));
titre.setTextFill(Color.DARKBLUE);

TextField username = new TextField();
username.setPromptText("Nom d'utilisateur");
username.setPrefWidth(200);

PasswordField password = new PasswordField();
password.setPromptText("Mot de passe");
password.setPrefWidth(200);

Button btnConnexion = new Button("Se connecter");
btnConnexion.setPrefWidth(200);
btnConnexion.setOnAction(e -> {
    // Logique de connexion
});

root.getChildren().addAll(titre, username, password, btnConnexion);

Version FXML (déclarative)

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

<VBox spacing="10" alignment="CENTER" xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1">
   <padding>
      <Insets top="20" right="20" bottom="20" left="20"/>
   </padding>
   <children>
      <Label text="Connexion" style="-fx-font-size: 24px; -fx-text-fill: darkblue;"/>
      <TextField promptText="Nom d'utilisateur" prefWidth="200"/>
      <PasswordField promptText="Mot de passe" prefWidth="200"/>
      <Button text="Se connecter" prefWidth="200" onAction="#handleConnexion"/>
   </children>
</VBox>

2.1.3 – Déclaration du contrôleur (fx:controller)

Pour que votre fichier FXML puisse interagir avec le code Java, vous devez associer un contrôleur. Le contrôleur est une classe Java qui gère les événements et la logique de votre interface.

🎯 Qu'est-ce qu'un contrôleur ?

Un contrôleur est une classe Java qui :

• Gère les événements : Répond aux clics de boutons, aux saisies dans les champs, etc.
• Accède aux composants : Lit et modifie les valeurs des composants de l'interface
• Contient la logique métier : Traite les données, effectue les calculs, appelle les services

📝 Déclarer un contrôleur dans FXML

Pour associer un contrôleur à votre fichier FXML, utilisez l'attribut fx:controller sur l'élément racine :

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

<VBox xmlns="http://javafx.com/javafx" xmlns:fx="http://javafx.com/fxml/1" 
      fx:controller="application.MonController">
   <children>
      <Label fx:id="monLabel" text="Hello" />
      <Button fx:id="monBouton" text="Cliquer" onAction="#handleClick" />
   </children>
</VBox>

💻 Créer la classe contrôleur

La classe contrôleur doit respecter certaines conventions :

• Package : Doit correspondre au package spécifié dans fx:controller
• Annotations @FXML : Utilisez @FXML pour marquer les champs et méthodes liés au FXML
• Méthode initialize() : Optionnelle, appelée automatiquement après le chargement du FXML

Exemple de contrôleur simple

package application;

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

public class MonController {
    
    // Référence au Label dans le FXML (fx:id="monLabel")
    @FXML
    private Label monLabel;
    
    // Référence au Button dans le FXML (fx:id="monBouton")
    @FXML
    private Button monBouton;
    
    // Méthode appelée automatiquement après le chargement du FXML
    @FXML
    private void initialize() {
        // Code d'initialisation ici
        monLabel.setText("Initialisé !");
    }
    
    // Méthode appelée quand on clique sur le bouton (onAction="#handleClick")
    @FXML
    private void handleClick() {
        monLabel.setText("Clic détecté !");
        System.out.println("Le bouton a été cliqué");
    }
}

🔗 Liaison FXML ↔ Contrôleur

La liaison entre le FXML et le contrôleur se fait de plusieurs manières :

1. Liaison par fx:id

Utilisez fx:id dans le FXML et un champ annoté @FXML dans le contrôleur :

Dans le FXML :

<Label fx:id="monLabel" text="Hello" />
<TextField fx:id="champNom" />
<Button fx:id="btnValider" text="Valider" />

Dans le contrôleur :

@FXML
private Label monLabel;

@FXML
private TextField champNom;

@FXML
private Button btnValider;

2. Liaison des événements

Utilisez onAction (ou autres attributs d'événement) dans le FXML et une méthode annotée @FXML dans le contrôleur :

Dans le FXML :

<Button text="Cliquer" onAction="#handleClick" />
<TextField onKeyPressed="#handleKeyPress" />

Dans le contrôleur :

@FXML
private void handleClick() {
    // Code exécuté quand on clique sur le bouton
}

@FXML
private void handleKeyPress(KeyEvent event) {
    // Code exécuté quand on appuie sur une touche
}

📋 Exemple complet : Application avec contrôleur

Voici un exemple complet d'une application simple avec FXML et contrôleur :

1. Fichier main.fxml

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

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

2. Fichier MonController.java

package application;

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

public class MonController {
    
    @FXML
    private Label labelMessage;
    
    @FXML
    private TextField champTexte;
    
    @FXML
    private Button btnValider;
    
    @FXML
    private void initialize() {
        // Initialisation : désactiver le bouton au départ
        btnValider.setDisable(true);
        
        // Activer le bouton quand on tape dans le champ
        champTexte.textProperty().addListener((obs, oldVal, newVal) -> {
            btnValider.setDisable(newVal.trim().isEmpty());
        });
    }
    
    @FXML
    private void handleValider() {
        String nom = champTexte.getText();
        if (!nom.trim().isEmpty()) {
            labelMessage.setText("Bonjour, " + nom + " !");
            champTexte.clear();
        }
    }
}

3. Fichier Main.java (chargement du FXML)

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("main.fxml"));
        VBox root = loader.load();
        
        // Créer la Scene
        Scene scene = new Scene(root, 400, 300);
        
        // Afficher
        primaryStage.setScene(scene);
        primaryStage.setTitle("Mon Application");
        primaryStage.show();
    }
    
    public static void main(String[] args) {
        launch(args);
    }
}

⚠️ Erreurs courantes

Voici les erreurs les plus courantes lors de l'utilisation de contrôleurs :

1. Nom de package incorrect

<!-- ❌ Erreur : package incorrect -->
<VBox fx:controller="monpackage.MonController">
<!-- ✅ Correct -->
<VBox fx:controller="application.MonController">

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

<!-- FXML -->
<Label fx:id="monLabel" />

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

// ✅ Correct
@FXML
private Label monLabel;

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

<!-- FXML -->
<Button onAction="#handleClick" />

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

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