Programmation événementielle et composants d’interface (« widgets »)

Logiciel traditionnel, sans interface utilisateur { Lire les entrées d’un fichier Effectuer des calculs Écrire les sorties dans un fichier }

… avec interface utilisateur minimale { Lire les entrées du clavier Effectuer des calculs Écrire les sorties sur l’écran }

… dans une boucle Répéter { Afficher l’invite de commandes Lire la commande Exécuter la commande Écrire les sorties sur l’écran }

Logiciel événementiel (« event-driven program») Répéter { Attendre un événement Traiter l’événement }

Logiciel événementiel pour une interface graphique Afficher l’interface (fenêtre(s), etc.) Répéter { Attendre un événement d’entrée e switch(e.type) { case KEY_PRESS:... case MOUSE_BUTTON:... case MOUSE_MOTION:... } Si nécessaire, mettre à jour l’affichage } Boucle d’événements

Logiciel traditionnel: Le logiciel « a le contrôle ». Le logiciel peut prendre le temps nécessaire pour traiter les entrées. L’utilisateur doit attendre. Les entrées sont limitées aux chaînes de caractères. Logiciel graphique interactif: L’utilisateur doit (avoir l’impression de) « avoir le contrôle ». Le logiciel doit traiter chaque événement assez rapidement pour répondre en temps réel. L’utilisateur peut générer différents événements à tout moment.

