POO Avancé

JavaFx-Les Concepts de Base

MEJDOUB Safa
 Interfaces graphiques
 Les interfaces graphiques assurent le dialogue entre les
utilisateurs et une application.
 Une interface graphique est formée d’une ou plusieurs fenêtres
qui contiennent divers composants graphiques (widgets) tels que
:
o Boutons
o listes déroulantes
o Menus
o champ texte, …etc.
 Les interfaces graphiques sont souvent appelés GUI d’après
l’anglais Graphical User Interface.

Safa MEJDOUB 2
 Les APIs

Safa MEJDOUB 3
 Les APIs
 AWT (java.awt): première librairie de création des interfaces
graphiques.
les caractéristiques sont :
• Les composants sont "lourds" (heavyweight)
• La difficulté de créer des applications multiplateformes (« write once,
run Anywhere »)
 Swing (javax.swing) : est venue compléter (et partiellement
remplacer) la librairie AWT.
• Les composants sont "légers" (lightweight),
• Permet de créer des applications multiplateformes et contenant plus
de composants.

Safa MEJDOUB 4
 Les APIs
 JavaFX 1: a tenté de remplacer Swing, elle a crée des interfaces graphiques
pour toutes les sortes d’applications (mobiles, web, sur poste de travail,
etc);
 2007-2011, elle a été basée sur un langage de script spécifique (JavaFX
Script).
 A partir de 2011, elle est incluse par défaut dans Java et devient la
bibliothèque de création d'interfaces graphiques officielle du langage Java ,
 à partir de Java8 (en 2014) elle est directement accessible via un IDE
(Netbeans, Eclipse, JDeveloper, etc)..
 JavaFX contient des outils très divers, notamment pour les médias audio et
vidéo, le graphisme 2D et 3D, l’animation, la réalité virtuelle…

Safa MEJDOUB 5
 JavaFx-Fonctionalités
 FXML : c’est un langage de balisage déclaratif de type
HTML. Le seul but de ce langage est de définir une interface
utilisateur.
 Scene Builder – Cette application s’intègre dans les IDE
tels qu'Eclipse et NetBeans, les utilisateurs peuvent accéder à
une interface de conception glisser-déposer, qui est
utilisée pour développer des applications FXML
 Les feuilles de style CSS - JavaFX applique des feuilles de
style CSS qui renforce la séparation entre le design graphique
et les traitements effectués à l'aide de code Java.
Safa MEJDOUB 6
 JavaFx-Eléments principaux
• Stage : Endroit où se déroule la scène
• Scène : Tableau ou séquence faisant
intervenir les acteurs
• Groupe d’acteurs : éléments du
décor qui font partie de la scène. Ils
représentent les composants
graphiques qui peuvent s’animer selon
une chronologie
(javafx.animation.Timeline)

Safa MEJDOUB 7
 Structure d’une Interface JavaFx

Safa MEJDOUB 8
 Ma première application JAVA FX

9
Safa MEJDOUB
 Stage
 Une application JAVAFX doit hériter de la classe Application
et redéfinir la méthode abstraite start() héritée de
Application.
public abstract void start (Stage stage) throws java.lang.Exception
 La méthode start() prend en paramètre un objet de type
Stage, qui représente la fenêtre de notre application.

Safa MEJDOUB 10
 Stage
 Une instance de la classe Application constitue le
point d'entrée d'une application JavaFX
 Une fois, l’application se lance par la méthode
statique Application. Launch (), le runtime
JavaFX effectue les opérations suivantes :

Safa MEJDOUB 11
Safa MEJDOUB 12
 Scene
 L'interface est représentée par un objet de type Scene qu'il
faut créer et associer à la fenêtre (Stage) en faisant appel à
la méthode setScene() de l’objet Stage

Safa MEJDOUB 13
Safa MEJDOUB 14
 Eléments d’une application JavaFX

Safa MEJDOUB 15
 Les nœuds

Safa MEJDOUB 16
 Graphe de Scène
 Une scène regroupe un ensemble d’objets ayant pour classe parente la
classe « Node »

Safa MEJDOUB
 Nœuds géométriques

Safa MEJDOUB 18
 Nœuds géométriques

 Représentent des formes géométriques diverses ou du

texte.
 Tous héritent d’une classe-mère commune nommée
Shape.
 on cite parmi ces classes : Arc, Circle, Ellipse, Line,
Polygon, Rectangle et Text.

Safa MEJDOUB 19
 Nœuds graphiques

Safa MEJDOUB 20
 Nœuds graphiques
 Présentent un contenu graphique, qui peut être une image
