Atelier logiciel Guide

Guide du designer MVC1

Cette prsentation a pour but de vous faire dcouvrir les aspects importants et
fortement utiliss du design pattern MVC.

1 INTRODUCTION
MVC est un design pattern (modle de conception ou DP) de conception dinterface utilisateur
permettant de dcoupler
le modle (logique mtier et accs aux donnes)
des vues (interfaces utilisateur [prsentation des donnes et interface de saisie pour
lutilisateur]).
Des modifications de lun nauront ainsi, idalement, aucune consquence sur lautre ce qui
facilitera grandement la maintenance.
Ce design pattern a tendance multiplier le nombre de classes dfinir et semble alourdir la
conception dapplication mais le dcouplage ainsi obtenu assure une maintenance facilite.
Attention, ce DP peut tre appliqu de manires fort diffrentes mais abordons-en le principe avant
de voir des exemples simples dapplication.

2 PRINCIPE

Modle: gre les donnes et reprend la logique mtier (le modle lui-mme peut tre
dcompos en plusieurs couches mais cette dcomposition n'intervient pas au niveau de
MVC). Le modle ne prend en compte aucun lment de prsentation!
Vue: elle affiche les donnes, provenant exclusivement du modle, pour l'utilisateur et/ou
reoit ses actions. Aucun traitement autre que la gestion de prsentation - n'y est
ralis.
Contrleur: son rle est de traiter les vnements en provenance de linterface utilisateur et
les transmet au modle pour le faire voluer ou la vue pour modifier son aspect visuel (pas
de modification des donnes affiches mais des modifications de prsentation (couleur de
fond, affichage ou non de la lgende dun graphique, )).
Le contrleur connat la (les) vues quil contrle ainsi que le modle.
Le contrleur pourra appeler des mthodes du modle pour ragir des vnements (demande
dajout dun client par exemple), il pourra faire modifier la vue son aspect visuel. Il pourra aussi
instancier de nouvelles vues (demande daffichage de telle ou telle info). Pour faire cela, le
contrleur sera l'coute d'vnements survenant sur les vues.
La vue observera le modle qui l'avertira du fait qu'une modification est survenue. Dans ce cas, la
vue interrogera le modle pour obtenir son nouvel 'tat'.

1 Ce document a t rdig initialement par nos prdcesseurs et principalement par adt-- qu'ils en soient ici
remercis.

Guide du designer MVC Page 1 sur 7

Nous pouvons schmatiser cela comme suit en percevant bien que nous pouvons avoir plusieurs
contrleurs, plusieurs vues mais un seul modle.

C o n tr le u r

V ue M o d le

3 UN E XE MPL E PR AT IQU QU OTID IE NN E ME N T

