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 ([Link]): 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 ([Link]) : 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
([Link])
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 [Link]
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
Safa MEJDOUB 15
Eléments d’une application JavaFX
Safa MEJDOUB 16
Les nœuds
Safa MEJDOUB 17
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 19
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 20
Nœuds graphiques
Safa MEJDOUB 21
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 22
Nœuds de contrôle
Safa MEJDOUB 23
Nœuds de contrôle
Ce sont des composants de GUI avec lesquels on peut interagir.
Ils héritent de la classe Control et font partie du contrôleur
de l’application.
On cite parmi ces classes
o Label: représente une étiquette
oButton: représente un bouton à un état, sur
lequel il est possible d’appuyer dans le but
d’effectuer une action)
oRadioButton: un seul état est activé( le "ou"
exclusif)
Safa MEJDOUB 24
Nœuds de contrôle
o TextField: gère une seule ligne du texte
o TextArea: gère un texte de plusieurs lignes
o ChoiceBox : présente et effectue un choix parmi
un certain nombre fini de valeurs
Safa MEJDOUB 25
Nœuds de contrôle
o HTMLEditor : gère du texte stylé
o ColorPicker :présente et choisit une
couleur.
o ListView( présente une liste de valeurs
et permet à l’utilisateur de sélectionner
une ou plusieurs d’entre elles ,
o …..
Safa MEJDOUB 26
Panneaux
C’est un nœud dont le but principal est de servir de
conteneur pour ses nœuds enfants, qu’ils faut les placer
manuellement.
Les autres types de panneaux sont représentés par des sous-
classes de Pane, qui se distinguent par la manière dont ils
organisent leurs enfants.
Safa MEJDOUB 27
Conteneurs
Layout-Panes
Safa MEJDOUB 28
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 29
Safa MEJDOUB 30
HBox
HBox est un conteneur qui range ses sous
composants Horizentalement sur une seule
ligne.
Safa MEJDOUB 31
Safa MEJDOUB 32
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 33
Safa MEJDOUB 34
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 35
Safa MEJDOUB 36
Safa MEJDOUB 37
Safa MEJDOUB 38
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 39
Safa MEJDOUB 40
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 41
Safa MEJDOUB 42
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 43
Safa MEJDOUB 44
Gestion des évènements
45 Safa MEJDOUB
Exemple
46 Safa MEJDOUB
Safa MEJDOUB 47