ou une vidéo.
 Héritent directement de la classe Node
 Ces nœuds sont:
o ImageView:affiche une image,
o MediaView: affiche une vidéo,
o Canvas: affiche une image modifiable, sur laquelle il est
possible de dessiner des primitives graphiques (lignes,
rectangles, etc.).
Safa MEJDOUB 21
 Nœuds de contrôle

Safa MEJDOUB 22
 Les contrôles étiquetés (1)
 Un contrôle étiqueté contient un contenu textuel en lecture
seule Étiquette, Button, CheckBox, RadioButton et Hyperlink
sont des exemples de contrôles étiquetés dans JavaFX.
 Les comportements communs de ces composants sont gérés par
la classe parente Labeled.

Safa MEJDOUB 23
 Les contrôles étiquetés (2)
 Les textes de ces composants peuvent être accompagnés d'un autre
composant, généralement un graphique, une image ou une icône.
 Quelques propriétés communes aux composants Labeled.

Safa MEJDOUB 24
 Les contrôles étiquetés (3)

Safa MEJDOUB 25
 Les contrôles étiquetés (4)-Label
 Le composant Label représente un libellé (= un texte non éditable).
 Les constructeurs permettent de définir le contenu du texte et de
l'éventuel composant additionnel (graphic).
• new Label("Hello");
• new Label("Warning", warningIcon);

 L'essentiel des fonctionnalités sont héritées de Labeled. Une seule

propriété additionnelle se trouve dans Label :
• setLabelFor : Permet de définir un composant auquel le
libellé est associé

Safa MEJDOUB 26
 Les contrôles étiquetés (5)- Button
 Le composant Button représente un bouton permettant à l'utilisateur de
déclencher une action.

 La classe parente ButtonBase rassemble les propriétés communes à différents

composants qui se comportent comme des boutons : Button, CheckBox,
Hyperlink, MenuButton, ToggleButton

 Les constructeurs permettent de définir le contenu du texte et de l'éventuel

composant additionnel (graphic).
• new Button ("Ok");
• new Button("Save", saveIcon);

Safa MEJDOUB 27
 Les contrôles étiquetés (6)- Button

Safa MEJDOUB 28
 Les contrôles étiquetés (7)
 CheckBox

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/CheckBox.html

 Hyperlink

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Hyperlink.html

Safa MEJDOUB 29
 Les contrôles étiquetés (8)

 MenuButton

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/MenuButton.html

 ToggleButton

https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/ToggleButton.html

Safa MEJDOUB 30
 Saisie de textes (1)
 La classe abstraite TextInputControl est la classe parente de différents
composants qui permettent à l'utilisateur de saisir des textes.
 Il s'agit notamment des composants d'interface :

 TextField,

 PasswordField

 TextArea

Safa MEJDOUB 31
 Saisie de textes (2)

Safa MEJDOUB 32
 Saisie de textes (3)

Safa MEJDOUB 33
 Conteneurs
Layout-Panes

Safa MEJDOUB 34
 Les conteneurs (Layout-Pane) représentent une famille
importante parmi les sous-classes de Node. Ils ont pour classe
parente Pane et Region qui possèdent de nombreuses
propriétés et méthodes héritées par tous les conteneurs.

Safa MEJDOUB 35
 Region - Structure visuelle
 C’ est la classe parente des composants (Controls) et des conteneurs (Layout-Panes)
 Elle définit des propriétés qui affectent la représentation visuelle.
 Elles définissent les notions Margin, Border, Padding, Insets, Content

 Content Area est la zone qui contient les composants enfants

 Background : une couleur ou une image
 Padding : est un espace facultatif autour de la zone contenu
 Border est l’espace autour du padding
 Margin est l’espace situé autour de la bordure
 Insets : la classe Region a une propriété Padding
de type Insets
 Insets p=New Insets(5);
 Insets p= New Insets (5,4, 3,2);

Safa MEJDOUB 36
 VBox
 VBox est un conteneur qui range ses sous composants
Verticalement sur une seule colonne.
 L'ajout des composants enfants dans le conteneur s'effectue
en invoquant d'abord la méthode générale getChildren()
qui retourne la liste des enfants du conteneur et en y ajoutant
ensuite le composant considéré (méthodes add() ou
addAll())

Safa MEJDOUB 37
Safa MEJDOUB 38
 HBox
 HBox est un conteneur qui range ses sous
composants Horizentalement sur une seule
ligne.

Safa MEJDOUB 39
Safa MEJDOUB 40
 Group
 Un gestionnaire de mise en forme qui n’applique aucune
