LOG2420 ― Analyse et conception d'interfaces utilisateur ...
Transcript of LOG2420 ― Analyse et conception d'interfaces utilisateur ...
LOG2420 ― Analyse et conception d'interfaces
utilisateur
Interfaces utilisateur graphiques
Michel C. Desmarais, François Lemieux
Génie informatiqueÉcole Polytechnique de Montréal
Hiver, 2010
Architecture Événements
1/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Interfaces utilisateur graphiques
1. Architecture des systèmes de fenêtrage
Architecture générique
Processeur unique
Modèle client-serveur
Modèle client-serveur programmable
Swing
2. Événements
Architecture Événements
2/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Hiérarchie
Concept de fenêtresous-ensemble (rectangulaire) de l‘écranreprésentation graphique d'un objet interactif
Décomposition hiérarchique de l‘écranl‘écran est une fenêtreune fenêtre peut avoir des sous-fenêtres sur sa surface
Architecture Événements
3/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Hiérarchie : fenêtres en cascadeLes fenêtres en cascade de reproduisent le « bureau » et s'empilent automatiquement sous la forme d'un jeu de carte pour faciliter le repérage des fenêtres. L'architecture des systèmes de fenêtrage est à la base d'un grand nombre de patrons en OO.
Architecture Événements
Smalltalk est d'ailleurs à la base de ces systèmes ainsi que le tout premier langage OO.
4/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
ArchitectureArchitecture Événements
5/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Système d'exploitation
Fournit les services d'accès auxressources de base de l'ordinateur
Mémoire vive, processeurPériphériques : disques, clé USB, CD, imprimante, clavier, souris, etc.
Fournit des bibliothèques de programmation (API) pour utiliser ces ressources (pilotes)Fournit aux utilisateurs une interface de base pour gérer les ressources.Exemple: Unix, MS Windows, OS/2, MacOS,...
Architecture Événements
6/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Bibliothèque graphique
Ensemble de routines pour rendredes primitives graphiques à l‘écranConvertit principalement une description en mode trait (vectoriel) ou une région en une représentation en mode pixel (matriciel) et la place dans la mémoire de trame
Exemple: OpenGL, GKS, PHIGS, XLib, ...
Architecture Événements
7/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
ServeurAnnées 1960: Ordinateur central avec terminaux
L’ordinateur exécute des programmes pour plusieurs utilisateursFin des années 1960: informatique distribuée
Plus d’un ordinateur partagent des traitementsDébut des années 1980: ordinateurs personnels
Ces ordinateurs sont mis en réseau pour faciliter les échanges:L’impression est partagée: serveur d’impressionLes fichiers sont partagés: serveur de fichiersLe courrier est géré: serveur de courrier
Début des années 1990: Architecture client-serveurArchitecture 3 tiers sur 1 client et 2 serveurs:
AffichageTraitementsStockage
Peut aussi vouloir dire: groupe de logiciels qui donnent un service sur une machine:
Serveur Web: Serveur Apache, serveur PHP, serveur JSP, serveur ASP
Architecture Événements
8/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Base ou serveur
Un autre type de serveurSystème de fenêtrage de base ou serveur d‘écran (display server,window server, base windowsystem)
un programme qui contrôle un poste de travailrôles spécifiques :
gestion de l'accès aux ressources du poste de travail pour les différentes applicationstransmission des entrées de l'utilisateur à l'application concernéeinterprétation des demandes venant des applications graphisme via la bibliothèque graphique
Architecture Événements
9/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Boîte à outils
Boîte à outils pour interface utilisateur (toolkit)
Catalogue d'idiomes (objets interactifs)de conception d'interfaceBoîte de dialogue, menu défilant, etc.Fonctions de plus haut niveauFacilite la conception d'interfaces utilisateur graphiques
Architecture Événements
10/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Boîte à outils
Boîte à outils pour interface utilisateur (toolkit)
Catalogue d'idiomes (objets interactifs)de conception d'interfaceBoîte de dialogue, menu défilant, etc.Fonctions de plus haut niveauFacilite la conception d'interfaces utilisateur graphiques
Architecture Événements
11/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Gestionnaire de fenêtresWindow manager en anglaisProgramme décidant de l'apparence et de la disposition des fenêtres ainsi que du style d'interactionRôles spécifiques :
médiation pour les ressources physiques du poste de travail
Exemple: écran, tables de couleurs ;gestion de la fenêtre mère de chaque application d’un poste de travail. Implante une interface pour :
déplacer changer la tailleiconiserdétruire
Architecture Événements
12/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Gestionnaire de fenêtres (rôles)
Rôles spécifiques :implantation d'une politique de saisie au clavier
Exemple: cible des entrées explicites (click-to-type), focus-follows-cursor
implantation d'une politique de disposition des fenêtresensemble de règles dictant les tailles et positions permises pour fenêtres et icônesExemple: icônes au bas de l' écran, pas de chevauchement de fenêtres
Architecture Événements
13/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Architecture: modèle poste unique
Le code du serveur d‘écran, du gestionnaire de fenêtres et de l'application est exécuté sur le même poste de travailLe serveur d' écran, le gestionnaire de fenêtres et la boîte à outils sont habituellement un même processus et sont même souvent intégrés au système d'exploitation
Exemples : Smalltalk, Macintosh, MS Windows
Architecture Événements
14/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Architecture: Microsoft WindowsArchitecture Événements
15/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Architecture: Microsoft WindowsArchitecture Événements
Solomon, D. A., & Russinovich, M. E. (2000). Inside Microsoft Windows 2000 third edition [ressource électronique] (3rd ed.). Redmond, Wash.: Microsoft Press.
16/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Architecture: MAC OS XArchitecture Événements
17/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Architecture: MAC OS XArchitecture Événements
http://developer.apple.com/macosx/architecture/index.html
18/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Architecture: modèle client serveurEn général, un serveur contrôle certaines ressources (imprimante, données) auxquelles un ensemble de clients souhaitent avoir accèsIci, le serveur est le poste de travail et le client est un programme utilisant le poste de travail pour ses entrées-sorties graphiques
Architecture Événements
19/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Le serveur
Le serveur contrôle le clavier, la souris et l‘écranLes applications communiquent avec un utilisateur à travers le serveurLa communication passe par le protocole Xlib, quelque soit l'emplacement du client
Architecture Événements
20/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Connexions multiples
On peut avoir une relation plusieurs clients - un serveur
Exemple: xclock, xemacs, xterm sur un m^eme poste de travail
On peut avoir une relation plusieurs serveurs - un client vraiment un contexte distribué à travers un réseau
Exemples : Dlisp, Andrew, X
Architecture Événements
21/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Système X WindowSelon le modèle client-serveurQualités
portabilité sur nombreuses architectures/plates-formestransparence réseau
Origine : Projet Athena au MIT dans les années 1980Quelques acronymes
X11 : version 11 de X, un protocole de communication réseau pour interfaces utilisateur graphiquesXlib : bibliothèque de fonctions en langage C pour l'interface entre des applications écrites en C et le protocole X11Xt (intrinsic): base de boîte à outils de haut niveau (mais utilisant Xlib) Qt (cute): Google, Adobe Systems NASA.,
boîte à outils de haut niveau : menus, boutons de commande, barres de défilement
Architecture Événements
22/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Architecture – X Window
Le serveur d‘écranil gère l'accès au poste de travail : le client doit avoir la permission du serveurExemple sous Unix : brahms% xhost +bach
Il maintient des structures de données appelées ressources
Exemple: fenêtres (attributs), polices de caractères, contextes graphiques, tables de couleurceci réduit considérablement le volume de données acheminées à travers le réseau puisque le client a plus rarement besoin de l'information que le serveur
retour sur le gestionnaire de fenêtres X n'impose pas un gestionnaire en particulier
Architecture Événements
23/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Architecture – X Window
Notion de poste de travail (display) un ou plusieurs écrans à balayage linéaireun clavierune souris (à strictement parler, un pointeur)
Pour identifier un écran particulier en X<ordinateur> :<serveur>.<ecran>Exemple: sous Unix : bach% setenv DISPLAY brahms :0.0
Architecture Événements
24/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Architecture – X WindowArchitecture Événements
25/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Java Swing
Implantation d'un système de gestion d‘événements et de fenêtrage par dessus un système existant ce qui le rend portable sur plusieurs plateformes.Origine : projet de recherche chez Sun Microsystems vers 1995Le langage pour la programmation du serveur est Java
Java Swing représente la portion boite à outils de JDK 1.2 (Java Development Kit)Java Swing est un des éléments composant les JFC (Java Foundation Classes)
Architecture Événements
26/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Java Swing
Le cas des applets pour un fureteur Webun applet est un programme Java destiné à être inclus dans un document HTML, transporté sur le réseau et exécuté par un fureteur Web
Architecture Événements
27/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Java Swing - ArchitectureArchitecture Événements
28/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Interfaces utilisateur graphiques
1. Architecture des systèmes de fenêtrage
Architecture générique
Processeur unique
Modèle client-serveur
Modèle client-serveur programmable
Swing
2. Événements
Architecture Événements
29/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Communication utilisateur-application
Comment communique l’utilisateur avec l’application ?
Architecture Événements
30/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Communication utilisateur-application
Structure logicielle contenant plusieurs informations au sujet d'une occurrence asynchrone d'intérêtTypes d‘événements :
d'entréegénéré par l'utilisateuraccompagné de la position de la souris et de la fenêtre réceptrice (sauf Macintosh)Exemple: mouvement de la souris, touche du clavier appuyée ou relâchée, etc.
de fenêtregénéré par le système de fenêtrageExemple: création/destruction, ouverture/fermeture,Sélection-désélection, déplacement, changement de taille ou visibilité d'une partie précédemment cachée d'une fenêtre
généré par l'applicationparfois utilisé pour la communication entre les composants ou même entre les applications
Architecture Événements
31/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Événements d'entréeBoutons de souris
Bouton appuyé, bouton relâchéIdentification du boutonPlusieurs variantes selon le système d'exploitation (Mac, Windows ou X)Combinaisons avec touches spéciales (modificateurs)
Exemple: maj, ctrl, altautant d‘événements que de combinaisons ?ctrl-alt-maj-bouton gauche!on inclut dans la structure d‘événement un masque avec un bit par modificateur
Architecture Événements
32/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Événements d'entréeMouvements de la souris
À l'origine, par échantillonnage du périphériquecontrôle donné à l'applicationboucle : lecture position - mise à jourgourmand en cycles CPU dans un environnement multi-tâches : tranches de 1/60 sec. alors que 1/5 sec. est acceptable
De nos jours, un événement est généré à chaque changement de position de la souris
contrôle donné à l'utilisateurgénère énormément d‘événements !mécanismes de masquage des événements réduit le fluxcertains systèmes permettent aussi de ne générer l’événement que si le changement de position dépasse un certain seuil : on ignore ainsi les simples tremblements
Architecture Événements
33/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Événements d'entréeSouris entrant ou sortant d'une fenêtre
Granularité beaucoup moins fine que les mouvements de sourisAu moment où la frontière d'une fenêtre est traversée, une paire d' événements <souris-entrant>-<souris-sortant> est générée aux applications appropriéesUtile pour modifier l'apparence d'une fenêtre ou d'un bouton
Architecture Événements
34/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Événements d'entréeTouches du clavier
Semblables aux boutons de souris...touche appuyée, touche relâchéeidentification de la touche
...sauf queles claviers ne sont pas standard, Exemple: position maj/ctrlles combinaisons de touches sont fréquentes, Exemple: Maj/a ou A ?touches d'accélération pour les items de menu, Exemple: <pomme> (Macintosh), <ctrl> ou le drapeau (Windows), <alt> (X/Motif)
Solutions :deux événements (touche appuyée/relâchée) + code du caractère correspondant modificateurs interceptés pour détermination du code et mise à jour du bit appropriéaccélérateurs interceptés et transmis au système de menus
Architecture Événements
35/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Événements sémantiquesEn pratique, on ne s'intéresse pas toujours à des événements de basePar exemple, pour une fenêtre de dialogue de choix de fichier, on veut simplement récupérer le nom du fichier une fois la sélection terminéeLes événements dits sémantiques (terminologie de Swing) simplifient la tâcheCe sont des événements de haut niveau comme ActionPerformed (Swing) et qui peuvent survenir suite à plusieurs événements de bas niveau (retour de chariot, bouton OK appuyé puis relâché).Ces événements peuvent être générés par d'autres composants ou par un traitement de séquences d‘événements de bas niveau
Architecture Événements
36/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Boucle interceptant les événements
L'application contient une boucle gérant les événements au fur et à mesure qu'ils se produisentL'application réagit entre autres en envoyant des requêtes au serveur d‘écran
Architecture Événements
Tant que pas terminérécupérer événementtraiter événement
37/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Boucle interceptant les événements
Où récupère-t-on ces événements ?chaque application possède une ou plusieurs files d‘événements à traiterCes files sont mises à jour régulièrement par le ou les serveurs d‘écran
Architecture Événements
38/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Boucle interceptant les événements en XRécupération des événements
Masque d‘événements : ceux qu’on veut intercepter
xSetWindowAttributes xswa;xswa.event_mask = ExposureMask | KeyPressMask;
Filtrage pour les entrées au clavier
case KeyPress:{ …
xLookupString(&xevent.xkey, …, &key, …);if (key == …
Architecture Événements
39/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Répartition des événements
À quelle fenêtre appartient un événement d'entrée ?Événements de sourispartant de la racine de la hiérarchie de fenêtres, on descend le plus bas possible en suivant les fenêtres englobant la position de la souris, levant les ambiguïtés potentielles en choisissant la fenêtre la plus en avant parmi des sœurs (selon l'ordre d'empilement)on remonte ensuite jusqu‘à une fenêtre qui a indiqué un intérêt pour le type d‘événement en question
Architecture Événements
40/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques
Répartition des événements
À quelle fenêtre appartient un événement d'entrée ?événements de clavier
focus-follows-cursor : comme pour les événements de sourisclick-to-type : à la dernière fenêtre ayant reçu un événement bouton-appuyé
concept de monopole du clavier (key focus)une fenêtre s'approprie momentanément tous les événements de clavierpeut servir à implanter la politique click-to-type
concept de monopole de la souris (mouse focus)une fenêtre s'approprie momentanément tous les événements de sourisExemple: utile pour une barre de défilement très étroite
Architecture Événements
41/41LOG2420 - Analyse et conception d'interfaces utilisateur - Interfaces utilisateur graphiques