TP : Scene Builder

 

Tuto Scene Builder 

Étape 1 : Téléchargement et Installation des Prérequis

Pour commencer à travailler avec JavaFX et Scene Builder, vous devez télécharger deux éléments essentiels :

1. Télécharger Scene Builder : Accédez au lien indiqué dans les sources pour télécharger Scene Builder. Si vous utilisez Windows, téléchargez la version Windows.
2. Télécharger le SDK JavaFX : Rendez-vous au lien fourni pour télécharger le SDK (Software Development Kit). Ce téléchargement se fera sous forme de fichier ZIP. Une fois téléchargé, vous devez le dézipper pour obtenir le dossier du SDK.
3. Installer le plugin Eclipse EFX : Dans Eclipse, allez dans le menu "Help", puis "Eclipse Marketplace". Recherchez "EFX CIPS" et installez ce plugin si ce n'est pas déjà fait.

Étape 2 : Configuration d'Eclipse et de JavaFX

Une fois les installations de base terminées, vous devez indiquer à Eclipse où trouver Scene Builder :

1. Allez dans "Windows", puis "Preferences".
2. Dans la fenêtre des préférences, cherchez "Java FX".
3. Cliquez sur "Browse" (Parcourir) et sélectionnez l'exécutable de Scene Builder (scene builder executable).
4. Cliquez sur "Apply and close" (Appliquer et fermer).

Étape 3 : Création et Configuration du Projet JavaFX

1. Créer un projet JavaFX : Créez un nouveau projet en allant dans la section "Java FX" et en sélectionnant "Java effect project" (vous pouvez le nommer, par exemple, intro to scene builder).
2. Ajouter les JARs externes (SDK) : Pour importer les classes nécessaires et supprimer les erreurs, vous devez ajouter les fichiers JAR du SDK JavaFX à votre projet.

• Faites un clic droit sur votre projet, allez dans "Properties" (Propriétés).
• Allez dans "Java Build Path".
• Sélectionnez l'onglet "Libraries" (Bibliothèques).
• Allez dans "Module Path" et cliquez sur "Add External JARs" (Ajouter des JARs externes).
• Ouvrez le dossier du SDK JavaFX que vous avez dézippé à l'Étape 1.
• Accédez au dossier library (bibliothèque), sélectionnez tous les fichiers JAR, et ouvrez-les.
• Cliquez sur "Apply and close". Les erreurs devraient maintenant disparaître.

Étape 4 : Configuration des Arguments d'Exécution

Le projet ne fonctionnera pas immédiatement après la création. Vous devez configurer les arguments de la machine virtuelle (VM) :

