Introducthion mvvm avec wpf

PRÉSENTATION DU PATTERN MVVM AVEC WPF

Adopter le pattern MVVM avec WPFAtmane EL BOUACHRI

2

Historiques & enjeux du pattern MVVM..Les modèles MVC, MVP et MVVMImplémentation du MVVM avec WPF / XAML│ Databinding, Commandes, Conversion, Validation

Les plus et les moins…Les différentes approches d’implémentation MVVMMVVM Frameworks & Toolkits..│ Prism /MVVLight,..

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

PLAN

3

1HISTORIQUES & ENJEUX DU PATTERN MVVM

4

Enjeux

│ Séparer UI de la logique de présentation│ Rendre l'interface utilisateur testable.• TDD..

│ Réduire le couplage entre l'interface utilisateur et d'autres codes• IoC

│ Permettre aux Designers UI de travailler de manière plus indépendante. • Blendablity (En référence à Microsoft Blend)

HISTORIQUES & ENJEUX DU PATTERN MVVM

5

Historique

│ Créé en 2005 par John Gossman • Architecte logiciel chez Microsoft pour les technologies WPF et Silverlight• Première publication sur son blog :• http://blogs.msdn.com/b/johngossman/archive/2005/10/08/478683.aspx

│ MVVM est une spécialisation du modèle PM• PM (Présentation-Modèle) introduit en 2004 par Martin Fowler.

│ MVVM a été conçu pour satisfaire les exigences de WPF et Silverlight.

HISTORIQUES & ENJEUX DU PATTERN MVVM

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

6

2LES MODÈLES MVC, MVP ET MVVM

7

Anatomie du pattern MVC

│ Historique• Décrit en 1979 par Trygve Reenskaug, • Smalltalk au Xerox.

│ Propriétés• Le Modèle représente les données logiques• Le Controller est l'orchestrateur• Un Controller peut gérer plusieurs Vues

│ Utilisation• ASP.NET MVC

MODÈLES MVC, MVP ET MVVM

Vue

Contrôleur Modèle

Trans

met ac

tion d

e

l'utili

sateu

r

Sélec

tionn

e une

vue

Mise-à-jour du modèle

Demande l’état

Modèle : Envoi des notifications

8

Modèle MVC : avantages & désavantages

│ Avantages• Le modèle MVC correspond le mieux à des applications web.

‐ ASP.net• Testabilité

‐ Un bon ajustement pour un Développement (TDD) approche Test-Driven.• Affichage du même modèle dans différents points de vue.

│ Désavantages• Event-driven• Classe lourde et complexe• Ne convient pas à WPF

© SOFTEAM Cadextan 2014 - Confidentiel


9

Anatomie du pattern MVP (Passif)

│ Historique• Décrit en 1990 par Mike Potel • Taligent Corporation(IBM).

│ Propriétés• Chaque Vue a un présentateur• La Vue est passive• Présentateur garde une référence de la Vue via une interface.• La vue et le modèle ne sont pas connectés

│ Utilisation• Windows Forms


Vue

PrésentationModèle

Interaction avec la vue via une interface (Contrat)


Transmet action de l'utilisateur

10


Modèle MVP Passif : avantages & désavantages

│ Avantages• Séparation claire entre l'interface utilisateur et la logique métier• Maintenabilité• Capacité de tester tout le code dans la solution (à l'exclusion présentation visuelle et l'interaction)

│ Désavantages• Round-trip

‐ Vue présentateur Vue• Pas de DataBinding , moins adapté pour le WPF

‐ Ne profite pas de la richesse du XAML

11

Anatomie du pattern MVP (Supervising Controller)

│ Historique• Proposé en 2004 par Martin Fowler

│ Propriétés• Chaque Vue a un présentateur• La Vue implémente une interface• La Vue n’est passive pas,

‐ Elle est connectée au modèle par le DataBinding.• Le rôle du Présentateur est diminué par rapport au MVP passif

│ Utilisation• Windows Forms


Vue

PrésentationModèleInt

eracti

on de

la vu

e ave

c le m

odèle

via l

e

DataBin

ding

Interaction avec la vue via une interface (Contrat)



12

