Guide Complet de JavaFX

Programmation d’Interfaces Graphiques Modernes

Prof. Tchoupe Tchendji Maurice

“La maîtrise de JavaFX, c’est la clé pour créer

des interfaces graphiques élégantes et performantes.”

13 décembre 2024
 Résumé

Ce guide complet couvre l’ensemble des aspects de la programmation d’interfaces graphiques

avec JavaFX, de l’architecture fondamentale aux techniques avancées de développement. Il
s’adresse aux développeurs de tous niveaux souhaitant maîtriser cette technologie moderne.
Table des matières

1 Fondamentaux de JavaFX 2
1.1 Définition et Contexte . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2 Architecture Conceptuelle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2.1 Stage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.2 Scene . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.2.3 Scene Graph . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4
1.3 Création de Notre Première Application JavaFX . . . . . . . . . . . . . . . . . . 4
1.3.1 Étape 1 : Étendre [Link] et Surcharger start() . . 5
1.3.2 Étape 2 : Créer un Bouton . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.3.3 Étape 3 : Créer une Disposition et Ajouter le Bouton . . . . . . . . . . . 5
1.3.4 Étape 4 : Créer une Scène . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.5 Étape 5 : Préparer la Scène . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.3.6 Étape 6 : Créer un Événement pour le Bouton . . . . . . . . . . . . . . . 6
1.3.7 Étape 7 : Créer la Méthode Principale . . . . . . . . . . . . . . . . . . . 7
1.4 Cycle de Vie . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8

2 Système de Properties et Binding 10

2.1 Types de Properties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Binding Avancé . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11

3 Layouts et Conteneurs 13
3.1 Types de Layouts . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13

4 Gestion des Événements 15

4.1 Modèle Événementiel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15
4.2 Exemple Complet . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 15

5 Styles et Personnalisation 16
5.1 CSS dans JavaFX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
5.2 Application des Styles . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16

6 Développement Avancé 17
6.1 FXML et Séparation des Préoccupations . . . . . . . . . . . . . . . . . . . . . . 17

7 Meilleures Pratiques 18
7.1 Recommandations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18

1
Chapitre 1

Fondamentaux de JavaFX

1.1 Définition et Contexte

JavaFX est une bibliothèque de développement d’interfaces graphiques moderne pour Java,
conçue pour offrir une expérience utilisateur riche et dynamique. Ses caractéristiques principales
incluent :
— Architecture modulaire et extensible
— Support natif des animations et effets visuels
— Séparation claire entre la logique et la présentation
— Intégration profonde avec l’écosystème Java

1.2 Architecture Conceptuelle

Une application JavaFX est divisée hiérarchiquement en trois composants principaux connus
sous le nom de Stage, Scene et Node. Nous devons importer la classe [Link]
dans chaque application JavaFX. Cela fournit les méthodes de cycle de vie suivantes pour l’ap-
plication JavaFX :
— public void init()
— public abstract void start(Stage primaryStage)
— public void stop()
Afin de créer une application JavaFX de base, nous devons :
1. Importer [Link] dans notre code.
2. Hériter de Application dans notre classe.
3. Surcharger la méthode start() de la classe Application.

2
CHAPITRE 1. FONDAMENTAUX DE JAVAFX 3

Concepts Fondamentaux
JavaFX repose sur une architecture modulaire comprenant plusieurs éléments clés :
Stage
La fenêtre principale de l’application qui contient tout le contenu visuel.
Scene
Le conteneur racine qui héberge tous les éléments graphiques.
Scene Graph
Une structure arborescente hiérarchique organisant tous les éléments visuels.
Node
L’unité de base de tous les éléments graphiques.
Parent
La classe de base pour tous les nœuds pouvant contenir d’autres nœuds.

