JAVA AVANCÉE

Chapitre III : Interfaces graphiques

Plan
 Notion de bases
 Bibliothèque AWT
 Bibliothèque Swing
 JavaFX

151 Java Avancée- Selma BATTI ATTIA 2020/2021

Notions de base
 Présentation du graphique
 Traçage des formes de base
 Traçage de texte
 Gestion des couleurs
 Chevauchement, effacement et copie des zones
 Applet

152 Java Avancée- Selma BATTI ATTIA 2020/2021

Présentation du graphique
 Interfaces graphiques : dialogue entre les utilisateurs et
une application.
 Pour développer des applications ou des applets, Java
propose :
 API AWT pour créer des interfaces graphiques.
 API Swing.
 Face aux problèmes de performance de Swing, IBM a
développé sa propre bibliothèque nommée SWT utilisée
pour développé l'outil Eclipse.

153 Java Avancée- Selma BATTI ATTIA 2020/2021

Graphique sous Java
 La classe Graphics contient les outils nécessaires pour
dessiner.
 Cette classe est abstraite et elle ne possède pas de
constructeur public : il n'est pas possible de construire
des instances de Graphics nous même.
 Les instances nécessaires sont fournies par le système
d'exploitation qui instanciera via à la machine virtuelle
une sous classe de Graphics dépendante de la
plateforme utilisée.

154 Java Avancée- Selma BATTI ATTIA 2020/2021

Tracé de formes géométriques
Méthodes Principes
drawRect(x, y, largeur, hauteur) dessiner un carré ou un rectangle
fillRect(x, y, largeur, hauteur)
drawRoundRect(x, y, largeur, hauteur, dessiner un carré ou un rectangle arrondi
hor_arr,ver_arr)
fillRoundRect(x, y, largeur, hauteur, hor_arr,
ver_arr)
drawLine(x1, y1, x2, y2) Dessiner une ligne
drawOval(x, y, largeur, hauteur) dessiner un cercle ou une ellipse en spécifiant
fillOval(x, y, largeur, hauteur) le rectangle contenant
drawPolygon(int[], int[], int) Dessiner un polygone ouvert ou fermé.
fillPolygon(int[], int[], int)
drawArc(x, y, largeur, hauteur, angle_deb, dessiner un arc d'ellipse inscrit dans un
angle_bal) rectangle ou un carré. L'angle 0 se situe à 3
fillArc(x, y, largeur, hauteur, angle_deb, heures. Il faut indiquer l'angle de début et
angle_bal); l'angle balayé

155 Java Avancée- Selma BATTI ATTIA 2020/2021

Tracé de texte et police
 drawString() : méthode de Graphics qui affiche un texte
aux coordonnées précisées
 Font : classe gérant la police des caractères
 Font(String, int, int) : constructeur ayant comme paramètres le
nom de la police, le style (BOLD, ITALIC, PLAIN ou 0,1,2) et
la taille des caractères en points.
 getName() : retourne le nom de la fonte.
 setFont() : méthode de Graphics qui change la police
d'affichage des textes

156 Java Avancée- Selma BATTI ATTIA 2020/2021

Gestion des couleurs
 La méthode setColor() de la classe Graphics permet de
fixer la couleur des éléments graphiques des objets de
type Graphics créés après à son appel.

 La classe Color définie les couleurs : Color.black,

Color.green, Color.blue, Color.red, Color.white, ...

157 Java Avancée- Selma BATTI ATTIA 2020/2021

Chevauchement, effacement et copie d'une aire
 Si 2 surfaces de couleur différentes se superposent, alors
la dernière dessinée recouvre la précédente sauf si on
invoque la méthode setXORMode().
 clearRect(x1, y1, x2, y2) : dessine un rectangle dans la
couleur de fond courante.
 copyArea(x1, y1, x2, y2, dx, dy) : copie une aire
