![Page 1: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/1.jpg)
Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX
Une partie de ce cours est basée sur les transparents de Ignacio Avellino, Anastasia Bezerianos et Michel Beaudouin-Lafon
Année 2017/2018 – Et3 Info - Polytech Paris-Sud Cédric Fleury ([email protected])
https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2018/
![Page 2: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/2.jpg)
Rappels
2
Système interactif n’est pas juste un système algorithmique Représentation d’un état interne Réponse aux actions de l’utilisateur Boucle perception-action
IHM : approche multidisciplinaire Prise en compte des capacités humaines dans le système Adaptation au modèle mental de l’utilisateur
Différents styles d’interaction WIMP, interaction gestuelle, tangible jusqu’à la réalité virtuelle
https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2018/
![Page 3: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/3.jpg)
Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
3
![Page 4: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/4.jpg)
Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
4
![Page 5: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/5.jpg)
Interface graphique
L'interaction graphique
Les entrées sont spécifiées directement à partir des sorties
Périphérique d’entrée spécifie une position à l'écran qui désigne un objet précédemment affiché par le système
Cette désignation directe est appelée pointage
Elle est familière au monde physique D’où le succès de ce type d’interface
5
![Page 6: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/6.jpg)
Tâches de base de l’interaction
Tâche d’entrée
Tâche de sélection
Tâche de déclenchement
Tâche de navigation
Tâche de réglage de propriétés
Tâche de transformation
6
![Page 7: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/7.jpg)
Tâche d’entréeEntrer du texte
Champs de texte + clavier
Entrer une valeur simple Slider
Entrer une position Pointage
Entrer un chemin Echantillonnage (avec de l’« encre » comme feedback)
7
![Page 8: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/8.jpg)
Adapter les interactions au type des valeurs entrées Exemple : la taille d’un tableau
Tâche d’entrée
8
![Page 9: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/9.jpg)
Tâche de sélectionChoisir un ou plusieurs objets parmi un ensemble
Ensemble de taille fixe ou variable Ensemble de petite taille ou de grande taille
Ensemble de taille fixe Menu, boîtes à cocher (checkboxes),boutons radio (radio buttons)
Ensemble de taille variable Pointage, liste, entrée textuelle
9
![Page 10: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/10.jpg)
Sélection multiple Par groupe Par interval
Ajout/suppression
Combinaison de techniques Pointer les éléments d’un liste / utiliser un modifier avec le clavier
Tâche de sélection
10
![Page 11: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/11.jpg)
Tâche de sélectionMenus linéaires
Barre de menu +menus descendant (pulldown menus)
Palettes fixes
Menus contextuels (ou Pop-up)
Menus hiérarchiques
Menus détachables
11
![Page 12: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/12.jpg)
Tâche de sélectionMenus circulaires
Pie menus
Selection plus rapide, mais nombres d’items limités (8 en pratique)
Marking menus
Transition naturelle du novice à l’expert : effectuer le geste plus rapidement et le menu ne s’affiche pas !
12
![Page 13: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/13.jpg)
Tâche de déclenchement
Bouttons et menus
Drag-and-drop L’action dépend à la fois de la source et de la destination
13
![Page 14: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/14.jpg)
Tâche de déclenchementInteraction gestuelle pour déclencher une action
Exemples :
14
![Page 15: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/15.jpg)
Tâche de navigationBarres de défilement (scrollbars)
Direction de défilement Division de l’attention
Défilement direct Déplacement avec la main Défilement automatique
Changement d’échelle (zoom) Agrandissement pour voir les détails Rétrécissement pour voir le contexte
15
![Page 16: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/16.jpg)
Boîte de dialogue Champs + boutons « OK » / « Appliquer » / « Annuler » Modale ou non modale
Découplage spatial et temporel entre les spécification de la commande, ces paramètres et son exécution
Parties optionnelles
Tâche de réglage de propriétés
16
Problème avec le bouton « OK »
![Page 17: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/17.jpg)
Tâche de réglage de propriétésBoîte de propriété / inspecteurs
L’inspecteur est toujours visible
Le contenu change en fonction de l’objet sélectionné
La modification des propriétés affectent immédiatement l’objet sélectionné
17
![Page 18: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/18.jpg)
Poignées de manipulation
Tâche de transformation
18
![Page 19: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/19.jpg)
Feedbacks sur les entrées
Pointage
Sélection (simple/multiple cliques, avec ou sans modifiers)
19
![Page 20: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/20.jpg)
Feedbacks sur les entrées
Déplacement (drag)
Fantômes ou ombres
Encre
20
![Page 21: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/21.jpg)
Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
21
![Page 22: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/22.jpg)
Implémentation d’une interface
Problématique Faire le lien avec le système d’exploitation
Ne pas tout ré-implémenter de zéro (bouton, fenêtre, etc.)
Garder une homogénéité entre les applications
Solutions Découpage en plusieurs couches logicielles
Utilisation de boîtes à outils d’interface
22
![Page 23: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/23.jpg)
Couches logicielles
23
![Page 24: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/24.jpg)
Boîte à outils d’interface
Bibliothèque d’objets interactifs (les « widgets ») que l’on assemble pour construire l’interface
Fonctionnalités pour faciliter la programmation d’applications graphiques interactives (et gérer les entrées)
Exemple : Windows : MFC, Windows Forms (.NET) Mac OS X : Cocoa Unix/Linux : Motif Multiplateforme : Java AWT/Swing, QT, GTK+
24
![Page 25: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/25.jpg)
Boîte à outils d’interface
Exemples
25
![Page 26: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/26.jpg)
Les « widgets » (window gadget)
26
![Page 27: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/27.jpg)
JavaFX
JavaFX est une boîte à outils d’interface pour Java API orientée graphisme et interaction
Successeur des API graphiques historiques AWT et Swing
Prévu aussi pour un déploiement web (Rich Internet Application)
Amène des choses en plus : Véritable graphe de scène, Transformations graphiques, Effets, Animations, 3D, …
27
![Page 28: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/28.jpg)
Documentation officielleJavadoc (à partir de celle de JavaSE) https://docs.oracle.com/javase/8/javafx/api/toc.htm
Documentation et exemples de JavaFX https://docs.oracle.com/javase/8/javase-clienttechnologies.htm
Tutoriel sur les composants de l’interface https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/
Tutoriel sur les layouts https://docs.oracle.com/javase/8/javafx/layout-tutorial/
Tutoriel sur la gestion des événements https://docs.oracle.com/javase/8/javafx/events-tutorial/
28
![Page 29: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/29.jpg)
Classes constituant une application JavaFX
Application qui représente une application JavaFX
Stage qui est le conteneur de plus haut niveau de l’application
Scene qui contient les composants visuels
29
Architecture d’une application JavaFX
![Page 30: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/30.jpg)
Toute application JavaFX doit :
Hériter de la classe javafx.application.Application
Implémenter la méthode main(String[] args) Comme toute application Java Appelle uniquement la méthode launch(String[] args) de la classe parent Application
Redéfinir la méthode start(Stage primaryStage) Appelée par le méthode launch
Contient le code de l’application
30
Application
![Page 31: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/31.jpg)
Exemple
31
Application
![Page 32: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/32.jpg)
Stage
S’adapte en fonction du cadre d’utilisation Application lourde : fenêtre classique en fonction de l’OS Application web : fenêtre du navigateur
Est instancié automatiquement par l’application en paramètre de la méthode start(Stage primaryStage)
Contient une ou plusieurs instance de Scene
32
![Page 33: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/33.jpg)
Stage
Exemple
33
![Page 34: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/34.jpg)
Scene
Contient les composants visuels
Décrit le graphe de scène = la hiérarchie des composants visuels de la scène (sous forme de graphe)
34
![Page 35: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/35.jpg)
Construction du graphe de scène
Récupérer la liste des enfants d’un conteneur grâce à la méthode getChildren()
Ajouter à cette liste un enfant ou un groupe d’enfants avec le méthodes add(E) ou addAll(E,…)
Enlever à cette liste un enfant ou un groupe d’enfants avec le méthodes remove(E) ou removeAll(E,…)
35
Scene
![Page 36: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/36.jpg)
SceneExemple
36
![Page 37: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/37.jpg)
Scene
37
Stage
Scene
FlowPane
Label Button
![Page 38: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/38.jpg)
Noeuds du graphes de scène
Widgets « simples » Composants de l’interface graphique (affichage + interaction) Boutons, barre de défilement, …
Widgets « composés » Destinés à contenir d’autres widgets (simples ou composés) Boites de dialogue, menus, …
Les conteneurs de Widgets (Layout containers) Contient des Widgets ou d’autres conteneurs Définit le placement des composants qu’il contient
Plusieurs types de conteneurs : placement en ligne, colonne, grille, …
38
![Page 39: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/39.jpg)
Les widgets de JavaFX
39
Label & Image View
Button
Radio Button
Toggle Button
Checkbox
Text Field
Password Field
Combo BoxSlider
Affichage
Déclenchement
SélectionEntrée
Separator
![Page 40: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/40.jpg)
40
Menu
Les widgets de JavaFX Sélection
Color Picker
Date PickerFile Chooser
![Page 41: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/41.jpg)
41
Les widgets de JavaFX
List View
Table View
Tree View
Sélection / Affichage
![Page 42: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/42.jpg)
42
Scroll BarProgress Bar and Progress Indicator
Tooltip
Les widgets de JavaFX
Navigation
Scroll Pane
Feedback
https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/ui_controls.htm#JFXUI336
![Page 43: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/43.jpg)
Fenêtre attachée à une autre fenêtre La fenêtre (ou boîte) de dialogue se ferme avec celle-ci
Une fenêtre de dialogue peut être « modal » C-à-d bloquer l’interaction de la fenêtre de niveau inférieure
Différents types de boîtes de dialogue43
Boîtes de dialogue de JavaFX
![Page 44: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/44.jpg)
Boîtes de dialogue de JavaFXExemple
44
![Page 45: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/45.jpg)
Placement des widgets
Les boîtes à outils graphiques permettent de contrôle le placement des widgets
Il faut être indépendant de la taille des widgets et de la fenêtre
Utilisation de gestionnaires de géométrie dans les widgets composés
45
![Page 46: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/46.jpg)
Placement des widgets
Règles générales Imbrication géométrique d’un widget fils dans son parent Contrôle par le parent du placement de ses fils
Algorithme de placement 1. Taille naturelle de chaque fils 2. Taille et position finales
imposées par le parent 3. Contraintes :
grille, formulaire, etc.
46
![Page 47: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/47.jpg)
Exemple
47
Placement des widgets
![Page 48: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/48.jpg)
Layouts avec JavaFX
48https://docs.oracle.com/javase/8/javafx/layout-tutorial/
Vbox TilePane GridPane BorderPane
Hbox FlowPane StackPane AncchorPane
![Page 49: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/49.jpg)
Layouts avec JavaFXExemple : FlowPane
49
![Page 50: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/50.jpg)
Layouts avec JavaFXExemple : GridPane
50
![Page 51: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/51.jpg)
Astuces
Combiner de différents layouts Des VBox ou HBox dans un GridPane Des FlowPane dans un BorderPane Etc.
La fonction sizeToScene() sur le Stage permet de redimensionner la fenêtre en fonction du contenu de cette fenêtre
Particulèrement utile si le contenu de la fenêtre change
51
![Page 52: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/52.jpg)
Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
52
![Page 53: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/53.jpg)
Système interactif ≠ système algorithmique
Système algorithmique (fermé) Lit des entrées, calcule, produit un résultat => il y a un état final !
Système interactif (ouvert) Évènements provenant de l’extérieur => boucle infinie, non déterministe
53
![Page 54: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/54.jpg)
Problèmes
1. Nous avons appris à programmer des algorithmes (la partie “calcul”)
2. La plupart des langages de programmation (C, C++, Java, Lisp, Scheme, Ada, Pascal, Fortran, Cobol, ...) sont conçus pour écrire des algorithmes, pas des systèmes interactifs
3. Les entrées (read, get, scanf, cin, etc.) que nous avons utilisées sont bloquantes
54
![Page 55: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/55.jpg)
Comment gérer les entrées ?
55
![Page 56: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/56.jpg)
Programmation événementielle
56
![Page 57: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/57.jpg)
Programmation événementielle
57
![Page 58: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/58.jpg)
Programmation événementielle avec JavaFX
JavaFX se base sur :
Un ensemble d’événements (Event) émis par l’interface Fournis par l’API Créés par les developeurs
Des gestionnaires d’événements (EventHandler) qui définissent les actions effectuer lorsqu’un événement se produit
Un système de propagation des événements très riche
Plusieurs façons de s’abonner à la reception d’un événement
58
![Page 59: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/59.jpg)
Evénements
Evénements fournis par l’API de JavaFX
ActionEvent pour une action simple sur l’interface (clic sur un bouton par exemple)
MouseEvent pour les déplacements, survols et clics de la souris
ScrollEvent pour les défilements à l’aide de la molette de la souris, du trackpad, d’un écran tactile, …
TouchEvent pour les appuis sur un écran tactile
Etc.
59
https://docs.oracle.com/javase/8/javafx/events-tutorial/
![Page 60: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/60.jpg)
EvénementsUn événement transporte des informations
type : une information additionnelle sur le type Ex : MouseEvent.MOUSE_PRESSED
target : une cible qui dépend type d’événement Ex : pour la souris, c’est le noeud le plus haut placé sous le pointeur
source : le noeud qui a été abonné à l’événement
Etc.
Et éventuellement des informations spécifiques à l’événement
Toutes ces informations sont accessibles par des getters getType(), getTarget(), getSource(), getX(), …
60
![Page 61: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/61.jpg)
Evénements
Créer ses propres événements
Créer une classe héritant de javafx.event.Event ou d’une de ses sous-classes
Intérêt ? Transporter des informations particulières
Obtenir un couplage faible entre des composants logiciels
61
![Page 62: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/62.jpg)
Gestionnaires d’événementsEventHandler<T extends Event> : interface fonctionnelle décrivant la réaction à un événement
Comporte une unique méthode handle(T event) avec l’événement géré comme paramètre
Pour décrire la réaction à un événement :
Implémenter l’interface et placer le code du traitement à effectuer à l’intérieur de la méthode handle(T event)
Toutes les informations sur l’événement sont récupérables dans cette méthode grâce à son paramètre
62
![Page 63: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/63.jpg)
Exemples
63
Gestionnaires d’événements
![Page 64: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/64.jpg)
Réagir à un événementAbonnement simplifié
Utiliser les convenience methods de JavaFX pour s’abonner à une événement
Syntaxe : setOnXXX(EventHandler<T> event) où XXX est le type de l’événement (sans la terminaison Event)
Exemples : setOnAction(EventHandler<ActionEvent> event)
setOnKeyPressed(EventHandler<KeyEvent> event)
setOnMousePressed(EventHandler<MouseEvent> event)
64
![Page 65: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/65.jpg)
Réagir à un événementExemple : instanciation d’une classe locale (voir externe)
65
![Page 66: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/66.jpg)
Réagir à un événementExemple : abonnement grâce à une classe interne anonyme
66
![Page 67: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/67.jpg)
Réagir à un événement
Exemple : abonnement grâce à une expression lambda
67
(depuis java 8)
![Page 68: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/68.jpg)
Réagir à un événement
Les convenience methods ont deux inconvénients
Elles ne fonctionnent qu’avec les événements standards, pas avec ceux créés par les développeurs
Les abonnements à un événement donné ne sont pas cumulables sur un même composant
Pour palier à ces problèmes, il faudra utiliser le mécanisme complet de propagation des événements.
68
![Page 69: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/69.jpg)
ConclusionCe que l’on a vu sur JavaFX
Architecture d’une application JavaFX Classes constituant une application Construction du graphe de scène Les Widgets de JavaFX Les Layouts et le placement des Widgets
Programmation événementielle Evénements Gestionnaires d’événements Réagir à un événement
69
![Page 70: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/70.jpg)
Conclusion
Ce que l’on vera la prochaine fois L’abonnement complexe aux événements et leur propagation
Les éléments graphiques
Les transformations
Le langage basé sur xml permettant de décrire le graphe de scène et les interactions de base : FXML
L’interface permettant de concevoir les interfaces graphiques de façon plus intuitive : SceneBuilder
70
![Page 71: Interaction Homme-Machinecfleury/teaching/et3-info/IHM-2018/...Interaction Homme-Machine Cours 2 : Interface graphique & programmation avec JavaFX Une partie de ce cours est basée](https://reader033.vdocuments.mx/reader033/viewer/2022041810/5e573da6bf0cd203db646273/html5/thumbnails/71.jpg)
Conclusion
Ce que l’on ne vera pas dans le cadre du cours
La gestion de la 3D
Les effets et les animations sur n’importe quel élément du graphe de scène (dessin ou widget)
L’habillage CSS
A vous de le découvrir !
71