- la gestion des événements

3.36pt

LOG2420 — Analyse et conception d’interfaces utilisateur — La gestion des événements 1/30

La gestion des événements

Michel C. Desmarais

Génie informatique et logicielÉcole Polytechnique de Montréal

26 août, 2019


3.36pt

Les événements


Types d’événementsI Un événement est une structure logicielle contenant plusieurs

informations au sujet d’une occurrence asynchrone d’intérêtI Types d’événements :

I d’entréeI généré par l’utilisateurI accompagné de la position du curseurI p.e. mouvement de la souris, touche du clavier appuyée ou

relâchée, mouvement tactile, etc.I de fenêtre

I généré par le système de fenêtrageI p.e. création/destruction, ouverture/fermeture,

sélection/dé-sélection, déplacement, changement de taille ouvisibilité d’une partie précédemment cachée d’une fenêtre

I généré par l’applicationI parfois utilisé pour la communication entre les composants ou

même entre les applications (p.e. firePropertyChange enJava Swing, ou element.dispatchEvent(newEvent(’click’)))


Événement X de bouton de souris

typedef struct {int type; /* ButtonPress or ButtonRelease */unsigned long serial ; /* # of last request processed by server */Bool send_event ; /* true if this came from a SendEvent request */Display * display ; /* Display the event was read from */Window window ; /* ‘‘event ’’ window it is reported relative to */Window root; /* root window that the event occurred on */Window subwindow ; /* child window */Time time; /* milliseconds */int x, y; /* pointer x, y coordinates in event window */int x_root , y_root ; /* coordinates relative to root */unsigned int state; /* key or button mask */unsigned int button ; /* detail */Bool same_screen ; /* same screen flag */

} XButtonEvent ;


Événements d’entréeBoutons de souris

I Bouton appuyé, bouton relâchéI Identification du boutonI Plusieurs variations selon le système d’exploitation (Mac,

Windows ou X)I Combinaisons avec touches spéciales (modificateurs) : p.e.

shift, ctrl, altI autant d’événements que de combinaisons ?

ctrl-alt-shift-left-button-down !I on inclut dans la structure d’événement un masque avec un bit

par modificateur


Événements d’entréeMouvements de souris

Sur les périphériques modernes, un événement est généré à chaquechangement de position de la souris

I contrôle donné à l’utilisateurI générera énormément d’événements !I mécanismes de masquage des événements réduit le flotI certains systèmes permettent aussi de ne générer un tel

événement que si le changement de position dépasse uncertain seuil : on ignore ainsi les simples tremblements


Événements d’entrée (suite)Touches du clavier

I Semblables aux boutons de souris...I touche appuyée, touche relâchéeI identification de la touche

I ...sauf queI les claviers ne sont pas standard, p.e. position shift/ctrlI les combinaisons de touches sont fréquentes, p.e. shift “a" ou

“A" ?I touches d’accélération pour les items de menu, p.e. <pomme>

(Macintosh), <ctrl> ou le drapeau (Windows), <alt>(X-window)

I La solution consiste à effectuer un pré-traitement :I deux événements (touche appuyée/relâchée) → code du

caractère correspondantI modificateurs interceptés pour détermination du code et mise

à jour du bit appropriéI accélérateurs interceptés et transmis au système de menus


Événements sémantiques

I En pratique, on ne s’intéresse pas toujours à des événementsde base

I Par exemple, pour une fenêtre de dialogue de choix de fichier,on veut simplement récupérer le nom du fichier une fois lasélection terminée

I Les événements dits sémantiques (terminologie de Swing)simplifient la tâche

I Ce sont des énénements de haut niveau commeActionPerformed (Swing) ou ondblclick (double clic enJavaScript) et qui peuvent survenir suite à plusieursévénements de bas niveau (retour de chariot, bouton OKappuyé puis relâché).

I Ces événements peuvent être générés par d’autres composantsou par un traitement de séquences d’événements de bas niveau