rectangulaire délimitée par les 4 premiers paramètres.
Les paramètres dx et dy précisent l'emplacement du
début de la copie.

158 Java Avancée- Selma BATTI ATTIA 2020/2021

Applet
 Une application peut être téléchargée par un navigateur
Web si c'est une instance de la classe
java.applet.Applet ou de la classe
javax.swing.JApplet.
 Cette dernière dérive de la première qui est elle-même
dérivée de la classe Panel elle-même dérivée de la classe
Container.

159 Java Avancée- Selma BATTI ATTIA 2020/2021

Exécution d'une applet
 Lorsqu'un navigateur charge une applet, il appelle trois méthodes
de celle-ci :
 init : appelée lors du chargement initial de l'applet. On y mettra donc les
initialisations nécessaires à l'application.
 start : appelée à chaque fois que le document contenant l'applet devient le
document courant du navigateur.
 stop : appelée à chaque fois que l'utilisateur quitte le document contenant
l'applet.
 Au chargement, les méthodes init et start vont être exécutées
successivement. En quittant le document, la méthode stop va être
exécutée. Au retour, la méthode start sera exécutée.

160 Java Avancée- Selma BATTI ATTIA 2020/2021

De l'application vers l'applet
…
public class application{
…
public static main void(String arg[]){
…
import java.applet.JApplet;
}
…
…
public class application extends JApplet{
}// fin classe
…
public void init(){
…
}
…
161 }// Java
fin Avancée-
classe Selma BATTI ATTIA 2020/2021
Java : Interfaces graphiques
JavaFX
Plan
 Historique et présentation
 Structure de base
 Cycle de vie
 Composants
 Exemples et codes
 Exercice

163 Java Avancée- Selma BATTI ATTIA 2020/2021

Présentation
 Java FX est la bibliothèque de référence pour construire
des interfaces graphique Java 8 : Java FX 8.

164 Java Avancée- Selma BATTI ATTIA 2020/2021

Bref Historique
 JavaFX 1 : sortie fin 2008, langage de script
JavaFXScript, compatible pour Windows à partir de XP,
pour OS X et Linux. Il existait une version pour appareil
mobile, compatible sur iOS, Android, Windows Mobile
(pas Windows Phone) et d’autres OS propriétaire.
 La dernière version est JavaFX 8 qui est désormais
intégré à Java SE 8.
 Oracle ne développe plus les fonctionnalités de Swing
pour se concentrer sur l’API JavaFX qui peut cohabiter
avec Swing et AWT.

165 Java Avancée- Selma BATTI ATTIA 2020/2021

 Présentation

 Glossaire JavaFX :
 Glass Windowing Toolkit : Ensemble d’outils dépendants de la plate-forme pour
se connecter au système d’exploitation natif. Il utilise la file d’événements du
système d’exploitation pour planifier l’utilisation du thread. En outre, il gère de
manière asynchrone les fenêtres, les événements et les minuteries.
 Prism : pipeline graphique à accélération matérielle pour le rendu. De plus, pour
accélérer pleinement l’utilisation des graphiques, il exploite le mécanisme de
rendu logiciel ou matériel, en utilisant en interne DirectX et OpenGL.
 Les moteurs Media et Web permettent la lecture de supports HTML/CSS.
 Quantum Toolkit : Relie Prism et Glass ensemble et les rend disponible pour
l’API de JavaFX.
166 Java Avancée- Selma BATTI ATTIA 2020/2021
Composants de base : Stage, Scene et Noeud
 Stage : le conteneur principal et le point d’entrée de
l’application. Il représente la fenêtre principale et est passé
comme argument de la méthode start ().
 Scene : un conteneur pour contenir les éléments de l’interface
utilisateur, tels que image, vues, boutons, grilles, zones de
texte.
 Le Scene peut être remplacé ou changé pour un autre Scene.
