introducthion mvvm avec wpf
TRANSCRIPT
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
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
MODÈLES MVC, MVP ET MVVM
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
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
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
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
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
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
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
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
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
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
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
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
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
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"
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
IMPLÉMENTATION DU MVVM AVEC WPF / XAML
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
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é
LES PLUS ET LES MOINS
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
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
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
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 !
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 !
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 !
Faites de votre projet un succès
21, avenue Victor Hugo75016 Paris
www.softeam.fr
AVEZ-VOUS DES QUESTIONS?
41