Cours de JavaFX : Mes Premiers Pas

en JavaFx
Enseignant : M. YANKAM JOEL
Université de Dschang - Groupe Genius Répétition

L
E
JO
M
A
K
N
A
Y

Contact WhatsApp : +237 652027193 - Année académique : 2024-2025

Licence 02 Informatique
Introduction à JavaFX

JavaFX est une plateforme logicielle open source et gratuite qui permet de développer
des applications clientes fonctionnant de manière cohérente sur divers appareils. Avec
JavaFX, on peut créer des applications d’interface utilisateur graphique (GUI), ainsi que
des applications Internet ou de bureau. Toutes ces applications seront développées en
Java.
Dans ce chapitre, nous allons discuter de la structure d’une application JavaFX en

L
détail et apprendre à créer une application JavaFX avec un exemple.

E
Structure d’une Application JavaFX
JO
En général, une application JavaFX est composée de trois éléments principaux : Stage,
Scene et Nodes, comme illustré dans le diagramme suivant.
M
A
K
N
A
Y

Stage (Scène)
Un Stage (une fenêtre) contient tous les objets d’une application JavaFX. Il est re-
présenté par la classe Stage du package [Link]. Le stage principal est créé par la
plateforme elle-même. L’objet stage créé est passé comme argument à la méthode start()
de la classe Application (expliquée dans la section suivante).
Un stage a deux paramètres déterminant sa position : la largeur (Width) et la hauteur
(Height). Il est divisé en Zone de Contenu (Content Area) et Décorations (Barre de Titre
et Bordures).
Il existe cinq types de stages disponibles :
— Décoré (Decorated)
— Non décoré (Undecorated)

1
M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

— Transparent (Transparent)
— Unifié (Unified)
— Utilitaire (Utility)
Vous devez appeler la méthode show() pour afficher le contenu d’un stage.

Scene (Scène)
Une Scene représente le contenu physique d’une application JavaFX. Elle contient
tous les éléments d’un graphe de scène (Scene Graph). La classe Scene du package
[Link] représente l’objet scène. À un instant donné, l’objet scène est ajouté à un
seul stage.
Vous pouvez créer une scène en instanciant la classe Scene. Vous pouvez choisir la
taille de la scène en passant ses dimensions (hauteur et largeur) ainsi que le nœud racine
(root node) à son constructeur.

L
Graphe de Scène et Nœuds

E
Un graphe de scène est une structure de données arborescente (hiérarchique) repré-
sentant le contenu d’une scène. En revanche, un nœud est un objet visuel/graphique d’un
graphe de scène.
Un nœud peut inclure :
JO
— Des objets géométriques (graphiques) (2D et 3D) tels que : Circle, Rectangle,
Polygon, etc.
M

— Des contrôles d’interface utilisateur tels que : Button, Checkbox, ChoiceBox, TextArea,
etc.
A

— Des conteneurs (panneaux de mise en page) tels que : BorderPane, GridPane,

FlowPane, etc.
K

— Des éléments multimédias tels que : Audio, Video et Image.

La classe Node du package [Link] représente un nœud dans JavaFX. Cette
classe est la superclasse de tous les nœuds.
N

Un nœud est de trois types :

— Nœud Racine (Root Node) : Le premier graphe de scène est connu sous le nom
A

de nœud racine.
Y

— Nœud Parent (Branch Node/Parent Node) : Le nœud avec des nœuds enfants
est connu sous le nom de nœud parent. La classe abstraite nommée Parent du
package [Link] est la classe de base de tous les nœuds parents, et ces
nœuds parents seront des types suivants :
— Group : Un nœud de groupe est un nœud collectif qui contient une liste de
nœuds enfants. Chaque fois que le nœud de groupe est rendu, tous ses nœuds
enfants sont rendus dans l’ordre. Toute transformation ou effet appliqué au
groupe sera appliqué à tous les nœuds enfants.
— Region : C’est la classe de base de tous les contrôles d’interface utilisateur basés
sur les nœuds JavaFX, tels que Chart, Pane et Control.
— WebView : Ce nœud gère le moteur web et affiche son contenu.
— Nœud Feuille (Leaf Node) : Le nœud sans nœuds enfants est connu sous le nom
de nœud feuille. Par exemple, Rectangle, Ellipse, Box, ImageView, MediaView
sont des exemples de nœuds feuilles.

Enseignant : M. YANKAM JOEL 2 Contact : +237 652027193

 M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

