Programmation

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énementielpour 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éesaux 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)
• Attributstemps,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,MOUS
  E_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
Autres sortes dévénements?
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
• Attributsrectangle(s) à redessiner (x, y,
  width, height),c.-à-d. les rectangles endommagés
  ( damaged )

16
Rectangles endommagés
17
Boucle dévénementsen 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 quittrue 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
tempsutiliser 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 infobulle
Ouverture dun sous-menu
21
Traitement dévénementsen 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 (buttonGLUT_LEFT_BUTTON
  stateGLUT_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

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

KeyEvent
MouseEvent

MouseButtonEvent
MouseMotionEvent
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 desinterfaces graphiques
26
Les fenêtres
27
Les fenêtres
28
Les curseurs de souris (ou pointeurs)
Curseurs standards de X11
29
Curseur de souris, ou pointeur
 hotspot 
30
Les curseurs de texte ( caret )
31
Les widgets
32
Les boutons
33
Les boutons
34
Les boutons
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
(No Transcript)
39
Barre de défilementou glisseur( scrollbar  ou
 slider )
Défileur ( thumb  ou  slider )
40
Barre de défilementcontextuelle ( 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
Menu divisé ( Split menu )
55
(No Transcript)
56
Les cadres
57
Les onglets
58
Les onglets
59
Des onglets hiérarchiques ?
60
Les séparateurs
61
(No Transcript)
62
(No Transcript)
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
 tree list
72
Cadres défilables ( scrolling area )
73
Sélecteur de couleur ( color picker )
74
Sélecteur de couleur ( color picker )
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
(No Transcript)
78
(No Transcript)
79
(No Transcript)
80
(No Transcript)
81
Lexemple de SimplePaint.java