Introducthion mvvm avec wpf
•Télécharger en tant que PPTX, PDF•
1 j'aime•691 vues
Introduction au pattern MVVM avec explication de son implémentation dans le WPF
Recommandé
Contenu connexe
Tendances
Tendances (19)
En vedette
En vedette (13)
Similaire à Introducthion mvvm avec wpf
Similaire à Introducthion mvvm avec wpf (20)
Introducthion mvvm avec wpf
- 1. PRÉSENTATION DU PATTERN MVVM AVEC WPF Adopter le pattern MVVM avec WPF Atmane EL BOUACHRI
- 2. Historiques & enjeux du pattern MVVM.. Les modèles MVC, MVP et MVVM Implémentation du MVVM avec WPF / XAML │ Databinding, Commandes, Conversion, Validation Les plus et les moins… Les différentes approches d’implémentation MVVM MVVM Frameworks & Toolkits.. │ Prism /MVVLight,.. Au delà du XAML │ Javascript / ASP,Net,.. 2 PLAN
- 3. 1 HISTORIQUES & ENJEUX DU PATTERN MVVM 3
- 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) 4 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. 5 HISTORIQUES & ENJEUX DU PATTERN MVVM
- 6. 2 LES MODÈLES MVC, MVP ET MVVM 6
- 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 7 MODÈLES MVC, MVP ET MVVM Mise-à-jour du modèle
- 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 - 8 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 9 MODÈLES MVC, MVP ET MVVM Interactionaveclavueviaune interface(Contrat) Mise-à-jour du modèle Transmetactiondel'utilisateur
- 10. 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 11 MODÈLES MVC, MVP ET MVVM Interactionaveclavueviaune interface(Contrat) Mise-à-jour du modèle Transmetactiondel'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 12 MODÈLES MVC, MVP ET MVVM Appel des méthodes Rafraichissement de vue à partir du 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, … 13 MODÈLES MVC, MVP ET MVVM
- 14. 3 IMPLÉMENTATI ON DU MVVM AVEC WPF / XAML 14
- 15. 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 16 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. 17 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}” /> 18 IMPLÉMENTATION DU MVVM AVEC WPF / XAML One Way Two Way One Time One Way To Source
- 19. Liaison de données (DataBinding) 19 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. 20 IMPLÉMENTATION DU MVVM AVEC WPF / XAML Update 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. 21 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}}" 22 IMPLÉMENTATION DU MVVM AVEC WPF / XAML
- 23. Validation 23 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) 24 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 25 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 26 IMPLÉMENTATION DU MVVM AVEC WPF / XAML
- 27. 4 DÉMO… 27
- 28. 5 LES PLUS ET LES MOINS… 28
- 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é 29 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 30 LES PLUS ET LES MOINS
- 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 32 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 33 MVVM TOOLKITS & FRAMESWORKS
- 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 35 FRAMEWORK MVVMCROSS / XAMARIN
- 36. ZMVVMCross & PCL 36 FRAMEWORK MVVMCROSS / XAMARIN Propriétés appel Commandes Notification des changements Messages Platform Specific Vue Cross Platform -PCL Messages ViewModel Modèle
- 37. 8 AU DELÀ DU XAML ! 37
- 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 38 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 39 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/ 40 AU DELÀ DU XAML !
- 41. Faites de votre projet un succès 21, avenue Victor Hugo 75016 Paris www.softeam.fr AVEZ-VOUS DES QUESTIONS? 41
Notes de l'éditeur
- -Testabiltiy (ViewModel est plus facile de test unitaire de code-behind ou event driven Code) -Clear Séparation entre le designer et développeur UX -Augmentation De la "blendability" de votre vue -Model N'a jamais besoin d'être modifié pour soutenir les changements à la vue -ViewModel A rarement besoin d'être changé pour appuyer les changements à la vue -Pas De code dupliqué vue de mettre à jour