Conception et programmation

orientées objet avancées

l'architecture modèle-vue-contrôleur :
une composition de 3 design patterns
(composite + observateur + stratégie)

(ce cours présente l'architecture MVC depuis le point de vue des designs patterns et des principes de conception objet,
il fait volontairement peu référence à la programmation d'interfaces graphiques déjà présentée dans le cours IHM)
 Motivation

[Link], dpt informatique, IUT Villetaneuse 2

 Créer des applications avec
interface homme-machine (IHM)
facilement maintenables et extensibles
Application

MODELE
(logique applicative)
gère les données
VUE et les fonctionnalités
(IHM) du domaine considéré
saisit
les requêtes
(demandes
de l'utilisateur)
et affiche
les résultats
Utilisateur
CONTROLEUR
interprète les requêtes
en utilisant le MODELE,
ou la VUE

[Link], dpt informatique, IUT Villetaneuse 3

 Exemple :
créer un application gérant
un point du plan

L'utilisateur peut :

●
entrer/modifier les coordonnées du point

L'application doit :

●
afficher les coordonnées du point

●
afficher la distance du point à l'origine

[Link], dpt informatique, IUT Villetaneuse 4

 Une mauvaise conception

[Link], dpt informatique, IUT Villetaneuse 5

 Le modèle, la vue et le contrôleur sont
(mélangés) au sein d'une même classe

Point

VUE MODELE
(logique
(IHM) applicative)
gère lagère les données
saisie
deset les fonctionnalités
requêtes
du demandés
(services domaine considéré
par l'utilisateur) CONTROLEUR
et l'affichage
interprète les requêtes
Utilisateur des résultats
en utilisant la partie métier,
ou la VUE si la requête la concerne

[Link], dpt informatique, IUT Villetaneuse 6

 La classe Point contient le modèle, la vue...
public class Point
{
private float x, y ;
// valeurs par défaut
public Point() {this.x = 0 ; this.y = 0 ;}

public float getAbscisse() {return this.x ;} modèle

modèle: :
public float getOrdonnee() {return this.y;} gestion
gestiond'un
d'unpoint
point
public void majPoint(float a, float o)
{this.x = a ; this.y = o ;}
public void distance() {...}

public void saisirPoint(){...}

public void afficherPoint() {...} vue
public void afficherDistance() {...} vue: :
gestion
gestiondes
desinteractions
interactions
public void activerVuePoint() {...} avec l'utilisateur
avec l'utilisateur
public void saisirAbscisse() {...} (affichages
(affichagesetetsaisies)
saisies)
public void saisirOrdonnee() {...}
}

[Link], dpt informatique, IUT Villetaneuse 7

 ...et le contrôleur qui n'est pas clairement
localisé au sein de la classe
public class Point
{ ...
public void majPoint(float abs, float ord) modèle
modèle
{this.x = abs ; this.y = ord ;}

… // VUE
SaisirPoint()
SaisirPoint()correspond
correspondààune
unerequête
requête(demande)
(demande)
dede l'utilisateur, requête proposée parlalavue
l'utilisateur, requête proposée par vue
public void saisirPoint()
{
instructions
instructionss'adressant
s'adressant ààlalavue
vue
float unX = [Link]() ; qui gère les interactions avec
l'interprétation
l'interprétation qui gère les interactions avec
de float unY = [Link]() ; l'utilisateur.
delalarequête
requête: : Ici
l'utilisateur.
relève
relèvedudu Ici demandeles
demande lescoordonnées
coordonnées
contrôleur [Link](unX, unY); pour le Point courant.
pour le Point courant.
contrôleur

} instruction
instructions'adressant
s'adressantau
aumodèle
modèle
pour
pour affecter les coordonnéessaisies
affecter les coordonnées saisies
... au
auPoint
Pointcourant
courant
} (aucune
(aucuneinteraction
interactionavec
avecl'utilisateur)
l'utilisateur)

La partie contrôle est éclatée dans les méthodes de la vue

[Link], dpt informatique, IUT Villetaneuse 8
 Une classe cliente active la vue (IHM)
public class Client
{
public static void main(String[] args)
{
Point p = new Point() ;
[Link]() ;
}
}

menu
menuaffiché
affichéquand
quandon on
active la vue
active la vue ::
attend
attend lechoix
le choixde del'utilisateur
l'utilisateur
(les
(leschoix
choixcorrespondent
correspondentààdes des
requêtes prédéfinies)
requêtes prédéfinies)

La classe Client (et l'utilisateur qui en bénéficie) n'interagit qu'avec la vue

[Link], dpt informatique, IUT Villetaneuse 9

 Une (à peine) meilleure conception

[Link], dpt informatique, IUT Villetaneuse 10

 Le modèle, la vue et le contrôleur sont
clairement séparés dans la classe Point

public class Point

{
... modèle
modèle: :
public void majPoint(float a, float o) gestion
gestiond'un
d'unpoint
point
{this.x = a ; this.y = o ;}
public void distance() {...}

public void afficherPoint() {...}

public void afficherDistance() {...} vue
vue: :
public void activerIHMPoint() {...} ne
nes'occupe
s'occupeque quedes
des
public float saisirAbscisse() {...} interactions avec
interactions avec
l'utilisateur
l'utilisateur
public float saisirOrdonnee() {...}
public void saisirPoint(){...}
contrôleur
contrôleur: :
public void gererSaisirPoint() {...} ; interprète
interprèteles
les
} requêtes
requêtes
(ici
(ici uneseule
une seulerequête)
requête)

[Link], dpt informatique, IUT Villetaneuse 11

 Chaque requête-utilisateur de la vue délègue
son interprétation à une méthode du contrôleur

public class Point

{ ...
public void majPoint(float a, float o)
modèle
modèle
{this.x = a ; this.y = o ;}
...
// VUE
public void saisirPoint() délègue
délègueau
aucontrôleur
contrôleurl'interprétation
l'interprétationde
de
{ [Link]() ;} lalarequête saisirPoint()
requête saisirPoint()

// CONTROLEUR
...
public void gererSaisirPoint()
{ lelecontrôleur
contrôleurs'adresse
s'adresse
interprétation
interprétation float unX = [Link]() ; ààlalavue
vue pour lasaisie
pour la saisie
de
delalarequête
requête float unY = [Link]() ; des valeurs...
des valeurs...
saisirPoint()
saisirPoint()
...puis
...puislelecontrôleur
contrôleurs'adresse
s'adresse
[Link](unX, unY) ; au modèle
} au modèle
pour
pour l'affectationdes
l'affectation desvaleurs
valeurs
}

[Link], dpt informatique, IUT Villetaneuse 12

 Laisser le modèle, la vue et le contrôleur dans
une même classe contrevient à plusieurs
principes de conception objet

● Séparation des interfaces (Interface segregation principle) (SOLID)

● Responsabilité unique (Single responsability principle) (SOLID)

● Séparer ce qui change du reste

● Dépendre d'interfaces non d'implémentations

[Link], dpt informatique, IUT Villetaneuse 13

 Principe de responsabilité unique
(SOLID : Single responsability principle)
Une classe doit avoir une responsabilité unique
(une seule raison de changer)

Point
+majPoint(a:float,o:float)
modèle +getAbscisse(): float
+getOrdonnee(): float
+distance(): float
+afficherDistance()
+afficherPoint()
vue +saisirAbscisse(): float
+saisirOrdonnee(): float
+saisirPoint()
contrôleur +gererSaisirPoint()

La classe Point a trois responsabilités :

● gérer un point (modèle)
● gérer l'IHM relative à un point (vue)
● gérer l'interprétation des requêtes de l'utilisateur (contrôleur)
[Link], dpt informatique, IUT Villetaneuse 14
 Principe de séparation des interfaces
(SOLID : Interface segregation principle)
Un client ne doit jamais être obligé de dépendre d'une interface
qu'il n'utilise pas
(interface peut se comprendre comme interface au sens java,
ou comme la partie publique d'une classe)

Point
+majPoint(a:float,o:float)
modèle +getAbscisse(): float
+getOrdonnee(): float
+distance(): float
+afficherDistance()
+afficherPoint()
vue +saisirAbscisse(): float
+saisirOrdonnee(): float
+saisirPoint()
contrôleur +gererSaisirPoint()

Tout client de la classe Point qui souhaite gérer un point sans

se soucier de la vue (IHM) ou du contrôle reste dépendant des méthodes relatives
à ces parties qu'il n'utilisera pas.
[Link], dpt informatique, IUT Villetaneuse 15
 Séparer ce qui change du reste

Les éléments d'une classe susceptibles de changer doivent être placés dans d'autres
classes liées à la première par composition

Point
+majPoint(a:float,o:float)
modèle +getAbscisse(): float
+getOrdonnee(): float
+distance(): float
+afficherDistance()
+afficherPoint()
vue +saisirAbscisse(): float
+saisirOrdonnee(): float
+saisirPoint()
contrôleur +gererSaisirPoint()

La vue et le contrôleur sont susceptibles de changer.

Il faut donc les placer hors de la classe Point

[Link], dpt informatique, IUT Villetaneuse 16

 Dépendre d'interfaces
non d'implémentations
Tout client de la classe Point dépend des implémentations des méthodes
du modèle, de la vue et du contrôleur.

Point
+majPoint(a:float,o:float)
modèle +getAbscisse(): float
+getOrdonnee(): float
+distance(): float
+afficherDistance()
+afficherPoint()
vue +saisirAbscisse(): float
+saisirOrdonnee(): float
+saisirPoint()
contrôleur +gererSaisirPoint()

Il aurait fallu créé 3 interfaces, tout client pouvant choisir

les implémentations qui lui conviennent parmi les implémentations proposées
(ou en concevoir de nouvelles)
[Link], dpt informatique, IUT Villetaneuse 17
 Conséquences du non respect
des principes de conception objet
●
Manque de lisibilité
le code la classe Point mélange des méthodes et instructions
qui n'ont rien à faire ensemble. Elle devient trop importante.

●
Manque d'indépendance
✔
Le modèle, la vue et le contrôleur risquent de dépendre structurellement
les uns des autres
✔
on ne peut plus confier le modèle, la vue et le contrôleur à des
concepteurs/développeurs distincts

●
Maintenance/extensibilité difficiles
modifier une des parties aura des conséquences sur les autres et sera difficile à organiser

●
Manque de souplesse
impossible de changer facilement la vue et/ou le contrôleur
[Link], dpt informatique, IUT Villetaneuse 18
 Une meilleure conception

[Link], dpt informatique, IUT Villetaneuse 19

 On place le modèle, les vues et les contrôleurs
dans des interfaces (et classes) distinctes
<<interface>> 1 1..* <<interface>>
ModelePoint VuePoint
+majPoint(a:float,o:float) +afficherDistance()
+getAbscisse(): float <<interface>> +afficherPoint()
+getOrdonnee(): float +saisirAbscisse(): float
1 1..* ControleurPoint 1 1..*
+distance(): float +saisirOrdonnee(): float
+setVue(uneVue:VuePoint) +saisirPoint()
+gererSaisirPoint()

association bi-directionnelle

ModelePointPlan VuePointTextuel
+majPoint(a:float,b:float) ControleurConcretPoint +afficherDistance()
+getAbscisse(): float +setVue(uneVue:VuePoint) +afficherPoint()
+getOrdonnee(): float +gererSaisirPoint() +saisirAbscisse(): float
+distance(): float +saisirOrdonnee(): float
+saisirPoint()

il peut y avoir plusieurs vues et plusieurs contrôleurs associés au même modèle

(chaque vue est en générale associée à un contrôleur)
[Link], dpt informatique, IUT Villetaneuse 20
 Le modèle
public class ModelePointPlan implements ModelePoint
{

private float x ;
private float y ;

public ModelePointPlan()
{ this.x = 0 ; this.y = 0 ;}

public float getAbscisse()

{return this.x ;}

public float getOrdonnee()

{return this.y ;}

public void majPoint(float a, float o)

{this.x = a ;
this.y = o ;}

public float distance()

{...}
}

Le modèle ne connaît ni les contrôleurs ni les vues

[Link], dpt informatique, IUT Villetaneuse 21

 Une vue
public class VuePointTextuel implements VuePoint
association
associationavec
aveclelecontrôleur
contrôleur
{
private ControleurPoint controleur ;
private ModelePoint modele ; association
associationavecaveclelemodèle
modèlepour
pour
pouvoir
pouvoir afficher les données dumodèle
afficher les données du modèle
public VuePointTextuel(ControleurPoint co,
ModelePoint mo)
{ [Link] = co ; [Link] = mo ; }
lalavue
vuedélègue
délègueauaucontrôleur
contrôleur
l'interprétation
l'interprétationd'une
d'unerequête
requête
public void activerVue(){...}

public void saisirPoint() {[Link]();}

public float saisirAbscisse() {...}

lalavue
vueinterroge
interrogelelemodèle
modèle
pour
pourafficher
affichercertaines
certainesdonnées
données
public float saisirOrdonnee() {...}

public void afficherPoint()

{ [Link]("abscisse = " + [Link]()) ;
[Link]("ordonnee = " + [Link]()) ;}

public void afficherDistance()

{ [Link]("distance = " + [Link]()) ; }
}

[Link], dpt informatique, IUT Villetaneuse 22

 Un contrôleur
public class ControleurConcretPoint implements ControleurPoint
{
associations
associationsavecaveclelemodèle
modèle
etetlalavue contrôlée
vue contrôlée
private ModelePoint modele ; (déclarer un ArrayList<VuePoint>
private VuePoint vue ; (déclarer un ArrayList<VuePoint>
sisiplusieurs
plusieursvuesvuessont
sontcontrôlées)
contrôlées)
public ControleurConcretPoint(ModelePoint unModelePoint)
{[Link] = unModelePoint ;}
pour
pourchanger
changerlalavue
vuedevant
devantêtre
être
contrôlée
contrôlée
public void setVue(VuePoint uneVuePoint)
{[Link] = uneVuePoint ;}
interprétation
interprétationdedelalarequête
requête
saisirPoint()
saisirPoint() de lavue
de la vue
public void gererSaisirPoint()
{
float abs = [Link]() ; s'adresse
s'adresseààlalavue vuepour
pourque
que
l'utilisateur
l'utilisateurentre
entre
float ord = [Link]() ;
l'abscisse
l'abscisseetetl'ordonnée
l'ordonnée
[Link](abs, ord) ;
}
} s'adresse
s'adresseau
aumodèle
modèlepour
pourenregistrer
enregistrer
les nouvelles coordonnées
les nouvelles coordonnées

[Link], dpt informatique, IUT Villetaneuse 23

 Le client
public class Client
{

public static void main(String[] args)

{
1)1)on
oncréé
crééun
unmodèle
modèle
ModelePoint m = new ModelePointPlan() ;
2)2)on
oncréé
crééununcontrôleur
contrôleur
eteton
on lui associelelemodèle
lui associe modèle
ControleurPoint c = new ControleurConcretPoint(m) ;

VuePoint v = new VuePointTextuel(c, m) ; 3)3)on

oncréé
crééune
unevue
vueeteton
onlui
lui
associe le contrôleur et le modèle
associe le contrôleur et le modèle
4)4)on
onassocie
associe
[Link](v) ; lalavue au contrôleur
vue au contrôleur
(l'association
(l'associationestestbi-directionnelle)
bi-directionnelle)
[Link]() ;
} 4)4)on
onactive
activelalavue
vue(IHM)
(IHM)qui
quiattend
attendles
lesrequêtes
requêtesde
del'utilisateur
l'utilisateur
}

