contrat Creative Commons Paternité-Pas d'Utilisation Commerciale- Partage des Conditions Initiales à l'Identique 2.0 France License

Entrées / Sorties

Écrans Type : cathodique LCD Écrans bitmap : résolution : pixels per inch (ppi) profondeur : bits par pixel rafraîchissement : images par seconde taille mémoire

Écrans Couleurs directes Tables de couleurs et les autres Buffers !

Périphériques dentrée Périphériques physiques claviers, boîtes à boutons potentiomètres (rotatifs, linéaires) souris, tablettes, manche à balai, boules écrans tactiles, crayons optiques capteurs de position, dorientation Périphériques simulés Périphériques logiques Périphériques virtuels

Périphériques de localisation Absolu / Relatif tablette, écran tactile, crayon otique souris, joystick, trackball Direct / Indirecte écran tactile, stylo optique tablette, souris, joystick, trackball Discret / Continu Position / Taux de contrôle Position / Force (physiquement)

Périphériques physiques Retour de toucher Retour deffort joystick souris brasetc...

Type dentrée Requête Echantillonnage Evénement attente bloquante réponse immédiate file d attente

Interaction directe : Modèle à base d'événements Création, propagation, réception, traitement Boucle dévénements Détection Détermination de la cible / liste des objets Synthèse des événements Ex : Drag = Click + Move Machine à état : Down Move Move Move Move Up

Modèle à base d'événements gestion Bouche de scrutation Gestion de la file dattente des événements système Construire le dialogue à partir de ces événements Comportement lié aux objets graphiques

Gestion dévènements Terminaux virtuels une fenêtre appartient à une application une application dessine dans ses fenêtres une application reçoit les évènements qui se produisent dans ses fenêtres Notion de focus la fenêtre qui reçoit les évènements dun périphérique à linstant t

Types dévènements Liés aux périphériques changement de focus entrée/sortie du curseur dans une fenêtre Liés aux fenêtres demande de ré-affichage création, destruction, … etc...

Conception dIHM en Java La gestion dévènements …ou comment rendre vos applications interactives

La gestion de l'arbre d'affichage Afficher = appeler une succession de fonctions graphiques Représentation sous forme d'un arbre d'affichage (ou graphe directe acyclique) On affiche récursivement, en profondeur d'abord, tous les nœuds de l'arbre On modifie l'arbre pour changer l'affichage puis on réaffiche

Arbre Swing JFrame JToolBarJPanel JTextAreaJButton JList JButton

Arbre Swing JFrame JMenuBar JMenu FileJMenu ViewJMenu Help JMenuItem Open JMenuItem Save JMenuItem Save as… JMenuItem Undo JMenuItem JMenuItem About… JMenuItem Quit JMenuItem Paste JMenuItem Copy

La gestion de l'interaction Les dispositifs d'entrée génèrent des événements (petit bloc mémoire contenant un type, un temps, une fenêtre cible et des détails suivant le type) La boîte à outils achemine l'événement vers un nœud cible Le nœud gère l'événement, ce qui peut modifier l'état de l'arbre d'affichage On passe à l'événement suivant

Acheminement des événements Positionnel (souris) on regarde quel est le nœud de l'arbre le plus près de la position On l'envoie au plus prés, qui renvoie a son père s'il ne veut pas le gérer Non positionnel (clavier) si un nœud à le "focus", on lui envoie traduction d'une touche en caractère(s) ou action sinon, on cherche une cible gestion des raccourcis clavier

Arbre Swing JFrame JToolBarJPanel JTextAreaJButton JList JButton X Y Event |time | (X,Y)

Les composants graphiques interactifs Le nœud est capable de s'afficher et de gérer les événement On lui ajoute une interface de communication suivant sa sémantique bouton, label, menu, ligne de texte, etc. On appelle ce nœud communicant un composant ou widget ou gadget ou objet de contrôle.

Conception dIHM en Java La gestion dévènements

Parcours des événements Plusieurs boucles envoient des événements dans une file unique System.getSystemEventQueue() Un Thread lit la file et distribue les événements à la racine de l arbre des composants associé à la fenêtre de l événement L événement est acheminé au composant auquel il est destiné

Gestion des actions Associer une action à un événement 2 types d événements issu du système de fenêtrage (bas niveau) issu d un composant ou dun sous-système Java (haut niveau) 2 niveaux de gestion dérivation des composants association de gestionnaires dactions

