Gestion des prompts avec Silverlight 3 et Prism

Categories:

Développement
- .NET
  - Office
  - Silverlight
  - Singularity
  - WPF
En bref…
Ma vie
Non classé
Windows
- Windows Mobile

28 sept

Par Vincent BOUZON – 28 septembre 2009

Cet article est le résultat d’une réflexion sur un problème souvent rencontré avec le pattern MVVM et d’une réaction à l’article de Thomas Lebrun qui traite de ce sujet, mais pas avec le même contexte. En effet, Thomas Lebrun propose une solution sans framework d’injection de dépendances et en WPF, moi, je vais vous présenter ma solution avec Prism et Silverlight 3.

Commençons par poser le problème, votre ViewModel exécute une action vers un service (web…) qui déclenche une erreur, quel est la meilleure façon d’avertir l’utilisateur de cette erreur ?
Soit vos ViewModels se charge de l’affichage (Beurk !), soit vous créez un service en charge des erreurs. La deuxième solution s’impose naturellement.

Si vous souhaitez voir le résultat avant de continuer, vous pouvez trouver le résultat à la fin de l’article.

Architecture

Pour cette démo technique, je vais simplement créer une application Silverlight composée de deux modules, un qui aura une exception à gérer et l’autre qui posera une question à l’utilisateur.

Respectons le système de modularité de Prism, voici notre architecture :

Notre application sera composée d’une application Silverlight 3 et de 4 librairies.

PromptWithPrism.Infrastructure : Cette librairie sera composée de tout ce qui a vocation à être partagé entre les modules.
PromptWithPrism.Modules.Prompt : Ce module est en charge de l’affichage des prompts, que ce soit des erreurs ou des questions à afficher à l’utilisateur.
PromptWithPrism.Modules.Panic : Lui sera chargé simplement de simuler des erreurs.
PromptWithPrism.Modules.Question : Enfin, ce dernier module posera une question à l’utilisateur.

Comme vous avez pu le remarquer, cette architecture permet de ne pas avoir de liaison directe entre les modules ce qui facilite les tests et le développement en parallèle.

Commençons par définir le service qui sera en charge des prompts. Dans notre démo, nous nous limiterons à l’affichage d’exception et de MessageBoxChildWindow. Nous exposerons donc une interface de ce type :

    1 public interface IPromptService
    2 {
    3     void ShowMessageBox(string title, string message, MessageBoxButtons buttons, MessageBoxIcon icon, MessageBoxChildWindow.MessageBoxClosedDelegate onClosed);
    4     void ShowError(Exception ex);
    5 }

Rien de bien compliqué jusqu’ici, une méthode permettant d’afficher une exception à l’utilisateur et une autre méthode permettant d’afficher une MessageBox et de spécifier un callback à appeler lorsque l’utilisateur a répondu.

De plus pour une question de souplesse, notre service interceptera tous les événements du type ShowErrorRequiredEvent ce qui permettra à tout endroit du code d’afficher une erreur et éviter un pattern Singleton pour le service de prompt.

    1 public class ShowErrorRequiredEvent : CompositePresentationEvent<Exception>
    2 {
    3 }

Voilà notre service est plus ou moins défini, passons au code.

Tout d’abord, créons notre Shell Prism, pour ceux qui n’ont pas l’habitude de Prism, le «Shell» est en fait une interface composée de régions où seront affichés les modules. Si vous n’avez toujours pas compris, continuez à lire vous allez comprendre.

    1 <UserControl x:Class="PromptWithPrism.Shell"
    2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" 
    5     xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" 
    6     xmlns:Regions="clr-namespace:Microsoft.Practices.Composite.Presentation.Regions;assembly=Microsoft.Practices.Composite.Presentation" 
    7     mc:Ignorable="d" d:DesignWidth="320" d:DesignHeight="240">
    8     <Grid x:Name="LayoutRoot">
    9         <ContentControl Regions:RegionManager.RegionName="PromptContainer" />
   10         <StackPanel>
   11             <ContentControl Regions:RegionManager.RegionName="PanicRegion" />
   12             <ContentControl Regions:RegionManager.RegionName="QuestionRegion" />
   13         </StackPanel>
   14     </Grid>
   15 </UserControl>

3 régions composent ce Shell, la première région “PromptContainer” est “au dessus” des autres, car elle aura pour rôle de contenir des fenêtres modales (ChildWindow). Enfin, les deux autres régions correspondent aux vues de nos deux modules.

Le module Prompt

Ce module est composé de deux parties :

Le service Prompt.
Le conteneur de fenêtre modale.

