Introduction au MVVM

Le MVVM est la seule manière de coder proprement et efficacement en .Net intégrant une couche UI.

Voilà c’est dit et je ne vais pas me justifier outre mesure. Vous pouvez aller voir mon article sur l’enfumage autour de ce pattern.

Certains pourrons me traiter d’intégriste de la programmation peu me chaut.

Le MVVM est un pattern et il n’est pas exclusif au .Net (en js par exemple avec knockout.js ou même Angular.js dans une autre mesure avec le MV*)

Comme tout pattern il demande une mise en place particulière.

Pour appliquer ce pattern en WPF par exemple (cela s’applique aussi au SilverLight il me semble) nous allons utiliser le puissant système de Databindingmais pour commencer il faut que notre view model c’est-à-dire, tout ce que vous mettiez avant dans le code behind et que vous avez mis dans une classe séparée, puisse signaler à qui veut bien l’entendre qu’une de ses propriétés à changer. Pour cela on utilise un système qui s’appelle l’implémentation du INotifyPropertyChanged. Ne prenez pas peur c’est plutôt simple il suffit d’ajouter à votre solution la classe  NotifyPropertyChangedObject dont le code est à ce lien : http://blog.soat.fr/2012/02/simplifier-lecriture-de-inotifypropertychanged-en-c/

Ensuite, il vous suffit de faire dériver vos classes de votre modèle de votre classe NotifyPropertyChangedObjectPuis, pour faire en sorte que votre modèle notifie un changement sur une de ses propriétés dans sa déclaration il va falloir écrire :

 

 

 

public string FirstName {
        get { return GetValue<string>("FirstName"); }
        set { SetValue("FirstName", value); }
    }

Et voilà au moindre changement sur votre propriété FirstName ceux que ça interesse seront informé.

Maintenant il va falloir que la Vue puisse dire qu’elle est interressée, mais attendez jeune programmeurs fougueux, il faut lui dire où aller chercher les infos et où allé écouter les notifications il faut donc lui donner un DataContext pour cela rien de plus simple vous pouvez passer par le xaml par exemple : <UserControl.DataContext>

Mais vous pouvez aussi passer par le code behind de votre vue où vous êtes exceptionnellement autorisé à mettre en dessous du  InitializeComponent();

un petit this.DataContext = new MyViewModel();

Suite à cela votre vue sait où allé chercher l’information en gros dans quel sac piocher il reste à faire le lien avec les éléments graphiques.

Ceci fonctionne comme suit pour l’exemple que l’on a pris : <Label Content=”{Binding FirstName”/>

Le label prendra la valeur de FirstName qu’il sera allé chercher dans le datacontext. Il sera automatiquement changé dès qu’il aura une notification que la propriété a été modifiée.

Alors, à ce stade vous allez me dire : c’est très bien tout ça mais l’intérêt d’une vue c’est quand même de permettre l’interaction entre l’utilisateur et le programme et on fait ça comment en MVVM sans code behind ?

La solution : Les Command

 

Comme précédement il va falloir implémenter une classe qui va nous être très utile. Voici le lien vers un exemple de cette implémentation : http://www.wpftutorial.net/delegatecommand.html

Ensuite dans votre VM vous pouvez  instancier une DelegateCommand et lui assigner une fonction à déclencher si cette commande est appelée.  On est ici toujours dans la logique d’exposer des éléments à la vue donc on expose un moyen d’action sur les données

ensuite la Vue peut être Bindé sur cette commande comme ceci : <Button Content=”blublu” Command=“{Binding MyCommand}“/>

Donc finalement rien de plus simple que d’interagir avec votre programme en MVVM.

Nous verrons dans un prochain article comment faire dans des situations moins standards.

En résumé, voici la démonstration qu’il est possible de ne pas poser une seule ligne de code dans le code-behind et de faire la même chose qu’avant et à ça c’est bien !!!

Pour aller un peu plus loin il est possible de remarquer que nous utiliserons toujours ces quelques classes dont je vous ai parlé et qu’il serait pratique de mettre dans un framework mais, nous verrons ça la prochaine fois …

 




Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>