Cela représente un graphe d’objets hiérarchiques, appelé
Scene Graph. Chaque élément de cette hiérarchie est appelé
un nœud.
 Un nœud a son identifiant, son style, ses effets, ses
gestionnaires d’événements et son état.
 De plus, Scene contient également les conteneurs de mise en
page, les images et les supports.
167 Java Avancée- Selma BATTI ATTIA 2020/2021
Composants de base : Fils
 Au niveau du système, la machine virtuelle Java crée des
threads distincts pour l’exécution et le rendu de
l’application :
 Fil de rendu Prism - responsable du rendu du graphe __Scene
 Application thread - est le thread principal de toute application
JavaFX. Tout les nœuds actifs et les composants sont attachés à
ce fil.

168 Java Avancée- Selma BATTI ATTIA 2020/2021

Organisation
 Chaque application peut avoir plusieurs « Stage » -
fenêtres.
 Chaque « Stage » peut itérer plusieurs scènes.
 Les scènes contiennent des nœuds - des mises en page
et des composants normaux.

169 Java Avancée- Selma BATTI ATTIA 2020/2021

Graph de nœuds
 Structure de données hiérarchique représentant les
composants de la scéne.
 Nœud :
 objet visuel/graphique du graph de nœud
■ Peut inclure :
■ Objet géométrique (2D et 3D) : cercle, rectangle, polygonne …
■ Contrôle UI : boutton, zone de texte, …
■ Contenaires : Panel …
■ Éléments médias : audio, video, image

170 Java Avancée- Selma BATTI ATTIA 2020/2021

Nœuds
 Tous les types de nœuds JavaFX héritent d'une classe-
mère commune nommée Node.
 Cette classe possède des attributs permettant, entre
autres, de :
 positionner le nœud dans le système de coordonnées de son
parent, par exemple en le translatant ou en le tournant,
 définir le style visuel du nœud, par exemple son opacité,
 attacher des gestionnaires d'événements qui sont informés
lorsque différents événements liés au nœud se produisent, par
exemple son survol par le pointeur de la souris.

171 Java Avancée- Selma BATTI ATTIA 2020/2021

Catégorie de nœuds : géométriques
 Les 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,
héritant elle-même de Node.
 Les principaux types de nœuds graphiques représentent :
 des formes géométriques simples (classes Arc, Circle, Ellipse, Line,
Polygon, Polyline et Rectangle),
 des courbes de Bézier (CubicCurve et QuadCurve),
 des « chemins », composés d'une succession d'éléments simples
comme des segments de lignes ou de courbes, etc. (Path et
SVGPath),
 du texte, qui peut occuper plusieurs lignes (Text).

172 Java Avancée- Selma BATTI ATTIA 2020/2021

Catégorie de nœuds : graphiques
 Les nœuds graphiques présentent un contenu graphique, qui peut
être une image ou une vidéo.
 Ils héritent directement de la classe Node :
 ImageView, qui affiche une image,
 MediaView, qui affiche une vidéo,
 Canvas, qui affiche une image modifiable, sur laquelle il est possible de
dessiner différentes primitives graphiques (lignes, rectangles, etc.).
 La différence entre les primitives dessinées sur un canevas et les
nœuds géométriques est que ces derniers ont une existence
propre dans le graphe de scène et peuvent être manipulés
individuellement, ce qui n'est pas le cas des premières.
 Par exemple, un nœud de type Line appartenant à un graphe de
scène peut être déplacé ou tourné, alors qu'une ligne dessinée sur
un canevas ne peut plus être manipulée une fois dessinée.
173 Java Avancée- Selma BATTI ATTIA 2020/2021
Catégorie de nœuds : de contrôle
 Les nœuds de contrôle sont des nœuds représentant des
composants d'interface graphique avec lesquels il est
possible d'interagir, comme les boutons, les menus, etc.
 Tous héritent d'une classe-mère commune nommée
Control, héritant (indirectement) de Node.
 Ils font partie du contrôleur de l'application, selon la
