PRSENTATION DU PATTERN

MVVM AVEC WPF

ADOPTER LE PATTERN
MVVM AVEC WPF
ATMANE EL BOUACHRI

PLAN

Historiques & enjeux du pattern MVVM..

Les modles MVC, MVP et MVVM
Implmentation du MVVM avec WPF / XAML
Databinding, Commandes, Conversion, Validation

Les plus et les moins

Les diffrentes approches dimplmentation MVVM
MVVM Frameworks & Toolkits..
Prism /MVVLight,..

Au del du XAML
Javascript / ASP,Net,..

HISTORIQUE
S & ENJEUX
DU PATTERN
MVVM

HISTORIQUES & ENJEUX DU PATTERN MVVM

Enjeux
Sparer UI de la logique de prsentation
Rendre l'interface utilisateur testable.
TDD..

Rduire le couplage entre l'interface utilisateur et d'autres codes

Pour diffrentes interfaces et diffrentes technologies d'interface utilisateur

Permettre aux Designers UI de travailler de manire plus indpendante.

Blendablity (En rfrence Microsoft Blend)

HISTORIQUES & ENJEUX DU PATTERN MVVM

Historique
Cr en 2005 par John Gossman
Architecte logiciel chez Microsoft pour les technologies WPF et Silverlight
Premire publication sur son blog :

http://blogs.msdn.com/b/johngossman/archive/2005/10/08/478683.aspx

MVVM est une spcialisation du modle PM

PM (Prsentation-Modle) introduit en 2004 par Martin Fowler.

MVVM a t conu pour satisfaire les exigences de WPF et Silverlight.

LES
MODLES
MVC, MVP
ET MVVM

MODLES MVC, MVP ET MVVM

Anatomie du pattern MVC

Historique
Dcrit en 1979 par Trygve Reenskaug,

Vue

Smalltalk au Xerox.

Proprits
Le Modle reprsente les donnes logiques
Le Controller est l'orchestrateur
Un Controller peut grer plusieurs Vues

Utilisation
ASP.NET MVC

Contrleur

Mise--jour du modle

Modle

MODLES MVC, MVP ET MVVM

Modle MVC : avantages & dsavantages

Avantages
Le modle MVC correspond le mieux des applications web.
- ASP.net

Testabilit
- Un bon ajustement pour un Dveloppement (TDD) approche Test-Driven.

Affichage du mme modle dans diffrents points de vue.

Dsavantages
Event-driven
Classe lourde et complexe
Ne convient pas WPF

SOFTEAM Cadextan 2014 -

MODLES MVC, MVP ET MVVM

Anatomie du pattern MVP (Passif)

Vue

Historique

Transmet action de l'utilisateur

Taligent Corporation(IBM).

Proprits
Chaque Vue a un prsentateur
La Vue est passive
Prsentateur garde une rfrence de la Vue via une interface.
La vue et le modle ne sont pas connects

Utilisation
Windows Forms

Modle

Interaction avec la vue via une

interface (Contrat)

Dcrit en 1990 par Mike Potel

Prsentation
Mise--jour du modle

MODLES MVC, MVP ET MVVM

Modle MVP Passif : avantages & dsavantages
Avantages
Sparation claire entre l'interface utilisateur et la logique mtier
Maintenabilit
Capacit de tester tout le code dans la solution ( l'exclusion prsentation visuelle et l'interaction)

Dsavantages
Round-trip
- Vue prsentateur Vue

Pas de DataBinding , moins adapt pour le WPF

- Ne profite pas de la richesse du XAML

10

MODLES MVC, MVP ET MVVM

Anatomie du pattern MVP (Supervising Controller)

Historique

Transmet action de l'utilisateur

Proprits
Chaque Vue a un prsentateur
La Vue implmente une interface
La Vue nest passive pas,
- Elle est connecte au modle par le DataBinding.

Le rle du Prsentateur est diminu par rapport au MVP passif

Utilisation
Windows Forms

Modle

Interaction avec la vue via une

interface (Contrat)

Vue

Propos en 2004 par Martin Fowler

Prsentation
Mise--jour du modle

11

MODLES MVC, MVP ET MVVM

Anatomie du pattern PM
Historique
En 2004, prsent par Martin Fowler

BLL

Proprits
La vue nimplmente aucune interface
Le PM enroule lensemble des donnes et fournit des proprits
Couplage faible entre le PM et la vue

Appel des mthodes

- Vue un observateur de la PM
- DataBinding
Transmet action de l'utilisateur

Utilisation
WPF, Silverlight

Vue

Prsentation
Modle
Rafraichissement de vue
partir du modle

12

MODLES MVC, MVP ET MVVM

Anatomie du pattern MVVM

Historique
En 2005, prsent par John Gossman
Microsoft

