Comment utiliser MVVM dans une application Windows universelle

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. Le maintien d’une séparation claire entre la logique d’application et l’interface utilisateur permet de résoudre les problèmes de développement et de conception, ce qui facilite le test, la maintenance et le développement d’une application. Cela peut également améliorer la réutilisabilité du code et permet à 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.

Il existe plusieurs frameworks disponibles pour implémenter le modèle MVVM dans une application Windows. Le cadre qui convient le mieux à votre projet dépend de vos besoins. Pour ce tutoriel, nous utiliserons MVVM Lumière, un framework MVVM populaire et facile à utiliser.

Ce didacticiel vous montre comment créer une application Windows universelle avec la prise en charge de MVVM Light. Vous apprendrez à:

• créer une application Windows universelle et ajouter la prise en charge de MVVM Light
• implémenter la structure de répertoires
• ajouter la couche de modèle de vue
• câbler le contexte de données
• implémenter le service de messagerie pour passer 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 (Windows 8.1 universel) dans la liste des modèles de projet. Nommez votre projet et cliquez sur 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 à la plate-forme et sont responsables de la création des 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: Ajouter la prise en charge MVVM Light

Cliquez avec le bouton droit sur le nom de la solution dans le Explorateur de solution et sélectionnez Gérer les packages Nuget pour la solution.

Sélectionnez le Feuilleter onglet et recherchez MVVM Lumière. Sélectionnez le package MvvmLightLibs à partir des résultats de la recherche. Vérifiez les projets Windows 8.1 et Windows Phone 8.1, puis cliquez sur Installer pour 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 des fichiers de projet

Une application Windows universelle qui adopte le modèle MVVM nécessite une structure de répertoires particulière. L’instantané suivant montre une structure de fichier de projet possible pour une application Windows universelle.

Permettez-moi de vous expliquer la structure du projet d’une application Windows Univesal typique qui adopte le modèle MVVM:

• 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.
• Cordes: Ce répertoire contient des chaînes et des ressources pour la localisation d’applications. le Cordes Le répertoire contient des répertoires séparés pour chaque langue prise en charge. le en-US Le 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 général, 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 les interfaces.
• VoirModèles: Le modèle de vue dans le modèle MVVM encapsule la logique de présentation et les données de la vue. Il n’a aucune référence directe à la vue ou aucune connaissance sur l’implémentation 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.
• Thèmes: Le Thèmes répertoire contient des 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 qui peuvent être utilisées dans toute l’application. Les exemples comprennent AppCache, FileUtils, Constants, NetworkAvailability, GeoLocation, etc.
• Vues: Ce répertoire contient les dispositions de l’interface utilisateur. Les vues spécifiques à la plateforme sont ajoutées directement au projet spécifique à la plateforme et les vues communes sont ajoutées au projet partagé.

Selon le 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 emplacement dans le VoirModèles répertoire comme leurs vues correspondantes dans le 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 de tout changement d’état via des événements de notification de modification. Les propriétés et commandes fournies par le modèle de vue définissent la fonctionnalité offerte par l’interface utilisateur. La liste suivante résume 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 du modèle afin qu’elles puissent être facilement consommées par la vue.
• Il peut définir des propriétés supplémentaires pour prendre en charge spécifiquement la vue.
• Il définit les états logiques que la vue peut utiliser pour apporter des modifications visuelles à l’interface utilisateur.
• Il définit les commandes et les 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 VoirModèles. Ensuite, cliquez avec le bouton droit sur VoirModèles dossier et sélectionnez Ajouter, Nouvel article pour ajouter le MainViewModel classe.

Modifier le MainViewModel classe pour ressembler à ceci:

public class MainViewModel : ViewModelBase
{
    private string _helloWorld;

    public string HelloWorld
    {
        get
        {
            return _helloWorld;
        }
        set
        {
            Set(() => HelloWorld, ref _helloWorld, value);
        }
    }

    public MainViewModel()
    {
        HelloWorld = IsInDesignMode
            ? "Runs in design mode"
            : "Runs in runtime mode";
    }
}

La classe contient une propriété publique HelloWorld de type string. 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 ajouterons une propriété publique pour tous les modèles de vue dans le ViewModelLocator class et créez une nouvelle ressource, que nous utiliserons dans le concepteur.

Cliquez avec le bouton droit sur VoirModèles dossier et sélectionnez Ajouter, Nouvel article. Sélectionnez une classe et nommez-la ViewModelLocator.cs. Mettre à jour le ViewModelLocator classe comme indiqué ci-dessous.