Il est obligatoire de passer le nœud racine au graphe de scène. Si un Group est passé
comme racine, tous les nœuds seront coupés à la scène et toute modification de la taille
de la scène n’affectera pas la mise en page de la scène.

Création d’une Application JavaFX

Pour créer une application JavaFX, vous devez instancier la classe Application et
implémenter sa méthode abstraite start(). Dans cette méthode, nous écrirons le code
pour l’application JavaFX.

Classe Application
La classe Application du package [Link] est le point d’entrée de l’ap-
plication en JavaFX. Pour créer une application JavaFX, vous devez hériter de cette classe
et implémenter sa méthode abstraite start(). Dans cette méthode, vous devez écrire tout

L
le code pour les graphiques JavaFX.

E
Dans la méthode principale (main), vous devez lancer l’application en utilisant la
méthode launch(). Cette méthode appelle en interne la méthode start() de la classe
Application, comme le montre le programme [Link]
Exemple
M

1 public class JavafxSample extends Application {

2 @Override
3 public void start ( Stage primaryStage ) throws Exception {
A

4 /*
5 Code pour l ’ application JavaFX .
K

6 ( Stage , scene , graphe de s c n e )

7 */
}
N

8
9 public static void main ( String args []) {
10 launch ( args ) ;
A

11 }
12 }
Y

Dans la méthode start(), pour créer une application JavaFX typique, vous devez
suivre les étapes suivantes :
1. Préparer un graphe de scène avec les nœuds requis.
2. Préparer une scène avec les dimensions requises et ajouter le graphe de scène (nœud
racine du graphe de scène) à celle-ci.
3. Préparer un stage et ajouter la scène au stage, puis afficher le contenu du stage.

Préparation du Graphe de Scène

Selon votre application, vous devez préparer un graphe de scène avec les nœuds requis.
Comme le nœud racine est le premier nœud, vous devez créer un nœud racine. Comme
nœud racine, vous pouvez choisir entre Group, Region ou WebView.

Enseignant : M. YANKAM JOEL 3 Contact : +237 652027193

M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

— Group : Un nœud de groupe est représenté par la classe Group qui appartient au
package [Link]. Vous pouvez créer un nœud de groupe en instanciant cette
classe comme suit :
1 Group root = new Group () ;

La méthode getChildren() de la classe Group vous donne un objet de la classe

ObservableList qui contient les nœuds. Nous pouvons récupérer cet objet et y
ajouter des nœuds comme suit :
1 // R c u p r a t i o n de l ’ objet observable list
2 ObservableList list = root . getChildren () ;
3
4 // Ajout de l ’ objet texte comme n u d
5 list . add ( NodeObject ) ;

Nous pouvons également ajouter des objets Node au groupe en les passant sim-
plement à la classe Group et à son constructeur lors de l’instanciation, comme

L
suit :

E
1 Group root = new Group ( NodeObject ) ;

sur les nœuds JavaFX, tels que : JO

— Region : C’est la classe de base de tous les contrôles d’interface utilisateur basés

— Chart : Cette classe est la classe de base de tous les graphiques et elle appartient
au package [Link].
— Pane : Un Pane est la classe de base de tous les panneaux de mise en page
M

tels que AnchorPane, BorderPane, DialogPane, etc. Cette classe appartient au

package [Link].
A

— Control : C’est la classe de base des contrôles d’interface utilisateur tels que
Accordion, ButtonBar, ChoiceBox, ComboBoxBase, HTMLEditor, etc. Cette
K

classe appartient au package [Link].

Dans un Group, vous pouvez instancier l’une des classes mentionnées ci-dessus et
N

les utiliser comme nœuds racines, comme le montre le programme suivant.

1 // C r a t i o n d ’ un Stack Pane
A

2 StackPane pane = new StackPane () ;

3
Y

4 // Ajout d ’ une zone de texte au panneau

5 ObservableList list = pane . getChildren () ;
6 list . add ( NodeObject ) ;

— WebView : Ce nœud gère le moteur web et affiche son contenu.

Enseignant : M. YANKAM JOEL 4 Contact : +237 652027193

 M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

L
E
Préparation de la Scène
JO
Une scène JavaFX est représentée par la classe Scene du package [Link]. Vous
M

pouvez créer une scène en instanciant cette classe comme suit :

1 Scene scene = new Scene ( root ) ;
A

