Implémentation du pattern MVC
par Baptiste Wicht (home)
Date de publication : Le 24 Avril 2007
Dernière mise à jour :
MVC est un design pattern très puissant, mais néanmoins assez
complexe, qui permet de bien structurer de grosses applications graphiques.
Nous allons apprendre à le maîtriser avec ce tutoriel.
Implémentation du pattern MVC par Baptiste Wicht (home)
- 2 -
Copyright © 2007 Baptiste Wicht . Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000
E de dommages et intérêts
http://baptiste-wicht.developpez.com/tutoriel/conception/mvc/
I - Le design pattern MVC
II - Implémentation
II-A - Le modèle
II-B - Le contrôleur
II-C - Les vues
II-D - La classe lanceur
II-E - Résultat
III - Changement de framework graphique
IV - Conclusion
Implémentation du pattern MVC par Baptiste Wicht (home)
- 3 -
Copyright © 2007 Baptiste Wicht . Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000
E de dommages et intérêts
http://baptiste-wicht.developpez.com/tutoriel/conception/mvc/
I - Le design pattern MVC
Le design pattern Modèle-Vue-Contrôleur (MVC) est un pattern architectural qui sépare les données (le modèle),
l'interface homme-machine (la vue) et la logique de contrôle (le contrôleur).
Ce modèle de conception impose donc une séparation en 3 couches :
•
Le modèle : Il représente les données de l'application. Il définit aussi l'interaction avec la base de données et
le traitement de ces données.
•
La vue : Elle représente l'interface utilisateur, ce avec quoi il interagit. Elle n'effectue aucun traitement, elle se
contente simplement d'afficher les données que lui fournit le modèle. Il peut tout à fait y avoir plusieurs vues
qui présentent les données d'un même modèle.
•
Le contrôleur : Il gère l'interface entre le modèle et le client. Il va interpréter la requête de ce dernier pour lui
envoyer la vue correspondante. Il effectue la synchronisation entre le modèle et les vues.
La synchronisation entre la vue et le modèle se passe avec le pattern Observer. Il permet de générer des événements
lors d'une modification du modèle et d'indiquer à la vue qu'il faut se mettre à jour.
Voici un schéma des interactions entre les différentes couches :
Implémentation du pattern MVC par Baptiste Wicht (home)
- 4 -
Copyright © 2007 Baptiste Wicht . Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000
E de dommages et intérêts
http://baptiste-wicht.developpez.com/tutoriel/conception/mvc/
Interactions entre les couches
Ce modèle de conception permet principalement 2 choses :
•
Le changement d'une couche sans altérer les autres. C'est-à-dire que comme toutes les couches sont
clairement séparées, on doit pouvoir en changer une pour, par exemple, remplacer Swing par SWT sans
porter atteinte aux autres couches. On pourrait aussi donc changer le modèle sans toucher à la vue et au
contrôleur. Cela rend les modifications plus simples.
•
La synchronisation des vues. Avec ce design pattern, toutes les vues qui montrent la même chose sont
synchronisées.
Il faut tout de même garder en mémoire, que la mise en oeuvre de MVC dans une application n'est pas des plus
simples. En effet, ce modèle de conception introduit tout de même un niveau de complexité assez élevé. De plus,
implémenter MVC dans votre application nécessite une bonne conception dès le départ. Ce qui peut prendre du
temps. Ce pattern n'est donc à conseiller que pour les moyennes et grandes applications.
Implémentation du pattern MVC par Baptiste Wicht (home)
- 5 -
Copyright © 2007 Baptiste Wicht . Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes,
documents, images, etc. sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000
E de dommages et intérêts
http://baptiste-wicht.developpez.com/tutoriel/conception/mvc/
II - Implémentation
Nous allons choisir un exemple très simple (voire même simpliste). Ce sera tout simplement une application
permettant de modifier un volume. Il y aura plusieurs vues pour représenter ce volume et après toute modification,
les vues devront être synchronisées. L'interface sera développée avec Swing.
C'est certes bidon et très petit comme exemple, mais cela permettra de voir simplement la séparation des couches
et l'utilisation du design pattern Observer.
Par souci de simplicité, nous n'utiliserons ici qu'un seul package appelé volume. Dans une grosse application MVC,
je vous conseille plutôt de clairement séparer le modèle, les vues et l'interface dans des packages différents.
II-A - Le modèle
Le modèle est assez simple à développer, vu qu'il ne gère qu'un volume. Pour commencer, on va déjà développer
la base de notre modèle :
VolumeModel.java
public class VolumeModel {
private int volume;
public VolumeModel(){
super();
volume = 0;
}
public int getVolume() {
return volume;
}
public void setVolume(int volume) {
this.volume = volume;
}
}
Voilà, la première fonction de notre modèle est remplie, il fournit maintenant un volume qui peut être modifié.
Mais maintenant, il faut que notre modèle puisse notifier un changement de volume. Pour cela, on va employer les
listeners. On va donc créer un nouveau listener (VolumeListener) et un nouvel événement (VolumeChangedEvent) :
VolumeListener.java
import java.util.EventListener;
public interface VolumeListener extends EventListener {
public void volumeChanged(VolumeChangedEvent event);
}
VolumeChangedEvent.java
import java.util.EventObject;
public class VolumeChangedEvent extends EventObject{
private int newVolume;
public VolumeChangedEvent(Object source, int newVolume){
super(source);