Anatomie du pattern PM

│ Historique• En 2004, présenté par Martin Fowler

│ Propriétés• La vue n’implémente aucune interface• Le PM enroule l’ensemble des données et fournit des propriétés• Couplage faible entre le PM et la vue

‐ Vue un observateur de la PM‐ DataBinding

│ Utilisation• WPF, Silverlight


BLL

Appel des méthodes

Vue Présentation

Rafraichissement de vue à partir du modèle

Modèle


13

Anatomie du pattern MVVM

│ Historique• En 2005, présenté par John Gossman• Microsoft

│ Propriétés• La Vue a un seul ViewModel• Un ViewModel peut être lié à plusieurs Vues• Un ViewModel est la représentation d’une Vue• Le modèle contient :

‐ les objets métiers, les règles métiers, accès au données,..

│ Utilisation• WPF, Silverlight, Xamarin Forms, …


Vue

ViewModel

Modèle

Mise

-à-jou

r du m

odèle

Envo

i des

no

tifica

tions

États & opérations

DataBinding

et commandes

14

3IMPLÉMENTATION DU MVVM AVEC WPF / XAML

15

IMPLÉMENTATION DU MVVM AVEC WPF / XAML

ViewModel ModèleVue

Vue d’ensemble

│ Vue=XAML:• Toute Vue hérite de DependencyObject

│ ViewModel =DataContext• Le DataContext reçoit une instance du ViewModel correspondant

│ Model =Objet métier ne doit pas voir ni Vue, ni ViewModel

16

DependencyObject / DependencyProperty

│ DependencyObject :• Facilitent les fonctions de support qui sont requis par un balisage déclarative XAML• DependencyObject(s) seuls peuvent héberger une DependencyProperty• Tout Control WPF hérite de DependencyObject

│ DependencyProperty:• Propriétés de dépendance fournissent des fonctionnalités additionnelles pour le support du Databinding• Peuvent être définis à partir de balisage XAML et/ou Dans le code


17

Propriétés CLR / DependencyProperty

│ DependencyProperty :• Propriété de dépendance utilise résolution dynamique de valeur pour déterminer la valeur de la propriété. • Les propriétés de dépendance sont déclarées publiques, statique, et en lecture seule.• Les propriétés de dépendance sont enregistrées via la méthode statique DependencyProperty.Register, à l'intérieur

du constructeur statique.

│ Propriétés CLR:• Un sucre syntaxique encapsulant un champ privé d’une classe via get et set.


18

DataBinding• La liaison de données offre un moyen simple et cohérent aux applications de présenter les données et d'interagir

avec.│ Syntaxe :• <DependencyObject DependencyProperty=“{Binding Property}” />

│ Exemple:• <TextBox Text=“{Binding Name}” />


Vue (Xaml)Binding Target

Dependency

Property

DonnéeBinding Source

Property

One Way

Two Way

One Time

One Way To Source

Binding

19

Liaison de données (DataBinding)


ViewModel / Model(Source) XAML( Target)

CLR Property Dependency Property

CLR PropertyCLR Field

PropertyChanged event

Dependency PropertyDependency Property

20

Système des notifications

│ Interface : INotifyPropertyChanged• Notifier le Binding du Control qu'une valeur de propriété du DataContext (ViewModel) a été modifiée.


Update

Control Target

Dependency Property

ViewModelSource

PropertyBinding

PropertyChanged

abonnement

21

Commandes

• Les commandes sont un moyen de gérer des actions de l'interface utilisateur (UI)• Lier à couplage faible l’UI et le ViewModel qui exécute l'action.


22

Conversion

│ Définition :• Modifie les données 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}}"


FrameworkElement

Target Dependency Property

CLR ObjectSource

PropertyBinding

Value Converter

23

Validation


ValidationRules (Règle Personnalisé de validation ou

ExceptionValidationRule)

IDataErrorInfo(Fournit des informations d'erreur

spécifique pour un objet lié à une Vue)

Logique de validation UI / BL

La logique de validation est détaché de la source de données, et peut être réutilisée entre les contrôles.

La logique de validation est plus proche de la source

class MyValidations : ValidationRule