1.2.1 Stage
Le Stage dans une application JavaFX est similaire au Frame dans une application Swing.
Il agit comme un conteneur pour tous les objets JavaFX. Le Stage principal est créé en interne
par la plateforme. D’autres stages peuvent être créés par l’application. L’objet du stage principal
est transmis à la méthode start. Nous devons appeler la méthode show sur l’objet du stage
principal afin de montrer notre stage principal. Initialement, le Stage principal ressemble à ce
qui suit.

Figure 1.1 – Stage

Cependant, nous pouvons ajouter divers objets à ce stage principal. Les objets ne peuvent
être ajoutés que de manière hiérarchique, c’est-à-dire que d’abord, le graphique de scène sera
ajouté à ce primaryStage, puis ce graphique de scène peut contenir des nœuds. Un nœud peut
être n’importe quel objet de l’interface utilisateur comme une zone de texte, des boutons, des
formes, des médias, etc.
CHAPITRE 1. FONDAMENTAUX DE JAVAFX 4

1.2.2 Scene
La Scene contient tous les contenus physiques (nœuds) d’une application JavaFX. La classe
[Link] fournit toutes les méthodes pour gérer un objet scene. Créer une scene
est nécessaire afin de visualiser les contenus sur le stage.
À un moment donné, l’objet scene ne peut être ajouté qu’à un seul stage. Afin d’implémenter
Scene dans notre application JavaFX, nous devons importer le package [Link] dans notre
code. La Scene peut être créée en créant un objet de la classe Scene et en passant l’objet de
disposition dans le constructeur de la classe Scene. Nous discuterons de la classe Scene et de
ses méthodes plus en détail ultérieurement.

1.2.3 Scene Graph

Le Scene Graph existe au plus bas niveau de la hiérarchie. Il peut être vu comme la collection
de différents nœuds. Un nœud est l’élément qui est visualisé sur le stage. Il peut s’agir de
n’importe quel bouton, zone de texte, disposition, image, bouton radio, case à cocher, etc.
Les nœuds sont implémentés dans une structure de type arbre. Il y a toujours une racine dans
le graphique de scène. Celle-ci agira comme nœud parent pour tous les autres nœuds présents
dans le graphique de scène. Cependant, ce nœud peut être l’une des dispositions disponibles
dans le système JavaFX.
Les nœuds feuilles existent au niveau le plus bas de la hiérarchie de l’arbre. Chaque nœud
présent dans les graphiques de scène représente des classes du package [Link], nous
devons donc importer ce package dans notre application afin de créer une application JavaFX
complète.

Figure 1.2 – Scene Graph

1.3 Création de Notre Première Application JavaFX

Ici, nous créons une application JavaFX simple qui imprime "hello world" sur la console en
cliquant sur le bouton affiché sur la scène.
 CHAPITRE 1. FONDAMENTAUX DE JAVAFX 5

1.3.1 Étape 1 : Étendre [Link] et Surcharger

start()
Comme nous l’avons étudié précédemment, la méthode start() est le point de départ de la
construction d’une application JavaFX. Nous devons donc d’abord surcharger la méthode start
de la classe [Link].
1 package application ;
2 import javafx . application . Application ;
3 import javafx . stage . Stage ;
4 public class Hello_World extends Application {
5 @Override
6 public void start ( Stage primaryStage ) throws Exception {
7 // TODO g é n é r é automatiquement
8 }
9 }

1.3.2 Étape 2 : Créer un Bouton

Un bouton peut être créé en instanciant la classe [Link].
1 package application ;
2 import javafx . application . Application ;
3 import javafx . scene . control . Button ;
4 import javafx . stage . Stage ;
5 public class Hello_World extends Application {
6 @Override
7 public void start ( Stage primaryStage ) throws Exception {
8 Button btn1 = new Button ( " Dire , Hello World " ) ;
9 }
10 }

1.3.3 Étape 3 : Créer une Disposition et Ajouter le Bouton