terminologie du patron MVC.
 La quasi totalité d'entre eux font également partie de la
vue, puisqu'ils présentent graphiquement une valeur.

174 Java Avancée- Selma BATTI ATTIA 2020/2021

Plusieurs composants
 Cette bibliothèque propose plusieurs composants
graphiques :
 Les DatePicker qui permet de récupérer un objet LocalDate.
 Les TreeTableView qui combine les TableView et des
TreeView (des tableaux et des arbres).
 Les TextFlow qui supporte du texte.
 Des composants 2D et 3D.
 …

175 Java Avancée- Selma BATTI ATTIA 2020/2021

Composants
Label
représente une étiquette, c-à-d un court texte qui permet de clarifier l'utilité de certaines parties
de l'interface graphique
Button
représente un bouton à un état, sur lequel il est possible d'appuyer dans le but d'effectuer une
action
ColorPicker
permet de présenter et choisir une couleur
CheckBox
contrôle qui peut être à l’état soit vrai (true) soit faux (false)
RadioButton
fait toujours partie d'un groupe de boutons du même type, et exactement un d'entre eux peut
être sélectionné à un moment donné
ListView
présente une liste de valeurs et offre la possibilité à l'utilisateur de sélectionner une ou plusieurs
d'entre elles
TextField
permet de présenter et éditer du texte

176 Java Avancée- Selma BATTI ATTIA 2020/2021

Composants
PasswordField
zone de texte spécifique pour les mots de passe
Scrollbar
donne la main à l’utilisateur e sélectionner une valeur par rapport à une zone de valeurs
FileChooser
fenêtre de dialogue donnant la main de choisir un fichier d’une arborescence
ProgressBar
permet de visualiser de différentes manières l'état d'avancement d'une opération de longue durée
Slider
permet de présenter et modifier une valeur, souvent continue, comprise entre deux bornes

177 Java Avancée- Selma BATTI ATTIA 2020/2021

Gestion des événements
 Les gestionnaires d'événements sont généralement des
objets implémentant l'interface fonctionnelle et
générique EventHandler.
 Le paramètre de type de cette interface spécifie le type
de l'événement géré par le gestionnaire.
 Les gestionnaires d'événements sont attachés à une
source d'événements — souvent un nœud — et leurs
méthodes sont appelées chaque fois qu'un événement se
produit.

178 Java Avancée- Selma BATTI ATTIA 2020/2021

Evènement
 Lorsqu'un événement se produit, JavaFX collecte les
informations à son sujet dans un objet passé au gestionnaire.
 Par un léger abus de langage, cet objet lui-même est nommé
événement (event).
 JavaFX définit un grand nombre de types d'événements, parmi
lesquels :
 les événements liés à la souris (mouse event) : clic d'un bouton, déplacement
du pointeur, survol, etc.
 les événements liés à un écran tactile : appui du doigt, glissement du doigt
dans une direction donnée, etc.
 les événements liés au clavier : pression et relâchement d'une touche, etc.
 En plus de ces événements généraux, des événements plus
spécialisés sont également générés par différents composants. Par
exemple, un bouton génère un événement lorsqu'il est pressé …

179 Java Avancée- Selma BATTI ATTIA 2020/2021

Cycle de vie
 Le point d'entrée pour les applications JavaFX est la classe
Application.
 JavaFX exécute dans l'ordre, chaque fois qu'une application
est lancée, les actions suivantes :
 Construit une instance de la classe Application spécifiée
 Appelle la méthode init ()
 Appelle la méthode start (javafx.stage.Stage)
 Attend l'achèvement de l'application
 Appelle la méthode stop ()

 La méthode de démarrage (start) est abstraite et doit être

surchargée.
 Les méthodes d'initialisation (init) et d'arrêt (stop) ont des