Commençons par ce dernier, en effet le conteneur est très simple, c’est une vue vide qui sera chargée de contenir les ChildWindow et ainsi les afficher.

    1 <UserControl x:Class="PromptWithPrism.Modules.Prompt.Views.PromptContainer"
    2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    4     Width="400" Height="300">
    5     <Grid x:Name="LayoutRoot" Background="White">
    6 
    7     </Grid>
    8 </UserControl>

Et on expose une méthode permettant d’afficher un ChildWindow :

    1 public interface IPromptContainer
    2 {
    3     void ShowChildWindow(ChildWindow window);
    4 }
    5 
    6 public partial class PromptContainer : IPromptContainer
    7 {
    8     public PromptContainer()
    9     {
   10         this.InitializeComponent();
   11     }
   12 
   13     #region IPromptContainer Members
   14 
   15     public void ShowChildWindow(ChildWindow window)
   16     {
   17         window.Show();
   18     }
   19 
   20     #endregion
   21 }

Nous avons maintenant notre conteneur, passons au service. Nous travaillons avec Prism, donc avec Unity qui nous offre de l’injection de dépendances alors servons en nous !

Notre service a besoin d’afficher des fenêtres modales et d’intercepter l’événement ShowErrorRequiredEvent.

Rien de compliqué simple pour obtenir cela :

    1 public PromptService(IEventAggregator eventAggregator, PromptContainer promptContainer)
    2 {
    3     this._eventAggregator = eventAggregator;
    4     this._promptContainer = promptContainer;
    5 
    6     this._eventAggregator.GetEvent<ShowErrorRequiredEvent>().Subscribe(this.OnShowErrorRequired, ThreadOption.UIThread);
    7 }
    8 
    9 public void OnShowErrorRequired(Exception ex)
   10 {
   11     this.ShowError(ex);
   12 }

Hop là, le constructeur sera résolu par notre conteneur Unity que nous configurerons juste après. Implémentons maintenant notre interface IPromptService :

    1 #region IPromptService Members
    2 
    3 public void ShowMessageBox(string title, string message, MessageBoxButtons buttons, MessageBoxIcon icon, MessageBoxChildWindow.MessageBoxClosedDelegate onClosed)
    4 {
    5     MessageBoxChildWindow messageBox = new MessageBoxChildWindow(title, message, buttons, icon);
    6     messageBox.OnMessageBoxClosed += onClosed;
    7 
    8     messageBox.Show();
    9 }
   10 
   11 public void ShowError(Exception ex)
   12 {
   13     this._promptContainer.ShowChildWindow(new ErrorChildWindow(ex));
   14 }
   15 
   16 #endregion

Voilà, nous avons un service capable d’afficher des prompts. Pour le code des fenêtres ErrorChildWindow & MessageBoxChildWindow, je vous laisse télécharger le code source à la fin de l’article.

Pour le code original de MessageBoxChildWindow, vous pouvez le trouver sur http://www.codeproject.com/KB/silverlight/CustomMessageBox.aspx, merci à son auteur pour son très bon travail.

Ça y est notre conteneur et notre service sont créés, nous avons fini notre module, enfin non pas vraiment, configurons notre module :

    1 public class PromptModule : IModule
    2 {
    3     private readonly IRegionManager _regionManager;
    4     private readonly IUnityContainer _unityContainer;
    5 
    6     public PromptModule(IUnityContainer unityContainer, IRegionManager regionManager)
    7     {
    8         this._unityContainer = unityContainer;
    9         this._regionManager = regionManager;
   10     }
   11 
   12     #region IModule Members
   13 
   14     public void Initialize()
   15     {
   16         this._unityContainer.RegisterType<IPromptContainer, PromptContainer>(new ContainerControlledLifetimeManager());
   17 
   18         this._unityContainer.RegisterInstance<IPromptService>(this._unityContainer.Resolve<PromptService>());
   19 
   20         this._regionManager.RegisterViewWithRegion("PromptContainer", () => this._unityContainer.Resolve<IPromptContainer>());
   21     }
   22 
   23     #endregion
   24 }

Rien de bien compliqué pour les habitués de Prism, en revanche pour les autres ça ne doit pas être très clair.

Prism permet de construire une application sous forme de module comme je l’ai expliqué au début de cet article. Il commence par les initialiser un par un. C’est au moment de cette initialisation qu’un module doit enregistrer ces types au conteneur Unity et enregistrer ses vues aux régions du Shell. Une fois ceci fait, le conteneur Unity peut résoudre le constructeur d’une classe en piochant dans les objets qu’on lui a déclarés, c’est ce qu’on appelle de l’injection de dépendance. En effet, c’est le conteneur qui se charge d’injecter les classes nécessaires la construction d’une classe.