Les événements Package java.awt.event.* Héritent de la classe java.awt.AWTEvent identificateur (numéro unique) consumed (a-t-il été utilisé?) source (qui l'a émis) Envoyés dans une file unique Toolkit.getSystemEventQueue() Lus par un thread spécique

Types dévénements

Dérivation d un composant (obsolète) Redéfinition de la méthode processEvent(AWTEvent e) Test de la classe de l événement if (e instanceof FocusEvent) processFocusEvent((FocusEvent)e); else super.processFocusEvent(e); Ne pas oublier d appeler super sinon, rien ne marche plus.

Association de gestionnaires d actions Pour chaque famille d événements, une interface « listener » est définie MouseListener, MouseMoveListener, KeyListener, etc. Chaque classe composant définit « add Listener( Listener ) Frame Button ActionListener actionPerformed( ActionEvent e) addActionListener( ActionListener)

Les listeners Chaque composant peut renvoyer certains événements à l'application si elle le demande Le renvoi se fait par un Listener actionListener, AdjustmentListener, FocusListener, InputMethodListener, ItemListener, KeyListener, MouseListener, MouseMotionListener, TextListener, WindowListener

Sur tous les composants Swing component listener Listens for changes in the component's size, position, or visibility. focus listener Listens for whether the component gained or lost the ability to receive keyboard input. key listener Listens for key presses; key events are fired only by the component that has the current keyboard focus. mouse listener Listens for mouse clicks and mouse movement into or out of the component's drawing area. mouse-motion listener Listens for changes in the cursor's position over the component. mouse-wheel listener (introduced in 1.4) mouse-wheel listener Listens for mouse wheel movement over the component.

Exemple (définition à lextérieur) public class MaFrame extends JFrame { MaFrame() { monJButton.addMouseListener(new MonMouseListener()); } … } public class MonMouseListener implements MouseListener { public void mousePressed(MouseEvent e) { } public void mouseReleased(MouseEvent e) { } public void mouseEntered(MouseEvent e) { } public void mouseExited(MouseEvent e) { } public void mouseClicked(MouseEvent e) { System.exit(0); }

Exemple (définition dans la classe qui gère laction) public class MaFrame extends JFrame implements MouseListener { MaFrame() { monJButton.addMouseListener(this); } public void mousePressed(MouseEvent e) { } public void mouseReleased(MouseEvent e) { } public void mouseEntered(MouseEvent e) { } public void mouseExited(MouseEvent e) { } public void mouseClicked(MouseEvent e) { System.exit(0); }

Les adaptateurs Les Adapters sont des classes concrètes qui facilitent l'utilisation des Inner Classes Pour chaque Listener ayant plusieurs méthodes, un Adapter est défini Il implémente toutes les méthodes en ne faisant rien Seules les méthodes faisant quelque chose doivent être implémentés par des inner classes

Exemple adapté public class MaFrame extends MouseAdapter { JFrame frame; MaFrame() { monJButton.addMouseListener(this); } public void mouseClicked(MouseEvent e) { System.exit(0); }

Différences public class MaFrame extends JFrame implements MouseListener { MaFrame() { monJButton.addMouseListener(this); } public void mousePressed(MouseEvent e) { } public void mouseReleased(MouseEvent e) { } public void mouseEntered(MouseEvent e) { } public void mouseExited(MouseEvent e) { } public void mouseClicked(MouseEvent e) { System.exit(0); } public class MaFrame extends MouseAdapter { JFrame frame; MaFrame() { monJButton.addMouseListener(this); } public void mouseClicked(MouseEvent e) { System.exit(0); }

Rappel sur les "inner classes" Existent depuis Java 1.1 une classe interne est une classe déclarée à l'intérieur : d'une autre classe "classe définie dans l'espace de nommage d'une autre classe" d'une méthode dune autre classe "classe définie dans le contexte d'une autre classe" "classe anonyme définie au fil du code dans le contexte courant"

Syntaxe des classes internes (inner classes) class A { static class B { … } …} class A { class B { … } …} class A { type method(args) { … Thread t = new Thread() { void run() { … } }; } }

Inner classes public class MaFrame extends JFrame { MaFrame() {… someObject.addMouseListener(new MyAdapter()); } class MyAdapter extends MouseAdapter { public void mouseClicked(MouseEvent e) {...//Event handler implementation goes here... System.exit(0); }

Anonymous Inner classes public class MaFrame extends JFrame { MaFrame() {… someObject.addMouseListener( new MouseAdapter { public void mouseClicked(MouseEvent e) {...//Event handler implementation goes here... System.exit(0); } } ); }

Définition dun Listener 4 méthodes Définition dune classe qui implémente linterface ActionListener Définition de linterface ActionListener dans la classe qui gère laction Utilisation d un classe « Adapter » pour ne pas avoir à définir toutes les méthodes Utilisation des classes internes, avec définition à la volée du code

Classes Anonymes Meilleure encapsulation Facilitent la compréhension Facilitent la maintenance du code Classes associées dans le même fichier source Toute la logique dun composant au mêm endroit Evite la prolifération de classes très petite

TP 2 : évènements Reprise de la semaine dernière Objectif : ajouter dautres gestionnaires dévènements

Questions…

Conception dIHM en Java Concevoir, cest…

Organisation graphique d'une interface Connaître les utilisateurs Concevoir avec eux l'interface Se rattacher à des choses connues code de couleurs, organisation spatiale, vocabulaire, etc. Tester les interfaces

Comment connaître les utilisateurs ? Pas d'introspection: vous n'êtes pas un utilisateur type! Modèle mental de l'utilisateur vs. Modèle d'implémentation Conception participative Use cases Analyse des tâches : que fait-il et comment le fait-il ?

Faire participer les utilisateurs Dessin d'interfaces sur papier Prototypage rapide et scénarios d'utilisation Cycle de développement en spirale

Hiérarchisation de l'information Organiser les écrans de manière hiérarchique Utiliser un vocabulaire simple Bien délimiter les zones regrouper les objets similaires détacher les objets différents Faire appel à des graphistes

Utilisation des couleurs Concevoir avec des niveaux de gris puis passer à la couleur 10% de daltoniens ou autres trouble de la perception Utiliser peu de couleurs Utiliser des teintes pastels et des couleurs complémentaires

Utilisation des polices de caractères Prendre des polices réglées pour les écrans et non traditionnelles à l'impression Pas d'italique ou de penché mais plutôt du gras Utiliser des couleurs contrastées fond / lettre Faire attention à la taille

Animations, images et sons Attention à ne pas divertir l'attention L'œil est très sensible aux animations: il est attiré par ce qui bouge il ne peut pas contrôler cette attirance peut provoquer de la fatigue et des maux de tête Image très colorées perturbantes Sons à éviter, sauf pour les erreurs graves redondance pour les erreurs