implémentations concrètes qui ne font rien.
180 Java Avancée- Selma BATTI ATTIA 2020/2021
Comment faire une interface avec JavaFX ?
 Java FX permet :
 créer des interfaces graphiques en codant directement avec les
objets présent dans le JDK
 utiliser un fichier FXML qui sert à décrire l’interface et répond
à certaines règles
 gérer l'apparence des IHM via des fichiers CSS (Cascading
Style Sheet)

181 Java Avancée- Selma BATTI ATTIA 2020/2021

Place à la pratique
 Comment afficher une fenêtre simple ?
 créer des interfaces graphiques en codant directement avec les
objets présent dans le JDK :

Java Avancée- Selma BATTI ATTIA 2020/2021

182
Ajouter une feuille de style
 scene.getStylesheets().add("/application/application.css");

 Exemple de feuille de style :

183 Java Avancée- Selma BATTI ATTIA 2020/2021

Layout …
 Plusieurs layout prédéfinis :
 HBox,
 VBox,
 Border Pane,
 Stack Pane,
 Text Flow,
 Anchor Pane,
 Title Pane,
 Grid Pane,
 Flow Panel …
 Chaque layout est représenté par une classe sous le même
package javafx.layout
 Classe Pane classes de base de tous les layouts de JavaFX

184 Java Avancée- Selma BATTI ATTIA 2020/2021

Exercice

185 Java Avancée- Selma BATTI ATTIA 2020/2021

Objets utilisés
 Étiquette :
Text text1 = new Text("Email");
 Zone éditable :
TextField textField1 = new TextField();
 Zone éditable masquée :
PasswordField textField2 = new PasswordField();
 Bouton :
Button button1 = new Button("Submit");
 Claque d’alignement :
GridPane gridPane = new GridPane();

186 Java Avancée- Selma BATTI ATTIA 2020/2021

Exemple de traitement sur le calque de type grille
 Définir une taille minimale :
gridPane.setMinSize(400, 200);
 Définir les marges :
gridPane.setPadding(new Insets(10, 10, 10, 10));
 Définir les espacements :
gridPane.setVgap(5);
gridPane.setHgap(5);
 Définir l’alignement :
gridPane.setAlignment(Pos.CENTER);

187 Java Avancée- Selma BATTI ATTIA 2020/2021

Exemple d’insertion d’un composant dans la grille
 Insertion d’une étiquette à la première case :
gridPane.add(text1, 0, 0);

188 Java Avancée- Selma BATTI ATTIA 2020/2021

Insertion d’un écouteur de click sur un bouton
button1.setOnAction(
new EventHandler<ActionEvent>() {
@Override
public void handle(ActionEvent event) {
…
…
}
}
);

189 Java Avancée- Selma BATTI ATTIA 2020/2021

Exercice
 Implémenter une application qui affiche une fenêtre
avec un bouton qui déclenche un Bip sonore.

190 Java Avancée- Selma BATTI ATTIA 2020/2021

Correction
public class Beeper extends Application implements
EventHandler<ActionEvent> {
StackPane root ;
public Beeper() {
root = new StackPane();
}
@Override
public void start(Stage primaryStage) {
primaryStage.setTitle("Beeper");
Scene scene = new Scene(root,200,200);
primaryStage.setScene(scene);
primaryStage.show();
}

191 Java Avancée- Selma BATTI ATTIA 2020/2021

@Override
public void handle(ActionEvent e) {
Toolkit.getDefaultToolkit().beep(); // du l’API java.awt.Toolkit qui est obsolète
System.out.println("Aie!!!");
}
@Override
public void init(){
Button btn = new Button("Ding!");
btn.setStyle("-fx-font: 42 arial; -fx-base: #b6e7c9;");
// handle the button clicked event
btn.setOnAction(this);
root.getChildren().add(btn);
}
public static void main(String[] args) {launch(args);}
}

192 Java Avancée- Selma BATTI ATTIA 2020/2021