Structure, ou classe, d’événement Event { unsigned long int timestamp; int type; // KEY_PRESS, MOUSE_... int x, y; int key; boolean flag }

Sortes d’événements (1) KEY_DOWN ou …_PRESS (touche appuyée), KEY_UP ou …_RELEASE (touche relâchée), KEY_TYPED (synonyme pour DOWN + UP) – Attributs: temps, caractère ASCII (‘a’, ‘b’, ‘c’, …), touche de clavier (F1, F2, PageUp, Esc, …), s’il s’agit d’une auto-répétition ou non, coordonnées (x, y) de la souris, état des touches de modification (Ctrl, Shift, etc.)

Sortes d’événements (2) MOUSE_DOWN ou …_PRESS (bouton appuyé), MOUSE_UP ou …_RELEASE (bouton relâché), MOUSE_CLICK (synonyme pour DOWN + UP) MOUSE_DOUBLE_CLICK, MOUSE_MOTION ou …_MOVEMENT (mouvement), MOUSE_DRAG (glissement) – Attributs: temps, bouton (1-5) (gauche, droit, milieu, …), coordonnées (x, y), état de tous les boutons (utile pour les chordes), état des touches de modification (Ctrl, Shift, etc.) – Taux d’échantillonnage de la position dépend habituellement de la charge CPU

Autres sortes d’événements?

Sortes d’événements (3) RESIZE (redimensionnement), MAXIMIZE, MINIMIZE – Attributs: temps, nouvelles dimensions (width, height) WINDOW_CLOSE – Permet au logiciel de sauvegarder ses données, faire le ménage, etc.

Autres sortes d’événements?

Sortes d’événements (4) MOUSE_ENTER (souris entre dans la fenêtre), MOUSE_LEAVE ou …_EXIT (souris sort de la fenêtre) – Attributs: semblable à ceux des autres événements de souris REDRAW ou EXPOSE ou PAINT (demande de redessiner) – Peut être généré par un redimensionnement, un mouvement d’une autre fenêtre, ou par une demande du client même – Attributs: rectangle(s) à redessiner (x, y, width, height), c.-à-d. les rectangles endommagés (« damaged »)

Rectangles endommagés

Boucle d’événements en C avec Xlib (UNIX/X11) XEvent event; ouvrir une fenêtre while (!quit) { XNextEvent(..., &event); // attend le prochain événement switch (event.type) { case Expose:... // redessiner case ConfigureNotify:... // redimensionnement case ButtonPress:... // bouton de souris case ButtonRelease:... // bouton de souris case MotionNotify:... // mouvement de souris case KeyPress: // touche de clavier switch (XLookupKeysym(&event.xkey,...)) { case XK_F1:... // afficher de l’aide case XK_Escape: quit=true; break; } break; }

Boucle d’événements Xlib – comment travailler en même temps while (!quit) { while (0 == XEventsQueued(...)) { // Peut avancer une animation, simulation, des calculs, etc. faireUnPeuDeTravail(); usleep(100000); // dormir une fraction de seconde } XNextEvent(..., &event); switch (event.type) { case... } Optionnel Une autre façon de faire du travaille en même temps: utiliser des événements spéciaux …

Sortes d’événements (5) TIMER ou TIMEOUT (un délai de temps expiré), IDLE (le CPU est libre) – Envoyés au client sur demande seulement – Permettent de faire un peu de travail en attendant d’autres événements – Les « timeouts » peuvent être envoyés de façon périodique (exemple: pour une animation), ou seulement une fois (ex: pour retarder une action)

Exemples d’actions retardées Affichage d’une infobulleOuverture d’un sous-menu

Traitement d’événements en C avec GLUT (OpenGL) void drawHandler() {... // redessiner } void reshapeHandler( int width, int height ) {... // redimensionnement } void mouseHandler( int button,int state,int x,int y ) { // boutons de souris if (button==GLUT_LEFT_BUTTON && state==GLUT_DOWN)... } void passiveMotionHandler( int x, int y ) {... // mouvement de souris } void motionHandler( int x, int y ) {... // glissement de souris } void keyboardHandler( unsigned char key, int x, int y ) {... // touches normales } void specialKeyHandler( int key, int x, int y ) {... // touches spéciales } int main(... ) { glutInit... glutCreateWindow( "My Window" ); glutDisplayFunc( drawHandler ); glutReshapeFunc( reshapeHandler ); glutMouseFunc( mouseHandler );... glutMainLoop(); } Ces sous-routines s’appellent des « event handlers » (traiteurs d’événements) ou « callbacks » Où est la boucle d’événements?

Classes d’événements, architecture orientée objets Event KeyEventMouseEvent MouseButtonEventMouseMotionEvent … …

Les informations décrivant les événements peuvent être encodées dans une structure (exemple: Xlib), une ou plusieurs classes (ex: Java), ou de simples paramètres (ex: GLUT). Ces informations peuvent être traitées par une seule sous-routine, ou par plusieurs sous-routines selon le type d’événement. (Ces sous-routines s’appellent « event handlers » (traiteurs d’événements), ou « callbacks », ou sont des méthodes d’objets « event listeners » (écouters d’événements)) La boucle d’événements peut être située dans le code du client (ex: Xlib), ou à l’extérieur (dans une librarie ou « framework »; ex: GLUT).

Quelques exemples en Java …

Quelques éléments des interfaces graphiques

Les fenêtres

Curseurs standards de X11 Les curseurs de souris (ou pointeurs)

Les curseurs de texte (« caret »)

Les widgets

Les boutons

Les cases à cocher (« checkbox ») Pour des choix binaires et indépendants

Les boutons radio Pour des choix mutuellement exclusifs

Les infobulles (« tooltips »)

Barres de défilement

Barre de défilement contextuelle (« popup »)

Barre de progrès

Les champs Champs de texte Champs numériques – Avec « spinner » – Avec unités – Avec barre de défilement

Les menus

Barre de menus

« Pull-down menu »

Menu contextuel (« popup menu »)

Les menus d’options (« option menus »)

Affichage de sous-menus

Les ellipses …

« Tear-off menus »

Liste déroulante (« Pick list » ou « Scrolling list »)

« Split menu »

Les cadres

Les onglets

Des onglets hiérarchiques ?

Les séparateurs

Un bouton + menu

Créateur de tables

Les palettes de boutons

Les barres d’outils

Des boîtes de dialogue

Les tableaux

« tree list »

Cadres défilables (« scrolling area »)

Sélecteur de couleur (« color picker »)

Observations Widgets simples vs widgets composés Widgets composés: – Un enfant vs plusieurs enfants – Contenu fixe vs contenu variable

Observations (2) Certains widgets aident à gérer l’espace Onglets, menus, barres de défilement, …

L’exemple de SimplePaint.java …