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

Présentation au sujet: "Programmation événementielle et composants d’interface (« widgets »)"— Transcription de la présentation:

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

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

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

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

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

6 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

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

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

9 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.)

10 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

11 Autres sortes d’événements?

12

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

14 Autres sortes d’événements?

15 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 »)

16 Rectangles endommagés

17 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; }

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

19 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)

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

21 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?

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

23 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).

24 Quelques exemples en Java …

25 Quelques éléments des interfaces graphiques

26 Les fenêtres

27

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

29 Les curseurs de texte (« caret »)

30 Les widgets

31 Les boutons

32

33

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

35 Les boutons radio Pour des choix mutuellement exclusifs

36 Les infobulles (« tooltips »)

37

38 Barres de défilement

39 Barre de défilement contextuelle (« popup »)

40 Barre de progrès

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

42 Les menus

43 Barre de menus

44 « Pull-down menu »

45 Menu contextuel (« popup menu »)

46 Les menus d’options (« option menus »)

47 Affichage de sous-menus

48 Les ellipses …

49 « Tear-off menus »

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

51 « Split menu »

52

53

54 Les cadres

55 Les onglets

56

57 Des onglets hiérarchiques ?

58 Les séparateurs

59

60

61 Un bouton + menu

62 Créateur de tables

63 Les palettes de boutons

64 Les barres d’outils

65 Des boîtes de dialogue

66 Les tableaux

67 « tree list »

68

69 Cadres défilables (« scrolling area »)

70 Sélecteur de couleur (« color picker »)

71

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

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

74

75

76

77

78 L’exemple de SimplePaint.java …