JavaFX fournit plusieurs dispositions. Nous implémenterons la disposition StackPane :
1 package application ;
2 import javafx . application . Application ;
3 import javafx . scene . control . Button ;
4 import javafx . stage . Stage ;
5 import javafx . scene . layout . StackPane ;
6 public class Hello_World extends Application {
7 @Override
8 public void start ( Stage primaryStage ) throws Exception {
9 Button btn1 = new Button ( " Dire , Hello World " ) ;
10 StackPane root = new StackPane () ;
11 root . getChildren () . add ( btn1 ) ;
12 }
13 }
 CHAPITRE 1. FONDAMENTAUX DE JAVAFX 6

1.3.4 Étape 4 : Créer une Scène

La disposition doit être ajoutée à une scène :
1 package application ;
2 import javafx . application . Application ;
3 import javafx . scene . Scene ;
4 import javafx . scene . control . Button ;
5 import javafx . stage . Stage ;
6 import javafx . scene . layout . StackPane ;
7 public class Hello_World extends Application {
8 @Override
9 public void start ( Stage primaryStage ) throws Exception {
10 Button btn1 = new Button ( " Dire , Hello World " ) ;
11 StackPane root = new StackPane () ;
12 root . getChildren () . add ( btn1 ) ;
13 Scene scene = new Scene ( root ) ;
14 }
15 }

1.3.5 Étape 5 : Préparer la Scène

Définir la scène, le titre et afficher la scène :
1 package application ;
2 import javafx . application . Application ;
3 import javafx . scene . Scene ;
4 import javafx . scene . control . Button ;
5 import javafx . stage . Stage ;
6 import javafx . scene . layout . StackPane ;
7 public class Hello_World extends Application {
8 @Override
9 public void start ( Stage primaryStage ) throws Exception {
10 Button btn1 = new Button ( " Dire , Hello World " ) ;
11 StackPane root = new StackPane () ;
12 root . getChildren () . add ( btn1 ) ;
13 Scene scene = new Scene ( root ) ;
14 primaryStage . setScene ( scene ) ;
15 primaryStage . setTitle ( " Premi è re Application JavaFX " ) ;
16 primaryStage . show () ;
17 }
18 }

1.3.6 Étape 6 : Créer un Événement pour le Bouton

Ajouter un gestionnaire d’événements pour imprimer "hello world" lors du clic sur le bouton :
1 package application ;
2 import javafx . application . Application ;
3 import javafx . event . ActionEvent ;
4 import javafx . event . EventHandler ;
 CHAPITRE 1. FONDAMENTAUX DE JAVAFX 7

5 import javafx . scene . Scene ;

6 import javafx . scene . control . Button ;
7 import javafx . stage . Stage ;
8 import javafx . scene . layout . StackPane ;
9 public class Hello_World extends Application {
10 @Override
11 public void start ( Stage primaryStage ) throws Exception {
12 Button btn1 = new Button ( " Dire , Hello World " ) ;
13 btn1 . setOnAction ( new EventHandler < ActionEvent >() {
14 @Override
15 public void handle ( ActionEvent arg0 ) {
16 System . out . println ( " hello world " ) ;
17 }
18 }) ;
19 StackPane root = new StackPane () ;
20 root . getChildren () . add ( btn1 ) ;
21 Scene scene = new Scene ( root , 600 , 400) ;
22 primaryStage . setTitle ( " Premi è re Application JavaFX " ) ;
23 primaryStage . setScene ( scene ) ;
24 primaryStage . show () ;
25 }
26 }

1.3.7 Étape 7 : Créer la Méthode Principale

