IFT2905 Interfaces personne-machine 4. Achitecture de logiciel IU
S´ebastien Roy
D´epartement d’Informatique et de recherche op´erationnelle Universit´e de Montr´eal
22 janvier 2007 Universit´e de Montr´eal
Horreur ou splendeur?
Message qui pr´esent´e lorsqu’on vidait la cache de Internet Explorer sur Win95.
Tautologie: Cookie:... is a cookie Trop d’exitation (!!)
Est-ce qu’on donne assez d’information `a l’usager pour d´ecider? Qu’est-ce qu’uncookie?
→ Ne pas poser de questions auquel on ne peut r´epondre.
Horreur ou splendeur?
Trop de question? utiliserto All.
mais ce n’est pas toujours la solution...
Ici on affiche chaque fichier un `a la fois...
Que faire si on veut changer de r´eponse sur un fichier `a la fin de la liste?
Horreur ou splendeur?
Vous avez beaucoup de questions similaires `a poser?
→ affichez une liste
Au programme
Comment on programme des interfaces usager?
Quelquesdesign patterns...
Mod`ele-Vue-Contrˆoleur (Model-View Controller ouMVC) Hi´erarchie de Vue
Observateur
Mod` ele-Vue-Contrˆ oleur
Mod`ele-Vue-Contrˆoleur
Pattern de programmation des interfaces usagers propos´e originalement par Smalltalk-80.
S´eparation des responsabilit´es Avant-sc`ene: VueetContrˆoleur Arri`ere-sc`ene: Mod`ele
D´ecouplage
On peut avoir plusieurs Vueou Contrˆoleur pour un mod`ele.
On peut r´eutiliser unVue ouContrˆoleur dans d’autres mod`eles.
Mod` ele-Vue-Contrˆ oleur
Mod` ele-Vue-Contrˆ oleur
Mod`ele
´Etat de l’appliquation
G`ere les donn´ees internes de l’appliquation Implante les changements d’´etat
Avertit les Vues/Contrˆoleurs des changements Si le patternObservateur(observer) est utilis´e: les Vues s’enregistrent au mod`ele pour recevoir les changements (en tant quelisteners). Sinon, les vues puisent directement dans le mod`ele.
Mod` ele-Vue-Contrˆ oleur
Vue
Sortie pour l’usager Occupe l’´ecran
Questionne le mod`ele pour l’info `a afficher (≈callbacks) Ecoute le mod`´ ele pour des changements (si pattern Obersvateur)
Contrˆoleur
Entr´ee de l’usager Clavier, souris, ...
Dit au Mod`ele ou `a la Vue de changer en fonction de l’input B´en´efice de la s´eparation M-V-C
Plusieurs fa¸con de voir une mˆeme donn´ee.
R´eutilisabilit´e → GUI toolkits
Exemple: Champs de texte
Exemple: client Web
Exemple: Serveur web avec base de donn´ ee
Exemple: Visualisation du traffic
Exemple: Multiplicateur minimaliste
entry .a -width 5 -textvariable a label .* -text *
entry .b -width 5 -textvariable b label .= -text =
label .c -width 10 -textvariable c eval pack .a .* .b .= .c -side left trace variable a w {recalcule}
trace variable b w {recalcule}
proc recalcule {args} { global a b c
catch {set c [expr {$a * $b}]}
}
Exemple: Multiplicateur minimaliste
Mod`ele
les variablesa,b, c Vue
lelabel .caffiche la valeur dec Contrˆoleur
les champs.aet.bpour entrer les valeurs
→ quoique...
-textvariablefait que la vue est avertie lors d’un changement sur aoub (ou mˆemec).
trace fait que le mod`ele est avertit lors d’un changement sur aoub.
Granularit´ e du mod` ele
Quelle est la granularit´e des parties observables du mod`ele?
getText()VSgetPartOfText(start, end) Carte routi`ere VS routes individuelles
Granulartie des ´evenements?
La string a chang´eVSLe caract`ere 12 `a chang´e La carte routi`ere VS Quelques routes ont chang´e
Granularit´ e: Multiplicateur
bind amaj "a" {puts "A!"; event generate %W "A"; break; } entry .a -width 5 -textvariable a
bindtags .a [concat amaj [bindtags .a]]
pack .a
Avant: un ´evenement pour chaque entr´ee (”Enter”).
Ici: un ´evenement pour chaque touche...
S´ eparation du Contrˆ oleur et Vue
Les composants d’interface (ex: entry) poss`ede une paire contrˆoleur-vue int´egr´es.
Un contrˆoleur doit produire une sortie
L’affichage fournit lacapacit´e suggestive d’action (affordance). Ex: scrollbar, entry, radio button, ...
L’affichage fournit dufeedback`a l’utilisateur. Ex: bouton press´e, ...
Etat partag´´ e entre contrˆoleur et vue... qui controle la s´election?
doit ˆetre affich´e par la vue
doit ˆetre mis `a jour par le contrˆoleur
Certaines composantes d’interface usager sont difficiles `a d´ecomposer selon le mod`ele MVC.
En pratique: Contrˆ oleur et Vue coupl´ es
MVC est maintenant remplac´e par MV(Mod`ele-Vue) Une Vue g`ere `a la fois les entr´ees et l’affichage
→ appell´ewidget, ou composant d’interface Ex: buttons, entry, scrollbar, etc...
Hi´ erarchie de Vues
Les Vues sont organis´ees hi´erarchiquement Contenant (Containers)
Fenˆetre, paneau, widget texte complexe, ...
tk window, frame
Composants (Components)
Canvas, bouton, ´etiquette, boˆıte de texte, ...
Les contenants sont ausse des composants
Chaque syst`eme de GUI offre des hi´erarchies `a usage vari´e Sortie
Entr´ee
Agencement (Layout)
Hi´ erarchie de Vues: exemple
frame .f
entry .f.a -width 5 -textvariable a label .f.* -text *
entry .f.b -width 5 -textvariable b label .f.= -text =
label .f.c -width 10 -textvariable c
eval pack .f.a .f.* .f.b .f.= .f.c -side left button .q -text Quit -command {destroy .}
pack .f .q -side top
trace variable a w {recompute}
trace variable b w {recompute}
proc recompute {args} { global a b c
catch {set c [expr {$a * $b}]}
}
Hi´ erarchie de Vue: Sortie
Dessin
Un demande de dessin passe du haut vers le bas de la hi´erarchie
D´ecoupage (Clipping)
Le contenant parent pr´evient ses enfants des limites o`u ils peuvent dessiner
Ordre de profondeur
Les enfants son (g´en´eralement) dessin´es au dessus des parents L’ordre des enfants dicte l’ordre d’affichage
Syst`eme de coordonn´ees
Chaque contenant `a son propre syst`eme (origine au coin en haut `a gauche, typiquement)
La position des enfants est exprim´ee dans le syst`eme du parent
Hi´ erarchie de Vue: Entr´ ee
Distribution et propagation des ´evenements
Les ´evenements brutes (touche press´ee, mouvement de souris, clics) sont envoy´es `a la composante la plus basse (feuille de la hi´erarchie)
un ´evenement se propage vers le haut, jusqu’`a ce qu’une composante l’utilise
Focus clavier et souris
Une seul composante `a la fois poss`ede le focus (et ses parents
´
evidement)
Hi´ erarchie de Vue: Agencement
Agencement automatique: Choix de la position et taille d’un enfant pour qu’il soit `a l’int´erieur du parent.
Permet d’adapter au changement de taille de fenˆetre Permet l’internationalisation et les diff´erences entre plateformes (polices, ...)
Elimine la lourdeur de la gestion explicite des positions.´ En r´ealit´e, le programmeur doit quand mˆeme placer les composants...
Pattern Observateur
On utilise le patternObservateurpour s´eparer le Mod`ele des Vues.
→ En Java, ce sont les Listeners.
Int´ eraction de base
interface Model {
void register(Observer) void unregister(Observer) Object get()
void modify() }
interface Observer { void update(Event) }
Int´ eraction de base: Attention
Le mod`ele doit ˆetre consistant avant une mise `a jour.
Int´ eraction de base: Attention
Changement d’inscription (registration) pendant la mise `a jour.
Int´ eraction de base: Attention
La mise `a jour d´eclanche une modification.
Int´ eraction de base: Attention
Mises `a jour d´esordonn´ees.