[Link], dpt informatique, IUT Villetaneuse 24

 Dynamique d'une requête utilisateur
:VuPoint :ControleurPoint :ModelePoint

Utilisateur
"choix 1"

saisirPoint()

gererSaisirPoint()

"abscisse ?" saisirAbscisse()

abs
abs

saisirOrdonnee()
"ordonnée ?"

ord
ord

majPoint(abs, ord)

Le modèle a changé (nouvelles coordonnées du point) mais la vue affiche

encore les anciennes coordonnées. Il n'y a pas de mise à jour automatique de la vue
[Link], dpt informatique, IUT Villetaneuse 25
 La meilleure conception :
l'architecture modèle-vue-contrôleur

[Link], dpt informatique, IUT Villetaneuse 26

 Objectifs

●
Mise à jour automatique des vues (design pattern observateur)
(les vues changent automatiquement quand le modèle change)

●
Mise à jour automatique des contrôleurs (design pattern observateur)
(les contrôleurs changent automatiquement quand le modèle change)

●
Séparation des vues et des contrôleurs (design pattern stratégie)
(on peut dynamiquement changer de contrôleur et/ou de vue)

●
Imbrication des vues (design pattern composite)

[Link], dpt informatique, IUT Villetaneuse 27

 Dynamique générale de l'architecture MVC