override ValidationResult Validate(object value, CultureInfo cultureInfo)

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

Class MyViewModel : IDataErrorInfo, INotifyPropertyChanged

ValidatesOnDataErrors="True"

24

Les tests unitaires

│ Possible sur les modèles│ Possible sur les ViewModel│ Pas possible sur les liaisons (Databinding)• Entre le XAML et le DataContext c’est .Net qui gère

│ les interactions entre le Modèle et le ViewModel ne sont pas toujours simple• Nécessite peut être l’utilisation de l’injection de dépendance (Mocking)

LES PLUS ET LES MOINS

25

MVVM Bonne pratique

│ Réduire au max ou éliminer votre code-behind│ Lier l'ensemble de vos entrées / 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 modèle│ se lier uniquement à un objet de modèle, si il n'y a pas d'informations spécifiques à vue│ Pour les tests, traiter ViewModel que l'interface utilisateur réel│ Évitez les événements. Utilisez les commandes à la place


26

Les différentes approches d’implémentation MVVM

│ ViewFirst : • La View est l’élément directeur, elle instancie le ViewModel• Simple d’implémentation

│ ViewModelFirst• Le ViewModel est l’élément directeur, il instancie la View• Utilisation des DataTemplates implicites.• Souplesse pour le développement métier• « Blendabilité » réduite

│ ModelFirst• Le Model est l’élément directeur, approche Data centrique• les écrans sont générés depuis les données (Utilisation des DataTemplates )• Exemple : Microsoft LightSwitch


27

4DÉMO…

28

5 LES PLUS ET LES MOINS…

29

Avantage

│ Modularité• Une Vue est liée à un seul ViewModel

│ Souplesse• UI peut être fait par des Designer• Partage du Code

│ Testabilité• Model et ViewModel

│ Maintenabilité


30

Inconvénient

│ Difficile à déboguer• XAML

│ Problèmes de performance• Databinding

│ Nécessite des composants personnalisés│ Toute manipulation directe des contrôles doit être soigneusement isolée


31

6MVVM FRAMEWORKS & TOOLKITS..

32

MVVM Toolkits

│ MVVM Light Toolkit : Laurent Bugnion (Début 2011)• http://www.galasoft.ch/mvvm/getstarted

│ MEFedMVVM• http://mefedmvvm.codeplex.com

│ Cinch : Sacha Barber• http://cinch.codeplex.com

MVVM TOOLKITS & FRAMESWORKS

http://www.galasoft.ch/mvvm/getstarted

http://mefedmvvm.codeplex.com/

http://cinch.codeplex.com/

33

UI composite

│ Microsoft Prism• Framework de référence 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

MVVM TOOLKITS & FRAMESWORKS

http://www.galasoft.ch/mvvm/getstarted

http://calciumsdk.net/

http://caliburn.codeplex.com/

34

7MVVM POUR AUTRES APPLICATIONS XAML …MVVMCROSS

35

Framwork MVVMCross & Xamarin│ PCL pour applications multi-plate-forme (C #) natives, transversales│ Framework de développement 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

FRAMEWORK MVVMCROSS / XAMARIN

36

ZMVVMCross & PCL

FRAMEWORK MVVMCROSS / XAMARIN

Propriétésappel Commandes

Notification des changementsMessages

Platform Specific

Vue

Cross Platform -PCL

Messages

ViewModel

Modèle

37

8AU DELÀ DU XAML !

38

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

AU DELÀ DU XAML !

http://knockoutjs.com/documentation/observables.html

https://angularjs.org/

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

https://github.com/kmalakoff/knockback

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

39

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

AU DELÀ DU XAML !

https://visualstudiogallery.msdn.microsoft.com/e63e6b76-6e15-470b-8bbe-2c3185b05635

https://www.nuget.org/packages/ASP.NET_MVVM_Excalibur

40

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/

AU DELÀ DU XAML !

https://github.com/lordviktor

http://lab.kapit.fr/default/cairngorm-console/

Faites de votre projet un succès

21, avenue Victor Hugo75016 Paris

www.softeam.fr

AVEZ-VOUS DES QUESTIONS?

41

Introducthion mvvm avec wpf

Technology