1. Allez dans "Run as" (Exécuter comme), puis "Run configuration" (Configuration d'exécution).
2. Allez dans l'onglet "Argument".
3. Copiez et collez la configuration nécessaire dans la section "VM argument".
4. Cliquez sur "Apply run" (Appliquer et exécuter).

Étape 5 : Création du Contrôleur et du Fichier FXML

Pour lier l'interface graphique (FXML) à votre logique de code (Java), vous avez besoin d'un contrôleur et d'un fichier FXML :

1. Créer la classe Contrôleur : Créez une nouvelle classe, par exemple main controller.
2. Créer le fichier FXML : Dans le package de l'application, créez un nouveau fichier qui doit être un fichier FXML (par exemple, main view.FXML).

Étape 6 : Conception de l'Interface avec Scene Builder

1. Ouvrir avec Scene Builder : Faites un clic droit sur le fichier FXML et choisissez "Open with scene builder" (Ouvrir avec Scene Builder).
2. Définir le Contrôleur FX : Dans Scene Builder, dans la section du contrôleur, vous devez indiquer le nom du package suivi du nom de la classe du contrôleur (par exemple, package name.controller class name ou controller.main controller).
3. Ajouter des éléments : Vous pouvez glisser-déposer des conteneurs (comme un Anchor Pane) et des composants (comme un Button et un Label).
4. Configurer les propriétés du Bouton :

• Dans l'onglet "Properties" (Propriétés), vous pouvez changer le texte affiché (par exemple, Submit) et le style.
• Dans l'onglet "Code", donnez un ID au bouton (nom de la variable, par exemple my button).
• Définissez la méthode qui sera exécutée lors du clic dans on action (par exemple, handle click).
• Configurer les propriétés du Label : Donnez un nom au Label (par exemple, my label) et enregistrez.

Étape 7 : Lier le Design au Code Java (Squelette du Contrôleur)

Vous devez maintenant transférer les IDs et les méthodes on action définies dans Scene Builder vers votre classe Contrôleur Java :

1. Dans Scene Builder, allez dans le menu "View".
2. Sélectionnez "Show Sample Controller Skeleton" (Afficher le squelette du contrôleur).
3. Copiez cette partie de code générée (qui contient les déclarations des variables comme @FXML private Button myButton; et les signatures des méthodes comme @FXML private void handleClick();).
4. Collez ce code dans votre classe Contrôleur.
5. Enregistrez le fichier Contrôleur.

Étape 8 : Implémenter la Logique

Vous pouvez maintenant écrire le code qui sera exécuté lorsque l'utilisateur interagira avec l'interface :

1. Dans la méthode d'action définie (par exemple, handle click), vous pouvez ajouter la logique. Par exemple, pour modifier le texte du label lors du clic : my label.set text("hello world").
2. Dans la classe principale, assurez-vous que le chargement du FXML est correct en utilisant loader.load et en faisant référence à votre fichier FXML (main view.FXML).

Exemple d'implémentation de Login (travail à faire).

Pour réaliser un formulaire de connexion simple en utilisant Scene Builder, comme décrit dans les sources, vous devez assembler et configurer les éléments suivants :

1. Structure et Conteneur
2. Conteneur Principal (Pane) : Utilisez généralement un Anchor Pane pour contenir et organiser les éléments de l'interface graphique,.
3. Éléments du Formulaire de Connexion

Le formulaire de connexion nécessite des champs de saisie, des étiquettes descriptives et un bouton d'action.

1. Champs de Saisie (Text Fields) :

    ◦ Ajoutez un Text Field destiné au nom d'utilisateur (username).

    ◦ Ajoutez un deuxième Text Field destiné au mot de passe (password).

2. Étiquettes Descriptives (Labels) :

    ◦ Ajoutez un Label pour identifier le champ du nom d'utilisateur (par exemple, affichant "username").

    ◦ Ajoutez un Label pour identifier le champ du mot de passe (par exemple, affichant "password").

3. Bouton d'Action (Button) :

    ◦ Ajoutez un Button qui servira au processus de connexion (login),.

III. Éléments de Retour d'Information (Labels de Statut)

Ces labels servent à informer l'utilisateur du succès ou de l'échec de la connexion.

1. Warning Label (Erreur) :

    ◦ Créez un Label destiné à servir d'avertissement ou d'erreur.

    ◦ Ce label doit être configuré pour être de couleur rouge.

    ◦ Il doit être rendu non visible initialement,. Il sera rendu visible dans le code Java si la connexion échoue (par exemple, affichant "invalid password"),.

2. Success Label (Succès) :

    ◦ Créez un autre Label pour afficher un message de succès (par exemple, "you are logged in successfully").

    ◦ Ce label doit être configuré pour être de couleur verte.

    ◦ Il doit être rendu non visible (caché) initialement.

1. Configuration du Code dans Scene Builder

Pour que le code Java puisse interagir avec ces éléments, vous devez les configurer dans l'onglet Code de Scene Builder.

1. IDs des Champs : Attribuez un ID à chaque champ de saisie (par exemple, username et password). L'ID est le nom de la variable utilisée dans le contrôleur Java.
2. Méthode d'Action du Bouton : Pour le bouton de connexion (login), définissez le nom de la méthode qui sera exécutée lors du clic dans la propriété on action (par exemple, handle login).
3. IDs des Labels de Statut : Attribuez des IDs aux labels de statut (par exemple, warning label et success label) pour pouvoir les modifier et les rendre visibles via le code Java.
4. Éléments de Navigation (Optionnels)

Les sources mentionnent également l'ajout d'une barre de menu pour enrichir l'interface.

1. Menu Bar : Vous pouvez ajouter une Menu Bar.
2. Menu Items : Dans cette barre, vous pouvez ajouter des options de navigation comme File, View, Close, Edit, Delete, Open, Upload Image, ou Log Out.

 

 

 

Reproduisez ces 2 écrans :