Ajouter la méthode principale pour lancer l’application :
1 package application ;
2 import javafx . application . Application ;
3 import javafx . event . ActionEvent ;
4 import javafx . event . EventHandler ;
5 import javafx . scene . Scene ;
6 import javafx . scene . control . Button ;
7 import javafx . stage . Stage ;
8 import javafx . scene . layout . StackPane ;
9 public class Hello_World extends Application {
10 @Override
11 public void start ( Stage primaryStage ) throws Exception {
12 Button btn1 = new Button ( " Dire , Hello World " ) ;
13 btn1 . setOnAction ( new EventHandler < ActionEvent >() {
14 @Override
15 public void handle ( ActionEvent arg0 ) {
16 System . out . println ( " hello world " ) ;
17 }
18 }) ;
19 StackPane root = new StackPane () ;
20 root . getChildren () . add ( btn1 ) ;
21 Scene scene = new Scene ( root , 600 , 400) ;
22 primaryStage . setTitle ( " Premi è re Application JavaFX " ) ;
23 primaryStage . setScene ( scene ) ;
24 primaryStage . show () ;
25 }
 CHAPITRE 1. FONDAMENTAUX DE JAVAFX 8

26

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

28 launch ( args ) ;
29 }
30 }

1.4 Cycle de Vie

Phases du Cycle de Vie
Le cycle de vie d’une application JavaFX comprend trois phases principales :
1. Initialisation (init) : Préparation des ressources
2. Démarrage (start) : Configuration et affichage de l’interface
3. Arrêt (stop) : Nettoyage des ressources

1 public class ApplicationCycleVie extends Application {

2 private Resources ressources ;
3

4 @Override
5 public void init () throws Exception {
6 // Initialisation des ressources
7 System . out . println ( " 1. Phase d ’ initialisation " ) ;
8 ressources = new Resources () ;
9 ressources . charger () ;
10 }
11

12 @Override
13 public void start ( Stage primaryStage ) {
14 System . out . println ( " 2. Phase de d é marrage " ) ;
15 // Configuration de l ’ interface
16 Scene scene = configurerInterface () ;
17 primaryStage . setScene ( scene ) ;
18 primaryStage . show () ;
19 }
20

21 @Override
22 public void stop () throws Exception {
23 System . out . println ( " 3. Phase d ’ arr ê t " ) ;
24 // Nettoyage
25 ressources . liberer () ;
26 }
27

28 private Scene configurerInterface () {

29 VBox racine = new VBox (10) ;
30 // Configuration ...
31 return new Scene ( racine , 800 , 600) ;
32 }
33 }
CHAPITRE 1. FONDAMENTAUX DE JAVAFX 9

Listing 1.1 – Implémentation du Cycle de Vie

 Chapitre 2

Système de Properties et Binding

2.1 Types de Properties

Properties Disponibles
JavaFX offre plusieurs types de properties pour différents besoins :
— SimpleProperty : Properties de base (String, Integer, Double...)
— ReadOnlyProperty : Properties en lecture seule
— ListProperty : Collections observables
— MapProperty : Dictionnaires observables
— ObjectProperty : Properties pour objets personnalisés

1 public class ModeleUtilisateur {

2 // D é claration des properties
3 private final StringProperty nom =
4 new SimpleStringProperty ( this , " nom " , " " ) ;
5 private final IntegerProperty age =
6 new SimpleIntegerProperty ( this , " age " , 0) ;
7 private final BooleanProperty actif =
8 new SimpleBooleanProperty ( this , " actif " , true ) ;
9 private final ListProperty < String > roles =
10 new SimpleListProperty < >(
11 FXCollections . observableArrayList ()
12 );
13

14 // Accesseurs pour les properties

15 public StringProperty nomProperty () {
16 return nom ;
17 }
18

19 public String getNom () {

20 return nom . get () ;
21 }
22

23 public void setNom ( String valeur ) {

24 nom . set ( valeur ) ;
25 }
26

10
 CHAPITRE 2. SYSTÈME DE PROPERTIES ET BINDING 11

27 // M é thodes similaires pour les autres properties ...

28

29 // Exemple d ’ utilisation des properties

30 public void initialiser () {
31 nom . set ( " Jean Dupont " ) ;
32 age . set (30) ;
33 roles . addAll ( " UTILISATEUR " , " ADMIN " ) ;
34

35 // É coute des changements

36 nom . addListener (( observable , oldValue , newValue ) -> {
37 System . out . println ( " Nom modifi é : " + newValue ) ;
38 }) ;
39 }
40 }
Listing 2.1 – Implémentation de Properties

