iti 1521. introduction à l'informatique ii -...

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


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.



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


https://fr.wikipedia.org/wiki/Modèle-vue-contrôleur

http://heim.ifi.uio.no/~trygver/2007/MVC_Originals.pdf


Plan

1. Préambule

2. Théorie

3. Exemple

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



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.



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.



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.



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.



Vue

Une représentation (graphique, textuelle, vocale, etc.)du modèle pour l’utilisateur.



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.



Counter

ViewController

Model

update()

getValue()

actionPerformed()

increment()reset()

Une interface graphique pour la classe Counter.



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+”}” ;}

}



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.


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 ( ) ;}

}


Application Counter

ViewController

Model

update()

getValue()

actionPerformed()

increment()reset()


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 ( ) ;

}

}


Counter

L’application Counter est ses deux vues : textuelle etgraphique.



Résumé

MVC permet de séparer clairement les données, lesvues, et la logique d’une application.



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



Prochain module

Types paramétrés (« generics »)



References I

E. B. Koffman and Wolfgang P. A. T.Data Structures : Abstraction and Design Using Java.John Wiley & Sons, 2e edition, 2010.



Pensez-y !L’impression de ces notes n’est probablement pas nécessaire !


iti 1521. introduction à l'informatique ii -...

Documents