Autres événements en JavaScripthttp://www.w3schools.com/jsref/dom_obj_event.asp

I onmousover : la souris est sur l’élément ou un des enfantsI onfocusout : un élément de formulaire perd le focusI onload : l’objet est chargé (body ou img par exemple)I ondragstart : début de “transport” d’un élémentI animationend : une animation CSS est complétéeI ontouchstart : une pression tactile sur l’élément débuteI swipe : un glissement sur un élément (JQuery Mobile)I setTimeout(fn, délai) : pas un événement, mais tout

comme... nous y reviendrons et ça nous amènera à la boucled’événements

Référence complète :https://developer.mozilla.org/en-US/docs/Web/Events


http://www.w3schools.com/jsref/dom_obj_event.asp

https://developer.mozilla.org/en-US/docs/Web/Events

Événement Android de détection de geste, MotionEvent

I Générique : fonctionne avec souris, crayon, écran tactile avecun ou plusieurs doigts (plusieurs tracés par des “pointeurs”)

I Complexe : 87 méthodes, majoritairement des getI Composé d’une série de coordonnées correspondant à des

“touchés” (touch)


3.36pt

L’assignation d’un événement à un objet


Hiérarchie

I Concept de fenêtreI sous-ensemble (rectangulaire) de l’écranI représentation graphique d’un objet interactif

I Décomposition hiérarchique de l’écranI l’écran est une fenêtreI une fenêtre peut avoir des sous-fenêtres sur sa surface

I Cette décomposition s’applique aussi aux composants et auDOM


À qui l’événement ?

I Basé sur la hiérarchieI Premier temps : processus descendant (capturing en

JavaScript)I Second temps : processus ascendant (bubbling en JavaScript)


Répartition des événements

À quelle fenêtre appartient un événement d’entrée ?

I Événements de clavierI “focus-follows-cursor" : comme pour les événements de sourisI “click-to-type" : à la dernière fenêtre ayant reçu un événement

bouton-appuyéI Concept de monopole du clavier (“key focus")

I une fenêtre s’approprie momentanément tous les événementsde clavier

I peut servir à implanter la politique “click-to-type"I Concept de monopole de la souris (“mouse focus")

I une fenêtre s’approprie momentanément tous les événementsde souris

I utile p.e. pour une barre de défilement très étroiteI Plus complexe pour créer des événements qui ont une durée

(swipe de JQuery ou GestureDetector de Android)


3.36pt

Boucle d’événements


Une boucle d’événements rudimentaire en X11Retour dans le passé

while (1) {XNextEvent (d, &e);

switch (e.type) {/* Dessine , ou redessine la fenêtre */case Expose :

XFillRectangle (d, w, DefaultGC (d, s), 20, 20,10, 10);

XDrawString (d, w, DefaultGC (d, s), 50, 50, "Hello , World!",strlen ("Hello , World!"));

break;/* Termine touche du clavier pressée */case KeyPress :case ButtonPress :

/* Ferme connection au serveur X */XCloseDisplay (d);exit (0);

break;}

}


Répartition des événementsÀ quelle fenêtre appartient un événement d’entrée ?

I Événements de sourisI Partant de la racine de la hiérarchie de fenêtres, on descend le

plus bas possible en suivant les fenêtres englobant la positionde la souris, levant les ambiguïtés potentielles en choisissant lafenêtre la plus en avant parmi des soeurs (selon l’ordred’empilement)

I On remonte ensuite jusqu’à une fenêtre qui a indiqué unintérêt pour le type d’événement en question


Rétro-actionLes fonctions de rappel

I Fonctions séparées des classes et possédant une interfacestandard

I Un composant contient, dans sa définition, un certain nombrede conditions auxquelles le programmeur peut associer desfonctions de rappel, par exemple :I Le composant vient d’être activéI L’état du composant vient d’être basculéI La valeur du composant vient de changer

I Une fonction de rappel est donc appelée en réponse à unévénement prévu et prédéfini pour un composant

