Mon application Silverlight /WPF et la guerre des patterns

2. Mon application Silverlight/WPF et la guerre des patterns 08/02/2011 Cyril CATHALAArchitecteSo@t Olivier NAVARREArchitecteSo@t Cédric DAVIAUDDirecteur TechniqueSo@t

3. Sommaire • Introduction • Rappels • 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 • 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

7. Inversion of control Rappels !

8. Inversion of control • Problématique : • 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 • Ce qu’ils font tous les 2 :

12. Unity vs MEF • Ce qui les distingue :

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 • IViewview = this.container.Resolve<IView>();

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

15. Model-View-ViewModel Rappels !

16. Sans Binding • Code behindOnly : View XAML Modèle de données Code-Behind Event Handlers

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

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

19. Pattern MVVM

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… publicMyView(){InitializeComponent();DataContext = newMyViewModel(); } • Dans le constructeur publicMyView(IMyViewModel viewModel){InitializeComponent();DataContext = viewModel;} • A l’extérieur varviewModel = newMyViewModel();varview = newMyView(viewModel);

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

23. Application CompositePrism

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 conteneurIoC • 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 • 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 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’applicationSoPrism

30. SoPrism • Template applicatif se basant sur : • 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 • 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 • Shell • Business • Business • Business • Infrastructure • Prism • Data • Data • Data • Module • Module • Module • Vue • Vue • Vue • Vue • Vue • Vue

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

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

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

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

37. Comment bien découper son application ?

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

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

40. [ Démo ] HelloBoard

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 • Page • Scrumboard • Vue • UserList • Vue • UserSelection • Page • User Manager • Vue • Task • Vue • UserDetail • Vue • Sprint • Vue

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

44. Hello Board ! Conception • Découpage orienté métier

45. Comment communiquer entre les couches ?

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ènementsEventAggregator • 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

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

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