2.2 Binding Avancé

Types de Binding
Le système de binding permet de :
— Lier des properties de manière unidirectionnelle
— Créer des liaisons bidirectionnelles
— Effectuer des calculs automatiques
— Définir des conditions de mise à jour

1 public class ExempleBinding {

2 public void demonstrationBinding () {
3 // Binding unidirectionnel simple
4 StringProperty source = new SimpleStringProperty ( " Valeur " ) ;
5 StringProperty destination = new SimpleStringProperty () ;
6 destination . bind ( source ) ;
7

8 // Binding bidirectionnel
9 IntegerProperty nombre1 = new SimpleIntegerProperty (5) ;
10 IntegerProperty nombre2 = new SimpleIntegerProperty (10) ;
11 nombre1 . bindBidirectional ( nombre2 ) ;
12

13 // Binding avec transformation

14 DoubleProperty prix = new SimpleDoubleProperty (99.99) ;
15 StringBinding prixFormate = Bindings . format (
16 " %.2 f euros " , prix
17 );
18

19 // Binding conditionnel
20 BooleanProperty condition = new SimpleBooleanProperty ( true ) ;
21 StringBinding texteConditionnel = Bindings . when ( condition )
22 . then ( " Actif " )
23 . otherwise ( " Inactif " ) ;
24
 CHAPITRE 2. SYSTÈME DE PROPERTIES ET BINDING 12

25 // Binding avec calcul

26 IntegerProperty x = new SimpleIntegerProperty (10) ;
27 IntegerProperty y = new SimpleIntegerProperty (20) ;
28 NumberBinding somme = x . add ( y ) ;
29 NumberBinding moyenne = somme . divide (2.0) ;
30 }
31

32 public void exemplePratique () {

33 // Example avec des contr ô les JavaFX
34 TextField champNom = new TextField () ;
35 Label etiquetteNom = new Label () ;
36

37 // Binding du texte
38 etiquetteNom . textProperty () . bind (
39 Bindings . when ( champNom . textProperty () . isEmpty () )
40 . then ( " Veuillez saisir un nom " )
41 . otherwise ( champNom . textProperty () )
42 );
43

44 // Binding de style
45 champNom . styleProperty () . bind (
46 Bindings . when ( champNom . textProperty () . isEmpty () )
47 . then ( " -fx - border - color : red ; " )
48 . otherwise ( " -fx - border - color : green ; " )
49 );
50 }
51 }
Listing 2.2 – Exemples de Binding
 Chapitre 3

Layouts et Conteneurs

3.1 Types de Layouts

Layouts Principaux
JavaFX propose plusieurs types de layouts pour organiser l’interface :
HBox/VBox
Organisation linéaire horizontale ou verticale
GridPane
Organisation en grille
BorderPane
Organisation en régions (haut, bas, gauche, droite, centre)
StackPane
Superposition d’éléments
FlowPane
Organisation en flux
TilePane
Organisation en tuiles uniformes
AnchorPane
Positionnement par ancres