Controleur
pour
pourgérer
gérerune
unerequête
requêteununcontrôleur
contrôleur
peut
peutdemander
demanderun unchangement
changement
dans
danslelemodèle
modèle(3.a)
(3.a)et/ou
et/ou
dans
dansles
lesvues
vues(3.b)
(3.b)
4.b) j'ai changé

2) gère requête
Une
Unevue
vuepropose
propose: :
I)I)un
unensemble
ensemblede deservices
services(requêtes)
(requêtes)
ààl'utilisateur
l'utilisateur
II) 3.b) change d'affichage
II) un affichage desdonnées
un affichage des données(du(dumodèle)
modèle)
3.a) change d'état

1) choix requête
4.a) j'ai changé

Vue quel est ton état ? Modèle

quand dès
dèsque
quelelemodèle
modèlechange
changeilillelesignale
quandelle
elleen
enaabesoin
besoinde demettre
mettreààjour
joursasapartie
partieaffichage
affichage(II)
(II) aux
signale
lalavue interroge le modèle
vue interroge le modèle aux vues (4.a) et aux contrôleurs(4.b)
vues (4.a) et aux contrôleurs (4.b)
(par qui
quisesemettent
mettentààjour
jouren
enconséquence
(parexemple
exemplepour
pourafficher
affichercertaines
certainesdonnées
donnéesdu dumodèle)
modèle) conséquence

