Programmation événementielle et composants dinterface (« widgets »)

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

1 Programmation événementielle et composants dinterface (« widgets »)

2 Logiciel traditionnel, sans interface utilisateur { Lire les entrées dun 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 linvite 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 linterface (fenêtre(s), etc.) Répéter { Attendre un événement dentrée e switch(e.type) { case KEY_PRESS:... case MOUSE_BUTTON:... case MOUSE_MOTION:... } Si nécessaire, mettre à jour laffichage } 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. Lutilisateur doit attendre. Les entrées sont limitées aux chaînes de caractères. Logiciel graphique interactif: Lutilisateur doit (avoir limpression de) « avoir le contrôle ». Le logiciel doit traiter chaque événement assez rapidement pour répondre en temps réel. Lutilisateur 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, …), sil sagit dune 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 combinaisons), é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 dune 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 laide 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 dautres é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 dactions retardées Affichage dune infobulleOuverture dun 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 sappellent 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 sappellent « event handlers » (traiteurs dévénements), ou « callbacks », ou sont des méthodes dobjets « event listeners » (écouters dévénements)) La boucle dévénements peut être située dans le code du client (ex: Xlib), ou à lexté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 Curseur de souris, ou pointeur « hotspot »

30 Les curseurs de texte (« caret »)

31 Les widgets

32 Les boutons

33

34

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

36 Les boutons radio Pour des choix mutuellement exclusifs

37 Les infobulles (« tooltips »)

38

39 Barre de défilement ou glisseur (« scrollbar » ou « slider ») Défileur (« thumb » ou « slider »)

40 Barre de défilement contextuelle (« popup slider »)

41 Barre de progrès

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

43 Les menus item ou commande (« menu item »)

44 Barre de menus

45 Menu déroulant (« Pull-down menu »)

46 Menu contextuel (« popup menu » ou « context-sensitive menu »)

47 Cest quoi la différence entre « popup » et « context-sensitive » ?

48 Les menus doptions (« option menus »)

49 Affichage de sous-menus

50 Les ellipses …

51 Menus détachés ou menus flottants (« Tear-off menus »)

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

53 Menu divisé (« Split menu »)

54

55

56 Les cadres

57 Les onglets

58

59 Des onglets hiérarchiques ?

60 Les séparateurs

61

62

63 Un bouton + menu

64 Créateur de tables

65 Les palettes de boutons

66 Les barres doutils

67 Des boîtes de dialogue

68 2 sortes de boîtes de dialogue Modale (« modal ») – Oblige lutilisateur de compléter son interaction avec la boîte avant de retourner à la fenêtre principale Non-modale (« modeless ») – Plusieurs boîtes non-modales peuvent être ouvertes en même temps dans une même application

69 Les tableaux

70 « tree list »

71

72 Cadres défilables (« scrolling area »)

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

74

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

76 Observations (2) Certains widgets aident à gérer lespace Onglets, menus, barres de défilement, …

77

78

79

80

81 Lexemple de SimpleDraw.java …

82 class Stroke ArrayList points = …; AlignedRectangle2D getBoundingRectangle() draw() class Drawing ArrayList strokes = …; AlignedRectangle2D getBoundingRectangle() draw() class MyCanvas RadialMenuWidget radialMenu = …; paintComponent() mousePressed() mouseReleased() mouseMoved() mouseDragged() class SimpleDraw actionPerformed() createUI() main() class CustomWidget pressEvent() releaseEvent() moveEvent() dragEvent() draw() class RadialMenuWidget … RadialMenuWidget.java SimpleDraw.java CustomWidget.java

83 JMenuBar menuBar JMenu("File") JMenu("View") JMenu("Help") JMenuItem("Clear") JMenuItem(Quit") JFrame frame Container toolPanelMyCanvas canvas JRadioButton(…) JButton("Delete Selection") JButton("Frame Selection") … … RadialMenuWidget