1 public class ExemplesLayout {

2 public Node creerLayoutComplexe () {
3 // Layout principal
4 BorderPane racine = new BorderPane () ;
5

6 // En - t ê te ( HBox )
7 HBox entete = new HBox (10) ;
8 entete . setPadding ( new Insets (10) ) ;
9 entete . getChildren () . addAll (
10 new Button ( " Menu " ) ,
11 new Label ( " Application " )
12 );
13 racine . setTop ( entete ) ;
14

15 // Menu lat é ral ( VBox )

16 VBox menuLateral = new VBox (5) ;

13
 CHAPITRE 3. LAYOUTS ET CONTENEURS 14

17 menuLateral . setPadding ( new Insets (10) ) ;

18 menuLateral . getChildren () . addAll (
19 new Button ( " Option 1 " ) ,
20 new Button ( " Option 2 " ) ,
21 new Button ( " Option 3 " )
22 );
23 racine . setLeft ( menuLateral ) ;
24

25 // Contenu principal ( GridPane )

26 GridPane contenu = new GridPane () ;
27 contenu . setHgap (10) ;
28 contenu . setVgap (10) ;
29 contenu . setPadding ( new Insets (10) ) ;
30

31 // Ajout d ’é l é ments dans la grille

32 contenu . add ( new Label ( " Nom : " ) , 0 , 0) ;
33 contenu . add ( new TextField () , 1 , 0) ;
34 contenu . add ( new Label ( " Email : " ) , 0 , 1) ;
35 contenu . add ( new TextField () , 1 , 1) ;
36 contenu . add ( new Button ( " Enregistrer " ) , 1 , 2) ;
37

38 racine . setCenter ( contenu ) ;

39

40 // Pied de page ( HBox )

41 HBox piedPage = new HBox (10) ;
42 piedPage . setPadding ( new Insets (10) ) ;
43 piedPage . setAlignment ( Pos . CENTER_RIGHT ) ;
44 piedPage . getChildren () . add (
45 new Label ( " 2024 Mon Application " )
46 );
47 racine . setBottom ( piedPage ) ;
48

49 return racine ;
50 }
51 }
Listing 3.1 – Exemples de Layouts
 Chapitre 4

Gestion des Événements

4.1 Modèle Événementiel

JavaFX propose plusieurs mécanismes de gestion d’événements :
— Événements de souris
— Événements de clavier
— Événements de contrôles

4.2 Exemple Complet

1 Button bouton = new Button ( " Cliquez " ) ;
2

3 // É v é nement de clic
4 bouton . setOnAction ( event -> {
5 System . out . println ( " Bouton cliqu é ! " ) ;
6 }) ;
7

8 // É v é nement de survol
9 bouton . setOnMouseEntered ( event -> {
10 bouton . setStyle ( " -fx - background - color : lightblue ; " ) ;
11 }) ;
12

13 bouton . setOnMouseExited ( event -> {

14 bouton . setStyle ( " -fx - background - color : white ; " ) ;
15 }) ;
Listing 4.1 – Gestion Multitype d’Événements

15
 Chapitre 5

Styles et Personnalisation

5.1 CSS dans JavaFX

JavaFX supporte une personnalisation CSS avancée.
1 /* styles . css */
2 . bouton - principal {
3 -fx - background - color : linear - gradient (#61 a2b1 , #2 A5058 ) ;
4 -fx - text - fill : white ;
5 -fx - font - size : 14 px ;
6 }
Listing 5.1 – Styles CSS Externes

5.2 Application des Styles

1 Scene scene = new Scene ( root ) ;
2 scene . getStylesheets () . add (
3 getClass () . getResource ( " styles . css " ) . toExternalForm ()
4 );
Listing 5.2 – Chargement de Styles

16
 Chapitre 6

Développement Avancé

6.1 FXML et Séparation des Préoccupations

1 <? xml version = " 1.0 " encoding = " UTF -8 " ? >
2 <? import javafx . scene . layout . VBox ? >
3 <? import javafx . scene . control . Button ? >
4

5 < VBox xmlns : fx = " http :// javafx . com / fxml " >
6 < Button text = " Cliquez ici " / >
7 </ VBox >
Listing 6.1 – Exemple FXML

17
Chapitre 7

Meilleures Pratiques

7.1 Recommandations
— Séparer la logique métier de l’interface
— Utiliser des layouts flexibles
— Optimiser la gestion des ressources
— Tester rigoureusement les interactions

18