Olivier Dahan

Microsoft MVP Silverlight 2013, 2012,
2011, MVP CAD 2010, MVP C# 2009


Membre du Developer Guidance Advisory Council Microsoft

Audit, Conseil, Formation, Développement
[WPF, Silverlight, WinRT, MonoDroid]

Historique

Appliquer la pattern MVVM avec MVVM Light

Read this article in your language IT | EN | DE | ES

MVVM vous devez commencer à connaître, je vous en parle depuis un moment (notamment un très long article à télécharger, voir le billet MVVM avec Silverlight). Mais au-delà de la théorie comment mettre en pratique simplement cette pattern sous WPF et Silverlight ? La réponse se trouve dans ce nouvel article de plus de 90 pages !

Dans le précédent article sur MVVM, je vous ai montré de quoi MVVM était fait, et pour illustrer le propos je m’étais donné comme ligne directrice de réaliser des projets exemples uniquement avec ce qu’il y a “dans la boîte”, en choisissant Silverlight 4 comme support.

Cela a permis de mettre en évidence les points essentiels de la pattern MVVM et les difficultés que sa mise en œuvre entraîne.

Mais comment appliquer réellement MVVM, concrètement j’entends, dans de vraies applications ? Est-il possible de se passer totalement de tout framework ou toolkit ?

La réponse est non, que cela soit sous WPF ou Silverlight.

Il faut donc choisir une librairie proposant les aides nécessaires pour rendre la mise en œuvre de MVVM agréable, fluide, en un mot : utilisable.

Mon choix s’est porté sur MVVM Light Toolkit de Laurent Bugnion (GalaSoft). Simple, pratique, ne faisant que l’essentiel, MVVM Light est une librairie séduisante qui vaut le détour. Hélas son point faible : le manque cruel de documentation. Il existe des choses, éparpillées, pas toujours en phase avec les dernières versions, mais aucune documentation digne de ce nom. C’est dommage car MVVM Light mérite vraiment qu’on s’y intéresse.

Pour marier l’utile à l’utile, j’ai donc décidé d’écrire un (très long) article sur la mise en œuvre de MVVM en pratique en utilisant MVVM Light. D’une pierre deux coups : un exposé sur la mise en pratique de MVVM et une documentation sur MVVM Light en français

Le tout à télécharger ici : http://www.e-naxos.com/download/PratiqueMvvmLight.zip

(nota: selon la charge du serveur, attendez que la fiche de détail de l’élément sélectionné soit bien affichée et que l’animation ajax disparaisse avant de cliquer sur le bouton “télécharger” sinon un login vous sera demandé, cela est inutile. Dans un tel cas il faut juste attendre un peu).

Plus qu’un article, presque un livre donc (près de 100 pages), assorti d’exemples de code et même d’une extension à MVVM Light que je vous offre.

Que du bonheur pour les longues soirées d’été ! Votre portable commençait à s’ennuyer ? E bien vous allez pouvoir bronzer intelligent…

Merci Dot.Blog !

Et stay Tuned !

Comments (31) -

Seb
Seb
8/8/2010 9:19:22 PM

Merci !

Steven
Steven
8/11/2010 11:01:50 AM

Je vais m'empresser de lire cet article. J'avais vraiment aimé votre précédent document consacré à MVVM (celui de 70 pages). C'est vraiment un plaisir de vous lire. Continuez comme ça Smile

Olivier
Olivier
8/11/2010 10:38:19 PM

Merci Steven Smile
et bonne lecture !

Cabanel Pascal
Cabanel Pascal
8/12/2010 10:22:57 PM

C’est une analyse complète et très pratique.
Je voulais approfondir ce Framework que j’utilise à ce jour seulement pour la mise en œuvre d’MVVM.
Mais je m’aperçois qu’il y a bien plus.
Merci olivier pour ce travail remarquable.

Olivier
Olivier
8/14/2010 12:08:23 AM

Merci Pascal !
MVVM Light ne contient pas des milliers de choses, mais comme je le dis dans l'article il n'y a rien de trop, tout est utile.

Nk54
Nk54
8/17/2010 10:55:01 AM

Je dis un gros "ENORME !" franchement, publier de pareil article, des heures et des heures de taffs derrière (et encore je suis léger, light ;)

Merci beaucoup tes articles m'apportent vraiment beaucoup !

Je reste fidèle à tes articles !!
(la secrétaire panique car j'ai lancé l'impression de 70 pages sur les 92 ^^)
++

Nk54
Nk54
8/17/2010 11:30:45 AM

