Mon application Silverlight/WPF et la guerre des patterns

Présentation au sujet: "Mon application Silverlight/WPF et la guerre des patterns"— Transcription de la présentation:

1

2 Mon application Silverlight/WPF et la guerre des patterns
08/02/2011 Cyril CATHALA Architecte Olivier NAVARRE Architecte Cédric DAVIAUD Directeur Technique

3 Sommaire Introduction Rappels Application Composite SoPrism !
Inversion of Control MVVM Application Composite Présentation PRISM SoPrism ! Présentation Conseils pour bien démarrer Découpage Communication Outils Validation de données

4 Introduction

5 So@t en quelques mots … SSII spécialisé dans le développement
10 ans de savoir-faire .Net / Java 220 collaborateurs Tous les métiers du développement 3 ans d’expertise Silverlight / WPF Société Générale, Dexia, Vente Privée, Canal+, M6, Radio France, Crédit Agricole, Eurosport, Sarenza.com

6 Introduction Nos « Bonnes pratiques » Découplage !
Application de référence « HappyNet » Application composite Nos « Bonnes pratiques » Découplage ! Quickstart : Template SoPrism Génération d’un squelette applicatif Mise à disposition de briques techniques date

7 of control Inversion Rappels !

8 Inversion of control Problématique : Résolution :
Dépendance très forte entre les classes composants / services Résolution : Déporter l’instanciation des dépendances des classes à un composant externe (Container)

9 Framework Unity Container IoC : UnityContainer
Injection de dépendances Constructeur Propriété v2.0 - mai 2010 Microsoft Patterns & Practices Enterprise Library

10 Framework MEF Utilise un container IoC : CompositionContainer
Injection de dépendances Constructeur Propriété Inclus dans .NET 4 .0 / Silverlight 4.0

11 Unity vs MEF MEF - Unity Ce qu’ils font tous les 2 :
Enregistrement de types Enregistrement d’instances Création d’instance des types enregistrés uniquement Injection d’instances via constructeur / propriétés Attributs pour marquer types et dépendances Résolution des dépendances dans un graphe d’objets

12 Unity vs MEF Unity MEF Ce qui les distingue : Centralisé Décentralisé
Résolution de classes concrètes sans enregistrement Résolution de génériques Interception Nombreux retours d’expérience Découverte d’assemblies à la volée Téléchargement de XAP Recomposition à chaque nouvelle découverte Exporte automatiquement les types dérivés Livré avec le Framework .NET date

13 Utilisation d’Unity Exemples de code Configuration du Container :
Résolution : Enregistrement d’un type this.container.RegisterType<IMyView,MyView>(); Enregistrement d’un singleton this.container.RegisterType<IMyView,MyView>( new ContainerControlledLifetimeManager()); Récupération d’une instance IView view = this.container.Resolve<IView>(); date

14 Utilisation d’Unity Par injection Exemples de code (suite)
public class MyViewModel { public IMyView View { get; private set; } // Constructeur public MyViewModel(IMyView view) this.View = view; } // Exemple d’instanciation d’un MyViewModel MyViewModel viewModel = this.container.Resolve<MyViewModel>();

15 Model-View-ViewModel
Rappels !

16 Sans Binding Code behind Only : View XAML Modèle de données
Event Handlers Modèle de données date

17 Pattern MVVM Problématique : Résolution :
Collaboration développeur / designer difficile Tests fastidieux (plus que d’habitude !) Code-behind difficilement maintenables Résolution : Utiliser le pattern Model-View-ViewModel ! date

18 Pattern MVVM View.DataContext = ViewModel PropertyChanged DataBinding
XAML (Code-Behind) PropertyChanged DataBinding Commands ViewModel Etat Opérations Modèle de données Web Service date

19 Interface utilisateur Persistence de données
Pattern MVVM View (xaml) ViewModel (cs) Model (cs) Interface utilisateur Logique applicative Persistence de données Design pur XAML seulement Code-behind minimal Basé sur un UserControl Data Binding vers la classe ViewModel (Presque) aucun gestionnaire d’évènements Classe adapteur entre la vue et le modèle « Englobe » le modèle pour le rendre exploitable par la vue Notifications (implémente INotifyPropertyChanged) Expose des Commands Se charge de la validation Testable Données pures Pas de concepts visuels Couche d’accès aux données

20 Pattern MVVM : View First
Définition La View assigne le DataContext au ViewModel Disponible au design time (support de Blend) Pas d’IoC possible en XAML View <UserControl.DataContext> <my:PageViewModel /> </UserControl.DataContext> En XAML

21 Pattern MVVM : View First
D’autres méthodes d’affectation par le code… public MyView() {     InitializeComponent();     DataContext = new MyViewModel(); } Dans le constructeur public MyView(IMyViewModel viewModel) {     InitializeComponent();     DataContext = viewModel; } A l’extérieur var viewModel = new MyViewModel(); var view = new MyView(viewModel);

22 Pattern MVVM : ViewModel First
Définition Le ViewModel affecte le DataContext de la View Méthode préconisée ViewModel pilote la View IoC possible et donc testable View Model public MyViewModel(IMyView myView) { myView.DataContext = this; } Par le code

23 Application Composite Prism

24 Prism - Présentation Composite Application Guidance
Microsoft P&P Team Guidance & Framework Open source (Codeplex) Composants pour construire des applications composites Se base sur un conteneur IoC MVVM “compliant” Version 4.0 Compatible Silverlight 4.0 / WPF 4.0 / WP7

25 Prism – Pourquoi ? Faible couplage Configurabilité Composabilité
Maintenance / lisibilité Testabilité accrue Multi-platform (WPF / Silverlight / WP7)

26 Prism – Vocabulaire Bootstrapper Shell Module
Initialisation de la configuration Shell RootVisual / MainWindow Conteneur visuel principal Module Découpage vertical des fonctionnalités

27 Prism - Bootstrapper Initialise les services Charge les modules
Application Bootstrapper Conteneur Services Shell Modules Initialise les services Charge les modules Lance le Bootstrapper Injection de dépendances Gestion de régions d’affichage Gestion de messages Découpage vertical des fonctionnalités RootVisual MainWindow

28 Prism – Services Prism contient différentes briques techniques :
Un gestionnaire de Module : > BootStrapper Un gestionnaire de régions d’affichage : > RegionManager Une implémentation de ICommand : > CommandDelegate Un gestionnaire d’évènements : > EventAggregator …

29 Template d’application SoPrism

30 SoPrism Template applicatif se basant sur : Et permettant :
Framework Prism Pattern MVVM Et permettant : La génération d’un squelette applicatif De concentrer des « bonnes pratiques »

31 SoPrism Templates Visual Studio 2010 Snippets Composants
Template de solution d’application Silverlight Template de Projet Module (Prism) Template de « bloc visuel » MVVM Snippets Composants Contrôles Interactivité (Triggers/Actions/Behaviors) Validation Gestion des logs Gestion des exceptions Converters

32 SoPrism Services Prism Business Data Shell Infrastructure Module Vue
date

33 Services Prism Business Business Business Data Data Data Shell
Configuration Helpers Logging Shell Infrastructure Prism Interactivity Validation Controls Converters Module Module Module Vue Vue Vue Services Logging Business Business Business Data Data Data date

34 SoPrism : génération d’un squelette applicatif
[ Démo ] SoPrism : génération d’un squelette applicatif date

35 Prism - RegionManager Problématique : Résolution :
Une vue peut contenir d’autres vues : couplage fort Résolution : Confier l’injection d’une vue à un gestionnaire de régions d’affichage Shell Region Vue date

36 SoPrism : Utilisation du RegionManager
[ Démo ] SoPrism : Utilisation du RegionManager date

37 Comment bien découper son application ?
date

38 Hello Board ! Description Application composite de démonstration
basée sur le Template SoPrism Respecte nos « bonnes pratiques » ScrumBoard en Silverlight date

39 Hello Board ! Vocabulaire Scrum UserStory : fonctionnalité
BackLog : liste de fonctionnalités Tâche : partie de fonctionnalité Sprint : itération ScrumBoard : tableau des tâches d’un sprint Un backlog est une liste de fonctionnalité, c-à-d constituée de UserStories chacunes découpées en tâches, ou sous-fonctionnalités, qui sont traitées au courts d’une itération aka sprint date

40 [ Démo ] HelloBoard date

41 Définition des modules
Besoin : Découper l’application par modules applicatifs et par blocs visuels 2 approches possibles En mettant en avant le visuel En mettant en avant le métier

42 Définition des modules
Découpage orienté visuel Module Sprint Module User Vue Sprint Vue UserList Vue Task Vue UserDetail Vue UserSelection Vue Page Scrumboard Page User Manager date

43 Définition des modules
Découpage orienté métier Module Sprint Module User Vue Sprint Vue UserList Vue Task Vue UserDetail Injection Vue UserSelection Vue Page Scrumboard Page User Manager date

44 Hello Board ! Conception
Découpage orienté métier date

45 Comment communiquer entre les couches ?
date

46 Gestionnaire d ’Evènements EventAggregator
View Model View Model FAIL! View Model View Model View Model View Model View Model View Model

47 Gestionnaire d ’Evènements EventAggregator
View Model View Model View Model View Model Event Aggregator View Model View Model View Model View Model

48 Gestionnaire d’évènements EventAggregator
Problématique : Comment dialoguer entre 2 modules (classes) ne se connaissant pas ? Résolution : Confier la gestion d’évènements à un gestionnaire Pattern Publish-Subscribe Couplage faible de la communication entre classes date

49 Gestionnaire d ’Evènements EventAggregator
Comment transitent les données d’un module à un autre ? Module Sprint Module User Vue UserSelection UserService Reference Vue TaskView IdUser Event Aggregator SprintService Reference SprintService.User UserService.User SprintService Data UserService date

50 Gestionnaire d ’Evènements EventAggregator
Exemples de code Création d’un CompositePresentationEvent<EventArgs> public class UserSelectedEvent : CompositePresentationEvent<UserSelectedEventArgs> { } public class UserSelectedEventArgs public int IdUser { get; private set; } public UserSelectedEventArgs(int idUser) this.IdUser = idUser; date

51 Gestionnaire d ’Evènements EventAggregator
Exemples de code Publication d’un Event this.eventAggregator.GetEvent<UserSelectedEvent>() .Publish(new UserSelectedEventArgs(idUser)); Abonnement à un Event this.eventAggregator.GetEvent<UserSelectedEvent>() .Subscribe(this.OnSelectedUser); date

52 Communication inter-module
[ Démo ] Communication inter-module date

53 Validation

54 INotifyDataErrorInfo
Validation 3 approches possibles : Validation Exceptions IDataErrorInfo INotifyDataErrorInfo Setter { throw; } Synchrone Limité à 1 erreur par propriété Confusion entre erreur de saisie et exception applicative Interface Compatibilité WPF Asynchrone Plusieurs erreurs par propriété, non limitées aux strings HasErrors : indique si actuellement valide ou non Silverlight 4 « compliant »

55 Validation Interface INotifyDataErrorInfo
public interface INotifyDataErrorInfo { bool HasErrors { get; } event EventHandler<DataErrorsChangedEventArgs> ErrorsChanged; IEnumerable GetErrors(string propertyName); } date

56 Validation Manager (SoPrism)
Exemples de code Initialisation this.validationManager = new ValidationManager(RaiseErrorsChanged); Définition d’une règle this.validationManager.SetRuleFor(() => this.FirstName, new RequiredStringValidator(), "Merci de renseigner le prénom"); Validation d’une règle this.validationManager.ValidateRules(() => this.FirstName); this.validationManager.ValidateAllRules(); date

57 [ Démo ] Validation Manager

58 [ http://soprism.codeplex.com ]
Code source Disponible sur Codeplex dès … … maintenant ! [ ] date

59 Quelques références [ http://happynet.codeplex.com ]
[ ] [ ] [ ]

60 [ Nathalie Pettier ] [ Nathanaël Marchand ]
Merci à : [ Nathalie Pettier ] [ Nathanaël Marchand ]

61 Des questions ? ? Des réponses !

62 Merci !

63