Les vues et les contrôleurs sont automatiquement avertis des changements du modèle
[Link], dpt informatique, IUT Villetaneuse 28
 Mise à jour automatique des vues
(design pattern Observateur)
Les vues sont des observateurs du modèle (qui est l'observable)

1
<<interface>>
ModelePoint <<interface>>
Sujet
+majPoint(a:float,o:float) 1
+getAbscisse(): float +enregisterObservateur(o:Observateur)
+getOrdonnee(): float +supprimerObservateur(o:Observateur)
+distance(): float +notifierObservateurs()

1..*
<<interface>>
VuePoint
1..* +afficherDistance()
<<interface>>
<<interface>> +afficherPoint()
ModeleSujetPoint +saisirAbscisse(): float
Observateur
+saisirOrdonnee(): float
+actualiser() +saisirPoint()
On pourra référencer heritage multiple
un modele de point par entre interfaces
une des 3 interfaces suivantes
selon le contexte :

1) ModelePoint
2) Sujet
3) ModeleSujetPoint

ModelePointPlan
VuePointTextuel
+majPoint(a:float,b:float)
+afficherDistance()
+getAbscisse(): float
+afficherPoint() implémente la
+getOrdonnee(): float
+saisirAbscisse(): float méthode
+distance(): float implémente les
actualiser
+saisirOrdonnee(): float
+enregistrerObservateur(o:Observateur) méthodes d'un
Sujet (Observable) +saisirPoint()
+supprimerObservateur(o:Observateur)
+actualiser()
+notifierObservateurs()