Les modules Panic et Question

Le reste de cet article montre l’utilisation de notre service avec un peu d’humour :

Le module Panic ressemblera à ça :

Bon tout de suite, vous comprenez mieux mon avertissement envers l’humour de la fin de cet article

Ce module aura pour but de démontrer l’utilisation de notre méthode ShowError qu’expose notre service Prompt précédemment créé. En effet, le module nous propose deux choix impossible:D

Le premier choix nous génère une exception OutOfMemoryException… Impossible de charger Linux, il est bien trop bouffi… Et le deuxième, une exception de type KeyNotFoundException… Mac OS X n’a pas assez de part de marché pour notre application, enfin normal n’est-ce pas une simple erreur d’arrondie ?

(Quoi ? Je troll ?)

Passons au code, nous voulons respecter un pattern MVVM pour cette vue dont voici le code :

    1 <UserControl
    2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    4     xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" 
    5     xmlns:Interactivity="clr-namespace:Expression.Samples.Interactivity;assembly=Expression.Samples.Interactivity" xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" x:Class="PromptWithPrism.Modules.Panic.PanicView" 
    6     Width="640" Height="240" Background="MediumPurple" mc:Ignorable="d">
    7     <Border x:Name="LayoutRoot" Background="White" CornerRadius="10" BorderThickness="1" BorderBrush="#FF7C7C7C">
    8         <Grid>
    9             <Button HorizontalAlignment="Left" Margin="126,0,0,0" Width="118" Content="Linux" Height="35" VerticalAlignment="Center" d:LayoutOverrides="Height">
   10                 <i:Interaction.Triggers>
   11                     <i:EventTrigger EventName="Click">
   12                         <Interactivity:InvokeDataCommand Command="{Binding LinuxCommand}" />
   13                     </i:EventTrigger>
   14                 </i:Interaction.Triggers>
   15             </Button>
   16             <Button HorizontalAlignment="Right" Margin="0,0,126,0" Width="118" Content="Mac Os X" Height="35" VerticalAlignment="Center">
   17                 <i:Interaction.Triggers>
   18                     <i:EventTrigger EventName="Click">
   19                         <Interactivity:InvokeDataCommand Command="{Binding MacOsXCommand}" />
   20                     </i:EventTrigger>
   21                 </i:Interaction.Triggers>
   22             </Button>
   23             <TextBlock Height="43" HorizontalAlignment="Center" Margin="0,0,0,25" VerticalAlignment="Bottom" FontSize="24" Text="Lequel préférez-vous ?" TextWrapping="Wrap"/>
   24             <TextBlock Height="15" HorizontalAlignment="Left" Margin="8,8,0,0" VerticalAlignment="Top" Width="85" FontWeight="Bold" Foreground="Red" Text="PanicModule" TextWrapping="Wrap"/>
   25         </Grid>
   26     </Border>
   27 </UserControl>

Et voici le code du ViewModel :

    1 public class PanicViewModel
    2 {
    3     private readonly IEventAggregator _eventAggregator;
    4 
    5     public PanicViewModel(IPanicView view, IEventAggregator eventAggregator)
    6     {
    7         if (view == null) throw new ArgumentNullException("view");
    8         if (eventAggregator == null) throw new ArgumentNullException("eventAggregator");
    9 
   10         this._eventAggregator = eventAggregator;
   11 
   12         this.View = view;
   13 
   14         this.LinuxCommand = new DelegateCommand<object>(this.OnLinuxCommand);
   15         this.MacOsXCommand = new DelegateCommand<object>(this.OnMacOsXCommand);
   16 
   17         this.View.ViewModel = this;
   18     }
   19 
   20     public IPanicView View { get; set; }
   21     public ICommand LinuxCommand { get; set; }
   22     public ICommand MacOsXCommand { get; set; }
   23 
   24     private void OnMacOsXCommand(object obj)
   25     {
   26         //Arf, c'est quoi ca Mac Os X ? On le trouve pas...
   27         this._eventAggregator.GetEvent<ShowErrorRequiredEvent>().Publish(new KeyNotFoundException("http://www.developpez.net/forums/d788445/club-professionnels-informatique/actualites/apple-nest-quune-simple-erreur-darrondi-linformatique-selon-microsoft/"));
   28     }
   29 
   30     private void OnLinuxCommand(object obj)
   31     {
   32         //Arf, Linux mais c'est trop gros ça !
   33         this._eventAggregator.GetEvent<ShowErrorRequiredEvent>().Publish(new OutOfMemoryException("http://pro.01net.com/editorial/506405/dapres-linus-le-noyau-linux-est-bouffi-et-enorme/"));
   34     }
   35 }

