EXPOSE DE JAVA
FXML /SceneBuilder
INFORMATIQUE II
Rédigé et Présenté par :
NOMS ET PRENOMS MATRICULES
DIBAKTO DEBAMI MANICH JORDAN CM-UDS-22SCI 1474
DJONTU ETIENNE SOREL CM-UDS-22SCI 1732
NANKAP WANDJI ANGE NOEL MA CM-UDS-22SCI 0657
MERE
CM-UDS-22SCI 0110
CHENDJOU TAJO CHRIS FLAVIEN
Sous la supervision de : Pr TCHOUPE MAURICE
ANNEE ACADEMIQUE 2023/2024
SOMMAIRE
I. Différentes façons de créer une interface graphique en
Java
II. Fichier FXML
III. L’outil scène Builder
IV. Liaison du fichier FXML au programme
i. Différentes façons de créer une interface graphique java
Avec le java les interfaces graphiques peuvent être créés
de deux manières, notamment :
Méthode procédurale
Ici on fait appel au code Java qui utilise les API de la plate-forme et les
composants/conteneur à disposition (classes et interfaces). De ce fait
pour créer une interface de manière procédural, on peut suivre les
étapes suivantes :
1. Importer les classes nécessaires pour la création de l’interface
graphique, telles que [Link],
[Link], [Link],
[Link], [Link], etc.
2. Créer une classe principale qui étend la classe Application.
3. Déclare toutes les variables pour les composants de l’interface
graphique, tels que les boutons, les zones de texte, les labels, etc.
4. Initialiser les variables et les ajouter à la scène en utilisant la
méthode setRoot().
5. Définir les propriétés des différents composants, telles que la
taille, la couleur, la police, etc.
6. Ajouter des écouteurs d’événements pour les différents
composants en utilisant la méthode setOnAction().
7. Définir les actions à effectuer lorsque les différents événements
sont déclenchés, tels que l’appui sur un bouton ou la saisie de
texte.
La subtilité de la manière procédurale pour créer des interfaces
graphiques en JavaFX est qu’elle permet de créer des interfaces
graphiques de manière plus structurée et organisée. En utilisant une
approche procédurale, chaque composant de l’interface graphique est
défini et initialisé séparément, ce qui permet un contrôle plus précis sur
la disposition et les propriétés de chaque composant. En outre, cela
facilite également la maintenance et la modification de l’interface
graphique, car chaque composant est défini de manière indépendante.
Méthode Déclarative
À ce niveau, l’interface est décrite dans un fichier Fxml qui sera
ensuite chargé dynamiquement dans l’application. Pour créer une
interface graphique en JavaFX de manière déclarative, on peut suivre
les étapes suivantes :
[Link]éer un fichier FXML qui décrit l'interface graphique en utilisant
des balises XML.
[Link] la classe FXMLLoader pour charger le fichier FXML et
créer l'interface graphique correspondante.
3.Définir les propriétés des différents composants, telles que la
taille, la couleur, la police, etc. en utilisant des attributs XML.
[Link] des écouteurs d'événements pour les différents
composants en utilisant des balises spécifiques, telles que <Button
onAction="handleButtonAction" />, où "handleButtonAction" est le
nom de la méthode qui sera appelée lorsqu'un bouton est cliqué.
La subtilité de la manière déclarative pour créer des interfaces
graphiques en JavaFX est qu'elle permet de décrire l'interface graphique
en utilisant des balises XML, ce qui permet une séparation claire entre la
présentation et la logique de l'application. Cela facilite également la
maintenance et la modification de l'interface graphique, car les
modifications peuvent être apportées directement au fichier FXML sans
avoir besoin de modifier le code Java sous-jacent. En outre, cela permet
également une meilleure collaboration entre les développeurs et les
designers, car les designers peuvent se concentrer sur la conception de
l'interface graphique sans avoir besoin de connaître le code Java sous-
jacent.
ii. Fichier FXML
Un fichier FXML (File Extensible Markup Language) est un fichier au
format XML qui permet de créer des interfaces. Il décrit l'interface via ses
composants, sa disposition et ses conteneurs.
Pour créer un fichier FXML on peut soit utiliser scène Builder ou alors
un éditeur de texte (Notepad++, sublime Text ...) Plus généralement, on
utilise l'outil scène Builder qui permet de créer l'inter- face de manière
conviviale et de générer automatiquement le fichier FXML
correspondant. Après la création du fichier FXML, son interprétation s'en
suit.
Pour Interpréter ou charger des fichiers FXML en Java Fx, on utilise
l'objet FXML Loader. L’appel de la méthode load() sur l'objet FXML
loader, charge le fichier et crée une hiérarchie de nœud qui représentera
l'interface graphique décrit par ce fichier. L’objet FXML loader crée
également une instance de contrôleur associé au fichier et qui peut être
utilisé pour gérer l’interaction entre l’interface graphique et la logique de
l’application.
En gros, les objets créés par le chargement de fichiers FXML peuvent
être assigné à la racine d’un graphe de scène ou représenter un des
nœuds dans une graphe de scène créé de manière procédurale.
iii. L’outil scène Builder
Développé par Oracle en tant que JavaFX Scene-builder, puis reprit
en charge par GLUON, L’outil scène Builder est in logiciel de montage
d’interface graphique. Il utilise la syntaxe de l’API JavaFX pour «
construire sa scène » comme son nom L’indique.
Le logiciel, basé sur le cliquer-glisser-déposer, permet la création des
fenêtres en temps réel, qui seront utilisés comme elles sont vues. On
parle alors de WYSIWYG (What You See Is What You Get). L’interface
Construit Sera plus tard enregistré avec l’extension. FXML) et utilisé
dans une IDE pour en faire application complète.
Concrètement, la fenêtre principal de scène Builder est divisé en trois
parties : un panneau latéral a gauche qui contient tous les composants
pour la création d’une fenêtre(bouton, zone de texte, panneau….etc), un
panneau latéral a droite qui contient les propriétés d’un composant
choisi à un moment donné, et une zone vide au milieu la où en dépose
et agence notre fenêtre. A la fin de la conception de notre (nos)
fenêtre(s), le fichier est enregistré, puis exécuté grâce à la classe
FXMLLOADER, qui générera le code correspondant au graphique monté
au préalable.
L’avantage de cette méthode est que n’importe qui peut l’utiliser. Ce
n’est plus seulement le programmeur mais tout autre personne (ne
maîtrisant pas le langage Java) qui peut l’utiliser.
iv. Liens FXML et Programme.
Nous allons explorer les liens entre le fichier FXML et le programme
Java associé.
** attribut fx :id
Le fichier FXML contient la structure de l'interface, définissant les
éléments tels que les contrôles, les mises en page et les styles. Le
fichier est ensuite lie au programme Java correspondant, qui contient la
logique de l'interface. Les éléments définis dans le fichier FXML
peuvent être référencés et manipulés dans le code Java en utilisant les
annotations. Dans le fichier FXML pour établir le lien Java entre les
composants de l'interface utilise l'attribut fx : id : lorsqu' un composant tel
qu'un contrôle ou un élément de mise en page est défini dans le fichier
FXML, un identifiant unique lui est attribué grâce à l'attribut fx: id
Exemple : un bouton peut être défini dons le fichier FXML avec l'attribut
fx : id= ‘’ monboutton ‘’
Ensuite, dans le programme Java, ce composant peut être référence en
utilisent cet identifiant. Pour le faire, le développeur utilise des
annotations pour injecter le composant dans le code Java. En utilisant
@FXML par exemple le développeur peut lier le composant défini dans
le fichier FXML a une variable dans le code Java
Une fois que le lien entre le composant et le programme Java est établi,
le développeur peut manipuler et interagir avec lui dans code java. Par
exemple, il peut défini des actions a effectué lorsqu’un bouton est clique
ou modifier les propriété d’un élément de mise en page.
En bref fx :id est utilise pour identifier les éléments de
l’interface utilisateur dans un fichier FXML ce qui permet au code java
associe d’accéder et de manipuler ces éléments de manier structurée et
organisée.
**fx contrôler
Le contrôler est une classe java qui contient la logique de l’interface
utilisateur définie dans le fichier FXML est charge java FX utilise l’attribut
fx : contrôler pour instancier le contrôleur spécifie l’attribut fx : contrôler
prend comme valeur le nom de la classe du contrôleur et cette classe
doit être accessible dans le chemin de classe de l’application
Annexe
Fenêtre de scène Builder
Contenu du fichier FXML
