Interaction Homme-Machine Cours 4 : Interface graphique & programmation

Année 2016/2017 – Et3 Info - Polytech Paris-Sud Cédric Fleury (cedric.fleury@lri.fr)

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/

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/

Plan du cours

A - Interface graphique

B - Programmation des interfaces graphiques

3

Plan du cours

A - Interface graphique

B - Programmation des interfaces graphiques

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 - Programmation des interfaces graphiques

21

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

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

Comment gérer les entrées ?

24

Programmation événementielle

25

Animations : horloge comme source d’événements « tick » => évènement => progrès

Programmation événementielle

26

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

Couches logicielles

28

Constructeurs d’interface

Exemples : MS Visual Studio (C++, C#, etc.), NetBeans (Java), Interface Builder (ObjectiveC), etc.

29

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

Boîte à outils d’interface

Problèmes avec les toolkits ?

31

Les « widgets » (window gadget)

32

Les widgets de Swing

33

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

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

Arbre des widgets

Représentation hiérarchique de la structure des widgets Un composant ne peut appartenir qu’à un seul « container »

36

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

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

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

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

Ajout de widgets

41

Ou est le JLabel ?

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

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

« Layout managers » (Swing)

44

https://docs.oracle.com/javase/tutorial/uiswing/layout/visual.html

« Layout managers » (Swing)

45

« Layout managers » (Swing)

46

« Layout managers » (Swing)

47

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

Guides de placement (Mac OS X)

49

Guides de placement (Mac OS X)

« Center-equalization » : équilibre visuelle du contenu d’un composant, à droite et à gauche de la ligne médiane

50

Guides de placement (Mac OS X)

Alignement

51

Guides de placement (Mac OS X)

Espacement

52

Guides de placement (Mac OS X)

Alignement et cohérence

53

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

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

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++)

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

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

Fonctions de rappel (callback)Enregistrement lors de la création du widget

Appel lors l’activation du widget

59

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

Fonctions de rappel (callback)Exemple en C++ :

61

« 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

« event listeners » (Java)

63

« 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

« events » (Java)

65

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

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

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

69

« 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

« event listeners » (Java)Anonymous Inner classes

71

=> fonctions et évènements prédéfinis