Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre...
Transcript of Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre...
![Page 1: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/1.jpg)
Interaction Homme-Machine Cours 4 : Interface graphique & programmation
Année 2016/2017 – Et3 Info - Polytech Paris-Sud Cédric Fleury ([email protected])
Une partie de ce cours est basée sur les transparents de Ignacio Avellino, Anastasia Bezerianos et Michel Beaudouin-Lafon
https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2016/
![Page 2: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/2.jpg)
RappelsLe processeur humain
Perception Cognition Système moteur
La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc.
La mémoire à court terme n’est pas infinie Règles de 7 éléments, éviter les procédures complexes, favoriser la reconnaissance plutôt que la mémoire
Les capacités motrices ont des limites (ex : loi de Fitts) Il faut trouver des solutions pour faciliter l’interaction
2https://www.lri.fr/~cfleury/teaching/et3-info/IHM-2016/
![Page 3: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/3.jpg)
Plan du cours
A - Interface graphique
B - Programmation des interfaces graphiques
3
![Page 4: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/4.jpg)
Plan du cours
A - Interface graphique
B - Programmation des interfaces graphiques
4
![Page 5: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/18.jpg)
Poignées de manipulation
Tâche de transformation
18
![Page 19: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/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... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/21.jpg)
Plan du cours
A - Interface graphique
B - Programmation des interfaces graphiques
21
![Page 22: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/22.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
22
![Page 23: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/23.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
23
![Page 24: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/24.jpg)
Comment gérer les entrées ?
24
![Page 25: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/25.jpg)
Programmation événementielle
25
Animations : horloge comme source d’événements « tick » => évènement => progrès
![Page 26: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/26.jpg)
Programmation événementielle
26
![Page 27: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/27.jpg)
Exemple pour Swing (et AWT)
3 threads dans la JVM :
1. main ()
2. toolkit thread : reçoit (de l’OS) les événements et les met dans une file d’attente
3. EDT gère la file d’attente : envoie des événements aux Listeners (objets qui traitent les événements) et appelé les méthodes de mise à jour de l’interface (drawing functions)
27
Programmation événementielle
![Page 28: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/28.jpg)
Couches logicielles
28
![Page 29: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/29.jpg)
Constructeurs d’interface
Exemples : MS Visual Studio (C++, C#, etc.), NetBeans (Java), Interface Builder (ObjectiveC), etc.
29
![Page 30: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/30.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+
30
![Page 31: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/31.jpg)
Boîte à outils d’interface
Problèmes avec les toolkits ?
31
![Page 32: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/32.jpg)
Les « widgets » (window gadget)
32
![Page 33: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/33.jpg)
Les widgets de Swing
33
![Page 34: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/34.jpg)
Les widgets de Swing
Attention ! Il n’y est pas possible de connaître le fonctionnement de tous les widgets => Allez regarder la documentation !
34
![Page 35: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/35.jpg)
Arbre des widgets
Widgets « simples » Boutons Barre de défilement Etc.
Widgets « composés » Destinés à contenir d’autres widgets (simples ou composés) Boites de dialogue Menus Etc.
35
![Page 36: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/36.jpg)
Arbre des widgets
Représentation hiérarchique de la structure des widgets Un composant ne peut appartenir qu’à un seul « container »
36
![Page 37: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/37.jpg)
Classes de widgets Swing Une application graphique a un widget de haut niveau (conteneur) qui comprend tous les autres
Swing en a 3 types: JFrame, JDialog et JApplet
Ils contiennent tous les autres widgets (simples ou complexes) qui sont déclarées dans le champ ContentPane
37https://docs.oracle.com/javase/tutorial/uiswing/components/toplevel.html
![Page 38: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/38.jpg)
Classes de widgets Swing
AWT (plus vieux) est plus connecté au système graphique Swing est son extension (moins d’utilisation du système graphique)
38
https://docs.oracle.com/javase/tutorial/uiswing/components/index.html
=> on essayera de privilégier Swing à AWT => on essayera de ne pas mélanger les composants Swing et AWT
![Page 39: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/39.jpg)
JFrame
Une fenêtre
Quelques fonctions public JFrame();
public JFrame(String name); public Container getContentPane(); public void setJMenuBar(JMenuBar menu);
public void setTitle(String title); public void setIconImage(Image image);
39
![Page 40: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/40.jpg)
JDialogFenê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
40
![Page 41: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/41.jpg)
Ajout de widgets
41
Ou est le JLabel ?
![Page 42: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/42.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
42
![Page 43: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/43.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.
43
![Page 44: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/44.jpg)
« Layout managers » (Swing)
44
https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html
![Page 45: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/45.jpg)
« Layout managers » (Swing)
45
![Page 46: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/46.jpg)
« Layout managers » (Swing)
46
![Page 47: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/47.jpg)
« Layout managers » (Swing)
47
![Page 48: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/48.jpg)
Méthode pack()Fonction de la classe JFrame
Calcule la taille et la position idéales de tous les composants de la fenêtre
Permet à chaque composant de garder, dans un premier temps, sa taille optimale en fonction du LayoutManager
Pack() calcule ensuite la taille de la fenêtre
L'appel à pack() doit se faire à l'intérieur du constructeur de fenêtre après insertion de tous les composants.
48
![Page 49: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/49.jpg)
Guides de placement (Mac OS X)
49
![Page 50: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/50.jpg)
Guides de placement (Mac OS X)
« Center-equalization » : équilibre visuelle du contenu d’un composant, à droite et à gauche de la ligne médiane
50
![Page 51: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/51.jpg)
Guides de placement (Mac OS X)
Alignement
51
![Page 52: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/52.jpg)
Guides de placement (Mac OS X)
Espacement
52
![Page 53: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/53.jpg)
Guides de placement (Mac OS X)
Alignement et cohérence
53
![Page 54: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/54.jpg)
Facettes d’un widgetPrésentation
Apparence graphique
Comportement Réactions aux actions de l’utilisateur
Ex : bouton Cadre avec un nom à l’intérieur « Enfoncement » lorsque l’on clique dessus Grisé quand non-disponible + fonction appelée lorsque le bouton est cliquée
54
![Page 55: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/55.jpg)
Facettes d’un widgetPrésentation
Apparence graphique
Comportement Réactions aux actions de l’utilisateur
Interface avec l’application Notifications de changement d’état
Variable actives (Tcl/TK)
Envoi de message (Qt)
Fonctions de rappel : « callbacks » (Swing)
55
![Page 56: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/56.jpg)
Variables actives (wrapped vars)
Lien bi-directionnel entre une variable d’état du widget et une variable de l’application
56
Problèmes Limité aux types simples Lien de retour peut être coûteux Erreurs lorsque les liens sont mis à jour à la main
(exemple en C++)
![Page 57: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/57.jpg)
Envoi de message (event dispatching)
Widgets agissent comme des périphériques d'entrée et envoient des événements lorsque leurs changements d'état
Association d’un objet à un widget et de méthodes de l’objet aux changements d’état
Une boucle « while » lit et traite des événements
57
![Page 58: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/58.jpg)
Envoi de message (event dispatching)
Division d'envoi et de traitement des événements
Meilleure encapsulation (à l'intérieur de la classe de widget)
Mais il faut qu’un objet avec des comportements similaires existent ...
58
![Page 59: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/59.jpg)
Fonctions de rappel (callback)Enregistrement lors de la création du widget
Appel lors l’activation du widget
59
![Page 60: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/60.jpg)
Fonctions de rappel (callback)Problème : spaghetti des callbacks
Partage d’état entre plusieurs callbacks par: Variables globales
Trop de variables dans une application réelle
Arbre des widgets : la fonction de rappel est appelée en lui passant le widget qui l’a déclenché
Fragile si l’on change la structure, insuffisante pour d’autres données pas associés aux widgets
«Jeton»(token): donnée enregistrée avec la callback, passée automatiquement au moment de l’appel
60
![Page 61: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/61.jpg)
Fonctions de rappel (callback)Exemple en C++ :
61
![Page 62: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/62.jpg)
« event listeners » (Java)
Variante des callbacks adaptée au Java :
Méthodes de type AddListener spécifient non pas une fonction de callback, mais un objet (le listener)
Lorsque le widget change d’état, il déclenche une méthode prédéfinie du listener (par exemple actionPerformed)
=> cela nécessite de savoir quel action sur le widget déclenche quel méthode (cf. documentation)
62
![Page 63: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/63.jpg)
« event listeners » (Java)
63
![Page 64: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/64.jpg)
« event listeners » (Java)1. Un composant (widget) qui crée des événements est appelé
source
2. La source délègue le traitement de l'événement au listener
3. Un listener doit s'inscrire auprès du composant source des événements qu'il veut traiter
Un événement peut provenir : Du clavier, un clique souris, un passage de la souris, …
Chaque type d’événement a une classe associée (déjà existante) Chaque widget a sa propre liste d’événements
Chaque type d’événement a son listener (à implementer)
64
![Page 65: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/65.jpg)
« events » (Java)
65
![Page 66: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/66.jpg)
Evénements et listeners (Java) Chaque listener a une source
Ex : JButton, JRadioButton, JCheckBox, JToggleButton, JMenu, JRadioButtonMenuItem, JTextField
On peut y accéder par la fonction getSource()
Les Listeners doivent implémenter l'interface qui correspond à l’événement
Ex : ActionEvent => ActionListener :
66
![Page 67: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/67.jpg)
Evénements et listeners (Java)
Tous les évènements héritent de la classe EventObject
Tous les listeners correspondent à une interface qui héritent de l’interface EventListener
Une classe destinée à recevoir les notifications d’un type d’événements doit implémenter l’interface correspondante :
ActionEvent => ActionListener MouseEvent => MouseListener KeyEvent => KeyListener Etc.
67
![Page 68: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/68.jpg)
Evénements et listeners (Java)
Les listeners doivent être enregistrés (add) aux widgets
Un listener peut être ajouté à plusieurs widgets Exemple : un auditeur gère les événements de plusieurs boutons
Un widget peut avoir de nombreux auditeurs Exemple : un pour des événements «clic» et pour des événements «entrer» sur le bouton
68
![Page 69: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/69.jpg)
69
![Page 70: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/70.jpg)
« event listeners » (Java)
Anonymous Inner classes new <nom-de-classe> () { <corps> }
Cette construction fait deux choses :
Elle crée une nouvelle classe, sans nom, qui est une sous-classe de <nom-de-classe> définie par <corps>
Elle crée une instance (unique) de cette nouvelle classe et retourne sa valeur
Cette classe a accès aux variables et méthodes de la classe dans laquelle elle est définie !
70
![Page 71: Interaction Homme-Machinecfleury/teaching/et3-info/IHM... · La présentation visuelle doit suivre des règles Lois gestaltistes, visibilité, etc. ... méthodes de mise à jour de](https://reader033.fdocuments.us/reader033/viewer/2022060223/5f07e0357e708231d41f318b/html5/thumbnails/71.jpg)
« event listeners » (Java)Anonymous Inner classes
71
=> fonctions et évènements prédéfinis