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


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



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



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.


Smalltalk est d'ailleurs à la base de ces systèmes ainsi que le tout premier langage OO.


ArchitectureArchitecture Événements


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,...



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, ...



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



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



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



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



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



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: 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: Microsoft WindowsArchitecture Événements


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.


Architecture: MAC OS XArchitecture Événements


Architecture: MAC OS XArchitecture Événements

http://developer.apple.com/macosx/architecture/index.html


http://developer.apple.com/macosx/architecture/index.html�

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



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



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



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 – 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 – 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 – X WindowArchitecture Événements


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)



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



Java Swing - ArchitectureArchitecture Événements



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



Communication utilisateur-application

Comment communique l’utilisateur avec l’application ?



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



É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



É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



É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



É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



É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



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


Tant que pas terminérécupérer événementtraiter événement


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



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 == …



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



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



Documents

LOG2420 ― Analyse et conception d'interfaces utilisateur