Blog de Julien Dollon (MVP)

Project Manager / Architecte / Formateur

Julien Dollon

Architecte et formateur pour I'FORM/Exakis et Full Professor SUPINFO.

Responsable de la communauté Dotnet-France, Scrum Master pour le projet AHEAD ainsi que nommé Most Valuable Professional, je participe activement à la communauté Microsoft.


 

Mon CV de Consultant/Formateur .NET

Mon Transcript de Formateur .NET

J'interviens en consulting et formation sur les technologies .NET, ALM/TFS, Agilité/Scrum, SharePoint et SQL Server





 
 
 
 
Official INETA Logo
 
IForm


[WPF/Silverlight] Implémenter le pattern MVVM (Model-View-ViewModel)

Introduction

Depuis toujours nous utilisons des patterns tels que MVC ou MVP. Cependant avec la puissance du binding de WPF/Silverlight est apparu un nouveau pattern nommé MVVM.

A l’époque, nous aurions fait comme ceci (avec une couche metier en + la plupart du temps):

mvvm1 

Nous allons utiliser le binding afin d’avoir ceci:

mvvm2

Le Model ou Data Model: C’est ce qui contiendra vos données, par exemple Linq-To-Sql ou Entities. Vous pouvez aussi avoir vos propres providers de données. Attention cependant, les classes doivent implémenter INotifyPropertyChanged (à implémenter dans les classes partielles générées par Linq par exemple).

Le ViewModel: C’est ce qui contiendra la logique de votre application. Il fera le lien entre les vues et le modèle. Le ViewModel type les données du modèle en INotifyCollectionChanged et définit tous les événements de votre IHM grâce à des “commands” (par exemple clic sur un bouton).

Les Views: Les vues sont les IHMs de notre application. Le seul code behind qu’elles peuvent avoir est l’attribuation du DataContext sur le ViewModel.

Quels sont les avantages ?

Le modèle (ou Data Model) ne stocke que des données à un état “final” et l’ihm ne possède pas de code behind (ou très peu) ce qui améliore la maintenance et les tests unitaires.

Comment l’implémenter en WPF ?

Vous pouvez télécharger un exemple que j’ai fait en cliquant ici.

Voici l’architecture de notre solution:

mvvm3

Model possède nos données, c’est à dire une classe Product représentant un Produit et implémentant INotifyPropertyChanged ainsi qu’une classe GetTestProducts me retournant une liste de produit fictifs:

mvvm4

mvvm5

ViewModel va nous permettre de récupérer les données pour les “binder” plus tard dans la vue. ViewModel possèdera aussi un attribut de type ICommand qui nous permettra de rattacher la logique d’un bouton de l’IHM:

mvvm6

Pour finir, la vue en XAML qui possède une liste qui se bind sur Products ainsi qu’un bouton qui déclenche la méthode MethodTest(), sans oublier l’affectation du ViewModel dans le DataContext:

mvvm8 

mvvm7

Comment l’implémenter en Silverlight ?

Vous pouvez télécharger un exemple que j’ai fait en cliquant ici.

Pour l’implémenter en Silverlight c’est sensiblement la même chose, excepté que pour attacher une ICommand à un bouton il faut réaliser quelques modifications.

mvvm9

Sources qui m’ont aidé pour cette article:

Article sur les ICommand en silverlight

Article sur MVVM

Posted: Feb 20 2009, 15:34 by juliend | Comments (3) RSS comment feed |
  • Currently 4.5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5
Filed under: .NET | Général | WPF/Silverlight

Comments

Blog de Julien Dollon said:

Trackback from Blog de Julien Dollon

[Silverlight] Le pattern Prism v2/CompositeWPF

# March 01 2009, 18:49

Julien Dollon said:

Les commentaires ont été modérés. Certaines personnes sont fidèles à leurs réputations.

# August 07 2009, 09:27

arnold said:

bonsoir monsieur,

je voudrais transformer mes page en SL.
pour le moment toutes les page sont fait avec powershell.

je voudrais commence par cette page la:
pagesperso-orange.fr/arenas/mmc/mmc_athome.html

et je suis perdue dedans.
svp donner moi un petit hug pour realiser mon reve

merci de lire mes mots
arnold

# November 30 2009, 20:03

Add comment




  Country flag

biuquote
  • Comment
  • Preview
Loading

captcha

*