[Link], dpt informatique, IUT Villetaneuse 29

 Mise à jour automatique du contrôleur
(design pattern Observateur)
Les contrôleurs sont des observateurs du modèle (qui est l'observable)

1
<<interface>>
<<interface>>
ModelePoint
Sujet
+majPoint(a:float,o:float) 1
+getAbscisse(): float +enregisterObservateur(o:Observateur)
+getOrdonnee(): float +supprimerObservateur(o:Observateur)
+distance(): float +notifierObservateurs()

1..*
1..* <<interface>>
<<interface>> <<interface>> ControleurPoint
ModeleSujetPoint Observateur +setVue(uneVue:VuePoint)
+actualiser() +gererSaisirPoint()

implémente la
méthode
actualiser

ModelePointPlan
+majPoint(a:float,b:float) ControleurConcretPoint
+getAbscisse(): float +setVue(uneVue:VuePoint)
+getOrdonnee(): float +gererSaisirPoint()
+distance(): float implémente les
+actualiser()
méthodes d'un
+enregistrerObservateur(o:Observateur)
observable
+supprimerObservateur(o:Observateur)
+notifierObservateurs()

[Link], dpt informatique, IUT Villetaneuse 30

 Le modèle
public class ModelePointPlan implements ModeleSujetPoint
{
private float x, y;
private ArrayList<Observateur> observateurs ;

public ModelePointPlan() liste

listedes
desObservateur(s)
Observateur(s)
{ (contiendra
(contiendra les vuesetetles
les vues lescontrôleurs)
contrôleurs)
this.x = 0 ; this.y = 0 ;
[Link] = new ArrayList<Observateur>() ;
}

public void enregistrerObservateur(Observateur o)

{[Link](o);}

public void supprimerObservateur(Observateur o)

{[Link](o);}
les
lesvues
vuesetetles
lescontrôleurs
contrôleurssont
sontactualisés
actualisés
public void notifierObservateurs()
{
for (int i = 0 ; i < [Link]() ; i++)
{[Link](i).actualiser() ;} }
}

public void majPoint(float abs, float ord)

{ this.x = abs ; this.y = ord ;
[Link]() ; } lelemodèle
modèlenotifie
notifieles
lesvues
vuesetet
} les
lescontrôleurs
contrôleurs
... quand
quand l'étatdu
l'état dupoint
pointchange
change
}
[Link], dpt informatique, IUT Villetaneuse 31
 Une vue