disposition pour ses sous composants, tous les sous
composants sont dans la position(0,0).
 Son rôle est de rassembler des contrôles et d'effectuer
une certaine tâche.
 Exemple, vous pouvez rassembler 2 boutons Radio mâle et
femelle dans un groupe de sexe.

Safa MEJDOUB 41
Safa MEJDOUB 42
 BorderPane
 Il permet de placer les composants enfants dans cinq
zones: Top, Bottom, Left, Right et Center.
 Un seul objet Node (composant, conteneur, …) peut
être placé dans chacun de ces emplacements.

Safa MEJDOUB 43
Safa MEJDOUB 44
Safa MEJDOUB 45
 BorderPane

Safa MEJDOUB 46
 FlowPane
 FlowPane place les composants sur une ligne horizontale ou
verticale et passe à la ligne ou à la colonne suivante (wrapping)
lorsqu'il n'y a plus assez de place disponible.

Safa MEJDOUB 47
Safa MEJDOUB 48
 GridPane
 Permet de disposer les composants enfants dans une grille
flexible (arrangement en lignes et en colonnes), un peu à
la manière d'une table HTML.
 La grille peut être irrégulière, la hauteur des lignes et la
largeur des colonnes de la grille ne sont pas nécessairement
uniformes.
 La zone occupée par un composant peut s'étendre (span) sur
plusieurs lignes et/ou sur plusieurs colonnes.

Safa MEJDOUB 49
Safa MEJDOUB 50
 StackPane
 Le conteneur StackPane permet de disposer les composants
enfants les uns sur les autres comme dans une pile(Stack).
 on ne peut voir que l’élément qui se situe au-dessus.

Safa MEJDOUB 51
Safa MEJDOUB 52
 Mise en forme
des interfaces graphiques

53 Safa MEJDOUB
 Apparence Graphique(1)
 La notion de style, skin, thème ou look and feel (L&F)
caractérise l'ensemble des aspects visuels de l'interface
graphique et de ses composants (forme, couleur, texture, ombre,
police de caractères, …).
 En JavaFX, le style des composants est défini par des feuilles de style de
type CSS.
 Il est ainsi possible de changer globalement l'aspect de l'interface sans
avoir à modifier le code de l'application.
 Si l'on veut fixer ou changer le look and feel des interfaces, on peut
le faire au démarrage de l'application :
public void start(Stage primaryStage) {
…
Safa MEJDOUB setUserAgentStylesheet(STYLESHEET_CASPIAN); 54
…
 Apparence Graphique(2)
 Deux styles, nommés Modena et Caspian, sont prédéfinis et sont associés aux
constantes :
• STYLESHEET_MODENA : Utilisé par depuis JavaFX 8
• STYLESHEET_CASPIAN : A été défini pour JavaFX 2

Le style : MODENA Le style : CASPIAN

Safa MEJDOUB 55
 Mise en Forme des GUIs
 Il y a plusieurs manières de mettre en forme une interface
graphique JAVA FX :
• Mise en forme avec du code JAVA
• Mise en forme CSS inline
• Mise en forme avec une feuille de style CSS externe

Safa MEJDOUB 56
 Mise en forme avec du code JAVA

Safa MEJDOUB 57
 Mise en forme : Inline Style CSS

Safa MEJDOUB 58
 Mise en forme avec fichier CSS externe

Safa MEJDOUB 59
 Mise en forme avec fichier CSS externe

Safa MEJDOUB 60
 Gestion des évènements

61 Safa MEJDOUB
 Exemple

62 Safa MEJDOUB
Safa MEJDOUB 63
 Technique déclarative FXML
VS
Technique procédurale

64 Safa MEJDOUB
 Interfaces déclaratives vs procédurales
 La plateforme JavaFX offre deux techniques complémentaires pour créer les
interfaces graphiques des applications :
1) Manière déclarative
• En décrivant l'interface dans un fichier FXML (syntaxe XML)
• L'utilitaire graphique Scene Builder facilite la création et la gestion des fichiers FXML
• L'interface peut être créée par un designer (sans connaissance Java, ou presque...)
• Séparation entre présentation et logique de l'application (MVC)

2) Manière procédurale
• Utilisation d'API pour construire l'interface avec du code Java
• Création et manipulation dynamique des interfaces

 Il est possible de mélanger les deux techniques au sein d'une même application

Safa MEJDOUB 65
 Technique procédurale

Safa MEJDOUB 66
Safa MEJDOUB 67
 Technique déclarative

Safa MEJDOUB 68
Layout.fxml

Safa MEJDOUB 69
 layoutController.java myStyle.css

Safa MEJDOUB 70