Interaction Homme-Machine
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Interaction Homme-Machine
Cours 2 : Interface graphique & programmation avec JavaFX
Année 2018/2019 – Et3 Info - Polytech Paris-Sud
Cédric Fleury (cedric.fleury@lri.fr)
https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2019/
Une partie de ce cours est basée sur les transparents de Ignacio Avellino,
Anastasia Bezerianos et Michel Beaudouin-Lafon
Rappels
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-2019/
2
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ée
Entrer 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
Tâche d’entrée
Adapter les interactions au type des valeurs entrées
Exemple : la taille d’un tableau
8
Tâche de sélection
Choisir 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
Tâche de sélection
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
10Tâche de sélection
Menus linéaires
Barre de menu +
menus descendant
(pulldown menus)
Palettes fixes
Menus contextuels (ou Pop-up)
Menus hiérarchiques
Menus détachables
11Tâche de sélection
Menus 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 !
12Tâche de déclenchement
Bouttons et menus
Drag-and-drop
L’action dépend à la fois de la source et de la destination
13Tâche de déclenchement
Interaction gestuelle pour déclencher une action
Exemples :
14Tâche de navigation
Barres 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
15Tâche de réglage de propriétés
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
Problème avec le bouton « OK »
16Tâche de réglage de propriétés
Boî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é
17Tâche de transformation
Poignées de manipulation
18Feedbacks sur les entrées
Pointage
Sélection (simple/multiple cliques, avec ou sans modifiers)
19Feedbacks sur les entrées
Déplacement (drag)
Fantômes ou ombres
Encre
20Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
21Implé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
22Couches logicielles
23Boî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+
24Boîte à outils d’interface
Exemples
25Les « widgets » (window gadget)
26JavaFX
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, …
27Documentation officielle
Javadoc (à 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/
28Architecture d’une application JavaFX
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
29Application
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
30Application
Exemple
31Stage
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
32Stage
Exemple
33Scene
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)
34Scene
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,…)
35Scene
Exemple
36Stage
Scene
Scene
FlowPane
Label Button
37Noeuds 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, …
38Les widgets de JavaFX
Affichage Entrée Sélection
Text Field Toggle Button
Label & Image View
Password Field
Radio Button Checkbox
Separator
Déclenchement
Slider
Combo Box
Button
39Les widgets de JavaFX
Sélection
Menu
Color Picker
File Chooser Date Picker
40Les widgets de JavaFX
Sélection / Affichage
List View
Table View
Tree View
41Les widgets de JavaFX
Navigation Feedback
Scroll Bar
Progress Bar and Progress Indicator
Tooltip
Scroll Pane
https://docs.oracle.com/javase/8/javafx/user-interface-tutorial/ui_controls.htm#JFXUI336
42Boîtes de dialogue de JavaFX
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 dialogue
43Boîtes de dialogue de JavaFX
Exemple
44Placement 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
45Placement 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.
46Placement des widgets
Exemple
47Layouts avec JavaFX
Vbox TilePane GridPane BorderPane
Hbox FlowPane StackPane AncchorPane
https://docs.oracle.com/javase/8/javafx/layout-tutorial/
48Layouts avec JavaFX
Exemple : FlowPane
49Layouts avec JavaFX
Exemple : GridPane
50Astuces
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
51Plan du cours
A - Interface graphique
B - Implémentation d’une interface avec JavaFX
C - Programmation événementielle
52Systè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
53Problè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
54Comment gérer les entrées ?
55Programmation événementielle
56Programmation événementielle
57Programmation é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
58Evé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.
https://docs.oracle.com/javase/8/javafx/events-tutorial/
59Evénements
Un é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(), …
60Evé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
61Gestionnaires d’événements
EventHandler : 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
62Gestionnaires d’événements
Exemples
63Réagir à un événement
Abonnement simplifié
Utiliser les convenience methods de JavaFX pour s’abonner à
une événement
Syntaxe :
setOnXXX(EventHandler event)
où XXX est le type de l’événement (sans la terminaison Event)
Exemples :
setOnAction(EventHandler event)
setOnKeyPressed(EventHandler event)
setOnMousePressed(EventHandler event)
64Réagir à un événement
Exemple : instanciation d’une classe locale (voir externe)
65Réagir à un événement
Exemple : abonnement grâce à une classe interne anonyme
66Réagir à un événement
Exemple : abonnement grâce à une expression lambda
(depuis java 8)
67Ré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.
68Conclusion
Ce 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
69Conclusion
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
70Conclusion
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 !
71Vous pouvez aussi lire