public class ViewModelLocator
{
    public MainViewModel Main
    {
        get
        {
            return ServiceLocator.Current.GetInstance<MainViewModel>();
        }
    }

    static ViewModelLocator()
    {
        ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
        SimpleIoc.Default.Register<MainViewModel>();
    }
}

le ViewModelLocator la classe contient une propriété publique Main dont le getter retourne une instance du MainViewModel classe. Le constructeur de ViewModelLocator enregistre le MainViewModel instance à la SimpleIoc un service.

Ensuite, ouvrez App.xaml fichier et ajoutez une nouvelle ressource avec le ViewModelLocator à utiliser dans le concepteur.

<Application.Resources>
    <viewModels:ViewModelLocator x:Key="Locator" />
</Application.Resources>

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 comme contexte de données de la vue.

<Page.DataContext>
    <vm:MainViewModel/>
</Page.DataContext>

Quand le MainPage.xaml 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.

<Page.DataContext>
    <Binding Path="Main" Source="{StaticResource Locator}" />
</Page.DataContext>

Maintenant que le contexte de données de la vue a été défini sur MainViewModel class, nous pouvons accéder à ses propriétés dans la vue. Vous pouvez lier le texte d’un TextBlock à la HelloWorld propriété définie dans le modèle de vue.

<TextBlock Text="{Binding HelloWorld}" FontSize="20" HorizontalAlignment="Center" VerticalAlignment="Center"/>

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 ayez un modèle de vue utilisé pour fournir une logique métier à une fonction de recherche et deux modèles de vue sur votre page qui souhaitent traiter la recherche pour afficher la sortie. Le messager serait le moyen idéal de le faire de manière lâche.

Le modèle de vue qui obtient les données de recherche enverrait simplement un message de «recherche» qui serait consommé par tout modèle de vue actuellement enregistré pour consommer le message. Les avantages de l’utilisation d’un service de messagerie sont:

• communication facile 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
• il garde les modèles de vue simples

Pour envoyer un message:

MessengerInstance.Send(payload, token);

Pour recevoir un message:

MessengerInstance.Register<PayloadType>(
    this, token, payload => SomeAction(payload));

Dans l’exemple d’application, nous enverrons un message de MainViewModel, qui sera reçu par MainPage.xaml. Voici les étapes requises 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.

public class ShowMessageDialog
{
   public string Message { get; set; }
}

Étape 2: instancier la classe de message et le message de diffusion

Dans MainViewModel.cs, créez une instance de ShowMessageDialog et utilisez le Messenger objet pour diffuser le message.

private object ShowMessage()
{
    var msg = new ShowMessageDialog { Message = "Hello World" };
    Messenger.Default.Send<ShowMessageDialog>(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 traitement une fois reçu

Ouvert MainPage.xaml.cs et enregistrez-vous pour le message dans le constructeur.

public MainPage()
{
    this.InitializeComponent();
    Messenger.Default.Register<ShowMessageDialog>
    (
         this,
         (action) => ReceiveMessage(action)
    );
}

ReceiveMessage est une méthode que vous devez implémenter. Il faudra le Message objet et utilisez le DialogService pour afficher une boîte de dialogue.

private async void ReceiveMessage(ShowMessageDialog action)
{
    DialogService dialogService= new DialogService();
    await dialogService.ShowMessage(action.Message, "Sample Universal App");
}

Étape 4: créer une commande pour envoyer un message

Maintenant que nous pouvons envoyer et recevoir un message, nous devons appeler le ShowMessage méthode. MVVM Light prend en charge 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 ShowMessage méthode.

private RelayCommand _showMessageCommand;
public RelayCommand ShowMessageCommand => _showMessageCommand ?? (_showMessageCommand = new RelayCommand(ShowMessage));

Ensuite, ajoutez un Button à MainPage.xaml et lier le ShowMessageCommand à son Command propriété.

<Button Command="{Binding ShowMessageCommand}" Content="Click Me" HorizontalAlignment="Center"/>

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 sur 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 implémentant le modèle MVVM, nous avons une séparation claire entre la vue, le modèle de vue et les couches de modèle. En règle générale, nous essayons de développer le modèle de vue afin qu’il ne sache rien sur la vue qu’il conduit. Cela présente de multiples avantages:

• L’équipe de développeurs peut travailler indépendamment de l’équipe d’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 à se soucier 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 source du tutoriel à utiliser comme référence.