Download - Introducthion mvvm avec wpf
![Page 1: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/1.jpg)
PRÉSENTATION DU PATTERN MVVM AVEC WPF
Adopter le pattern MVVM avec WPFAtmane EL BOUACHRI
![Page 2: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/2.jpg)
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
![Page 3: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/3.jpg)
3
1HISTORIQUES & ENJEUX DU PATTERN MVVM
![Page 4: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/4.jpg)
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
![Page 5: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/5.jpg)
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
![Page 6: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/6.jpg)
6
2LES MODÈLES MVC, MVP ET MVVM
![Page 7: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/7.jpg)
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
![Page 8: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/8.jpg)
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
MODÈLES MVC, MVP ET MVVM
![Page 9: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/9.jpg)
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
MODÈLES MVC, MVP ET MVVM
Vue
PrésentationModèle
Interaction avec la vue via une interface (Contrat)
Mise-à-jour du modèle
Transmet action de l'utilisateur
![Page 10: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/10.jpg)
10
MODÈLES MVC, MVP ET MVVM
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
![Page 11: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/11.jpg)
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
MODÈLES MVC, MVP ET MVVM
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)
Mise-à-jour du modèle
Transmet action de l'utilisateur
![Page 12: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/12.jpg)
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
MODÈLES MVC, MVP ET MVVM
BLL
Appel des méthodes
Vue Présentation
Rafraichissement de vue à partir du modèle
Modèle
Transmet action de l'utilisateur
![Page 13: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/13.jpg)
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, …
MODÈLES MVC, MVP ET MVVM
Vue
ViewModel
Modèle
Mise
-à-jou
r du m
odèle
Envo
i des
no
tifica
tions
États & opérations
DataBinding
et commandes
![Page 14: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/14.jpg)
14
3IMPLÉMENTATION DU MVVM AVEC WPF / XAML
![Page 15: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/15.jpg)
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
![Page 16: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/16.jpg)
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
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
![Page 17: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/17.jpg)
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.
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
![Page 18: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/18.jpg)
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}” />
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
Vue (Xaml)Binding Target
Dependency
Property
DonnéeBinding Source
Property
One Way
Two Way
One Time
One Way To Source
Binding
![Page 19: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/19.jpg)
19
Liaison de données (DataBinding)
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
ViewModel / Model(Source) XAML( Target)
CLR Property Dependency Property
CLR PropertyCLR Field
PropertyChanged event
Dependency PropertyDependency Property
![Page 20: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/20.jpg)
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.
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
Update
Control Target
Dependency Property
ViewModelSource
PropertyBinding
PropertyChanged
abonnement
![Page 21: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/21.jpg)
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.
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
![Page 22: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/22.jpg)
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}}"
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
FrameworkElement
Target Dependency Property
CLR ObjectSource
PropertyBinding
Value Converter
![Page 23: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/23.jpg)
23
Validation
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
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"
![Page 24: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/24.jpg)
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
![Page 25: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/25.jpg)
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
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
![Page 26: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/26.jpg)
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
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
![Page 27: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/27.jpg)
27
4DÉMO…
![Page 28: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/28.jpg)
28
5 LES PLUS ET LES MOINS…
![Page 29: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/29.jpg)
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é
LES PLUS ET LES MOINS
![Page 30: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/30.jpg)
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
LES PLUS ET LES MOINS
![Page 31: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/31.jpg)
31
6MVVM FRAMEWORKS & TOOLKITS..
![Page 32: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/32.jpg)
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
![Page 33: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/33.jpg)
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
![Page 34: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/34.jpg)
34
7MVVM POUR AUTRES APPLICATIONS XAML …MVVMCROSS
![Page 35: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/35.jpg)
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
![Page 36: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/36.jpg)
36
ZMVVMCross & PCL
FRAMEWORK MVVMCROSS / XAMARIN
Propriétésappel Commandes
Notification des changementsMessages
Platform Specific
Vue
Cross Platform -PCL
Messages
ViewModel
Modèle
![Page 37: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/37.jpg)
37
8AU DELÀ DU XAML !
![Page 38: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/38.jpg)
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 !
![Page 39: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/39.jpg)
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 !
![Page 40: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/40.jpg)
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 !
![Page 41: Introducthion mvvm avec wpf](https://reader034.vdocuments.site/reader034/viewer/2022052308/587d52961a28abee158b4e9b/html5/thumbnails/41.jpg)
Faites de votre projet un succès
21, avenue Victor Hugo75016 Paris
www.softeam.fr
AVEZ-VOUS DES QUESTIONS?
41