WPF : Découverte de MVVM Light Toolkit

 

 

Dans un article précédent nous avons décortiqué un projet ultra minimaliste pour démarrer en douceur avec le pattern MVVM en WPF.

Nous n'avions utilisé aucun framework MVVM tiers, nous avions juste créé nous même 2 petits helpers MVVM : RelayCommand et ObservableObject(=ViewModelBase).

MVVM Light apporte quand même des choses bien pratiques en plus :)
Je vais tacher de vous en donner un petit aperçu...


En quelques lignes, MVVM Light apporte les possibilités suivantes :

• Une classe ViewModelBase déjà faite et apportant plus de possibilités
• Une classe RelayCommand déjà faite avec possibilité de passer un paramètre à la commande
• La possibilité de rediriger simplement un évènement vers une commande (EventToCommand)
• Un ServiceLocator qui permet mieux découpler la vue et le vue modèle
• Un IoC simple pour faire de l'injection de dépendance et avoir un couplage mou entre la vue, le vue modèle et le modèle
• Un système de messenging pour faire communiquer étages qui ne se connaissent pas forcément (ex : le vue modèle ne connait pas la vue)
• D'autres choses encore qui sortent du cadre de cette article...

J'ai volontairement repris exactement le même projet que dans l'article précédent, pour que vous puissiez bien voir les quelques changements à apporter pour utiliser MVVM Light :

Voici les quelques changements que j'ai essayé de vous commenter de façon simple et rapide :

ViewModelBase
Le vue modèle VoirContactViewModel hérite désormais du ViewModelBase de MVVM Light (et non plus de ObservableObject)
Dans le Set de chacune des propriétés d'un contact défini dans le vue modèle :
Avant : OnPropertyChanged("xxx");
Après : RaisePropertyChanged(() => xxx);
(c'est mieux d'avoir à taper xxx sous forme de propriété plutôt que sous forme de magic string "xxx", moins de risque de mal taper, mauvaise casse...)

RelayCommand
Dans le vue modèle VoirContactViewModel, au niveau du relayage des commandes :

Avant :
ChargerContactCommand = new RelayCommand(ChargeContact);

Après :
VoirContactCommand = new RelayCommand<RoutedEventArgs>(VoirContact);

(C'est juste la syntaxe qui change un peu car le RelayCommand de MVVM Light supporte le passage d'un paramètre

ServiceLocator
Dans la vue VoirContactView, la façon de déclarer le binding entre la vue et le vue modèle à un peu changé étant donné que c'est maintenant le service locator qui va donner le vue modèle à la vue.

Avant :
<Window.DataContext><viewmodel:VoirContactViewModel /></Window.DataContext>

Après :
DataContext="{Binding VoirContactVM, Source={StaticResource Locator}}"

(C'est désormais le ServiceLocator qui va gérer la distribution des vues modèles aux vues de façon centralisée et par injection de dépendance)
 
Messenging
Une fois qu'un contact est affiché à l'écran par la vue, une MessageBox s'affiche "Le contact xxx a été affiché avec succès..."
C'est le vue modèle VoirContactViewModel qui ordonne à la vue VoirContactView d'afficher cette MessageBox alors que le vue modèle n'a aucune connaissance de la vue qui l'utilise.
Comment ça peut fonctionner alors ? Via le système d'envoi de messages de MVVM Light !
N'importe quel étage peut s'abonner à un message et recevoir ce message envoyé par un autre étage.

VoirContactView.xaml.cs :
// La vue s'abonne au message afficheMessageRetour
// c'est le view model qui va déclencher l'envoi du message
Messenger.Default.Register<Contact>(this, "afficheMessageRetour", AfficheMessageRetour);

VoirContactViewmodel.cs :
// Le vue modèle déclenche l'envoi du message "afficheMessageRetour"
// pour communiquer avec la vue
Messenger.Default.Send(contact, "afficheMessageRetour");


Voilà ! Vous avez ainsi un nouveau projet ultra simple pour démarrer en douceur avec MVVM Light !

Site de MVVM Light Toolkit : http://www.galasoft.ch/mvvm


Télécharger MVVM Light Toolkit sur CodePlex : http://mvvmlight.codeplex.com



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


Conseil : Utilisez nuget pour télécharger et référencer rapidement MVVM Light Toolkit dans vos projets :) Voir l'article ici...









MVVM Light Toolkit a été créé par Laurent Bugnion, un MVP Microsoft de renom...
http://www.galasoft.ch

Read More

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

Read More