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/
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/
Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
3
Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
4
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
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
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
Adapter les interactions au type des valeurs entrées Exemple : la taille d’un tableau
Tâche d’entrée
8
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
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
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
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
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
Tâche de déclenchementInteraction gestuelle pour déclencher une action
Exemples :
14
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
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 »
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
Poignées de manipulation
Tâche de transformation
18
Feedbacks sur les entrées
Pointage
Sélection (simple/multiple cliques, avec ou sans modifiers)
19
Feedbacks sur les entrées
Déplacement (drag)
Fantômes ou ombres
Encre
20
Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
21
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
Couches logicielles
23
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
Boîte à outils d’interface
Exemples
25
Les « widgets » (window gadget)
26
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
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
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
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
Exemple
31
Application
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
Stage
Exemple
33
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
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
SceneExemple
36
Scene
37
Stage
Scene
FlowPane
Label Button
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
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
40
Menu
Les widgets de JavaFX Sélection
Color Picker
Date PickerFile Chooser
41
Les widgets de JavaFX
List View
Table View
Tree View
Sélection / Affichage
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
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
Boîtes de dialogue de JavaFXExemple
44
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
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
Exemple
47
Placement des widgets
Layouts avec JavaFX
48https://docs.oracle.com/javase/8/javafx/layout-tutorial/
Vbox TilePane GridPane BorderPane
Hbox FlowPane StackPane AncchorPane
Layouts avec JavaFXExemple : FlowPane
49
Layouts avec JavaFXExemple : GridPane
50
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
Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
52
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
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
Comment gérer les entrées ?
55
Programmation événementielle
56
Programmation événementielle
57
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
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/
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
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
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
Exemples
63
Gestionnaires d’événements
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
Réagir à un événementExemple : instanciation d’une classe locale (voir externe)
65
Réagir à un événementExemple : abonnement grâce à une classe interne anonyme
66
Réagir à un événement
Exemple : abonnement grâce à une expression lambda
67
(depuis java 8)
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
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
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
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