public class VuePointTextuel implements VuePoint, Observateur
{
private ControleurPoint controleur ; une
unevue
vueest
est(aussi)
(aussi)un
unObservateur
Observateur
private ModelePoint modele ;

public VuePointTextuel(ControleurPoint unControleur,

ModeleSujetPoint unModelePoint)
{
[Link] = unControleur ;
[Link] = unModelePoint ; lalavue
[Link](this) ; vues'enregistre
s'enregistrecomme
commeObservateur
Observateur
du modèle
du modèle
}

public void actualiser()

quand
quandlelemodèle
modèledemande
demandeààlalavue
vuede
des'actualiser
s'actualiser
{
elle appelle ses fonctions d'affichage...
elle appelle ses fonctions d'affichage...
[Link]() ;
[Link]() ;
}
chaque
chaquefonction
fonctiond'affichage
d'affichageinterroge
interrogelelemodèle
modèle
pour lui demander son état actuel
pour lui demander son état actuel
public void afficherPoint()
{
[Link]("abscisse = " + [Link]()) ;
[Link]("ordonnee = " + [Link]()) ;
}

public void afficherDistance()

{ [Link]("distance = " + [Link]());}
}
[Link], dpt informatique, IUT Villetaneuse 32
 Un contrôleur
public class ControleurConcretPoint implements ControleurPoint,
Observateur
{
lelemodèle
modèleest
esttypé
typépar
parl'interface
l'interface
private ModelePoint modele ; ModelePoint
ModelePoint et non par la classeconcrète
et non par la classe concrète
private VuePoint vue ; ModelePointPlan
ModelePointPlan
public ControleurConcretPoint(ModeleSujetPoint unModelePoint)
{
[Link] = unModelePoint ;
[Link](this) ;
}

lelecontrôleur
contrôleurs'enregistre
s'enregistrecomme
comme
public void actualiser() Observateur du modèle
Observateur du modèle
{
...
}
instructions
instructionsexécutées
exécutéesquand
quandlelemodèle
modèledemande
demande
... au contrôleur de s'actualiser.
au contrôleur de s'actualiser.
}

[Link], dpt informatique, IUT Villetaneuse 33

 Le client ne change pas
public class Client
{
public static void main(String[] args)
{
ModelePoint m = new ModelePointPlan() ;
ControleurPoint c = new ControleurConcretPoint(m) ;
VuePoint v = new VuePointTextuel(c, m) ;

[Link](v) ;
[Link]() ;
}
}

affichage
affichageinitiale
initialede
delalavue
vue

l'utilisateur
l'utilisateurentre
entrede
denouvelles
nouvelles
coordonnées
coordonnées

lalavue
vueest
estautomatiquement
automatiquementmise
mise
ààjour
jour
[Link], dpt informatique, IUT Villetaneuse 34
 Dynamique d'une requête utilisateur
:VuePoint :ControleurPoint :ModelePoint

Utilisateur
"choix 1"

saisirPoint()

gererSaisirPoint()

"abscisse ?" saisirAbscisse()

abs
abs

"ordonnée ?" saisirOrdonnee()

ord
ord

majPoint(abs, ord) notifierObservateurs()

actualiser()

actualiser()

afficherPoint()

Le modèle a changé : la vue est actualisée et affiche les nouvelles coordonnées

(si nécessaire le contrôleur est aussi actualisé)
[Link], dpt informatique, IUT Villetaneuse 35
 Un contrôleur définit le comportement d'une
ou plusieurs vues (design pattern stratégie)
VuePointTextuel
+afficherDistance()
+afficherPoint()
+saisirAbscisse(): float
ControleurPointTextuel
+saisirOrdonnee(): float
+setVue(uneVue:VuePoint) +saisirPoint()
+gererSaisirPoint() +setControleur(nouveauControleur:ControleurPoint)

<<interface>>
VuePoint
<<interface>>
+afficherDistance()
ControleurPoint 1 1..*
+afficherPoint()
+setVue(uneVue:VuePoint) +saisirAbscisse(): float
+gererSaisirPoint() +saisirOrdonnee(): float
+saisirPoint()
+setControleur(nouveauControleur:ControleurPoint)

ControleurPointGraphique VuePointGraphique
+setVue(uneVue:VuePoint) +afficherDistance()
+gererSaisirPoint() +afficherPoint()
+saisirAbscisse(): float
+saisirOrdonnee(): float
+saisirPoint()
+setControleur(nouveauControleur:ControleurPoint)

Le contrôleur encapsule le comportement d'une ou plusieurs vues

