Cette article s’adresse aux personnes débutant dans le développement d’application UWP. Celui ci portera sur la mise en place du pattern MVVM dans une application Universal Windows Platform en utilisant MVVM Light Toolkit de Galasoft. Le principe d’intégration est le même pour les application Xamarin.Forms.

MVVM, Qu’est ce que c’est ?

MVVM (Model-View-ViewModel) est un modèle d’architecture logicielle qui offre une séparation entre les contrôles de l’interface utilisateur et leur logique. Il existe trois composants principaux dans le modèle MVVM: le modèle, la vue et le ViewModel.

Les composants sont découplés les uns des autres, ce qui permet:
– D’avoir des composants interchangeables
– D’implémenter un composant sans affecter les autres
– D’avoir des composant qui peuvent travailler indépendamment
– D’avoir  des test unitaire isolé pour chaque composant

En plus de comprendre les responsabilités des trois composantes, il est également important de comprendre comment les composants interagissent les uns avec les autres. Au plus haut niveau, la vue «connaît» le ViewModel, et le ViewModel «connaît» le modèle, mais le modèle ignore le ViewModel et le ViewModel ignore la vue.
Le ViewModel isole la vue des classes de modèles et permet au modèle d’évoluer indépendamment de la vue.

Model :Le Model représente les données métier, il possède des champs et des propriétés. Il inclut aussi l’ensemble des mécanisme qui permettront de mettre en place la logique métier, de validation et de persistance de la données. Il est tout a fait possible de découpler les différentes fonction du modèle afin de moduler au mieux votre application.

View : La vue permet de définir la structure, le layout et l’apparence de votre application. Généralement, la vue est définie en XAML avec un Code-Behind limité et sans traitement métier.

ViewModel : Ce composant permet de faire la liaison entre la vue et le modèle. Il est responsable de la gestion de la vue. En règle générale, le ViewModel interagit avec le modèle pour récupérer les données puis les transforme afin de les transmettre à la vue dans un format souhaité pour l’affichage ou le traitement dans la vue. Le ViewModel fournit également des implémentations de commandes qu’un utilisateur de l’application lance dans la vue.

MVVM Light Toolkit

MVVM Light Toolkit est un framework open source facilitant et accélérant le développement d’application basée sur le pattern MVVM en fournissant des outils et des classes de bases.

Getting Started

Cette article sera le premier d’une série permettant de mettre en place une application de gestion et création de facture.

Pour cela, nous allons utiliser Visual Studio 2017 et créer une application UWP vide.

Lancer VS2017 >>  Fichier >> Nouveau >> Projet >> C# >> Windows Universel >> Application vide, puis nommer le projet SimpleFacture et cliquer sur OK.

 

Installation de MVVM Light Toolkit

Pour l’installation de notre Toolkit  nous allons utiliser le gestionnaire de package Nuget. Pour cela faire un clic droit sur la solution >> Gérer les packages NuGet

Rechercher « mvvmlight » puis sélectionner le package MvvmLight de Galasoft et cliquer sur « Installer ». l’ensemble des références sont alors ajoutées à la solution.

Il faut maintenant ajouter 3 dossiers à la solution : Models, ViewModels, Views qui permettrons de classer de manière ordonné l’ensemble des fichiers de la solution.

ViewModelLocator

Nous allons maintenant ajouter une classe ViewModelLocator dans le dossier ViewModel. Le ViewModelLocator est une classe qui centralise les définitions de tous les ViewModels dans une application afin qu’ils puissent être mis en cache et récupérés sur demande, généralement via Injection de dépendance.  Le ViewModelLocator doit implémenter un provider IOC et enregistrer chaque ViewModel individuelement et les exposer à l’ensemble de l’application.

Voici le code :

using GalaSoft.MvvmLight;
using GalaSoft.MvvmLight.Ioc;
using GalaSoft.MvvmLight.Views;
using Microsoft.Practices.ServiceLocation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SimpleFacture.ViewModels
{
 public class ViewModelLocator
 {
 public ViewModelLocator()
 {
 ServiceLocator.SetLocatorProvider(() => SimpleIoc.Default);
 if (ViewModelBase.IsInDesignModeStatic)
 {
 // Create design time view services and models
 }
 else
 {
 // Create run time view services and models
 }

//Register your services used here
 SimpleIoc.Default.Register<INavigationService, NavigationService>();
 SimpleIoc.Default.Register<MainViewModel>();

}

 public MainViewModel MainViewModelInstance
 {
 get
 {
 return ServiceLocator.Current.GetInstance<MainViewModel>();
 }
 }

// <summary>
 // The cleanup.
 // </summary>
 public static void Cleanup()
 {
 // TODO Clear the ViewModels
 }
 }
}

Puis on ajoute notre premier ViewModel « MainViewModel » dans le même dossier.

using GalaSoft.MvvmLight;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;

namespace SimpleFacture.ViewModels
{
 public class MainViewModel : ViewModelBase
 {
 private bool _isLoading = false;
 public bool IsLoading
 {
 get
 {
 return _isLoading;
 }
 set
 {
 _isLoading = value;
 RaisePropertyChanged("IsLoading");

}
 }
 private string _title;
 public string Title
 {

get
 {
 return _title;
 }
 set
 {
 if (value != _title)
 {
 _title = value;
 RaisePropertyChanged("Title");
 }
 }
 }

public MainViewModel()
 {
 Title = "Hello World";
 }
 }
}

Maintenant que nous avons mis en place notre ViewModel et notre ViewModelLocator, nous devons référencer notre ViewModelLocator au niveau de notre application afin puisse exposer via DI l’ensemble de nos ViewModels. Pour cela, nous allons modifier notre fichier App.xaml comme suit :

[xaml]

<Application x:Class="SimpleFacture.App" 
   xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
   xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
   xmlns:local="using:SimpleFacture" 
   xmlns:vm="using:SimpleFacture.ViewModels" 
   RequestedTheme="Light"> 
  <Application.Resources> 
    <vm:ViewModelLocator xmlns:vm="using:SimpleFacture.ViewModels" x:Key="Locator" /> 
  </Application.Resources> 
</Application>

[/xaml]

Référencer notre ViewModel dans notre Vue

Pour cela nous allons modifier notre fichier MainPage.xaml en définissant le datacontext de la page sur notre instance de notre MainPageViewModel enregistré dans notre ViewModelLocator. Afin de savoir si notre architecture est en place, nous incluerons un TextBox dans la page pour faire un Binding sur notre propriété « Title »

[xaml]

<Page
 x:Class="SimpleFacture.MainPage"
 xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
 xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
 xmlns:local="using:SimpleFacture"
 xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
 xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
 xmlns:controls="using:Microsoft.Toolkit.Uwp.UI.Controls"
 DataContext="{Binding MainViewModelInstance, Source={StaticResource Locator}}"
 mc:Ignorable="d">

<Grid Background="#F4F4F4">

<TextBlock Name="Title" FontSize="50" HorizontalAlignment="Center" VerticalAlignment="Center" Text="{Binding Title}" FontFamily="Segoe UI Historic" />

</Grid>
 </Page>

[/xaml]

Voici le résultat :

 

Nous avons donc mis en place notre architecture MVVM pour notre application SimpleFacture. Dans un prochaine article nous mettrons en place le Microsoft UWP Toolkit afin de définir notre architecture de page et de design.

 

A bientôt dans un prochain article.