Grâce à l’EventAggregator, notre ViewModel est découplé totalement du service Prompt, il publie simplement une demande d’affichage d’exception en fonction d’un bouton cliqué par l’utilisation. Pratique n’est-ce pas ? En plus, on respecte totalement le pattern MVVM…

Le module Question est très proche de celui-ci, par contre celui est un peu plus couplé au service de prompt, en effet pour la démo j’ai préféré vous montrer les deux possibilités, injection du service ou EventAggregator. Il est envisageable que le service de prompt intercepte des événements pour afficher une MessageBox, je vous laisse le faire. Pratiquer, c’est apprendre.

Ce module pose simplement une question « Allez-vous installer Windows 7 ? » une question simple dont la réponse est évidente, mais on la pose quand même pour la démo

    1 <UserControl
    2     xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" 
    3     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" 
    4     xmlns:d="http://schemas.microsoft.com/expression/blend/2008" xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006" xmlns:i="clr-namespace:System.Windows.Interactivity;assembly=System.Windows.Interactivity" xmlns:Interactivity="clr-namespace:Expression.Samples.Interactivity;assembly=Expression.Samples.Interactivity" x:Class="PromptWithPrism.Modules.Question.QuestionView" 
    5     Width="640" Height="240" mc:Ignorable="d" Background="AliceBlue">
    6     <Border x:Name="LayoutRoot" Background="White" CornerRadius="10" BorderThickness="1" BorderBrush="#FF7C7C7C">
    7         <Grid>
    8             <Button Height="40" HorizontalAlignment="Center" VerticalAlignment="Center" Width="113" Content="Une question ?">
    9                 <i:Interaction.Triggers>
   10                     <i:EventTrigger EventName="Click">
   11                         <Interactivity:InvokeDataCommand Command="{Binding AskQuestionCommand}" />
   12                     </i:EventTrigger>
   13                 </i:Interaction.Triggers>
   14             </Button>
   15             <TextBlock Margin="0,0,0,42" VerticalAlignment="Bottom" Text="{Binding Conclusion}" TextWrapping="Wrap" HorizontalAlignment="Center" Height="20"/>
   16             <TextBlock Height="15" HorizontalAlignment="Left" Margin="8,8,0,0" VerticalAlignment="Top" Width="102" FontWeight="Bold" Foreground="Red" Text="QuestionModule" TextWrapping="Wrap"/>
   17         </Grid>
   18     </Border>
   19 </UserControl>

Enfin la partie du ViewModel utilisant le service Prompt :

    1 private void AskQuestion(object obj)
    2 {
    3     this._promptService.ShowMessageBox("Permettez moi une question.", "Allez-vous installer Windows 7 ?", MessageBoxButtons.YesNoCancel, MessageBoxIcon.Question, this.AskQuestionCompleted);
    4 }
    5 
    6 private void AskQuestionCompleted(MessageBoxResult result)
    7 {
    8     switch (result)
    9     {
   10         case MessageBoxResult.Yes:
   11             this.Conclusion = "Merci  ";
   12             break;
   13         case MessageBoxResult.No:
   14             this.Conclusion = "L'essayer c'est l'adopter, alors au moins essayez le !";
   15             break;
   16         default:
   17             this.Conclusion = "Prenez une décision, n'attendez pas !";
   18             break;
   19     }
   20 }

Cette utilisation de notre service est plus simple, mais moins bonne en terme de couplage entre les modules.

Résultat

Merci de ne pas prendre au sérieux le module Panic

Vous pouvez télécharger la solution complète dans mon repository : http://c0ding.fr/repository/.net/Silverlight/

Pour conclure, nous avons vu qu’il est nécessaire de dédier un service à l’affichage des prompts pour respecter le pattern MVVM. Il ya plusieurs possibilités, notamment celle de Thomas Lebrun qui a comme avantage d’utiliser aucune libraire ou celle que je vous ai présentée qui exploite les fonctionnalités de Prism. J’espère que cet article vous a plus.

À bientôt.

Publié dans .NET, Développement, Silverlight.

Classé dans .NET, Injection de dépendances, Prism, Prompt, Silverlight, Silverlight 3.

Aucun commentaire

0 réponses

Suivez la conversation, abonnez-vous au flux RSS des commentaires..

« En bref… Microsoft Student Partner En bref… Utiliser votre propre URL pour votre OpenID »