Modèle-vue-contrôleur

Un article de Wikipédia, l'encyclopédie libre.
(Redirigé depuis Modèle-Vue-Contrôleur)
Aller à : navigation, rechercher
Page d'aide sur l'homonymie Pour les articles homonymes, voir MVC.
Le schéma de cette figure résume les différentes interactions entre le modèle, la vue et le contrôleur. Les lignes pleines indiquent une dépendance (importation) tandis que les pointillés sont des événements (cf observateur)

Le patron modèle-vue-contrôleur (en abrégé MVC, de l'anglais model-view-controller), tout comme les patrons modèle-vue-présentation ou Présentation, abstraction, contrôle, est un modèle destiné à répondre aux besoins des applications interactives en séparant les problématiques liées aux différents composants au sein de leur architecture respective.

Ce paradigme regroupe les fonctions nécessaires en trois catégories :

  1. un modèle (modèle de données),
  2. une vue (présentation, interface utilisateur)
  3. un contrôleur (logique de contrôle, gestion des événements, synchronisation)

Historique[modifier | modifier le code]

Le patron MVC est issu de travaux de Trygve Reenskaug en 1978-79. Son but principal était de proposer une solution générale aux problèmes d'utilisateurs manipulant des données volumineuses et complexes. D'abord appelé Model-View-Editor (Modèle-vue-éditeur), Reenskaug le renomme Modèle-vue-contrôleur après avoir discuté notamment avec Adele Goldberg[1].

Architecture[modifier | modifier le code]

L'organisation d'une interface graphique est délicate. L'architecture MVC ne prétend pas en éliminer tous les problèmes, mais fournit une première approche pour ce faire. Offrant un cadre normalisé pour structurer une application, elle facilite aussi le dialogue entre les concepteurs.

L'idée est de bien séparer les données, la présentation et les traitements. Il en résulte les trois parties énumérées plus haut : le modèle, la vue et le contrôleur.

Modèle[modifier | modifier le code]

Le modèle représente le cœur (algorithmique) de l'application : traitements des données, interactions avec la base de données, etc. Il décrit les données manipulées par l'application. Il regroupe la gestion de ces données et est responsable de leur intégrité. La base de données sera l'un de ses composants. Le modèle comporte des méthodes standards pour mettre à jour ces données (insertion, suppression, changement de valeur). Il offre aussi des méthodes pour récupérer ces données. Les résultats renvoyés par le modèle ne s'occupent pas de la présentation. Le modèle ne contient aucun lien direct vers le contrôleur ou la vue. Sa communication avec la vue s'effectue au travers du patron Observateur.

Le modèle peut autoriser plusieurs vues partielles des données. Si par exemple le programme manipule une base de données pour les emplois du temps, le modèle peut avoir des méthodes pour avoir tous les cours d'une salle, tous les cours d'une personne ou tous les cours d'un groupe de TD.

Vue[modifier | modifier le code]

Ce avec quoi l'utilisateur interagit se nomme précisément la vue. Sa première tâche est de présenter les résultats renvoyés par le modèle. Sa seconde tâche est de recevoir toute action de l'utilisateur (hover, clic de souris, sélection d'un bouton radio, cochage d'une case, entrée de texte, de mouvements, de voix, etc.). Ces différents événements sont envoyés au contrôleur. La vue n'effectue pas de traitement, elle se contente d'afficher les résultats des traitements effectués par le modèle et d'interagir avec l'utilisateur.

Plusieurs vues peuvent afficher des informations partielles ou non d'un même modèle. Par exemple si une application de conversion de base a un entier comme unique donnée, ce même entier peut être affiché de multiples façons (en texte dans différentes bases, bit par bit avec des boutons à cocher, avec des curseurs). La vue peut aussi offrir à l'utilisateur la possibilité de changer de vue.

Contrôleur[modifier | modifier le code]

Le contrôleur prend en charge la gestion des événements de synchronisation pour mettre à jour la vue ou le modèle et les synchroniser. Il reçoit tous les événements de l'utilisateur et enclenche les actions à effectuer. Si une action nécessite un changement des données, le contrôleur demande la modification des données au modèle, et ce dernier notifie la vue[Ce passage est contradictoire] que les données ont changé pour qu'elle se mette à jour. D'après le patron de conception observateur/observable, la vue est un « observateur » du modèle qui est lui « observable ». Certains événements de l'utilisateur ne concernent pas les données mais la vue. Dans ce cas, le contrôleur demande à la vue de se modifier. Le contrôleur n'effectue aucun traitement, ne modifie aucune donnée. Il analyse la requête du client et se contente d'appeler le modèle adéquat et de renvoyer la vue correspondant à la demande.

Par exemple, dans le cas d'une base de données gérant les emplois du temps des professeurs d'une école, une action de l'utilisateur peut être l'entrée (saisie) d'un nouveau cours. Le contrôleur ajoute ce cours au modèle et demande sa prise en compte par la vue. Une action de l'utilisateur peut aussi être de sélectionner une nouvelle personne pour visualiser tous ses cours. Ceci ne modifie pas la base des cours mais nécessite simplement que la vue s'adapte et offre à l'utilisateur une vision des cours de cette personne.

Quand un même objet contrôleur reçoit les événements de tous les composants, il lui faut déterminer quelle est l'origine de chaque événement. Ce tri des événements peut s'avérer fastidieux et peut conduire à un code peu élégant (un énorme switch). C'est pourquoi le contrôleur est souvent scindé en plusieurs parties dont chacune reçoit les événements d'une partie des composants.

Flux de traitement[modifier | modifier le code]

En résumé, lorsqu'un client envoie une requête à l'application :

  • la requête envoyée depuis la vue est analysée par le contrôleur (par exemple un clic de souris pour lancer un traitement de données) ;
  • le contrôleur demande au modèle approprié d'effectuer les traitements et notifie à la vue que la requête est traitée ("via" par exemple un handler ou callback) ;
  • la vue notifiée fait une requête au modèle pour se mettre à jour (par exemple affiche le résultat du traitement "via" le modèle).

Avantages[modifier | modifier le code]

Un avantage apporté par ce modèle est la clarté de l'architecture qu'il impose. Cela simplifie la tâche du développeur qui tenterait d'effectuer une maintenance ou une amélioration sur le projet. En effet, la modification des traitements ne change en rien la vue. Par exemple on peut passer d'une base de données de type SQL à XML en changeant simplement les traitements d'interaction avec la base, et les vues ne s'en trouvent pas affectées.

Le MVC montre ses limites dans le cadre des applications utilisant les technologies du web, bâties à partir de serveurs d'applications[réf. nécessaire]. Des couches supplémentaires sont alors introduites ainsi que les mécanismes d'inversion de contrôle et d'injection de dépendance[2].

Différence avec l'architecture trois tiers[modifier | modifier le code]

Article détaillé : Architecture trois tiers.

L'architecture trois tiers est un modèle en couches, c'est-à-dire, que chaque couche communique seulement avec ses couches adjacentes (supérieures et inférieures) et le flux de contrôle traverse le système de haut en bas; les couches supérieures contrôlent les couches inférieures, c'est-à-dire, que les couches supérieures sont toujours sources d'interaction (clients) alors que les couches inférieures ne font que répondre à des requêtes (serveurs).

Dans le modèle MVC, il est généralement admis que la vue puisse consulter directement le modèle (lecture) sans passer par le contrôleur. Par contre, elle doit nécessairement passer par le contrôleur pour effectuer une modification (écriture). Ici, le flux de contrôle est inversé par rapport au modèle en couches, le contrôleur peut alors envoyer des requêtes à toutes les vues de manière à ce qu'elles se mettent à jour.

Dans l'architecture trois tiers, si une vue modifie les données, toutes les vues concernées par la modification doivent être mises à jour, d'où l'utilité de l'utilisation du MVC au niveau de la couche de présentation. La couche de présentation permet donc d'établir des règles du type « mettre à jour les vues concernant X si Y ou Z sont modifiés ». Mais ces règles deviennent rapidement trop nombreuses et ingérables si les relations logiques sont trop élevées. Dans ce cas, un simple rafraîchissement des vues à intervalle régulier permet de surmonter aisément ce problème. Il s'agit d'ailleurs de la solution la plus répandue en architecture trois tiers, l'utilisation du MVC étant moderne et encore marginale.

Exemples d’architecture MVC[modifier | modifier le code]

En ASP.NET[modifier | modifier le code]

Article détaillé : ASP.NET.
  • ASP.NET MVC, s'appuie sur le framework Microsoft .NET 3.5 pour réaliser des applications ASP.NET selon le modèle MVC avec Visual Studio

En C++[modifier | modifier le code]

Article détaillé : C++.

En JavaScript[modifier | modifier le code]

Article détaillé : JavaScript.

En ECMAScript[modifier | modifier le code]

Article détaillé : ECMAScript.

En Java[modifier | modifier le code]

Article détaillé : Java (technique).

En Objective C[modifier | modifier le code]

Article détaillé : Objective C.

En Perl[modifier | modifier le code]

Article détaillé : Perl (langage).

Frameworks orientés Web en Perl :

  • Catalyst ;
  • CGI::Application : basé sur le module Perl CGI.pm ;
  • Dancer ;
  • Gantry : similaire à Django ;
  • Jifty ;
  • MasonX ;
  • MayPole : superposition de Catalyst ;
  • O2 ;
  • Plack ;
  • Solstice ;
  • Squatting.
  • Mojolicious

En PHP[modifier | modifier le code]

Article détaillé : PHP: Hypertext Preprocessor.

Frameworks basés sur l'architecture MVC :

L'utilisation d'un Framework n'est pas une obligation: exemple d'implémentation MVC en PHP.

En Python[modifier | modifier le code]

Article détaillé : Python (langage).

En Ruby[modifier | modifier le code]

Article détaillé : Ruby.

Voir aussi[modifier | modifier le code]

Notes et références[modifier | modifier le code]