Plusieurs vues diffrentes nous sont offertes par un operating system (systme d'exploitation, SE)
sur son file system (systme de fichier, FS). Un contrleur pourra recevoir au travers de linterface
utilisateur
les vnements de mise jour du modle (par exemple: demande de l'utilisateur de la
suppression dun fichier, d'ajout dun rpertoire, ) et le transmettra au modle. Les vues
observatrices du modle seront prvenues de la modification du modle et l'interrogeront
pour mettre jour leur affichage.
les vnements de modification de prsentation des donnes (par exemple: demande par
l'utilisateur de la prsentation dtaille - plutt que par icne - de la liste des fichiers et des
rpertoires) seront transmis la vue qui modifiera sa prsentation en tenant compte de la
demande et sans ncessairement rinterroger le modle.

Il est remarquer que si diffrents file system (cf. NTFS et FAT) peuvent coexister, il suffit quils
prsentent le mme interface pour que les vues et les contrleurs soient rutilisables.

Guide du designer MVC Page 2 sur 7

Remarquons, comme dans les images ci-dessus, que nous pouvons avoir plusieurs vues
simultanment sur le mme modle.

Si les vues doivent reflter en temps rel les changements dtat du modle, elles devront tre
abonnes (par le contrleur ou via le contrleur) comme observateur (couteur) du modle.

2
4 UN E XE MPL E SIMP L E E N J AV A

Nous allons maintenant prsenter une structure simple de mise en uvre du design pattern MVC3.
Dans ce cas, le modle devra proposer une interface permettant aux vues de l'observer, ces vues
devront pouvoir avoir la possibilit de s'inscrire ou de se dsinscrire en tant qu'observateur du
modle. Cette interface devra galement proposer une ou plusieurs mthodes permettant d'agir sur
le modle4. Ces mthodes dpendent du problme rsoudre.
/*
* MonProblemeModele.java
*/

package modele;

/**
* Contrainte propre MonProbleme
*/
public interface MonProblemeModele {
/**
* Permet la vue de s'abonner en tant que observateur du modele
*/
public void addMonProblemeListener(MonProblemeVue add);

/**
* Permet la vue de se desabonner en tant que observateur
* du modele
*/
public void removeMonProblemeListener(MonProblemeVue add);

/**
* Ajouter ici des signatures de methodes propres au probleme et
* permettant de mettre l'etat du modele la disposition des vues
* (via le(les) contrleurs
*/
}

Le modle proposera galement un contrat via une interface-- que devront respecter toutes les
vues. Les vues devront pouvoir sinscrire et se dsinscrire auprs du modle et prsenter au modle
une interface permettant de leur notifier les volutions du modle.

/**
* MonProblemeVue.java
*/
package modele;

2 Il doit tre clair que le design pattern MVC est propos par l'orient objet et non par Java. Il n'empche que nous en
donnons ici une illustration en langage Java.
3 Cette solution est largement issue du travail de mcd et adt. Qu'ils en soient ici remercis.
4 Ceci devrait tre le rle du contrleur dont nous parlons peu dans cet exemple.

Guide du designer MVC Page 3 sur 7

 /**
* Contrat respecter par les vues
*/
public interface MonProblemeVue {
/**
* L'etat du modele a change, il notifie la (les) vue(s)
* du changement
*/
public void notifieChangement();
}

Pour le modle, il reste crire une classe implmentant les contraintes du modle. Il est clair que
cette classe peut faire appel d'autres classes mtiers c'est le cur de l'application ct modle.

/*
* MonProbleme.java
*/

package modele;

import java.util.Vector;

/**
* Modele pour resoudre mon probleme
*/
public class MonProbleme implements MonProblemeModele {

private Vector<MonProblemeVue> listeners;

// ... autres attributs propres au probleme resoudre
/** Creates a new instance */
public MonProbleme() {
listeners=new Vector<MonProblemeVue>();
// ...
}

/**
* abonne une vue comme observateur du modele
* @param vue abonner
*/
public void addMonProblemeListener(MonProblemeVue vue) {
listeners.add(vue);
fireChange();
}

/**
* desabonne une vue comme observateur du modle
* @param vue desabonner
*/
public void removeMonProblemeListener(MonProblemeVue vue) {
listeners.remove(vue);
fireChange();
}

private void fireChange(){

for (MonProblemeVue vue : listeners){
vue.notifieChangement();
}
}
}

Guide du designer MVC Page 4 sur 7

Les vues devront implmenter l'interface prvue par le modle (dans notre exemple
MonProblemeVue) . Pour faciliter le travail d'criture d'une vue, nous pouvons passer par une
classe abstraite ralisant dj une partie du travail.
Dans cet exemple les vues seront des composants5 (JComponent). Ces composants pourront donc
tre ajouts dans un container quelconque; JFrame ou JPanel.

/*
* AbstractMonProblemeVue.java
*/

package vue;

import javax.swing.JComponent;
import javax.swing.JPanel;
import modele.MonProblemeModele;
import modele.MonProblemeVue;

/**
*
*/
public abstract class AbstractMonProblemeVue extends JComponent
implements MonProblemeVue {

protected MonProblemeModele modele;

/**
* Donne le modele associe
* @return le modele
*/
public MonProblemeModele getMonProbleme() {
return modele;
}

/**
* Permet de preciser la vue quel est son modele
* @param modele le modele
*/
public void setMonProbleme(MonProblemeModele modele){
removeMonProbleme();
this.modele=modele;
addMonProbleme() ;
notifieChangement();
}

/**
* Desinscrit la vue en la retirant de la liste des ecouteurs
* du modele
*/
public void removeMonProbleme() {
if (modele != null)
modele.removeMonProblemeListener(this);
}

5 Ceci n'est en rien une obligation, c'est un choix pour cet exemple.

Guide du designer MVC Page 5 sur 7

 /**
* Inscrit la vue en l'ajoutant la liste des ecouteurs
* du modele
*/
public void addMonProbleme() {
this.modele.addMonProblemeListener(this);
}

/**
* Permet de desincrire la vue lorsque le composant
* est retire de son Container (reecriture d'une methode de
* Jcomposant
*/
public void removeNotify() {
super.removeNotify();
removeMonProbleme();
}
}

Il reste crire une classe reprsentant une vue proprement dite, cette classe hritera de la classe
abstraite AbstractMonProblemeVue. ce stade il est facile d'crire plusieurs vues
diffrentes du mme modle.

/*
* MonProblemeVue1.java
*/

package vue;

import modele.*;
/**
* Une vue du probleme ...
*/
public class MonProblemeVue1 extends AbstractMonProblemeVue {

/** Creates new form */

public MonProblemeVue1() {
initComponents();
}
/** Creates new form */
public MonProblemeVue1(MonProblemeModele modele) {
initComponents();
setMonProbleme(modele);
}

/**
* Le modele me notifie son changement, je vais l'interroger
* et me mettre jour.
*/
public void notifieChangement() {
// Interrogation du modele afin d'obtenir sont etat
// ... modele ...

// Mise jour de la vue sur base de l'etat du modele

}

Guide du designer MVC Page 6 sur 7

Le terme contrleur est utilis dans cet exemple pour parler dune multitude dobjets (les
contrleurs) ragissant des vnements. En pratique, dans ce cas, les contrleurs seront des classes
anonymes lcoute de vues ou de partie de vues (boutons, textFields, comboBox, items de
menu ).
Pour illustrer l'intrt d'une telle technique il faudra crer plusieurs vues diffrentes du problme et
visualiser ces diffrentes vues d'un mme modle. Pour ce faire on peut envisager un JFrame
(lanant le modle) et permettant de lancer diffrentes vues du modle simultanment. Ces vues se
mettront ensemble jour lors de la modification du modle.

Guide du designer MVC Page 7 sur 7