Et aussi sympa le pdf sur les weakreferences ! Je connaissais même pas ... :s maintenant c'est plus un problème ! Smile

C'est pas de la lèche, juste que tu saches que des personnes lisent tes articles et pdf et que tu dois à tout prix continuer !

(ps: rien à voir mais dans ta barre de langue de traduction et recherche, il n'y a pas fr, et si un boulet s'amuse à changer la langue en anglais pour retrouver un terme anglais, il ne peux remettre le site en fr sans supprimer cookies et cache ^^)

Olivier
Olivier
8/18/2010 2:57:10 AM

@Nk54 : merci Smile

(pour la barre de traduction, c'est un peu expérimental et je ne sais pas si vais la laisser, mais tes remarques sont judicieuses).

Nk54
Nk54
8/19/2010 4:30:45 PM

Re, désolé de te flooder de notification Embarassed

J'ai juste un problème je ne peux plus rien télécharger sur ton blog "veuillez vous identifier" et je ne trouve pas le code source des exemples que tu donnes (1,2,3,4,5,6). Dans le zip je n'ai que le projet mvvm-2

et je ne peux compiler ce dernier car je ne trouve pas la dll reactive.

Un lien serait appréciable Smile

Olivier
Olivier
8/20/2010 12:00:05 AM

Re Smile

Le téléchargement du zip est celui donné dans le billet :
http://www.e-naxos.com/DnlManager.aspx?GROUP=18&FILEID=103&Lang=FR

Quand on clique sur le bouton "télécharger" avant que la fiche de détail au dessus ne soit complètement affichée le site demande un login car tant que la fiche détail sur l'objet demandé n'est pas arrivée, le site ne sait pas par avance quel sera son niveau de sécurité. Du coup, comme il ne sait pas si le document est public ou non, il considère bien évidemment par défaut qu'il est privé (sinon cela serait une passoire Smile ).
Le meilleur moyen est donc d'attendre que la fiche détail soit bien affichée et que la petite animation ajax soit inactive avant de cliquer sur le bouton de téléchargement.
Selon les heures et les jours, le site peut être un peu plus lent, et cette situation arrive alors plus fréquemment. Un dimanche à 4h du matin c'est assez rare, mais un mardi ou un vendredi après-midi par exemple c'est beaucoup plus fréquent.

Le zip contient bien tous les exemples (tu m'as fait peur et je viens de le retélécharger depuis le site pour voir ! Smile ).

Donc, le mieux est réessayer de télécharger en suivant le lien et donnant le temps au site d'être près à l'envoi.
N'hesite pas à laisser un message via la page contact si vraiment tu n'y arrives pas.
(le zip s'appelle PratiqueMvvmLight.zip, il contient un répertoire Samples avec des sous répertoires "exemple n", aucun projet "mvvm-2" ou alors dans l'article précédent, mais c'est une autre histoire Smile ).

Nk54
Nk54
8/20/2010 2:49:01 PM

un poisson d'avril ne me sauvera pas la face -_-'
je suis trop une merd* ^^

En fait, j'ai DL les fichiers du projet MVVM (celui de 70pages) et j'ai déplacé le fichier MVVM 90p dedans j'ai donc déduis que je n'avais pas les bon exemples ...

Enfin maintenant c'est bon ! J'ai de quoi passer un bon weekend maintenant Laughing

Olivier
Olivier
8/21/2010 6:49:44 PM

Lol Smile
L'essentiel c'est que maintenant tu as les bons fichiers !

Grégory
Grégory
8/27/2010 5:51:43 PM

Raaahhh merci ! trop merci ! je n'ai que survolé pour le moment mais il y a tout ce que je cherchais à savoir (Prism étant une petite usine).

Toutes mes félicitations et même plus que ça Smile

Laurent Bugnion
Laurent Bugnion
8/28/2010 4:55:30 PM

Quel travail! Merci de tout coeur pour ca! En effet, le manque de documentation est souvent mentionne, et c'est quelque chose qui me tient a coeur. Comme je suis en train de finir mon 2eme livre "Silverlight 4 Unleashed", tres tres peu de temps a consacrer a autre chose... mais j'ai bientot fini, si si, et ensuite une bonne documentation sera definitivement sur ma TODO list Smile

Cheers,
Laurent

Steve
Steve
8/30/2010 1:00:33 AM

Bravo pour cet article !

Il reste toutefois une question à laquelle je n'ai toujours pas trouvé de réponse (satisfaisante): comment gérer les viewmodel imbriqués ?

typiquement, dans une appli, un VM customer, un VM order et un VM order details. Le tout devant être affiché dans une fenêtre avec une listbox pour les clients, et quand on clic, une grille affiche les commandes. Le clic sur une commande affiche dans une autre grille le détail.

Comment, avec MVVM (en général, MVVM light toolkit ou autre), proprement gérer la sélection du client, puis de la commande ?

VM customers avec une collection de VM orders ayant eux meme une collection de VM orders detail ? Avec des propriétés gérant la sélection (pour binder sur currentitem du listbox), puis appel au model pour charger les VM enfants ?
Ou plutot via le messenging ?

merci d'avance !
Steve

Olivier
Olivier
8/31/2010 12:38:19 AM

@Laurent: Je sais ce que c'est, j'ai écrit trois livres sur Delphi et sur C#, et il est difficile de faire autre chose en même temps !
Heureusement pour MVVM Light, en ce moment je préfère écrire de longs articles Smile

Olivier
Olivier
8/31/2010 12:40:28 AM

@Gregory : J'espère que tu prendras autant de plaisir à lire tout l'article que tu en as eu a lire le sommaire Smile Merci de ton soutien en tout cas Smile

Olivier
Olivier
8/31/2010 12:54:43 AM

@Steve: En réalité l'utilisation de MVVM change assez peu de choses pour les cas comme celui que tu décris. Cela peut sembler étrange mais en fait une fiche qui en appelle une autre qui en appelle une autre, c'est un mécanisme classique. Le fait que le code qui gère la fiche soit dans la fiche, dans une librairie centralisée, dans une couche BOL ou dans une classe qu'on appelle le ViewModel ne change rien à la dynamique en question.
Maintenant dans ton cas bien précis il y a quelque chose de différent et qui pose problème, MVVM ou pas... C'est que tu affiches des grilles de relations maître/détail dans une fiche. En toute logique il n'y a qu'une fiche donc qu'un seul ViewModel...
Mais je comprends ton souhait de séparer les choses plutôt que d'avoir un seul "gros" ViewModel.
D'un autre côté, une seule fiche, un seul ViewModel. Cela signifie que ce sont tes Models qui doivent être assez "intelligents". Eventuellement ton viewModel doit accéder aux Modèles au travers d'une couche BOL qui contient l'intelligence.
De fait, le travail du viewModel principal devrait rester assez simple et se borner à afficher les grilles.

Je crois qu'en fait ton problème est peut-être de confondre le ViewModel avec le Modèle. Le VM Customer n'existe pas vraiment (pas plus que le VM orders ou order details), c'est un Modèle Customer qui existe, lui-même contenant une collection de Orders (Order étant aussi un Modèle) eux même déclarant une collection de OrderDetails (OrderDetail étant un autre Modèle).
Du coup, le seul VM qui existe est celui de la Vue qui affiche tout cela, et le VM ne fait que répondre aux commandes de la Vue en allant puiser dans les différents Modèles (customers, orders, et orderdetails).

Donc si plusieurs Vues : plusieurs VM et cela est transparent (chaque Vue se lie à son VM via un Service Locator par exemple). Ou bien Une seule Vue avec plusieurs grilles : dans ce cas un seul VM qui puise ses données dans un ou plusieurs Modèles, voire dans une couche BOL plus intelligente...

MVVM n'ajoute ni n'enlève de complexité dans un tel cas finalement. Mais ce n'est pas toujours évident de faire de bon choix d'architectures avec toutes ces couches !

Steve
Steve
8/31/2010 11:51:32 AM

Merci pour tes précisions... il est vrai que j'étais un peu trop resté dans le schéma 1 model = 1 viewmodel = 1 view (sous forme de user control, pouvant être imbriqués).

du coup si je te comprend bien, pour gérer le changement de sélection, je bind le currentitem de ma grille, et dans le set, je vide puis remplit ma collection d'item enfants ?

Oui tu as raison sur la complexité des couches, surtout quand derrière on essaye d'avoir une archi serveur, testable, maintenable, etc. et qui nous oblige à réfléchir un peu... d'un autre coté si c'était simple on n'aurait pas de boulot Smile

Olivier
Olivier
8/31/2010 2:51:45 PM

@steve: il y a certainement plusieurs façons d'arriver au résultat, mais je pense que le ViewModel doit détecter les sélections dans les grilles customers et orders. Pour cela tu peux utiliser un behavior EventToCommand de MVVM Light pour transformer l'event de sélection en une commande. Le VM reçoit le changement de client : il interroge le Modèle pour obtenir la liste des commandes du client en cours, du coup la propriété Orders du VM (de type ObservableCollection<Order>) est modifiée ce qui doit déclencer automatiquement la mise à jour de la Vue. Idem pour la grille Orders vis à vis de DetailOrders.
Ainsi ça devrait rester simple et facile à faire évoluer (ajouter ultérieurement des filtres, une recherche...).

Steve
Steve
8/31/2010 3:47:37 PM

bon je vais voir tout ca !

merci encore :p

Thomas
Thomas
8/27/2011 5:07:48 PM

Gros gros travail de qualité, et qui plus est gracieusement offert à la communauté Smile

Merci pour votre contribution Olivier.

Permettez moi de vous demander si vous avez écrit un billet sur l'implémentation modulaire d'une solution silverlight (Prism ou autre) ?

Cdt,
Thomas.  

Olivier
Olivier
8/27/2011 8:00:09 PM

@Thomas : Merci.

Oui, il y a un article en cours de finition, d'environ 110 pages, sur Jounce, qui repose sur MEF, donc modulaire par nature.
Il va arriver bientot, 110 pages c'est long à relire  pour supprimer les coquilles !

Pierre-Henri Golard
Pierre-Henri Golard
10/23/2012 1:44:19 AM

Bonjour, je voulais SVP avoir votre avis: je commence à être à l'aise avec WPF en général mais n'ai encore jamais utilisé silverlight. Mon principal objectif est, dans un premier temps, de mieux comprendre le pattern MVVM.
Me conseillez vous de lire en premier
- l'article de 100 pages sur MVVM light
OU
- l'article sur MVVM avec silverlight
OU
- de parcourir une tuto d'initiation silverlight AVANT de lire l'article "MVVM avec silverlight" ET finir avec "MVVM light"
Ma question est finalement de savoir si l'article sur MVVM light nécessite d'avoir lu votre plus ancien article sur MVVM silverlight afin de m'initier efficacement au pattern MVVM

Merci d'avance et chapeau pour cet énorme travail que vous partagez avec tout qui désire se former sur cette question!!!

Olivier
Olivier
10/23/2012 3:05:43 PM

Bonjour, si vous êtes à l'aise avec WPF mieux vaut commencer par MVVM avec Silverlight qui explique le pattern MVVM sans utilise aucun framework.
Ensuite vous pourrez lire MVVM avec MVVM Light qui explique l'application du pattern avec le framework MVVM Light, l'un des plus utilisé et des plus simple à prendre en main.
Ensuite si vous voulez approfondir MVVM et vous faire une idée plus nette de son application vous pouvez poursuivre avec l'article sur MEF (http://e-naxos.com/Blog/post.aspx?id=e4db5a4b-4c7f-46aa-8453-5185d917a55f) puis plus en profondeur MEF et Silverlight, et enfin l'article sur Jounce (http://e-naxos.com/Blog/post.aspx?id=8265f669-084e-4be4-9692-cdeafac11d3c) qui est un framework MVVM qui se fonde sur MEF ce qui offre une approche différente de MVVM Light.
Il y a beaucoup d'autres billets portant sur MVVM qui peuvent compléter la lecture... De quoi occuper les longues soirées d'automne Smile
Merci de votre fidélité et bonne lecture !

Nk54
Nk54
11/5/2012 3:12:27 PM

En plus, Pierre-Henri, vous pourrez réutilisez MVVM Light dans vos projets WPF ! alors heureux ? ;)

Phobias
Phobias
12/11/2012 2:40:34 PM

Bonjour Olivier,

Il me semble que le lien ne pointe pas vers le bon fichier. En effet, celui renvoie à "MVVM et Silverlight – De la théorie à la pratique".

Bonne journée

Axel
Axel
4/5/2013 5:11:47 PM

Bonjour Olivier et merci pour votre article complet et clair, même pour moi qui débute totalement dans le monde de Silverlight.

Comme l'a dit Phobias sur le commentaire juste au-dessus, je pense que le lien de votre article redirige vers le mauvais PDF, serait-il possible de récupérer la version expliquant MVVM Light ?

Merci d'avance !

Olivier
Olivier
4/6/2013 11:29:40 AM

Bonjour,
merci de l'info (j'avais zappé celle de phobias... sorry).
Le lien en fin de billet a été corrigé.
Bonne lecture !

Axel
Axel
4/8/2013 9:29:39 AM

Bonjour Olivier,

Je ne saurais comment vous remercier pour ce très bon tutoriel qui me sera d'une grande utilité, je m'en vais de suite regarder ça avec plus d'attention.

Encore merci !

Olivier
Olivier
4/18/2013 4:46:58 AM

Bonne lecture !

Pingbacks and trackbacks (4)+

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading