Upload
others
View
21
Download
0
Embed Size (px)
Citation preview
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
ITI 1521. Introduction à l’informatique IIInterface utilisateur graphique : Modèle-Vue-Contrôleur
Marcel Turcotte
École de science informatique et de génie électrique (SIGE)Université d’Ottawa
Version du 7 février 2017
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Aperçu
Interface utilisateur graphique : Modèle-Vue-Contrôleur
En développement logiciel, un patron de conception est unarrangement spécifique de classes. C’est une façon standard derésoudre des problèmes bien connus. Les programmeurs del’industrie sont familiers avec ces patrons. Cette semaine, nousdécouvrons le patron de conception Modèle-Vue-Contrôleur(MVC) qui sert dans la réalisation d’interfaces utilisateurgraphiques.
Objectif général :Cette semaine, vous serez en mesure de concevoirl’interface utilisateur graphique d’une application simpleen appliquant le patron de conceptionModèle-Vue-Contrôleur.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Objectifs d’apprentissage
Décrire en vos propres mots le patron de conceptionModèle-Vue-Contrôleur.Utiliser le patron de conception Modèle-Vue-Contrôleurafin de produire le rendu visuel d’une interface utilisateurgraphique.
Lectures :https://fr.wikipedia.org/wiki/Modèle-vue-contrôleur
http://heim.ifi.uio.no/~trygver/2007/MVC_Originals.pdf
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Plan
1. Préambule
2. Théorie
3. Exemple
4. Prologue
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Patron de conception («design pattern»)
En développement logiciel, un patron de conception estun arrangement spécifique de classes.C’est une façon standard de résoudre des problèmes bienconnus.Les programmeurs de l’industrie sont familiers avec cespatrons.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Modèle-Vue-Contrôleur («Model-View-Controller»)
ViewController
Model
1
3
2 4
MVC permet de séparer les données, la vue et lalogique de l’application.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Avantages
Permet de modifier ou adapter chacune des parties del’application de façon indépendante ;Favorise l’implémentation de plusieurs vues ;L’association entre le modèle et la vue se faitdynamiquement au moment de l’exécution (et non aumoment de la compilation), ce qui permet de changer lavue au moment de l’exécution.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Définitions
Modèle – l’implémentation, état : attributs etcomportements ;Vue (View) – l’interface en sortie, une représentation dumodèle pour le monde extérieur ;Contrôleur (Controller) – l’interface en entrée, achemineles requêtes de l’usager afin de mettre-à-jour le modèle.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Modèle
Contient les données de l’application et les méthodespour transformer les données ;Possède une connaissance minimale de l’interfacegraphique (parfois aucune connaissance) ;La vue et le modèle sont très différents.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Vue
Une représentation (graphique, textuelle, vocale, etc.)du modèle pour l’utilisateur.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Contrôleur
Un contrôleur est un objet permettant à l’utilisateur detransformer les données ou la représentation ;Connaît très bien le modèle.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Counter
ViewController
Model
update()
getValue()
actionPerformed()
increment()reset()
Une interface graphique pour la classe Counter.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Counter : Modèle
pub l i c c l a s s Counter {pr i va te i n t va lue ;pub l i c Counter ( ) {
va lue = 0 ;}pub l i c void i nc rement ( ) {
va lue++;}pub l i c i n t getVa lue ( ) {
return va lue ;}pub l i c void r e s e t ( ) {
va lue = 0 ;}pub l i c S t r i n g t o S t r i n g ( ) {
return ” Counter : { va lue=”+va lue+”}” ;}
}
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
View
pub l i c i n t e r f a c e View {void update ( ) ;
}
Pour faciliter le développement de plusieurs vues, nouscréons l’interface View.Notre exemple aura deux vues : GraphicalView etTextView.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
pub l i c c l a s s TextView implements View {
pr i va te Counter model ;
pub l i c TextView ( Counter model ) {t h i s . model = model ;
}
pub l i c void update ( ) {System . out . p r i n t l n ( model . t o S t r i n g ( ) ) ;
}
}
pub l i c c l a s s Graph ica lV iew extends JFrame implements View {pr i va te JLabe l i npu t ;pr i va te Counter model ;pub l i c Graph ica lV iew ( Counter model , C o n t r o l l e r c o n t r o l l e r ) {
se tLayout (new GridLayout (1 , 3 ) ) ;t h i s . model = model ;JButton button ;button = new JButton ( ” Increment ” ) ;button . addAc t i onL i s t ene r ( c o n t r o l l e r ) ;add ( button ) ;JButton r e s e t ;r e s e t = new JButton ( ” Reset ” ) ;r e s e t . addAc t i onL i s t ene r ( c o n t r o l l e r ) ;add ( r e s e t ) ;i npu t = new JLabe l ( ) ;add ( inpu t ) ;
}pub l i c void update ( ) {
inpu t . se tText ( I n t e g e r . t o S t r i n g ( model . getVa lue ( ) ) ) ;}
}
pub l i c c l a s s C o n t r o l l e r implements A c t i o n L i s t e n e r {
pr i va te Counter model ;
pr i va te View [ ] v i ews ;pr i va te i n t numberOfViews ;
pub l i c C o n t r o l l e r ( ) {
v iews = new View [ 2 ] ;numberOfViews = 0 ;
model = new Counter ( ) ;
r e g i s t e r (new Graph ica lV iew ( model , t h i s ) ) ;r e g i s t e r (new TextView ( model ) ) ;
update ( ) ;
}
pr i va te void r e g i s t e r ( View view ) {v iews [ numberOfViews ] = view ;numberOfViews++;
}
pr i va te void update ( ) {f o r ( i n t i =0 ; i<numberOfViews ; i++) {
v iews [ i ] . update ( ) ;}
}
pub l i c void act ionPer fo rmed ( Act ionEvent e ) {
i f ( e . getActionCommand ( ) . equa l s ( ” Increment ” ) ) {model . inc rement ( ) ;
} e l s e {model . r e s e t ( ) ;
}
update ( ) ;}
}
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Application Counter
ViewController
Model
update()
getValue()
actionPerformed()
increment()reset()
Marcel Turcotte ITI 1521. Introduction à l’informatique II
pub l i c c l a s s App {
pub l i c s t a t i c void main ( S t r i n g [ ] a rg s ) {
C o n t r o l l e r c o n t r o l l e r ;c o n t r o l l e r = new C o n t r o l l e r ( ) ;
}
}
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Counter
L’application Counter est ses deux vues : textuelle etgraphique.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Résumé
MVC permet de séparer clairement les données, lesvues, et la logique d’une application.
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Excercises
Implémentez chacune des applications suivantes à l’aide du patronde conception Modèle-Vue-Contrôleur (MVC).
Un jeu de tic-tac-toeUn jeu de bataille navaleUn jeu de mémoireJeu 2048
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
Prochain module
Types paramétrés (« generics »)
Marcel Turcotte ITI 1521. Introduction à l’informatique II
Préambule Théorie Exemple ProloguePréambule Théorie Exemple Prologue
References I
E. B. Koffman and Wolfgang P. A. T.Data Structures : Abstraction and Design Using Java.John Wiley & Sons, 2e edition, 2010.
Marcel Turcotte ITI 1521. Introduction à l’informatique II