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

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

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

Logiciel traditionnel,sans interface utilisateur

{

Lire les entrées d’un fichier

Effectuer des calculs

Écrire les sorties dans un fichier

}

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

… avec interface utilisateur minimale

{

Lire les entrées du clavier

Effectuer des calculs

Écrire les sorties sur l’écran

}

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

… dans une boucleRépéter {

Afficher l’invite de commandes

Lire la commande

Exécuter la commande

Écrire les sorties sur l’écran

}

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

Logiciel événementiel(« event-driven program»)

Répéter {

Attendre un événement

Traiter l’événement

}

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

Logiciel événementielpour 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

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

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.

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

Structure, ou classe, d’événement

Event {

unsigned long int timestamp;

int type; // KEY_PRESS, MOUSE_...

int x, y;

int key;

boolean flag...

...

}

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

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

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

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

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

Autres sortes d’événements?

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

Autres sortes d’événements?

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

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.

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

Autres sortes d’événements?

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

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

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

Rectangles endommagés

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

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 l’aide

case XK_Escape: quit=true; break;

}

break;

}

}

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

Boucle d’événements Xlib – comment travailler en même tempswhile (!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 …

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

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)

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

Exemples d’actions retardées

Affichage d’une infobulle Ouverture d’un sous-menu

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

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

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

Classes d’événements,architecture orientée objets

Event

KeyEventMouseEvent

MouseButtonEvent MouseMotionEvent

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

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

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

Quelques exemples en Java …

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

Quelques éléments desinterfaces graphiques

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

Les fenêtres

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

Les fenêtres

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

Curseurs standards de X11

Les curseurs de souris (ou pointeurs)

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

Curseur de souris, ou pointeur

« hotspot »

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

Les curseurs de texte (« caret »)

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

Les widgets

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

Les boutons

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

Les boutons

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

Les boutons

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

Les cases à cocher (« checkbox »)

Pour des choix binaires et indépendants

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

Les boutons radio

Pour des choix mutuellement exclusifs

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

Les infobulles (« tooltips »)

Page 38: Programmation événementielle et composants dinterface (« widgets »)
Page 39: Programmation événementielle et composants dinterface (« widgets »)

Barre de défilementou glisseur

(« scrollbar » ou « slider »)

Défileur (« thumb » ou « slider »)

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

Barre de défilementcontextuelle (« popup slider »)

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

Barre de progrès

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

Les champs

• Champs de texte• Champs numériques

– Avec « spinner »– Avec unités– Avec barre de défilement

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

Les menus

item ou commande (« menu item »)

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

Barre de menus

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

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

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

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

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

C’est quoi la différence entre « popup » et « context-sensitive » ?

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

Les menus d’options(« option menus »)

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

Affichage de sous-menus

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

Les ellipses …

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

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

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

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

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

Menu divisé (« Split menu »)

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

Menu divisé (« Split menu »)

Page 55: Programmation événementielle et composants dinterface (« widgets »)
Page 56: Programmation événementielle et composants dinterface (« widgets »)

Les cadres

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

Les onglets

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

Les onglets

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

Des onglets hiérarchiques ?

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

Les séparateurs

Page 61: Programmation événementielle et composants dinterface (« widgets »)
Page 62: Programmation événementielle et composants dinterface (« widgets »)
Page 63: Programmation événementielle et composants dinterface (« widgets »)

Un bouton + menu

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

Créateur de tables

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

Les palettes de boutons

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

Les barres d’outils

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

Des boîtes de dialogue

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

2 sortes de boîtes de dialogue

• Modale (« modal »)– Oblige l’utilisateur 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

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

Les tableaux

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

« tree list »

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

« tree list »

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

Cadres défilables (« scrolling area »)

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

Sélecteur de couleur (« color picker »)

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

Sélecteur de couleur (« color picker »)

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

Observations

• Widgets simples vs widgets composés• Widgets composés:

– Un enfant vs plusieurs enfants

– Contenu fixe vs contenu variable

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

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

Page 77: Programmation événementielle et composants dinterface (« widgets »)
Page 78: Programmation événementielle et composants dinterface (« widgets »)
Page 79: Programmation événementielle et composants dinterface (« widgets »)
Page 80: Programmation événementielle et composants dinterface (« widgets »)
Page 81: Programmation événementielle et composants dinterface (« widgets »)

L’exemple de SimpleDraw.java …

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

class Stroke ArrayList< Point2D > points = …; AlignedRectangle2D getBoundingRectangle() draw()class Drawing ArrayList< Stroke > 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.javaCustomWidget.java

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

JMenuBar menuBar

JMenu("File")

JMenu("View")

JMenu("Help")

JMenuItem("Clear")

JMenuItem(“Quit")

JFrame frame

Container toolPanel MyCanvas canvas

JRadioButton(…)

JButton("Delete Selection")

JButton("Frame Selection")

… …

RadialMenuWidget