WPF : Débuter en douceur avec MVVM !

Vous avez entendu parler du pattern MVVM (Modèle / Vue / Vue Modèle) et vous avez envie de démarrer un nouveau projet sur de bonnes bases ?

Voici un petit projet minimaliste qui pose la structure d'un projet MVVM en WPF...

Ce projet est volontairement minimaliste et le plus commenté possible (commentaires en français) pour vous permettre de comprendre le découpage et le principe sans vous polluer l'esprit avec trop de fioritures :)

Ce sample est très simple, en cliquant sur "Charger contact" il permet d'afficher aléatoirement une fiche contact. Si le contact est un homme, le fond sera bleu, si c'est une femme, le fond sera rose (cliquez plusieurs fois sur le bouton)

Ce sample n'utilise pas de Framework MVVM tiers (l'utilisation de MVVM Light Toolkit fera l'objet d'un futur article), juste 2 classes helpers sont utiles pour faire du MVVM :

• ObservableObject.cs : Une version améliorée de ViewModelBase qui implémente INotifyPropertyChanged (OnPropertyChanged) mais qui permet en plus de vérifier le nom des propriétés tapées à la main et de lancer une exception si un nom de propriété inexistante a été saisie dans le code du ViewModel.
  
  But de ce helper : Toutes vos vues modèles doivent hériter de ObservableObject pour pouvoir utiliser OnPropertyChanged (notification de changement de la valeur de la propriété pour mise à jour du binding entre la vue et le vue modèle)

• RelayCommand.cs : Cette classe permet s'associer simplement une commande à une action et d'utiliser éventuellement la propriété CanExecute.
  
  But de ce helper : Souvenez vous qu'en MVVM on n'utilise pas d'evénéments (ex : clic bouton) dans le code behind de la vue (pas de découpage sinon) mais à la place des commandes qui vont pointer vers une méthode du vue modèle. Ce RelayCommand permet de relayer une commande entre la vue et le vue modèle.
  

Quelques explications :

La vue : 
La vue se nomme VoirContactView.xaml + (.xaml.cs) et se trouve dans le sous dossier "View".
Si vous regarder le code behind de cette vue, il est... complètement vide !
C'est l'objectif de MVVM, séparer complètement la présentation (la vue) du code métier (le vue modèle) et des données (le modèle).
Interdiction d'utiliser des événements avec les contrôles posés dans le XAML, ici on travaille avec des commandes (c'est pas plus compliqué !)

Le modèle : 
Le modèle se compose de la classe métier Contact.cs et du service ServiceContact.cs et se trouve dans le sous dossier Model.
Le ServiceContact va nous permettre de gérer tout ce qui est possible de faire sur des contacts (création, lecture, modification, suppression, c'est à dire le CRUD). Seule la lecture a été implémentée dans cet exemple.
C'est dans ce service que vous allez pouvoir effectuer vos remontées de la base de données.

Le vue modèle :
Le vue modèle se nomme VoirContactViewModel.cs et se trouve dans le sous dossier ViewModel.
Pour que des données de test puissent s'afficher dans le designer XAML de Visual Studio, un autre vue modèle a été créé à part (DesignVoirClientViewModel.cs) et permet juste dans Visual Studio de pouvoir afficher un jeu de données de test.
Ces 2 vues modèles implémente une interface commune nommée : IVoirClientVueModel.cs
(En effet, ces 2 vues modèles doivent exposer les mêmes méthodes, elles doivent donc respecter un contrat, c'est à dire une interface)

Les commandes :
C'est par le biais de la commande ChargeContactCommand que la vue va pouvoir demander une action au vue modèle. Cette commande va appeller la méthode ChargeContact() du vue modèle qui va appeler la méthode Charger() du modèle.

Conclusion :

Voici un petit projet très simple permettant de montrer le découpage d'un projet WPF basé sur MVVM.
Même si coder en MVVM ne necessite pas obligatoirement l'utilisation d'un framework MVVM, nous verrons dans un prochain article qu'un framework comme MVVM Light Toolkit permet de faciliter certains aspects et d'ouvrir d'autres possibilités comme le messaging par exemple...



Vous pouvez télécharger le code source du projet (VS2012 / C#) :
WPF_SimpleMVVM_sans_framework.zip

Categories: C#, design pattern, MVVM, WPF