Liaison de données Windows et MVVM

Model-View-ViewModel (MVVM) est un modèle de conception architecturale d’interface utilisateur qui dissocie l’interface utilisateur et le code non-interface utilisateur. Découvrez comment MVVM permet un couplage libre à l’aide de la liaison de données en XAML pour synchroniser l’interface utilisateur et les données, ce qui améliore la maintenance et la réduction des dépendances.

Comme il fournit un couplage libre, l’utilisation de la liaison de données réduit les dépendances dures entre différents types de code. Cette approche facilite la modification des unités de code individuelles (méthodes, classes, contrôles, et ainsi de suite) sans provoquer d’effets secondaires inattendus dans d’autres unités. Ce découplage est un exemple de séparation des préoccupations, qui est un concept important dans de nombreux modèles de conception.

Avantages de MVVM

Le découplage de votre code présente de nombreux avantages, notamment :

• Activation d’un style de codage itératif et exploratoire. Le changement isolé est moins risqué et plus facile à expérimenter.
• Simplification des tests unitaires. Vous pouvez tester des unités de code isolées les unes des autres individuellement et en dehors des environnements de production.
• Collaboration d’équipe de soutien. Des personnes ou des équipes distinctes peuvent développer du code découplé qui respecte les interfaces bien conçues et l’intégrer ultérieurement.
• Amélioration de la facilité de maintenance. La résolution des bogues dans le code découplé est moins susceptible d’entraîner des régressions dans d’autres codes.

Contrairement à MVVM, une application avec une structure plus conventionnelle de « code-behind » utilise généralement la liaison de données uniquement pour les données d’affichage. Elle répond aux entrées utilisateur en gérant directement les événements exposés par les contrôles. Les gestionnaires d’événements sont implémentés dans des fichiers code-behind (tels que MainWindow.xaml.cs) et sont souvent étroitement couplés aux contrôles. Ils contiennent généralement du code qui manipule directement l’interface utilisateur. Cette structure rend difficile ou impossible de remplacer un contrôle sans avoir à mettre à jour le code de gestion des événements. Avec cette architecture, les fichiers code-behind accumulent souvent du code qui n’est pas directement lié à l’interface utilisateur, comme le code d’accès à la base de données, qui finit par être dupliqué et modifié pour une utilisation avec d’autres fenêtres.

Couches d’application

Lorsque vous utilisez le modèle MVVM, divisez votre application en couches suivantes :

• La couche de modèle définit les types qui représentent vos données métier. Cette couche inclut tout ce qui est nécessaire pour modéliser le domaine d’application principal et inclut souvent la logique d’application principale. Cette couche est complètement indépendante des couches d’affichage et de modèle d’affichage et réside souvent partiellement dans le cloud. Compte tenu d’une couche de modèle entièrement implémentée, vous pouvez créer plusieurs applications clientes différentes si vous le souhaitez, telles que le Kit de développement logiciel (SDK) d’application Windows et les applications web qui fonctionnent avec les mêmes données sous-jacentes.
• La couche d’affichage définit l’interface utilisateur à l’aide du balisage XAML. Le balisage inclut des expressions de liaison de données (telles que x:Bind) qui définissent la connexion entre des composants d’interface utilisateur spécifiques et différents membres de modèle de vue et de modèle. Vous pouvez parfois utiliser des fichiers code-behind dans le cadre de la couche d’affichage pour contenir du code supplémentaire nécessaire pour personnaliser ou manipuler l’interface utilisateur ou extraire des données à partir d’arguments de gestionnaire d’événements avant d’appeler une méthode de modèle d’affichage qui effectue le travail.
• La couche modèle-vue fournit des cibles de liaison de données pour l'affichage. Dans de nombreux cas, le modèle d’affichage expose le modèle directement ou fournit des éléments qui encapsulent des éléments spécifiques du modèle. Le modèle d’affichage peut également définir des membres pour assurer le suivi des données pertinentes pour l’interface utilisateur, mais pas pour le modèle, comme l’ordre d’affichage d’une liste d’éléments. Le modèle d’affichage sert également de point d’intégration à d’autres services tels que le code d’accès aux données. Pour les projets simples, vous n’avez peut-être pas besoin d’une couche de modèle distincte, mais uniquement d’un modèle d’affichage qui encapsule toutes les données dont vous avez besoin.

MVVM de base et avancée

Comme avec n’importe quel modèle de conception, il existe plusieurs façons d’implémenter MVVM, et de nombreuses techniques différentes sont considérées comme faisant partie de MVVM. Pour cette raison, il existe plusieurs frameworks MVVM tiers différents prenant en charge les différentes plateformes XAML, y compris le Kit de développement logiciel (SDK) d’application Windows. Toutefois, ces frameworks incluent généralement plusieurs services pour implémenter une architecture découplée, ce qui rend la définition exacte de MVVM quelque peu ambiguë.

Bien que les frameworks MVVM sophistiqués puissent être très utiles, en particulier pour les projets à l’échelle de l’entreprise, il existe généralement un coût associé à l’adoption d’un modèle ou d’une technique particulier, et les avantages ne sont pas toujours clairs, en fonction de l’échelle et de la taille de votre projet. Heureusement, vous pouvez adopter uniquement ces techniques qui fournissent un avantage clair et tangible, et ignorer les autres jusqu’à ce que vous en ayez besoin.

En particulier, vous pouvez obtenir beaucoup d’avantages simplement en comprenant et en appliquant la puissance totale de la liaison de données et en séparant votre logique d’application en couches décrites précédemment. Cela peut être réalisé à l’aide uniquement des fonctionnalités fournies par le Kit de développement logiciel (SDK) de l’application Windows et sans utiliser d’infrastructures externes. En particulier, l’extension de balisage {x :Bind} rend la liaison de données plus facile et plus performante que dans les plateformes XAML précédentes, ce qui élimine le besoin de beaucoup de code réutilisable requis précédemment.

Pour obtenir des conseils supplémentaires sur l’utilisation de la machine virtuelle MVVM de base, prête à l’emploi, consultez l’exemple UWP de base de données commandes clients sur GitHub. De nombreux autres exemples d’applications UWP utilisent également une architecture MVVM de base, et l’exemple UWP d’application de trafic inclut à la fois des versions code-behind et MVVM, avec des notes décrivant la conversion MVVM.

Voir aussi

Sujets

Liaison de données en profondeur
Extension de balisage {x :Bind}

Exemples MVVM UWP

Exemple de base de données commandes clients
Exemple d’inventaire VanArsdel
Exemple d’application de trafic