Utiliser le modèle Model-View-ViewModel (MVVM)

Utiliser le modèle Model-View-ViewModel (MVVM)

[ Cet article est destiné aux développeurs de Windows 8.x et Windows Phone 8.x qui créent des applications Windows Runtime. Si vous développez une application pour Windows 10, voir la Documentation ]

Model-View-ViewModel (MVVM) est un modèle de conception d’applications destiné à découpler l’interface utilisateur et le code non relatif à l’interface utilisateur. Avec MVVM, vous définissez votre interface utilisateur de façon déclarative (par exemple, en utilisant XAML) et utilisez le balisage de liaison de données pour la lier à d’autres couches contenant des données et des commandes utilisateur. L’infrastructure de liaison de données propose un couplage souple qui assure la synchronisation entre l’interface utilisateur et les données liées et dirige toutes les entrées utilisateur vers les commandes appropriées.

Le modèle MVVM organise votre code de sorte que vous puissiez en modifier certaines parties individuelles sans affecter les autres. Cela procure de nombreux avantages, à savoir :

  • possibilité d’utiliser un style de codage itératif et exploratoire ;
  • simplification des tests unitaires ;
  • meilleure exploitation des outils de conception, tels que Expression Blend ;
  • prise en charge de la collaboration en équipe.
À titre de comparaison, une application dotée d’une structure classique limite l’utilisation de la liaison de données aux contrôles de liste et de texte, et répond aux entrées utilisateur en traitant les événements exposés par les contrôles. Les gestionnaires d’événements sont étroitement couplés aux contrôles et contiennent généralement du code qui manipule directement l’interface utilisateur. Cela rend difficile voire impossible de remplacer un contrôle sans qu’il soit nécessaire de mettre à jour le code de gestion des événements.

Couches Application

Lorsque le modèle MVVM est utilisé, une application est divisée en plusieurs couches, à savoir :

  • La couche modèle comprend l’ensemble du code qui implémente la logique de base de l’application et définit les types nécessaires à la modélisation du domaine de l’application. Cette couche est totalement indépendante des couches affichage et modèle d’affichage.
  • La couche affichage définit l’interface utilisateur au moyen d’un balisage déclaratif. Le balisage de liaison de données définit la connexion entre des composants spécifiques de l’interface utilisateur et divers membres du modèle d’affichage (et parfois du modèle).
  • La couche modèle d’affichage fournit des cibles de liaison de données pour la vue. Dans de nombreux cas, le modèle d’affichage expose directement le modèle ou fournit des membres qui incluent dans un wrapper des membres spécifiques du modèle. La modèle d’affichage peut également définir des membres chargés d’assurer le suivi de données en rapport avec l’interface utilisateur mais pas avec le modèle, telles que l’ordre d’affichage d’une liste d’éléments.

Avantages des couches

L’un des avantages de cette séparation des couches est une lisibilité du code supérieure. Cela est dû au fait que le code relatif à certaines fonctionnalités est souvent séparé du reste du code, ce qui vous permet d’en tirer des enseignements et de le réutiliser dans d’autres applications. Par exemple, avec l’exemple d’application Reversi, si vous êtes uniquement intéressé par les concepts d’interface utilisateur et que l’intelligence artificielle des jeux ne vous est d’aucune utilité, vous pouvez ignorer la couche modèle. Si vous voulez voir comment fonctionne une animation particulière, vous pouvez la trouver dans un fichier XAML unique, distinct de l’ensemble du code C#.

Un autre avantage important de la séparation de l’interface utilisateur est que cela facilite beaucoup les tests unitaires automatisés du code non relatif à l’interface utilisateur. Microsoft Visual Studio prend en charge les projets de test unitaire, que vous pouvez utiliser pour vérifier la conception de votre code pendant le développement et pour identifier et diagnostiquer les bogues. Pour plus d’informations, voir Comprendre la structure de l’application Reversi : tests unitaires.

Dans une architecture étroitement couplée, les modifications et les diagnostics d’erreurs sont généralement plus difficiles à réaliser. Le principal avantage d’une architecture découplée est qu’elle circonscrit l’impact des modifications, ce qui limite considérablement les risques liés à l’expérimentation de nouvelles fonctionnalités, aux corrections de bogues et à l’incorporation des contributions de collaborateurs.

Modèle MVVM de base et avancé

L’exemple Reversi montre comment créer une structure d’application MVVM de base en utilisant la liaison de données XAML standard, sans qu’il soit nécessaire de connaître préalablement le modèle. Pour plus d’informations, voir Découvrir comment l’exemple Reversi utilise les fonctionnalités d’application du Windows Store : liaison de données et Comprendre la structure de l’application Reversi.

Il existe de nombreuses techniques et infrastructures MVVM avancées qui deviennent utiles à mesure qu’une application gagne en complexité, mais l’approche de base décrite dans les rubriques relatives à Reversi s’avère utile pour se familiariser avec le modèle de base. L’utilisation de techniques MVVM simples peut également contribuer à préserver la flexibilité de votre code lors des premières étapes de développement en évitant toute infrastructure supplémentaire tant que votre application n’en a pas réellement besoin.

Pour plus d’informations sur l’utilisation du modèle par les technologies connexes, voir :

Rubriques associées

Reversi, un jeu du Windows Store en XAML, C# et C++
Exemple d’application Reversi

 

 

Afficher:
© 2016 Microsoft