Le design pattern MVC

Par Florian GRISONI , Nicolas GIROT

Introduction

L'objectif de ce document est de présenter le design pattern, modèle de conception, Modèle Vue Contrôleur (MVC). Pour cela, ce document fera une description générale du MVC. Ensuite ce document illustre progressivement les composantes de MVC et leurs interactions et ce notemment grâce à UML. La dernière partie est consacrée à une implémentation en JAVA de ce design pattern.

Le design pattern MVC : Modèle Vue Contrôleur

Il s'agit du modèle de conception Modèle Vue Contrôleur. MVC a pour objectif d'organiser la réalisation de l'application et à séparer complétement la présentation (Vue) des données (Modèle) et de la manière de leur enregistrement (Contrôleur).

On définit le rôle des trois entités de la façon suivante :

Modèle : est la logique métier de l'application ;
Vue : définit l'interface utilisateur ;
Contrôleur : prends en charge la gestion des évènements pour mettre à jour la vue ou le modèle.

Fig 1 : Intéraction entre les couches MVC

Pour donner une image la vue constitue la maquette de l'application à laquelle le modèle donne un comportement, le tout est géré par le controleur. En effet, la logique métier ne gére pas l'affichage des données. C'est la Vue qui à le pouvoir de les afficher car c'est elle qui sait de quel objet il s'agit. D'un autre côté, la vue ne présente que les données préparées à l'avance : le contrôleur est charger de traiter la requête et d'obtenir les valeurs adéquates (voir Fig 1).

Conception de MVC : Une application de test

Nous avons vu le principe théorique de MVC, nous allons nous concentré maintenant à la mise en oeuvre d'un tel modèle. Pour cela nous allons utiliser UML et ce afin de mettre en évidence les interactions entre les différentes composantes du système.

L'application

L'objectif est de concevoir une application qui contient dans une fenêtre : une étiquette (label), un champ texte et un bouton. Cette application sera capable de d'échanger le contenu du label avec celui du champ texte par pression sur le bouton.

Nous avons ici :

La vue : La fenêtre, le champ texte, l'étiquette et le bouton.
Le contrôleur : l'évenement associé au bouton.
Le modéle : la chaine affichée par l'étiquette.

Nous aurons donc dans un premier temps une étiquette initiale, puis nous rentrerons un nouveau texte et nous modifierons la vue en appuyant sur le bouton.

Voyons cela en image :

Fig 3 : Application MVC

Fig 4 : Application MVC

Fig 5 : Application MVC

La conception UML

Voyons le diagramme de séquence de l'application de test et ce afin de mettre en évidence le comportement MVC de l'application.

Fig 6 : Diagramme de séquence de MVC

Ainsi que le diagramme de classe :

Fig 7 : Diagramme de classe de MVC

La notion d'Observer / Observable en java

La notion d'Observer / Observable avec JAVA est la dernière étape à connaitre avant de pouvoir obtenir le code JAVA de l'application.

La classe Observable de Java

Cette classe représente un objet observable : ce qui correspond au modèle dans MVC. Cette classe peut être utilisée comme sous classe pour représenter un objet dans l'application qui doit être observé.

Cette classe posséde notemment les méthodes :

setChanged() : marque un changement de l'observé
addObserver(Observer o) : ajoute un observateur
notifyObservers() : notifie les observateurs

Pour plus d'information, il est judicieux de se reporter à la documentation Java correspondante.

L'interface Observer de JAVA

Une classe peut implémenter l'interface Observer quand elle veut être informée du changement d'objet observable.

La méthode à implémenter est alors :

update(Observable o, Object arg) : cette méthode est appelée lorsqu'un objet observé a changé.

Code source de l'application de test

Le modéle : Modele.java

									
/* C'est là que ce trouve la classe Observable */
import java.util.*;

/* On étend Observable */
public class Modele extends Observable {
	private String chaine;

	public Modele() {
	       /* valeur initiale de la chaine */
		chaine="Texte";
	}

	public String getChaine() {
		return chaine;
	}

	public void setChaine(String c) {
		/* On modifie la chaine */
		chaine=c;

		/* On indique que les données ont changé */
		setChanged();

		/* On notify du changement */
		notifyObservers();
	}
}

La vue : vue.java

									
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

/* c'est là que se troube l'interface Observer */
import java.util.*;

/* On implémente l'interface Observer */
public class Vue implements Observer {

	private Modele modele;

	private JFrame frame;
	private JButton bouton;
	private JTextField texte;
	private JPanel panel;
	private JLabel etiquette;