Vous pouvez également passer deux paramètres de type double représentant la hauteur
et la largeur de la scène comme suit :
K

1 Scene scene = new Scene ( root , 600 , 300) ;

N

Préparation du Stage
A

C’est le conteneur de toute application JavaFX et il fournit une fenêtre pour l’appli-
Y

cation. Il est représenté par la classe Stage du package [Link]. Un objet de cette
classe est passé comme paramètre de la méthode start() de la classe Application.
En utilisant cet objet, vous pouvez effectuer diverses opérations sur le stage. Princi-
palement, vous pouvez effectuer les opérations suivantes :
— Définir le titre du stage en utilisant la méthode setTitle().
— Attacher l’objet scène au stage en utilisant la méthode setScene().
— Afficher le contenu de la scène en utilisant la méthode show() comme suit :
1 // D f i n i t i o n du titre du stage
2 primaryStage . setTitle ( " Application ␣ Exemple " ) ;
3
4 // Ajout de la s c n e au stage
5 primaryStage . setScene ( scene ) ;
6

7 // Affichage du stage
8 primaryStage . show () ;

Enseignant : M. YANKAM JOEL 5 Contact : +237 652027193

 M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

Cycle de Vie d’une Application JavaFX

La classe Application de JavaFX a trois méthodes de cycle de vie, qui sont :
— start() : La méthode d’entrée où le code graphique JavaFX doit être écrit.
— stop() : Une méthode vide qui peut être redéfinie, ici vous pouvez écrire la logique
pour arrêter l’application.
— init() : Une méthode vide qui peut être redéfinie, mais vous ne pouvez pas créer
de stage ou de scène dans cette méthode.
En plus de ces méthodes, elle fournit une méthode statique nommée launch() pour
lancer une application JavaFX.
Comme la méthode launch() est statique, vous devez l’appeler depuis un contexte sta-
tique (généralement main). Chaque fois qu’une application JavaFX est lancée, les actions
suivantes seront effectuées (dans le même ordre) :
1. Une instance de la classe d’application est créée.
2. La méthode init() est appelée.
3. La méthode start() est appelée.
4. Le lanceur attend que l’application se termine et appelle la méthode stop().

Terminaison d’une Application JavaFX

EL
JO
Lorsque la dernière fenêtre de l’application est fermée, l’application JavaFX est ter-
minée implicitement. Vous pouvez désactiver ce comportement en passant la valeur boo-
léenne False à la méthode statique setImplicitExit() (doit être appelée depuis un
M

contexte statique).
KA

Vous pouvez terminer une application JavaFX explicitement en utilisant les méthodes
[Link]() ou [Link](int).
N
YA

Exemple - Création d’une Fenêtre Vide

Cette section vous apprend à créer une application JavaFX simple qui affiche une
fenêtre vide. Voici les étapes :

Étape 1 : Création d’une Classe

Créez une classe Java et héritez de la classe Application du package [Link],
puis implémentez la méthode start() de cette classe comme suit :
1 public class JavafxSample extends Application {
2 @Override
3 public void start ( Stage primaryStage ) throws Exception {
4 }
5 }

Étape 2 : Création d’un Objet Group

Dans la méthode start(), créez un objet Group en instanciant la classe Group, qui
appartient au package [Link], comme suit :

Enseignant : M. YANKAM JOEL 6 Contact : +237 652027193

 M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

1 Group root = new Group () ;

Étape 3 : Création d’un Objet Scene

Créez une scène en instanciant la classe Scene qui appartient au package [Link].
Passez l’objet Group (racine) créé à l’étape précédente à cette classe.
En plus de l’objet racine, vous pouvez également passer deux paramètres double
représentant la hauteur et la largeur de l’écran avec l’objet de la classe Group comme
suit :
1 Scene scene = new Scene ( root , 600 , 300) ;

Étape 4 : Définition du Titre du Stage

L
Vous pouvez définir le titre du stage en utilisant la méthode setTitle() de la classe
Stage. Le primaryStage est un objet Stage qui est passé à la méthode start de la classe

E
Scene en tant que paramètre.
En utilisant l’objet primaryStage, définissez le titre de la scène comme Application

1
Exemple comme suit : JO
primaryStage . setTitle ( " Application ␣ Exemple " ) ;
M

Étape 5 : Ajout de la Scène au Stage

A

Vous pouvez ajouter un objet Scene au stage en utilisant la méthode setScene() de

