Programmation des Interfaces

Cours 2a :
Programmation des
interfaces graphiques
[email protected]
(partie de la présentation basée sur des transparents d’Anastasia Bezerianos,
Fanis Tsandilas et Michel Beaudouin-Lafon)
Interfaces graphiques (GUIs)
l'interaction graphique : les entrées sont spécifiées
directement à partir des sorties.
Le périphérique d’entrée spécifie une commande de
position à l'écran qui désigne un objet
précédemment affiché par le système (pointage).
Elle est familière dans le monde physique.
Interfaces WIMP
WIMP : Window, Icons, Menus and Pointing
Fenêtres, Icones, menus et pointage.
Présentation
Fenêtre, icones et autres objets graphiques
Interaction
Menus, boites de dialogue, texte
Entrée
pointage, sélection, tracé
Boucle action perception
Feedback
Couches logicielles
Windows, Mac OS X, Linux
GDI+, Quartz, GTK+/Xlib, OpenGL
X Windows
Java Swing, Qt, GTK+, MFC, Cocoa
Squelette d’application MacApp

Couches logicielles
Windows, Mac OS X, Linux
GDI+, Quartz, GTK+/Xlib, OpenGL
X Windows
Java Swing, Qt, GTK+, MFC, Cocoa
Squelette d’application MacApp
Dispositifs d’entrée/sortie
Entrée : Saisir des commandes et des données
Sortie : le système affiche de l’information et montre son état
Interactivité vs. Algorithmique
système algorithmique (fermés) :
– lit des entrées, calcule, produit un
résultat
– il y a un état final
système interactif (ouverts) :
– évènements provenant de l’extérieur
– boucle infinie, non déterministe
Problème
vous avez appris à programmer des algorithmes
(la partie “calcul”)
la plupart des langages de programmation (C, C
++, Java, Lisp, Scheme, Ada, Pascal, Fortran,
Cobol, ...) sont conçus pour écrire des
algorithmes, pas des systèmes interactifs

Problème
Traitement des entrées/sorties pendant le calcul
– Instructions de sortie (print, put, send,…)
pour envoyer des données aux périphériques
– Instructions de lecture (read, get, receive,
…) pour lire l’état ou changement d’états de
périphériques d’entrée, du façon bloquante
Problème
obligés d’écrire des SI sous une forme
algorithmique :
afficher deux boutons B1 et B2!
fini <- faux!
tantque non fini faire!
! !bouton <- attendreClic () // attente bloquante!
! !selon bouton!
! ! !B1 : afficher «"Bonjour"»!
! ! !B2 : fini <- vrai!
! !fin!
fin
Comment gérer les entrées
-
- 1 pér. à la fois
- Attente active
- état des plusieurs pér.
- CPU
Programmation évènementielle
File d’attente (queue)
while active!
if queue is not empty!
event <- queue.dequeue()!
source <- findSource(event)!
source.processEvent(event)!
end if!
end while!
!
!
!
!
queue.enqueue(event)

Programmation évènementielle
File d’attente (queue)
while active!
if queue is not empty!
event <- queue.dequeue()!
source <- findSource(event)!
source.processEvent(event)!
end if!
end while!
!
!
!
!
!
processEvent(event)!
target <- FindTarget (event)!
if (target ≠ NULL)!
!target.processEvent(event)!
!
!
!
!
queue.enqueue(event)
Source :
Mouse Click
Cible :
Bouton « Cancel »
Exemple : Swing (AWT)
3 processus
• Initial : main()
• EDT gères la liste d’évènements :
envoie les évènements aux
listeners et appel la méthode paint
• Tache de fond : exécute les actions
plus longues
Couches logicielles
Windows, Mac OS X, Linux
GDI+, Quartz, GTK+/Xlib, OpenGL
X Windows
Java Swing, Qt, GTK+, MFC, Cocoa
Squelette d’application MacApp
Constructeurs d’interface
Exemples : MS Visual Studio (C++, C#, etc.), NetBeans (Java),
Interface Builder (ObjectiveC)

Constructeurs d’interface
Utiles pour :
– Créer des prototypes
– Tests d’apparence
– Conception rapide
– Débutants
Attention à la qualité du code généré !
Boîte à outils d’interface
Bibliothèques d’objets interactifs (les « widgets »)
que l’on assemble pour construire l’interface
Fonctionnalités pour faciliter la programmation
d’applications graphiques interactives
Boîte à outils d’interface
Pourquoi Java Swing
Java (toutes plateformes et beaucoup de librairies)
Beaucoup de ressources en ligne