Modle

Vue

Proprits
La Vue a un seul ViewModel
Un ViewModel peut tre li plusieurs Vues
Un ViewModel est la reprsentation dune Vue
Le modle contient :
- les objets mtiers, les rgles mtiers, accs au donnes,..

Utilisation
WPF, Silverlight, Xamarin Forms,

ViewModel
tats &
oprations

13

IMPLMENT
ATION DU
MVVM AVEC
WPF / XAML

14

IMPLMENTATION DU MVVM AVEC WPF / XAML

Vue densemble
Vue=XAML:
Toute Vue hrite de DependencyObject

ViewModel =DataContext
Le DataContext reoit une instance du ViewModel correspondant

Model =Objet mtier ne doit pas voir ni Vue, ni ViewModel

Vue

ViewModel

Modle

15

IMPLMENTATION DU MVVM AVEC WPF / XAML

DependencyObject / DependencyProperty
DependencyObject :
Facilitent les fonctions de support qui sont requis par un balisage dclarative XAML
DependencyObject(s) seuls peuvent hberger une DependencyProperty
Tout Control WPF hrite de DependencyObject

DependencyProperty:

Proprits de dpendance fournissent des fonctionnalits additionnelles pour le support du Databinding

Peuvent tre dfinis partir de balisage XAML et/ou Dans le code

16

IMPLMENTATION DU MVVM AVEC WPF / XAML

Proprits CLR / DependencyProperty

DependencyProperty :
Proprit de dpendance utilise rsolution dynamique de valeur pour dterminer la valeur de la proprit.
Les proprits de dpendance sont dclares publiques, statique, et en lecture seule.
Les proprits de dpendance sont enregistres via la mthode statique DependencyProperty.Register, l'intrieur
du constructeur statique.

Proprits CLR:

Un sucre syntaxique encapsulant un champ priv dune classe via get et set.

17

IMPLMENTATION DU MVVM AVEC WPF / XAML

DataBinding
La liaison de donnes offre un moyen simple et cohrent aux applications de prsenter les donnes et d'interagir
avec.

Syntaxe :
<DependencyObject DependencyProperty={Binding Property} />

Exemple:

<TextBox Text={Binding Name} />

Binding

Vue (Xaml)
Binding Target

Depende
ncy
Property

One Way
Two Way
One Time

Property

Donne
Binding Source

One Way To Source

18

IMPLMENTATION DU MVVM AVEC WPF / XAML

Liaison de donnes (DataBinding)

ViewModel / Model
(Source)

XAML( Target)
PropertyChanged event

CLR Property

Dependency Property

CLR Field

Dependency Property

Dependency Property

CLR Property

19

IMPLMENTATION DU MVVM AVEC WPF / XAML

Systme des notifications

Interface : INotifyPropertyChanged
Notifier le Binding du Control qu'une valeur de proprit du DataContext (ViewModel) a t modifie.
abonnement

Control

Target

Dependency
Property

Binding

Property

ViewModel
Source

Update
PropertyChanged

20

IMPLMENTATION DU MVVM AVEC WPF / XAML

Commandes
Les commandes sont un moyen de grer des actions de l'interface utilisateur (UI)
Lier couplage faible lUI et le ViewModel qui excute l'action.

21

IMPLMENTATION DU MVVM AVEC WPF / XAML

Conversion
Dfinition :
Modifie les donnes sources avant de les passer la cible en vue de leur affichage dans l'interface utilisateur.

Syntaxe XAML :
<TextBlock Text="{Binding Path=StartDate, Converter={StaticResource dateConverter}}"

Value Converter

CLR Object

FrameworkEleme
nt
Target

Dependency
Property

Source

Binding

Property

22

IMPLMENTATION DU MVVM AVEC WPF / XAML

Validation

ValidationRules

IDataErrorInfo

(Rgle Personnalis de validation ou

ExceptionValidationRule)

(Fournit des informations d'erreur

spcifique pour un objet li une Vue)

Logique de validation UI / BL La logique de validation est dtach de la source La logique de validation est plus proche de
de donnes, et peut tre rutilise entre les
la source
contrles.

class MyValidations : ValidationRule

override ValidationResult Validate(object

value, CultureInfo cultureInfo)

Class MyViewModel : IDataErrorInfo,

INotifyPropertyChanged

ValidatesOnDataErrors="True"

<object>
<object.ValidationRules>
MyValidations ou
ExceptionValidationRule
</object.ValidationRules>
</object>

23

LES PLUS ET LES MOINS

Les tests unitaires

Possible sur les modles
Possible sur les ViewModel
Pas possible sur les liaisons (Databinding)
Entre le XAML et le DataContext cest .Net qui gre

