Le modèle MVVM (Model-View-ViewModel) aide les développeurs à séparer la logique métier et de présentation d'une application de son interface utilisateur. Maintenir une séparation claire entre la logique de l'application et l'interface utilisateur permet de résoudre les problèmes de développement et de conception, facilitant ainsi le test, la maintenance et le développement d'une application. Cela peut également améliorer la réutilisabilité du code et permettre à plusieurs développeurs de collaborer plus facilement lorsqu'ils travaillent sur le même projet..
1. Introduction
À l'aide du modèle MVVM, l'interface utilisateur de l'application et la présentation et la logique métier sous-jacentes sont séparées en trois composants:
le vue le composant encapsule l'interface utilisateur et la logique de l'interface utilisateur.
le voir le modèle le composant encapsule la logique et l'état de présentation.
le modèle la couche encapsule la logique métier et les données de l'application.
Plusieurs frameworks sont disponibles pour implémenter le modèle MVVM dans une application Windows. Le cadre qui convient le mieux à votre projet dépend de vos exigences. Pour ce tutoriel, nous utiliserons MVVM Light, un framework MVVM populaire et convivial..
Ce didacticiel explique comment créer une application Windows universelle avec la prise en charge de MVVM Light. Vous allez apprendre à:
créer une application Windows universelle et ajouter la prise en charge de MVVM Light
implémenter la structure de répertoire
ajouter la couche de modèle de vue
câbler le contexte de données
implémenter le service de messagerie pour transmettre des messages entre les modèles de vue
2. Configuration du projet
Étape 1: Créer une application Windows universelle
Commençons par créer une application Windows universelle. Sélectionner Nouveau projet du Fichier menu dans Visual Studio. Développer Modèles > Visual C # > les fenêtres > Windows 8 > Universel et sélectionnez Application vierge (Universal Windows 8.1) dans la liste des modèles de projet. Nommez votre projet et cliquez D'accord pour créer le projet.
Cela crée deux nouvelles applications (Windows Phone 8.1 et Windows 8.1) et un projet partagé. Les projets Windows Phone 8.1 et Windows 8.1 sont des projets spécifiques à une plate-forme. Ils sont chargés de créer les packages d'application (.appx) ciblant les plates-formes respectives. Le projet partagé est un conteneur de code qui s'exécute sur les deux plates-formes..
Étape 2: Ajout du support MVVM Light
Cliquez avec le bouton droit sur le nom de la solution dans le Explorateur de solution et sélectionnez Gérer les paquets Nuget pour la solution.
Sélectionnez le Feuilleter onglet et rechercher MVVM Light. Sélectionnez le forfait MvvmLightLibs à partir des résultats de la recherche. Vérifiez les projets Windows 8.1 et Windows Phone 8.1, puis cliquez sur Installer ajouter les bibliothèques MVVM Light aux applications.
À ce stade, vous avez ajouté la prise en charge de MVVM Light à vos deux applications..
3. Structure du fichier de projet
Une application Windows universelle qui adopte le modèle MVVM nécessite une structure de répertoires particulière. La capture suivante montre une structure de fichier de projet possible pour une application Windows universelle.
Laissez-moi vous guider dans la structure de projet d’une application Windows typique de l’Univesal qui adopte le modèle MVVM:
Les contrôles: Ce répertoire contient des contrôles d’interface utilisateur réutilisables (vues indépendantes de l’application). Les contrôles spécifiques à la plateforme sont ajoutés directement au projet spécifique à la plateforme..
Les cordes: Ce répertoire contient des chaînes et des ressources pour la localisation d'applications. le Les cordes Le répertoire contient des répertoires distincts pour chaque langue prise en charge. le en-US répertoire, par exemple, contient des ressources pour la langue anglaise (US).
Des modèles: Dans le modèle MVVM, le modèle encapsule la logique métier et les données. En règle générale, le modèle implémente les fonctionnalités qui facilitent la liaison des propriétés à la couche de vue. Cela signifie qu’il prend en charge les notifications "propriété modifiée" et "collection modifiée" via le INotifyPropertyChanged et INotifyCollectionChanged interfaces.
ViewModels: Le modèle de vue du modèle MVVM encapsule la logique de présentation et les données de la vue. Il ne fait aucune référence directe à la vue ou aucune connaissance sur la mise en œuvre ou le type de la vue.
Convertisseurs: Ce répertoire contient les convertisseurs de valeur. Un convertisseur de valeur est un moyen pratique de convertir des données d’un type à un autre. Il met en œuvre le IValueConverter interface.
Des thèmes: Le Des thèmes le répertoire contient les ressources de thème de type ResourceDictionary. Les ressources spécifiques à la plate-forme sont ajoutées directement au projet spécifique et les ressources partagées sont ajoutées au projet partagé..
Prestations de service: Cette section peut inclure des classes pour les appels de service Web, le service de navigation, etc..
Utils inclut des fonctions utilitaires pouvant être utilisées dans l’application. Les exemples comprennent AppCache, FileUtils, Constantes, Disponibilité réseau, Géolocalisation, etc.
Des vues: Ce répertoire contient les dispositions de l'interface utilisateur. Les vues spécifiques à la plate-forme sont ajoutées directement au projet spécifique à la plate-forme et les vues communes sont ajoutées au projet partagé..
En fonction du type de vue, le nom doit se terminer par:
La fenêtre, une fenêtre non modale
Dialogue, une fenêtre de dialogue (modale)
Page, une vue de page (principalement utilisée dans les applications Windows Phone et Windows Store)
Vue, une vue utilisée comme sous-vue dans une autre vue, page, fenêtre ou boîte de dialogue
Le nom d'un modèle de vue est composé du nom de la vue correspondante et du mot «Modèle». Les modèles de vue sont stockés au même endroit dans la ViewModels répertoire comme leurs vues correspondantes dans le Des vues annuaire.
4. Ajout du calque de modèle de vue
La couche de modèle de vue implémente des propriétés et des commandes auxquelles la vue peut lier des données et notifier à la vue tout changement d'état via des événements de notification de modification. Les propriétés et les commandes fournies par le modèle de vue définissent les fonctionnalités offertes par l'interface utilisateur. La liste suivante récapitule les caractéristiques, les tâches et les responsabilités de la couche de modèle de vue:
Il coordonne l'interaction de la vue avec n'importe quelle classe de modèle..
Le modèle de vue et les classes de modèle ont généralement une relation un à plusieurs.
Il peut convertir ou manipuler les données de modèle de manière à ce qu'elles puissent être facilement consommées par la vue..
Il peut définir des propriétés supplémentaires pour supporter spécifiquement la vue.
Il définit les états logiques que la vue peut utiliser pour fournir des modifications visuelles à l'interface utilisateur..
Il définit les commandes et actions que l'utilisateur peut déclencher.
Dans les étapes suivantes, nous ajoutons deux fichiers à la couche de modèle de vue., ViewModelLocator.cs et MainViewModel.cs.
Étape 1: Ajoutez le MainViewModel Classe
Tout d'abord, cliquez avec le bouton droit sur le projet partagé et sélectionnez Ajouter, Nouveau dossier. Nommez le dossier ViewModels. Ensuite, faites un clic droit sur le ViewModels dossier et sélectionnez Ajouter, Nouvel article ajouter le MainViewModel classe.
Modifier le MainViewModel classe à ressembler à ceci:
Classe publique MainViewModel: ViewModelBase private string _helloWorld; chaîne publique HelloWorld get return _helloWorld; set Set (() => HelloWorld, ref _helloWorld, valeur); public MainViewModel () HelloWorld = IsInDesignMode? "Fonctionne en mode création": "Fonctionne en mode exécution";
La classe contient une propriété publique Bonjour le monde de type chaîne. Vous pouvez ajouter des méthodes, des propriétés observables et des commandes supplémentaires au modèle de vue..
Étape 2: Ajoutez le ViewModelLocator Classe
Nous allons ajouter une propriété publique pour tous les modèles de vue du ViewModelLocator classe et créer une nouvelle ressource, que nous utiliserons dans le concepteur.
Faites un clic droit sur le ViewModels dossier et sélectionnez Ajouter, Nouvel article. Sélectionnez une classe et nommez-la ViewModelLocator.cs. Mettre à jour le ViewModelLocator classe comme ci-dessous.
Classe publique ViewModelLocator public MainViewModel Main get return ServiceLocator.Current.GetInstance(); statique ViewModelLocator () ServiceLocator.SetLocatorProvider (() => SimpleIoc.Default); SimpleIoc.Default.Register();
le ViewModelLocator la classe contient une propriété publique Principale dont le getter renvoie une instance du MainViewModel classe. Le constructeur de ViewModelLocator enregistre le MainViewModel par exemple au SimpleIoc un service.
Ensuite, ouvrez App.xaml déposer et ajouter une nouvelle ressource avec le ViewModelLocator être utilisé dans le concepteur.
5. Câblage du contexte de données
La vue et le modèle de vue peuvent être construits et associés au moment de l'exécution de plusieurs manières. L'approche la plus simple consiste pour la vue à instancier son modèle de vue correspondant en XAML. Vous pouvez également spécifier en XAML que le modèle de vue est défini en tant que contexte de données de la vue..
Quand le MainPage.xaml la page est initialisée, une instance du MainViewModel est automatiquement construit et défini comme contexte de données de la vue. Notez que le modèle de vue doit avoir un constructeur sans paramètre par défaut pour que cette approche fonctionne..
Une autre approche consiste à créer l’instance de modèle de vue par programme dans le constructeur de la vue et à la définir comme contexte de données..
public MainPage () InitializeComponent (); this.DataContext = new MainViewModel ();
Une autre approche consiste à créer une instance de modèle de vue et à l'associer à sa vue à l'aide d'un localisateur de modèle de vue. Dans l'exemple d'application, nous utilisons le ViewModelLocator classe pour résoudre le modèle de vue pour MainPage.xaml.
Maintenant que le contexte de données de la vue a été défini sur le MainViewModel classe, nous pouvons accéder à ses propriétés dans la vue. Vous pouvez lier le texte d'un TextBlock au Bonjour le monde propriété définie dans le modèle de vue.
6. Service de messagerie
Le service de messagerie dans MVVM Light permet la communication entre les modèles de vue ou entre les modèles de vue et les vues. Supposons que vous disposiez d'un modèle de vue utilisé pour fournir la logique métier d'une fonction de recherche et de deux modèles de vue sur votre page qui souhaitent traiter la recherche pour afficher le résultat. Le messager serait le moyen idéal de le faire d'une manière relâchée.
Le modèle de vue qui obtient les données de recherche enverrait simplement un message de "recherche" qui serait utilisé par tout modèle de vue actuellement enregistré pour consommer le message. Les avantages d'utiliser un service de messagerie sont les suivants:
communication aisée entre les modèles de vue sans que chaque modèle de vue ait à se connaître
plus de consommateurs de messages peuvent être ajoutés avec peu d'effort
Dans l'exemple d'application, nous enverrons un message de MainViewModel, qui sera reçu par MainPage.xaml. Ce sont les étapes nécessaires pour utiliser le service de messagerie.
Étape 1: Créer une classe pour contenir le message à transmettre
Créez une nouvelle classe dans le projet et nommez-la. ShowMessageDialog.
Classe publique ShowMessageDialog chaîne publique Message get; ensemble;
Étape 2: Instanciation de la classe de message et message de diffusion
Dans MainViewModel.cs, créer une instance de ShowMessageDialog et utiliser le Messager objet pour diffuser le message.
objet privé ShowMessage () var msg = new ShowMessageDialog Message = "Hello World"; Messenger.Default.Send(msg); return null;
Cela diffuse le message. Il ne nous reste plus qu'à enregistrer un destinataire et à répondre au message..
Étape 3: Inscrivez-vous pour le message et le gérer une fois reçu
Ouvrir MainPage.xaml.cs et vous inscrire pour le message dans le constructeur.
Recevoir un message est une méthode que vous devez implémenter. Il faudra la Message objet et utiliser le DialogService pour afficher une boîte de dialogue.
Étape 4: créer une commande pour envoyer un message
Maintenant que nous pouvons envoyer et recevoir un message, nous devons appeler le Voir le message méthode. MVVM Light fournit un support pour RelayCommand, qui peut être utilisé pour créer des commandes dans le modèle de vue. Ajouter une propriété publique ShowMessageCommand dans le MainViewModel classe qui invoque le Voir le message méthode.
private RelayCommand _showMessageCommand; public RelayCommand ShowMessageCommand => _showMessageCommand ?? (_showMessageCommand = new RelayCommand (ShowMessage));
Ensuite, ajoutez un Bouton à MainPage.xaml et lier le ShowMessageCommand à son Commander propriété.
Déployez l'application pour voir si tout fonctionne comme prévu. Voici un aperçu de la façon dont MainPage.xaml regarde sur Windows 8.1.
Lorsque vous cliquez sur le Cliquez moi bouton, une boîte de dialogue apparaît.
Messenger est un composant puissant qui peut faciliter la communication, mais il rend également le code plus difficile à déboguer car il n’est pas toujours clair à première vue quels objets reçoivent un message..
Conclusion
En mettant en œuvre le modèle MVVM, nous établissons une séparation claire entre les couches vue, modèle de vue et modèle. En règle générale, nous essayons de développer le modèle de vue de sorte qu'il ne sache rien de la vue qu'il génère. Cela présente de multiples avantages:
L'équipe de développement peut travailler indépendamment de l'équipe de l'interface utilisateur..
Le modèle de vue peut être testé facilement, simplement en appelant certaines commandes et méthodes et en affirmant la valeur des propriétés.
Des modifications peuvent être apportées à la vue sans avoir à s'inquiéter de l'effet qu'elle aura sur le modèle de vue et le modèle..
N'hésitez pas à télécharger les fichiers sources du didacticiel à utiliser comme référence.
Share
Accentsconagua