I En C, les fonctions de rappel doivent avoir une signature fixe,mais le compilateur n’est pas en mesure de vérifier si c’estbien le cas, ce qui peut causer des erreurs lors de l’exécution.


Rétro-actionMéthode orientée-objet

I L’approche orientée-objet consiste à réserver une méthodespécifique qui sert de fonction de rappel.

I Permet un accès élégant aux données du composant (lesfonctions sont membres de la sous-classe du composantchoisi).

I Permet de mieux détecter les erreurs à la compilation.I Ce mécanisme, lorsqu’il est utilisé pour traiter tous les

événements dans une application, exige, par exemple, desous-classer chaque bouton pour traiter l’événementButtonPress.

I Adopté par Java Swing


Principes de la programmation par événements

Une queue de fonctions de rappel est mise à jour lorsqu’unévénement survient.

I Pointeur sur une fonction (C)I Surcharge de méthode (Java Swing)

class GereEvenement implements ActionListener {...public actionPerformed ( ActionEvent Ev) { ... }...}...bouton . addActionListerner (new GereEvenement ()) {

... }...


3.36pt

Boucle d’événements en JavaScript


Deux méthodes Javascript pour associer une fonction à unélémentHandler et Listener

I Event handlerdocument . getgetElementById (’unbouton ’). onclick =

function () { ... }

On ne peut avoir qu’un handler par élément.I Event listener

element . addeventListener (’click ’, function () { ...})

Dans le cas d’un listener, plusieurs peuvent être associé aumême élément.p


L’assignation des listeners

Un exemple avec un listener ascendant et un descendant.


Autres mécanismes pour assigner du traitement sur laboucle d’événements

Un setTimeout pour changer l’ordre de traitement desévénements.


Les workers et les minuteries (timeout)Ces mécanismes roulent en concurrence avec la boucled’événements (asynchrone)

I setTimeout : assigne une fonction de rappel sur la file desévénements (fonctions de rappel) après un délai (ou sans délaisi deuxième argument est 0)

I setInterval : semblable mais à interval régulierI Web worker : démarre un fil d’exécution (qui peut être

partagé) avec une pile indépendante et du code JavaScriptnon partagéI worker.postMessage(msg, listeDeTransfert) : permet

d’échanger des données du worker vers le fil d’exécutionprincipal

I myWorker.addEventListener(’message’,fnGestionDuMessage) : récupère le message avecfnGestionDuMessage

I La communication peut aussi être bi-directionnelle


Vue d’ensemble de la gestion d’événementshttp ://latentflip.com/loupe

L’intéraction entre la pile, la boucle d’événements et le fureteur


Boucle d’événements, pile d’exécution et setTimeout()

I La boucle d’événements exécute en priorité les fonctions sur lapile d’exécution (FILO)

I Si la pile est vide, alors la première fonction de rappel sur laqueue d’événements (FIFO) est mise sur la pile d’exécution

I La fonction setTimeout() ajoutera la fonction en argumentsur la queue des événements après un délai correspondant ausecond argumentI Même avec une valeur de délai nul (0), ce mécanisme de

setTimeout() aura pour effet de retarder l’exécution de lafonction en argument


Promesses

I Les promesses sont similaires aux workers et setTimeout, dansla mesure où l’exécution de la fonction en argument ne seréalise pas sur le fil des événements.

I Une promesse promise ajoutera la fonction en argument dèsqu’une routine retourne un résultat désiréI le résultat d’une requêteI un calcul pouvant être long

I Les promesses permette de gérer des conditions d’erreur demanière élégante

I Exécution unique


XMLHttpRequest avec promesse

https://developers.google.com/web/fundamentals/primers/promises




Révision

La gestion d’un événement

I Comment associer un objet désiré à un événement ?I Comment associer le code désiré à un événement ?I Quel partie de l’architecture a la reponsabilité de la gestion

d’un événement ?


- la gestion des événements

Documents