MVC : Model View Controller

(Modèle Vue Contrôleur)

MVC sans patterns

appli/
    ├── control/
    ├── init/
    ├── model/
    ├── view/
    └── www/
        └── index.php

• index.php est le front controller : toutes les requêtes y sont redirigées.
  index.php supervise les initialisations (dossier init/ dans l'exemple).
  • Restauration de l'état de l'application (par ex à partir de la session).
  • Contrôles de sécurité
  • Routing : analyse l'url demandée et détermine le contrôleur à exécuter.
  index.php appelle ensuite le contrôleur déterminé par le routing, en lui transmettant le contexte calculé dans l'initialisation.
• Le contrôleur a pour rôle de faire le lien entre les différentes parties.
  En fonction du contexte calculé par le front controller, le contrôleur appelle le modèle pour récupérer l'information nécessaire.
  Le contrôleur prépare ensuite les structures de données qu'il va transmettre à la vue.
  Enfin, le contrôleur appelle la vue.
• La vue fabrique la réponse à partir des données transmises par le contrôleur.
  Elle ne contient qu'une logique d'affichage, aucune intelligence applicative.

Intérêts

Séparation des tâches

API distante

MVC = assemblage de patterns

MVC consists of three kinds of objects.
The Model is the application object,
the View is its screen presentation,
and the Controller defines the way the user interface reacts to user input.
Before MVC, user interface designs tended to lump these objects together.
MVC decouples them to increase flexibility and reuse.

MVC decouples views and models by establishing a subscribe/notify protocol between them. A view must ensure that its appearance reflects the state of the model. Whenever the model's data changes, the model notifies views that depend on it. In response, each view gets an opportunity to update itself. This approach lets you attach multiple views to a model to provide different presentations. You can also create new views for a model without rewriting it.

Exemple de Head First

Un premier regard

1. Nous, utilisateurs, interagissons avec la vue.
   La vue est notre fenêtre vers le modèle.
   La vue dit au contrôleur ce qu'on a fait, c'est au contrôleur de se débrouiller avec ça.
2. Le contrôleur demande au modèle de changer son état.
   Le travail du contrôleur est d'interpréter nos actions et de déduire comment manipuler le modèle suite à cette action.
3. Le contrôleur peut aussi demander à la vue de changer.
   Lorsque le contrôleur reçoit une action de la vue, il peut demander en retour à la vue de se mettre à jour.
   Par exemple activer ou désactiver des boutons ou des menus.
4. Le modèle notifie la vue lorsque son état a changé.
   Lorsque quelque chose change dans le modèle,
   - soit suite à une de nos actions (comme cliquer sur un bouton)
   - soit suite à un changement interne (une nouvelle chanson commence),
   le modèle informe la vue que son état a changé.
5. La vue demande au modèle son état.
   La vue récupère l'état qu'elle affiche directement depuis le modèle.
   Par exemple, lorsque le modèle notifie la vue qu'une nouvelle chanson a commencé, la vue demande le nom de la chanson et l'affiche.
   La vue peut aussi demander des infos au modèle lorsque le contrôleur lui demande de se mettre à jour.

Le MVC sous l'angle des patterns

• Le modèle utilise le pattern Observer pour tenir informés vues et contrôleurs de ses changements.
  Ça permet de laisser le modèle complètement indépendant des vues et contrôleurs.
  Permet par exemple d'avoir plusieurs vues à la fois.
• Vue et contrôleur utilisent le pattern Strategy.
  La vue est un objet qui est configuré avec une stratégie, le contrôleur fournit cette stratégie.
  La vue est uniquement concernée par l'affichage graphique, elle délègue au contrôleur toute décision concernant le comportement de l'interface.
  L'utilisation d'une stratégie découple la vue du modèle car c'est le contrôleur qui est chargé d'interagir avec le modèle pour gérer les actions utilisateur. La vue n'a aucune idée de comment cela est fait.
• L'affichage est un emboîtement de composants graphiques (textes, labels, boutons panels...).
  Chaque composant graphique est soit composite (une fenêtre) soit terminal (un bouton).
  Lorsque le contrôleur dit à la vue de se mettre à jour, elle le dit au composant racine, et le pattern Composite fait le reste.

Examen du code

public class MainDJ {
    public static void main (String[] args) {
        BeatModelInterface model = new BeatModel();
        ControllerInterface controller = new BeatController(model);
    }
}

public class MainHeart {
    public static void main (String[] args) {
        HeartModelInterface model = new HeartModel();
        ControllerInterface controller = new HeartController(model);
    }
}

Model

public interface BeatModelInterface {
    void initialize();
    
    // model manipulation
    void on();
    void off();
    void setBPM(int bpm);
    int getBPM();
    
    // observer methods
    void registerObserver(BeatObserver o);
    void removeObserver(BeatObserver o);
    
    void registerObserver(BPMObserver o);
    void removeObserver(BPMObserver o);
}

public class BeatModel implements BeatModelInterface, MetaEventListener {
    // ...
    ArrayList<BeatObserver> beatObservers = new ArrayList<BeatObserver>();
    ArrayList<BPMObserver> bpmObservers = new ArrayList<BPMObserver>();
    // ...
    public void setBPM(int bpm) {
        this.bpm = bpm;
        sequencer.setTempoInBPM(getBPM());
        notifyBPMObservers();
    }
    // ...
    void beatEvent() {
        notifyBeatObservers();
    }
    // ...
}

View

public class DJView implements ActionListener, BeatObserver, BPMObserver {
    // ...
    BeatModelInterface model;
    ControllerInterface controller;
    // ...
    public DJView(ControllerInterface controller, BeatModelInterface model) {    
        this.controller = controller;
        this.model = model;
        model.registerObserver((BeatObserver)this);
        model.registerObserver((BPMObserver)this);
    }    
    // ...
    public void createView() { ... }        // swing pour la fenêtre 1
    public void createControls() { ... }    // swing pour la fenêtre 2
    // ...
    
    // Toutes les actions sont transmises au contrôleur
    public void actionPerformed(ActionEvent event) {
        if (event.getSource() == setBPMButton) {
            int bpm = Integer.parseInt(bpmTextField.getText());
            controller.setBPM(bpm);
        } else if (event.getSource() == increaseBPMButton) {
            controller.increaseBPM();
        } else if (event.getSource() == decreaseBPMButton) {
            controller.decreaseBPM();
        }
    }
    
    // Implémentation de BPMObserver
    public void updateBPM() {
        if (model != null) {
            int bpm = model.getBPM(); // demande directement au modèle
            if (bpm == 0) {
                if (bpmOutputLabel != null) {
                    bpmOutputLabel.setText("offline");
                }
            } else {
                if (bpmOutputLabel != null) {
                    bpmOutputLabel.setText("Current BPM: " + bpm);
                }
            }
        }
    }
  
    // Implémentation de BeatObserver
    public void updateBeat() {
        if (beatBar != null) {
             beatBar.setValue(100);
        }
    }
}

Controller

public interface ControllerInterface {
    void start();
    void stop();
    void increaseBPM();
    void decreaseBPM();
    void setBPM(int bpm);
}

public class BeatController implements ControllerInterface {
    BeatModelInterface model;
    DJView view;
   
    public BeatController(BeatModelInterface model) {
        this.model = model;
        view = new DJView(this, model);
        view.createView();
        view.createControls();
        view.disableStopMenuItem();
        view.enableStartMenuItem();
        model.initialize();
    }
  
    public void start() {
        model.on();
        view.disableStartMenuItem();
        view.enableStopMenuItem();
    }

    public void stop() {
        model.off();
        view.disableStopMenuItem();
        view.enableStartMenuItem();
    }
    
    public void increaseBPM() {
        int bpm = model.getBPM();
        model.setBPM(bpm + 1);
    }
    
    public void decreaseBPM() {
        int bpm = model.getBPM();
        model.setBPM(bpm - 1);
      }
  
     public void setBPM(int bpm) {
        model.setBPM(bpm);
    }
}

Utilisation de Strategy

public interface HeartModelInterface {
    int getHeartRate();
    void registerObserver(BeatObserver o);
    void removeObserver(BeatObserver o);
    void registerObserver(BPMObserver o);
    void removeObserver(BPMObserver o);
}

public class HeartAdapter implements BeatModelInterface {
    HeartModelInterface heart;
    public HeartAdapter(HeartModelInterface heart) {
        this.heart = heart;
    }
    public void initialize() {}
    public void on() {}
    public void off() {}
    public int getBPM() { return heart.getHeartRate(); }
    public void setBPM(int bpm) {}
    public void registerObserver(BeatObserver o) { heart.registerObserver(o); }
    public void removeObserver(BeatObserver o) { heart.removeObserver(o); }
    public void registerObserver(BPMObserver o) { heart.registerObserver(o); }
    public void removeObserver(BPMObserver o) { heart.removeObserver(o); }
}

public class HeartController implements ControllerInterface {
    HeartModelInterface model;
    DJView view;
    public HeartController(HeartModelInterface model) {
        this.model = model;
        view = new DJView(this, new HeartAdapter(model));
        view.createView();
        view.createControls();
        view.disableStopMenuItem();
        view.disableStartMenuItem();
    }
    public void start() {}
    public void stop() {}
    public void increaseBPM() {}
    public void decreaseBPM() {}
    public void setBPM(int bpm) {}
}

public class MainHeart {
    public static void main (String[] args) {
        HeartModel model = new HeartModel();
        ControllerInterface controller = new HeartController(model);
    }
}