	public Vue() {
		modele=null;

		frame=new JFrame("Un test");
		frame.setSize(100,100);
		bouton=new JButton("Modifier vue");
		bouton.setActionCommand("modificationdevue");
		texte=new JTextField(25);
		panel=new JPanel();
		etiquette=new JLabel("");


		panel.setLayout(new BorderLayout());
		panel.add(etiquette,BorderLayout.NORTH);
		panel.add(texte,BorderLayout.CENTER);
		panel.add(bouton,BorderLayout.SOUTH);

		frame.getContentPane().add(panel,BorderLayout.CENTER);
	}

	public void affiche() {
		frame.pack();
		frame.setVisible(true);
	}

	public void miseAJour() {
		if(modele!=null) {
			/* On récupére la chaine du modèle et on la met dans l'étiquette */
			etiquette.setText(modele.getChaine());
		}
	}

	public String getTexteTape() {
		return texte.getText();
	}

	public void setListener(EventListener al) {
		bouton.addActionListener((ActionListener)al);
		frame.addWindowListener((WindowListener)al);
	}

	public void setModele(Modele m) {
		modele=m;
		miseAJour();
	}

	/* Méthode de l'interface Observer */
	public void update(Observable o, Object arg) {		
		miseAJour();
	}

}

Le contrôleur : Controleur.java

									
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

/* On implémente ActionListener qui permet de traiter les événements du bouton */
public class Controleur implements ActionListener,WindowListener {

	private Modele modele;
	private Vue vue;


	public Controleur() {
		modele=null;
		vue=null;
	}

	/* Permettra de connaitre le modéle */
	public void setModele(Modele m) {
		modele=m;
	}

	/* Permettra de connaitre la vue */
	public void setVue(Vue v) {
		vue=v;
	}

	/* C'est ici que l'on traite l'action récupéré : implémentation dut à l'interface ActionListener */
	public void actionPerformed(ActionEvent e) {
		if(e.getActionCommand()=="modificationdevue") {
			// On modifie le modéle en récupérant les données de la vue
			modele.setChaine(vue.getTexteTape());
		}
	}

	/* WindowListener implémentation : pour fermer l'application avec la fenêtre */
	public void windowActivated(WindowEvent e) {
	}

	public void windowClosed(WindowEvent e) {	
	}

	public void windowClosing(WindowEvent e) {
		System.exit(0);
	}

	public void windowDeactivated(WindowEvent e) {
	}

	public void windowDeiconified(WindowEvent e) {
	}

	public void windowIconified(WindowEvent e) {
	}

	public void windowOpened(WindowEvent e)  {
	}


}

Le programme principal : Main.java

									
import java.awt.*;
import java.awt.event.*;
import javax.swing.*;

public class Main {

	public static void main(String[] args) {

		try {
			UIManager.setLookAndFeel(
			UIManager.getCrossPlatformLookAndFeelClassName());
		}
		catch(Exception e) {
			System.out.println("Erreur : "+e);
		}

		/* Contient le modele */
		Modele modele=new Modele();

		/* Contient la vue */
		Vue vue=new Vue();

		/* Contient le controleur */
		Controleur controleur=new Controleur();

		/* Pour que le controleur connaisse le modele */
		controleur.setModele(modele);

		/* Pour que le controleur connaisse la vue*/
		controleur.setVue(vue);

		/* Pour que la vue connaisse le modele */
		vue.setModele(modele);

		/* Le controleur recevra les action de la vue */
		vue.setListener(controleur);

		/* La vue observera le modèle */
		modele.addObserver(vue);

		/* Et bien sure on affiche la vue */
		vue.affiche();

	}
}

Conclusion

A travers ce document nous avons vu comment imlpémenter le modèle de conception MVC au sein d'une application Java.

Cet article et tout ce qui s'en rattache directement est distribué sous liscence GPL ; vous pouvez le redistribuer et/ou le modifier conformément aux dispositions de la Licence Publique Générale GNU, telle que publiée par la Free Software Foundation ; version 2 de la licence, ou encore (à votre choix) toute version ultérieure.

Cet article et tout ce qui s'en rattache directement est distribué dans l'espoir qu'il sera utile, mais SANS AUCUNE GARANTIE ; sans même la garantie implicite de COMMERCIALISATION ou D'ADAPTATION A UN OBJET PARTICULIER. Pour plus de détail, voir la Licence Publique Générale GNU .

-- CyberArticle V 0.01--