la classe Stage. Ajoutez l’objet Scene préparé dans les étapes précédentes en utilisant
K

cette méthode comme suit :

1 primaryStage . setScene ( scene ) ;
N
A

Étape 6 : Affichage du Contenu du Stage

Y

Affichez le contenu de la scène en utilisant la méthode show() de la classe Stage

comme suit :
1 primaryStage . show () ;

Étape 7 : Lancement de l’Application

Lancez l’application JavaFX en appelant la méthode statique launch() de la classe
Application depuis la méthode principale comme suit :
1 public static void main ( String args []) {
2 launch ( args ) ;
3 }

Le programme suivant génère une fenêtre JavaFX vide. Enregistrez ce code dans un
fichier nommé [Link].

Enseignant : M. YANKAM JOEL 7 Contact : +237 652027193

 M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

Exemple
1 import javafx . application . Application ;
2 import javafx . scene . Group ;
3 import javafx . scene . Scene ;
4 import javafx . scene . paint . Color ;
5 import javafx . stage . Stage ;
6
7 public class JavafxSample extends Application {
8 @Override
9 public void start ( Stage primaryStage ) throws Exception {
10 // C r a t i o n d ’ un objet Group
11 Group group = new Group () ;
12
13 // C r a t i o n d ’ une s c n e en passant l ’ objet group , la hauteur et
la largeur
14 Scene scene = new Scene ( group , 600 , 300) ;
15

L
16 // D f i n i t i o n de la couleur de la s c n e
17 scene . setFill ( Color . BROWN ) ;

E
18
19 // D f i n i t i o n du titre du stage
20

21
22 // Ajout de la s c n e au stage
JO
primaryStage . setTitle ( " Application ␣ Exemple " ) ;

23 primaryStage . setScene ( scene ) ;

24
M

25 // Affichage du contenu du stage

26 primaryStage . show () ;
27 }
A

28 public static void main ( String args []) {

29 launch ( args ) ;
}
K

30
31 }
N

Compilez et exécutez le fichier Java enregistré depuis l’invite de commande en utilisant

les commandes suivantes :
A

1 javac -- module - path % PATH_TO_FX % -- add - modules javafx . controls

JavafxSample . java
Y

2 java -- module - path % PATH_TO_FX % -- add - modules javafx . controls

JavafxSample

Sortie
Lors de l’exécution, le programme ci-dessus génère une fenêtre JavaFX comme illustré
ci-dessous.

Enseignant : M. YANKAM JOEL 8 Contact : +237 652027193

 M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

Exemple - Dessiner une Ligne Droite

Dans l’exemple précédent, nous avons vu comment créer un stage vide. Maintenant,
dans cet exemple, essayons de dessiner une ligne droite en utilisant la bibliothèque JavaFX.
EL
Ce code pour dessiner une ligne suit les mêmes étapes mentionnées dans l’exemple
précédent. Cependant, la différence se situe dans la méthode start(), où nous créons un
JO
objet Group en instanciant la classe Group, qui appartient au package [Link]. Pas-
sez l’objet Line (nœud), qui est créé en utilisant des méthodes setter, comme paramètre
au constructeur de la classe Group, afin de l’ajouter au groupe.
M

Enregistrez ce code dans un fichier nommé [Link].

KA

1 import javafx . application . Application ;

import javafx . scene . Group ;
N

2
3 import javafx . scene . Scene ;
YA

4 import javafx . scene . shape . Line ;

5 import javafx . stage . Stage ;
6
7 public class DrawingLine extends Application {
8 @Override
9 public void start ( Stage stage ) {
10 // C r a t i o n d ’ un objet Line
11 Line line = new Line () ;
12
13 // D f i n i t i o n des p r o p r i t s de la ligne
14 line . setStartX (100.0) ;
15 line . setStartY (150.0) ;
16 line . setEndX (500.0) ;
17 line . setEndY (150.0) ;
18

19 // C r a t i o n d ’ un Group
20 Group root = new Group ( line ) ;
21
22 // C r a t i o n d ’ une s c n e
23 Scene scene = new Scene ( root , 600 , 300) ;
24

25 // D f i n i t i o n du titre de la s c n e
26 stage . setTitle ( " Application ␣ Exemple " ) ;
27

Enseignant : M. YANKAM JOEL 9 Contact : +237 652027193

 M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

28 // Ajout de la s c n e au stage
29 stage . setScene ( scene ) ;
30
31 // Affichage du contenu de la s c n e
32 stage . show () ;
33 }
34 public static void main ( String args []) {
35 launch ( args ) ;
36 }
37 }

