Cours de JavaFX - Td JavaFx -
Programmation d’Interfaces
Graphiques
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
Table des matières
1 Introduction à JavaFX 2
1.1 Architecture de JavaFX . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1.1 Schéma de l’arborescence JavaFX . . . . . . . . . . . . . . . . . . . 2
1.2 Création d’une première application JavaFX . . . . . . . . . . . . . . . . . 3
1.3 Exercices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
L
1.3.1 Exercice 1 : QCM sur les concepts de base . . . . . . . . . . . . . . 3
1.3.2 Exercice 2 : Compléter le code . . . . . . . . . . . . . . . . . . . . . 4
E
2 Propriétés et Liaisons 5
2.1 Propriétés en JavaFX . . . . . . . . . . . . JO
2.2 Exercices . . . . . . . . . . . . . . . . . . .
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
.
5
5
2.2.1 Exercice 3 : QCM sur les propriétés . . . . . . . . . . . . . . . . . . 5
2.2.2 Exercice 4 : Compléter le code . . . . . . . . . . . . . . . . . . . . . 6
M
3 Gestion des événements 7
3.1 Exemple de gestion d’événements . . . . . . . . . . . . . . . . . . . . . . . 7
A
3.2 Exercices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 8
3.2.1 Exercice 5 : QCM sur les événements . . . . . . . . . . . . . . . . . 8
K
3.2.2 Exercice 6 : Compléter le code . . . . . . . . . . . . . . . . . . . . . 8
N
4 Styles et CSS 9
4.1 Exemple d’application de styles . . . . . . . . . . . . . . . . . . . . . . . . 9
A
4.2 Exercices . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
4.2.1 Exercice 7 : QCM sur les styles . . . . . . . . . . . . . . . . . . . . 10
Y
4.2.2 Exercice 8 : Compléter le code . . . . . . . . . . . . . . . . . . . . . 10
1
Chapitre 1
Introduction à JavaFX
Objectifs :
— Comprendre l’architecture de JavaFX.
L
— Créer une première application JavaFX.
— Explorer les concepts de base : Stage, Scene, Node.
E
1.1 Architecture de JavaFX JO
JavaFX est une bibliothèque graphique moderne pour Java, conçue pour créer des
interfaces utilisateur riches et dynamiques. Son architecture repose sur trois composants
M
principaux :
— Stage : La fenêtre principale de l’application.
A
— Scene : Le conteneur qui héberge tous les éléments graphiques.
— Node : Les éléments individuels de l’interface (boutons, textes, etc.).
K
1.1.1 Schéma de l’arborescence JavaFX
N
Application JavaFX
A
Y
Stage (Fenêtre)
Scene (Scène)
Node (Éléments graphiques)
2
M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques
1.2 Création d’une première application JavaFX
Voici un exemple simple d’une application JavaFX qui affiche un bouton et imprime
"Hello World" dans la console lorsqu’on clique dessus.
1 import javafx . application . Application ;
2 import javafx . scene . Scene ;
3 import javafx . scene . control . Button ;
4 import javafx . stage . Stage ;
5 import javafx . scene . layout . StackPane ;
6
7 public class HelloWorld extends Application {
8 @Override
9 public void start ( Stage primaryStage ) {
10 Button btn = new Button ( " Cliquez - moi " ) ;
11 btn . setOnAction ( event -> System . out . println ( " Hello ␣ World ! " ) ) ;
12
13 StackPane root = new StackPane () ;
L
14 root . getChildren () . add ( btn ) ;
15
E
16 Scene scene = new Scene ( root , 300 , 200) ;
17 primaryStage . setTitle ( " P r e m i r e ␣ Application ␣ JavaFX " ) ;
18
19
20 }
primaryStage . setScene ( scene ) ;
primaryStage . show () ;
JO
21
22 public static void main ( String [] args ) {
M
23 launch ( args ) ;
24 }
25 }
A
Listing 1.1 – Première application JavaFX
K
1.3 Exercices
N
A
1.3.1 Exercice 1 : QCM sur les concepts de base
Y
1. Quel est le composant principal qui représente une fenêtre dans JavaFX ?
— A) Scene
— B) Stage
— C) Node
— D) Application
2. Quelle méthode doit être surchargée pour démarrer une application JavaFX ?
— A) init()
— B) start()
— C) stop()
— D) main()
3. Quel est le rôle de la classe Scene dans JavaFX ?
— A) Gérer les événements
— B) Contenir les éléments graphiques
— C) Représenter une fenêtre
— D) Afficher des animations
Enseignant : M. YANKAM JOEL 3 Contact : +237 652027193
M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques
1.3.2 Exercice 2 : Compléter le code
Complétez le code suivant pour afficher un bouton avec le texte "Cliquez ici" et im-
primer "Bouton cliqué" dans la console lorsqu’on clique dessus.
1 import javafx . application . Application ;
2 import javafx . scene . Scene ;
3 import javafx . scene . control . Button ;
4 import javafx . stage . Stage ;
5 import javafx . scene . layout . StackPane ;
6
7 public class MonApplication extends Application {
8 @Override
9 public void start ( Stage primaryStage ) {
10 Button btn = new Button ( " ______ " ) ;
11 btn . setOnAction ( event -> System . out . println ( " ______ " ) ) ;
12
13 StackPane root = new StackPane () ;
root . getChildren () . add ( btn ) ;
L
14
15
E
16 Scene scene = new Scene ( root , 300 , 200) ;
17 primaryStage . setTitle ( " ______ " ) ;
primaryStage . setScene ( scene ) ;
18
19
20
21
}
primaryStage . show () ; JO
22 public static void main ( String [] args ) {
23 ______ ;
M
24 }
25 }
A
K
N
A
Y
Enseignant : M. YANKAM JOEL 4 Contact : +237 652027193
Chapitre 2
Propriétés et Liaisons
Objectifs :
— Comprendre le système de propriétés et de liaisons en JavaFX.
L
— Utiliser les propriétés pour créer des interfaces réactives.
E
2.1 Propriétés en JavaFX JO
Les propriétés en JavaFX permettent de créer des liaisons entre les éléments de l’in-
terface. Par exemple, on peut lier la valeur d’un champ texte à une propriété et mettre à
M
jour automatiquement l’interface lorsque cette propriété change.
1 import javafx . beans . property . S im p l e S t r i n g P r o p e r t y ;
import javafx . beans . property . StringProperty ;
A
2
3
4 public class ExemplePropriete {
K
5 public static void main ( String [] args ) {
6 StringProperty texte = new S i m p l e S t r i n g P r o p e r t y ( " Bonjour " ) ;
N
7 texte . addListener (( observable , oldValue , newValue ) -> {
8 System . out . println ( " La ␣ valeur ␣ a ␣ c h a n g ␣ : ␣ " + newValue ) ;
9 }) ;
A
10
11 texte . set ( " Hello " ) ;
Y
12 }
13 }
Listing 2.1 – Exemple de propriété
2.2 Exercices
2.2.1 Exercice 3 : QCM sur les propriétés
1. Quelle classe est utilisée pour créer une propriété de type chaîne de caractères ?
— A) SimpleStringProperty
— B) StringProperty
— C) ObservableString
— D) StringListener
2. Quel est le rôle d’un Listener en JavaFX ?
5
M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques
— A) Afficher des messages dans la console
— B) Réagir aux changements de valeur d’une propriété
— C) Créer des animations
— D) Gérer les événements de souris
2.2.2 Exercice 4 : Compléter le code
Complétez le code suivant pour lier la valeur d’un champ texte à une propriété et
afficher un message dans la console lorsque la valeur change.
1 import javafx . application . Application ;
2 import javafx . scene . Scene ;
3 import javafx . scene . control . TextField ;
4 import javafx . stage . Stage ;
5 import javafx . scene . layout . StackPane ;
6 import javafx . beans . property . S im p l e S t r i n g P r o p e r t y ;
7 import javafx . beans . property . StringProperty ;
L
8
9 public class MonApplication extends Application {
E
10 @Override
11 public void start ( Stage primaryStage ) {
12
13
14
TextField champTexte = new TextField () ;
StringProperty texte = new ______ ( " " ) ; JO
15 texte . addListener (( observable , oldValue , newValue ) -> {
16 System . out . println ( " Nouvelle ␣ valeur ␣ : ␣ " + ______ ) ;
M
17 }) ;
18
19 champTexte . textProperty () . bindBidi rectional ( ______ ) ;
A
20
21 StackPane root = new StackPane () ;
root . getChildren () . add ( champTexte ) ;
K
22
23
24 Scene scene = new Scene ( root , 300 , 200) ;
N
25 primaryStage . setTitle ( " Exemple ␣ de ␣ Liaison " ) ;
26 primaryStage . setScene ( scene ) ;
primaryStage . show () ;
A
27
28 }
29
Y
30 public static void main ( String [] args ) {
31 ______ ;
32 }
33 }
Enseignant : M. YANKAM JOEL 6 Contact : +237 652027193
Chapitre 3
Gestion des événements
Objectifs :
— Comprendre le modèle événementiel de JavaFX.
L
— Gérer les événements de souris et de clavier.
E
3.1 Exemple de gestion d’événements
JO
Voici un exemple simple de gestion d’événements en JavaFX. Lorsque l’utilisateur
clique sur un bouton, un message est affiché dans la console.
M
1 import javafx . application . Application ;
2 import javafx . scene . Scene ;
3 import javafx . scene . control . Button ;
A
4 import javafx . stage . Stage ;
5 import javafx . scene . layout . StackPane ;
6
K
7 public class Ge stionEve nements extends Application {
8 @Override
N
9 public void start ( Stage primaryStage ) {
10 Button btn = new Button ( " Cliquez - moi " ) ;
11 btn . setOnAction ( event -> System . out . println ( " Bouton ␣ c l i q u ␣ ! " ) )
A
;
12
Y
13 StackPane root = new StackPane () ;
14 root . getChildren () . add ( btn ) ;
15
16 Scene scene = new Scene ( root , 300 , 200) ;
17 primaryStage . setTitle ( " Gestion ␣ des ␣ vnements ");
18 primaryStage . setScene ( scene ) ;
19 primaryStage . show () ;
20 }
21
22 public static void main ( String [] args ) {
23 launch ( args ) ;
24 }
25 }
Listing 3.1 – Gestion d’événements
7
M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques
3.2 Exercices
3.2.1 Exercice 5 : QCM sur les événements
1. Quelle méthode est utilisée pour gérer un clic sur un bouton en JavaFX ?
— A) setOnAction()
— B) setOnClick()
— C) setOnMouseClick()
— D) setOnEvent()
2. Quel type d’événement est déclenché lorsqu’un utilisateur appuie sur une touche
du clavier ?
— A) ActionEvent
— B) MouseEvent
— C) KeyEvent
— D) InputEvent
L
E
3.2.2 Exercice 6 : Compléter le code
1 import javafx . application . Application ;
JO
Complétez le code suivant pour afficher un message lorsque l’utilisateur appuie sur
une touche du clavier.
2 import javafx . scene . Scene ;
import javafx . scene . input . KeyEvent ;
M
3
4 import javafx . stage . Stage ;
5 import javafx . scene . layout . StackPane ;
A
7 public class GestionClavier extends Application {
8 @Override
K
9 public void start ( Stage primaryStage ) {
10 StackPane root = new StackPane () ;
N
11 Scene scene = new Scene ( root , 300 , 200) ;
12
13 scene . setOnKeyPressed ( event -> {
A
14 System . out . println ( " Touche ␣ p r e s s e ␣ : ␣ " + ______ ) ;
15 }) ;
Y
16
17 primaryStage . setTitle ( " Gestion ␣ du ␣ Clavier " ) ;
18 primaryStage . setScene ( scene ) ;
19 primaryStage . show () ;
20 }
21
22 public static void main ( String [] args ) {
23 ______ ;
24 }
25 }
Enseignant : M. YANKAM JOEL 8 Contact : +237 652027193
Chapitre 4
Styles et CSS
Objectifs :
— Appliquer des styles CSS à une interface JavaFX.
L
— Personnaliser l’apparence des composants.
E
4.1 Exemple d’application de styles JO
Voici un exemple simple d’application de styles CSS à un bouton en JavaFX.
1 import javafx . application . Application ;
M
2 import javafx . scene . Scene ;
3 import javafx . scene . control . Button ;
4 import javafx . stage . Stage ;
A
5 import javafx . scene . layout . StackPane ;
6
K
7 public class StylesCSS extends Application {
8 @Override
9 public void start ( Stage primaryStage ) {
N
10 Button btn = new Button ( " Cliquez - moi " ) ;
11 btn . setStyle ( " -fx - background - color : ␣ #4 CAF50 ; ␣ -fx - text - fill : ␣
A
white ; " ) ;
12
Y
13 StackPane root = new StackPane () ;
14 root . getChildren () . add ( btn ) ;
15
16 Scene scene = new Scene ( root , 300 , 200) ;
17 primaryStage . setTitle ( " Styles ␣ CSS " ) ;
18 primaryStage . setScene ( scene ) ;
19 primaryStage . show () ;
20 }
21
22 public static void main ( String [] args ) {
23 launch ( args ) ;
24 }
25 }
Listing 4.1 – Application de styles CSS
9
M. YANKAM JOEL JavaFX - Programmation d’Interfaces Graphiques
4.2 Exercices
4.2.1 Exercice 7 : QCM sur les styles
1. Quelle propriété CSS est utilisée pour changer la couleur de fond d’un bouton en
JavaFX ?
— A) -fx-background-color
— B) -fx-color
— C) -fx-bg-color
— D) -fx-background
2. Comment appliquer un fichier CSS externe à une scène en JavaFX ?
— A) [Link]()
— B) [Link]()
— C) [Link]().add()
— D) [Link]()
L
E
4.2.2 Exercice 8 : Compléter le code
1
2
import
import
javafx . application . Application ;
javafx . scene . Scene ;
JO
Complétez le code suivant pour appliquer un style CSS externe à une scène JavaFX.
3 import javafx . scene . control . Button ;
4 import javafx . stage . Stage ;
M
5 import javafx . scene . layout . StackPane ;
6
7 public class StylesExternes extends Application {
A
8 @Override
9 public void start ( Stage primaryStage ) {
K
10 Button btn = new Button ( " Cliquez - moi " ) ;
11 StackPane root = new StackPane () ;
12 root . getChildren () . add ( btn ) ;
N
13
14 Scene scene = new Scene ( root , 300 , 200) ;
A
15 scene . getStylesheets () . add ( ______ ) ;
16
Y
17 primaryStage . setTitle ( " Styles ␣ CSS ␣ Externes " ) ;
18 primaryStage . setScene ( scene ) ;
19 primaryStage . show () ;
20 }
21
22 public static void main ( String [] args ) {
23 ______ ;
24 }
25 }
Enseignant : M. YANKAM JOEL 10 Contact : +237 652027193
Conclusion
Ce cours a introduit les concepts de base de JavaFX, y compris l’architecture, les pro-
priétés, la gestion des événements, et l’application de styles CSS. Les exercices pratiques
et les QCM vous ont permis de mettre en œuvre ces concepts dans des scénarios concrets.
Pour approfondir vos connaissances, explorez la documentation officielle de JavaFX, ou
rendez-vous sur le site [Link] et pratiquez en créant des interfaces uti-
lisateur plus complexes.
L
Intitulé : Apprendre JavaFx par la pratique en 2025 !
E
Nom Enseignant : Mr. YANKAM NGUEGUIM JOEL STEPHANE
Contact : +237 652027193
Site Web : [Link]
JO
M
A
K
N
A
Y
11