(il définit les actions à faire pour satisfaire les services que la vue propose à l'utilisateur)
[Link], dpt informatique, IUT Villetaneuse 36
 Changement dynamique de contrôleur
public class Client
{
public static void main(String[] args)
{
ModelePoint m = new ModelePointPlan() ;
ControleurPoint c1 = new ControleurConcretPoint(m) ;
VuePoint v = new VuePointTextuel(c1, m) ;

[Link](v) ; on
[Link]() ; onsupprime
supprimel'association
l'association
entre
entre le modèle et le contrôleurcourant
le modèle et le contrôleur courant
[Link](c1) ;

ControleurPoint c2 = new AutreControleurPoint(m) ;

[Link](v) ;
}
}
on
oncréé
crééun
unautre
autretype
typede
decontrôleur
contrôleur
(qui
(qui sera associé au modèle parleleconstructeur)
sera associé au modèle par constructeur)

On
Onassocie
associelalavue
vuevvau
aunouveau
nouveaucontrôleur.
contrô[Link]
vuevvsera
serainterprétée
interprétéedifféremment
différemment
(pratique courante pour utiliser une vue avec une autre application,
(pratique courante pour utiliser une vue avec une autre application,
ou
ouune
uneautre
autreversion
versiond'une
d'uneapplication)
application)

[Link], dpt informatique, IUT Villetaneuse 37

 L'architecture MVC permet de changer/ajouter
dynamiquement des contrôleurs et des vues
ici
ici22vues différentesetet public class Client
vuesdifférentes
22contrôleurs
contrôleursidentiques
identiques: : {
l'utilisateur
l'utilisateurpeut
peut public static void main(String[] args)
interagir
interagirviaviales
les {
deux vues
deux vues ModelePoint m = new ModelePointPlan() ;
ControleurPoint c1 = new ControleurConcretPoint(m) ;
autre VuePoint v1 = new VuePointTextuel(c1, m) ;
autrecontrôleur
contrôleur [Link](v1) ;
(identique
(identiqueau aupremier)
premier)
associé
associéààune uneautre
autrevue
vuedu
du
même modèle ControleurPoint c2 = new ControleurConcretPoint(m) ;
même modèle
VuePoint v2 = new VuePointGraphique(c2, m) ;
(si [Link](v2) ;
(siononavait
avaitmis
misun unseul
seul
contrôleur,
contrôleur,ililaurait
aurait
demandé [Link]() ;
demandé à chaquevue
à chaque vue [Link]() ;
lalasaisie
saisiedes
desabscisse
abscisse
etetordonnée) }
ordonnée)
}

[Link], dpt informatique, IUT Villetaneuse 38

 Les vues mettent (généralement)
en œuvre le design pattern Composite
Vue
+ajouterComposant()
*
+supprimerComposant()
+getComposant()
+fonctionVue()

VueSimple VueComposite
+fonctionVue() +ajouterComposant() 0..1
+supprimerComposant()
+getComposant()
+fonctionVue()

Une vue contient d'autre vues…

(les composants graphiques contiennent d'autres composants graphiques...)
[Link], dpt informatique, IUT Villetaneuse 39
 Le pattern composé
modèle-vue-contrôleur
 Architecture MVC
<<interface>>
1
ISujet
<<interface>>
1
IModele +enregisterObservateur(o:Observateur)
+supprimerObservateur(o:Observateur)
+fonctionModele() +notifierObservateurs()
1

1..*
<<interface>>
IObservateur Vue
+actualiser() +actualiser()
+fonctionVue()

Controleur
+gererFonctionVue()
Modele +actualiser()
+fonctionModele()
+enregisterObservateur(o:Observateur)
+supprimerObservateur(o:Observateur)
+notifierObservateurs()
1..*
<<interface>>
<<interface>> IVue
1..* IControleur 1 1..*
+fonctionVue()
+gererFonctionVue()

● le modèle gère (exclusivement) les données et fonctions du domaine considéré

● la vue gère (exclusivement) les interactions avec l'utilisateur
● le contrôleur gère l'interprétation des requêtes que la vue propose à l'utilisateur
(et éventuellement vient modifier la présentation de la vue)
[Link], dpt informatique, IUT Villetaneuse 41
 L'architecture MVC en java
(cours IHM)
● Les composants graphiques swing s'appuient sur une architecture MVC

● La mise en œuvre de MVC dans swing n'est pas totalement correcte :

la vue inclut le contrôleur (ce qui contrevient a presque tous les
principes de conception objet)

● Le programmeur n'a pas a gérer explicitement MVC qui est encapsulé

dans les composants swing qu'il utilise pour créé la vue
(une bonne conception consiste à créer son propre contrôleur, appelé
par les traitements des événements captés par les listeners)

[Link], dpt informatique, IUT Villetaneuse 42

Principes de conception rencontrés
 Principes mis en œuvre
Principe de responsabilité unique
MVC attribue une seule responsabilité au modèle, à la vue et au contrôleur

Séparation des interfaces

Grâce à MVC le client ne dépend que de ce qu'il utilise
(ex : utiliser le modèle n'implique pas de connaître la vue ou le contrôleur).

Séparer ce qui change du reste

MVC permet à des concepteurs/développeurs distincts de concevoir/développer/maintenir
le modèle, la vue et le contrôleur

Dépendre d'interfaces et non d'implémentations

MVC permet de facilement changer de vue et/ou de contrôleur
car le client ne dépend que d'interfaces
[Link], dpt informatique, IUT Villetaneuse 44