les interactions entre le Modle et le ViewModel ne sont pas toujours simple

Ncessite peut tre lutilisation de linjection de dpendance (Mocking)

24

IMPLMENTATION DU MVVM AVEC WPF / XAML

MVVM Bonne pratique

Rduire au max ou liminer votre code-behind
Lier l'ensemble de vos entres / sorties de l'interface utilisateur votre ViewModel
Mettre en uvre INotifyPropertyChanged sur votre ViewModel
Mettez votre point de vue comportement dans le ViewModel
Ne mettez pas tout tat d'affichage dans le modle
se lier uniquement un objet de modle, si il n'y a pas d'informations spcifiques vue
Pour les tests, traiter ViewModel que l'interface utilisateur rel
vitez les vnements. Utilisez les commandes la place

25

IMPLMENTATION DU MVVM AVEC WPF / XAML

Les diffrentes approches dimplmentation MVVM

ViewFirst :
La View est llment directeur, elle instancie le ViewModel
Simple dimplmentation

ViewModelFirst
Le ViewModel est llment directeur, il instancie la View
Utilisation des DataTemplates implicites.
Souplesse pour le dveloppement mtier
Blendabilit rduite

ModelFirst
Le Model est llment directeur, approche Data centrique
les crans sont gnrs depuis les donnes (Utilisation des DataTemplates )
Exemple : Microsoft LightSwitch

26

DMO

27

LES PLUS ET
LES
MOINS

28

LES PLUS ET LES MOINS

Avantage
Modularit
Une Vue est lie un seul ViewModel

Souplesse
UI peut tre fait par des Designer
Partage du Code

Testabilit
Model et ViewModel

Maintenabilit

29

LES PLUS ET LES MOINS

Inconvnient
Difficile dboguer
XAML

Problmes de performance
Databinding

Ncessite des composants personnaliss

Toute manipulation directe des contrles doit tre soigneusement isole

30

MVVM
FRAMEWOR
KS &
TOOLKITS..

31

MVVM TOOLKITS & FRAMESWORKS

MVVM Toolkits
MVVM Light Toolkit : Laurent Bugnion (Dbut 2011)
http://www.galasoft.ch/mvvm/getstarted

MEFedMVVM
http://mefedmvvm.codeplex.com

Cinch : Sacha Barber

http://cinch.codeplex.com

32

MVVM TOOLKITS & FRAMESWORKS

UI composite
Microsoft Prism
Framework de rfrence mis en place par Microsoft
http://www.galasoft.ch/mvvm/getstarted

Calcium SDK
http://calciumsdk.net

Caliburn
Le premier Framework construire une application composite UI avec WPF
http://caliburn.codeplex.com

33

MVVM
POUR
AUTRES
APPLICATIO
NS XAML
MVVMCROS
S

34

FRAMEWORK MVVMCROSS / XAMARIN

Framwork MVVMCross & Xamarin

PCL pour applications multi-plate-forme (C #) natives, transversales
Framework de dveloppement mobile MVVM multiplateformes
Silverlight pour WP7, WP8
WPF
Mono pour Android (ou Xamarin.Android)
MonoTouch pour iOS (ou Xamarin.iOS)
le Framework WinRT XAML pour Windows 8 Store apps.

Mono pour Mac (ou Xamarin.Mac)

Softeam4U

35

FRAMEWORK MVVMCROSS / XAMARIN

ZMVVMCross & PCL

Messages

Modle

ViewModel

Vue

Proprits
appel
Commandes

Notification des changements

Messages

Platform
Specific

Cross Platform -PCL

36

AU DEL DU
XAML !

37

AU DEL DU XAML !

JavaScript
KnockoutJS (Steve Sanderson)
http://knockoutjs.com/documentation/observables.html

AngularJS (Brat Tech LLC, Google)

https://angularjs.org/

ExtJS
http://www.sencha.com/blog/ext-js-5-mvc-mvvm-and-more/

Knockback.js
https://github.com/kmalakoff/knockback

Kendo UI
http://demos.telerik.com/kendo-ui/mvvm/index

38

AU DEL DU XAML !

ASP.Net
ASP.NET MVVM Excalibur
https://visualstudiogallery.msdn.microsoft.com/e63e6b76-6e15-470b-8bbe-2c3185b05635
https://www.nuget.org/packages/ASP.NET_MVVM_Excalibur

39

AU DEL DU XAML !

Adobe Flex
Projet LordViktor
https://github.com/lordviktor

Cairngorm :
Plugin applicatif Flex Visualiser et debugger les internes du framework
- http://lab.kapit.fr/default/cairngorm-console/

40

Faites de votre projet un succs

AVEZ-VOUS DES QUESTIONS?

21, avenue Victor Hugo

75016 Paris
www.softeam.fr

41