Compilez et exécutez le fichier Java enregistré depuis l’invite de commande en utilisant

les commandes suivantes :
1 javac -- module - path % PATH_TO_FX % -- add - modules javafx . controls
DrawingLine . java
2 java -- module - path % PATH_TO_FX % -- add - modules javafx . controls
DrawingLine

Sortie
Lors de l’exécution, le programme ci-dessus génère une fenêtre JavaFX affichant une
ligne droite comme illustré ci-dessous.
EL
JO
M
N KA
YA

Exemple - Affichage de Texte

Nous pouvons également intégrer du texte dans une scène JavaFX. Cet exemple
montre comment intégrer du texte en JavaFX. Enregistrez ce code dans un fichier nommé
[Link].
1 import javafx . application . Application ;
2 import javafx . collections . ObservableList ;
3 import javafx . scene . Group ;
4 import javafx . scene . Scene ;
5 import javafx . stage . Stage ;
6 import javafx . scene . text . Font ;
7 import javafx . scene . text . Text ;

Enseignant : M. YANKAM JOEL 10 Contact : +237 652027193

 M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

8
9 public class DisplayingText extends Application {
10 @Override
11 public void start ( Stage stage ) {
12 // C r a t i o n d ’ un objet Text
13 Text text = new Text () ;
14
15 // D f i n i t i o n de la police du texte
16 text . setFont ( new Font (45) ) ;
17
18 // D f i n i t i o n de la position du texte
19 text . setX (50) ;
20 text . setY (150) ;
21
22 // D f i n i t i o n du texte afficher
23 text . setText ( " Bienvenue ␣ Au ␣ Groupe ␣ Genius ␣ en ␣ 2025 ␣ ! " ) ;
24
25 // C r a t i o n d ’ un objet Group

L
26 Group root = new Group () ;
27

E
28 // R c u p r a t i o n de l ’ objet observable list
29 ObservableList list = root . getChildren () ;
30
31

32 list . add ( text ) ;

JO
// Ajout de l ’ objet texte comme n u d au groupe

33
34 // C r a t i o n d ’ une s c n e
M

35 Scene scene = new Scene ( root , 600 , 300) ;

36
37 // D f i n i t i o n du titre du stage
A

38 stage . setTitle ( " Application ␣ Exemple " ) ;

39
40 // Ajout de la s c n e au stage
K

41 stage . setScene ( scene ) ;

42
N

43 // Affichage du contenu du stage

44 stage . show () ;
45 }
A

46 public static void main ( String args []) {

47 launch ( args ) ;
Y

48 }
49 }

Compilez et exécutez le fichier Java enregistré depuis l’invite de commande en utilisant

les commandes suivantes :
1 javac -- module - path % PATH_TO_FX % -- add - modules javafx . controls
DisplayingText . java
2 java -- module - path % PATH_TO_FX % -- add - modules javafx . controls
DisplayingText

Sortie
Lors de l’exécution, le programme ci-dessus génère une fenêtre JavaFX affichant du
texte comme illustré ci-dessous.

Enseignant : M. YANKAM JOEL 11 Contact : +237 652027193

M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques

L
E
JO
M
A
K
N
A
Y

Enseignant : M. YANKAM JOEL 12 Contact : +237 652027193

Conclusion

Ce cours a présenté les bases de la programmation d’interfaces graphiques avec Ja-

vaFX. Nous avons exploré la structure d’une application JavaFX, comprenant les concepts
de Stage, Scene et Nodes. Nous avons également vu comment créer des fenêtres, dessiner
des formes et afficher du texte à l’aide de JavaFX.
JavaFX est une plateforme puissante pour développer des applications modernes et
interactives. En maîtrisant ces concepts, vous serez en mesure de créer des interfaces

L
utilisateur riches et dynamiques pour vos applications.
Ce cours est tiré du site [Link], une ressource précieuse pour les déve-

E
loppeurs souhaitant approfondir leurs connaissances en programmation Java et JavaFX.

JO
Intitulé : Apprendre JavaFx par la pratique en 2025 !
Nom Enseignant : Mr. YANKAM NGUEGUIM JOEL STEPHANE
Contact : +237 652027193
M

Site Web : [Link]

A
K
N
A
Y

13