LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 1/49 LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques Michel C. Desmarais Génie informatique École Polytechnique de Montréal Automne, 2015
Architecture des systèmes de fenêtrage Architecture générique Processeur unique Modèle client-serveur Modèle client-serveur programmable Swing Rafraîchissement des fenêtres
Architecture LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 3/49
Système d exploitation Fournit les services d accès aux ressources de base de l ordinateur Mémoire vive, CPU Périphériques : disques, disquettes, modems, clavier, souris, etc. Fournit des bibliothèques de programmation (API) pour utiliser ces ressources Fournit aux utilisateurs une interface de base pour gérer les ressources. p.e. Unix, DOS, OS/2, MacOS,...
Bibliothèque graphique Ensemble de routines pour rendre des primitives graphiques à l écran Convertit principalement une description (en modèle) trait ou région en une représentation (en modèle) pixel et la place dans la mémoire de trame P.e. Quartz, OpenGL, GKS, PHIGS, XLib,...
Système de fenêtrage Système de fenêtrage de base ou serveur d écran ( display server, window server, base window system ) Un programme qui contrôle un poste de travail Rôles spécifiques gestion de l accès aux ressources du poste de travail par les différentes applications transmission des entrées de l utilisateur à l application concernée interprétation des demandes venant des applications graphisme (via une librairie graphique) X11, Aqua
Boîte à outils Boîte à outils pour interface utilisateur ( toolkit ) Catalogue d idiomes (objets interactifs) de conception d interface Boîte de dialogue, menu défilant, etc. Fonctions de plus hauts niveaux Peut effectuer une bonne partie de la gestion des événements Facilite la conception d interfaces utilisateur graphiques Swing,.NET, Cocoa, etc.
Gestionnaire de fenêtres Window manager en anglais Programme décidant de l apparence et de la disposition des fenêtres ainsi que du style d interaction Rôles spécifiques : médiation pour les ressources physiques du poste de travail ; p.e. écran, tables de couleurs ; gestion de la fenêtre mère de chaque application à un poste de travail ; implante une interface pour déplacer/changer la taille/iconiser/détruire ces fenêtres ; Compiz, KDE, Gnome, Aqua
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 9/49 Gestionnaire de fenêtres Rôles Rôles spécifiques implantation d une politique de saisie au clavier p.e. click-to-type, focus-follows-cursor implantation d une politique de disposition des fenêtres ensemble de règles dictant les tailles et positions permises pour fenêtres et icônes p.e. icônes au bas de l écran, pas de chevauchement de fenêtres
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 10/49 Architecture Modèle processeur 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 travail Serveur d écran et gestionnaire de fenêtres (et 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 (avant Mac OS X), MS Windows
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 11/49 Modèle client-serveur Modèle client-serveur En général, un serveur contrôle certaines ressources ( p.e. imprimante, données) auxquelles un ensemble de clients souhaitent avoir accès Dans notre cas, la ressource est un poste de travail et un client est un programme utilisant un poste de travail pour ses entrées/sorties graphiques
Le serveur Le serveur contrôle le clavier, la souris et l écran Les applications communiquent avec un utilisateur à travers le serveur La communication passe par le protocole Xlib, quelque soit l emplacement du client
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 13/49 Connexions multiples Modèle client-serveur (suite) on peut avoir une relation plusieurs clients - un serveur P.e. xclock, xemacs, xterm sur un même poste de travail On peut avoir une relation plusieurs serveurs - un client Vraiment un contexte distribué à travers un réseau Exemples : Dlisp, Andrew, X
X Window System Adopte le modèle client-serveur Qualités : portabilité sur nombreuses architectures/plates-formes transparence réseau Origine : Projet Athena au MIT dans les années 80 Quelques acronymes X11 : version 11 de X, un protocole de communication réseau pour interfaces utilisateur graphiques Xlib : bibliothèque de fonctions en langage C pour l interface entre des applications écrites en C et le protocole X11 Xt : base de boîte à outils ( toolkit ) de plus haut niveau (mais utilisant Xlib) offrant des composantes ( widgets ) courantes, p.e. menus, boutons de commande, barres de défilement
Architecture - OSF/Motif LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 15/49
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 16/49 X Window System (suite) Notion de poste de travail ( display ) un ou plusieurs écrans (monochrome, tons de gris, couleur) à balayage linéaire un clavier une souris (à strictement parler, un pointeur) Comment identifier un écran particulier en X <ordinateur> :<serveur>.<écran> p.e. sous Unix : bach% setenv DISPLAY brahms :0.0
Architecture X Window System (suite) Retour sur le serveur d écran Il gère l accès au poste de travail : le client doit avoir la permission du serveur P.e. sous Unix : brahms% xhost +bach Il maintient des structures de données appelées ressources P.e. fenêtres (attributs), polices de caractères, contextes graphiques, tables de couleur Ceci réduit considérablement le volume de données acheminées à travers le réseau p.c.q. 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
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 18/49 Modèle client-serveur programmable Répond à un problème du modèle client-serveur : les interactions entre l utilisateur et l application circulent sur le réseau et sont donc à la merci de délais sur celui-ci Ex. déplacement du signet d une barre de défilement Le client peut envoyer du code au serveur qui sera exécuté par celui-ci, permettant ainsi de réduire les interactions et donc le trafic sur le réseau : c est une programmation à distance du serveur Même exemple
NeWS (Network extensible Window System) Adopte le modèle client-serveur programmable Origine : projet de recherche chez Sun Microsystems en 1984 Le langage pour la programmation du serveur est Display PostScript PostScript : langage interprété de haut niveau avec primitives graphiques sophistiquées, initialement développé pour piloter les imprimantes laser Display PostScript : PostScript + support de fenêtres + support d interaction (événements)
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 20/49 NeWS (suite) Comment programmer le serveur? Des fichiers de spécification contiennent un entête de fonction C avec un corps écrit en (Display) PostScript Une fois compilé par un préprocesseur (cps), chaque appel d une des fonctions C par le client déclenche la transmission du code PostScript correspondant au serveur pour son exécution
Architecture - NeWS LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 21/49
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 1995 Le 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)
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 23/49 Architecture - Java Swing Le cas des applets pour un fureteur Web Un 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 - Java Swing LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 24/49
Problème de rafraîchissement de fenêtre LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 25/49
Solutions au rafraîchissements Gestionnaire ou serveur d écran conserve une copie de la région obscurcie d une fenêtre Fonction Repaint/Redraw : événements qui forcent une mise à jour de la vue Le modèle est interrogé sur son état et tout est redessiné Les pixels (bitmap) sont conservés et réaffichés
Architecture générique Processeur unique Modèle client-serveur Modèle client-serveur programmable Swing Rafraîchissement des fenêtres Fenêtres et événements
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 28/49 Hiérarchie Concept de fenêtre sous-ensemble (rectangulaire) de l écran représentation graphique d un objet interactif Décomposition hiérarchique de l écran l écran est une fenêtre une fenêtre peut avoir des sous-fenêtres sur sa surface
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 29/49 Communication utilisateur-application Comment communiquent l application et l utilisateur?
Communication utilisateur-application Structure logicielle contenant plusieurs informations au sujet d une occurrence asynchrone d intérêt Types d événements : d entrée généré par l utilisateur accompagné de la position de la souris et de la fenêtre réceptrice (sauf Macintosh) p.e. mouvement de la souris, touche du clavier appuyée ou relâchée, etc. de fenêtre généré par le système de fenêtrage p.e. 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 application parfois utilisé pour la communication entre les composants ou même entre les applications (p.e. firepropertychange)
Événements d entrée Boutons de souris Bouton appuyé, bouton relâché Identification du bouton Plusieurs variations selon le système d exploitation (Mac, Windows ou X) Combinaisons avec touches spéciales (modificateurs) : p.e. shift, ctrl, alt autant d événements que de combinaisons? ctrl-alt-shift-left-button-down! on inclut dans la structure d événement un masque avec un bit par modificateur
Événements d entrée Mouvements de souris À l origine, par échantillonnage du périphérique contrôle donné à l application boucle : lecture position / mise à jour trop gourmand 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 utilisateur générera énormément d événements! mécanismes de masquage des événements réduit le flot certains systèmes permettent aussi de ne générer un tel événement que si le changement de position dépasse un certain seuil : on ignore ainsi les simples tremblements
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 33/49 Événements d entrée Souris entrant ou sortant d une fenêtre Granularité beaucoup moins fine que les mouvements de souris Au 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ées Utile pour modifier l apparence d une fenêtre ou d un bouton
Événements d entrée(suite) Touches du clavier Semblables aux boutons de souris... touche appuyée, touche relâchée identification de la touche...sauf que les claviers ne sont pas standard, p.e. position shift/ctrl les combinaisons de touches sont fréquentes, p.e. shift a ou A? touches d accélération pour les items de menu, p.e. <pomme> (Macintosh), <ctrl> ou le drapeau (Windows), <alt> (X/Motif) La solution consiste à effectuer un pré-traitement : 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émantiques En pratique, on ne s intéresse pas toujours à des événements de base Par 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ée Les événements dits sémantiques (terminologie de Swing) simplifient la tâche Ce sont des éné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
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 36/49 Boucle mue par les événements L application contient une boucle gérant les événements au fur et à mesure qu ils se produisent L application réagit entre autres en envoyant des requêtes au serveur d écran
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 37/49 Boucle mue par les événements Où récupère-t-on ces événements? chaque application possède une ou plusieurs files d événements à traiter ces files sont mises à jour régulièrement par le ou les serveurs d écran
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 38/49 Boucle mue par les événements X Récupération des événements Masque d événements Fonction de filtrage pour les entrées au clavier
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 39/49 Répartition des événements À quelle fenêtre appartient un événement d entrée? Événements de souris Partant 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 soeurs (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? (suite) Événements de clavier focus-follows-cursor : comme pour les événements de souris click-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 clavier peut 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 souris utile p.e. pour une barre de défilement très étroite
Rétro-action Les fonctions de rappel Fonctions séparées des classes et possédant une interface standard Un composant contient, dans sa définition, un certain nombre de conditions auxquelles le programmeur peut associer des fonctions de rappel, par exemple : Le composant vient d être activé L état du composant vient d être basculé La valeur du composant vient de changer Une fonction de rappel est donc appelée en réponse à un événement prévu et prédéfini pour un composant En C, les fonctions de rappel doivent avoir une signature fixe, mais le compilateur n est pas en mesure de vérifier si c est bien le cas, ce qui peut causer des erreurs lors de l exécution.
Rétro-action Méthode orientée-objet L approche orientée-objet consiste à réserver une méthode spécifique qui sert de fonction de rappel. Permet un accès élégant aux données du composant (les fonctions sont membres de la sous-classe du composant choisi). Permet de mieux détecter les erreurs à la compilation. Ce mécanisme, lorsqu il est utilisé pour traiter tous les événements dans une application, exige, par exemple, de sous-classer chaque bouton pour traiter l événement ButtonPress. Adopté par Java Swing
Révision La gestion d un événement Comment associer un objet désiré à un événement? Comment associer le code désiré à un événement? Quel partie de l architecture a la reponsabilité de la gestion d un événement?
Architecture générique Processeur unique Modèle client-serveur Modèle client-serveur programmable Swing Rafraîchissement des fenêtres Langages de spécification d interfaces
LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 45/49 Approches déclaratives et modulaires Rôles et technologies : La définition des composants et l association événement-code des composants XUL (Firefox) HTML FXML (Java) Le code : Java, JavaScript, C# UIML (User Interface Markup Language, premier d envergure) XAML (Dot Net) QML Le rendu : CSS UIML ajoutera aussi le rôle de localisation (langue)
Le Web comme une approche déclarative Principe de séparer les responsabilités : Affichage de l interface : HTML : le contenu informationnel composants à afficher la mise en forme qui suit plus ou moins implicitement l arborescence Rendu : CSS : affichage/rendu certains mécanismes d adaptation à l interface (comme vertical-align) Code : JavaScript : la fonctionnalité. UIML ajoutera aussi le rôle de localisation
Adaptation : langage XUL pour les applications LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 47/49
Le langage de définition XUL I LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 48/49
Le langage de définition XUL II LOG2420 Analyse et conception d interfaces utilisateur Interfaces utilisateur graphiques 49/49