Maîtriser Silverlight

Q : J’essaie de créer une application Silverlight métier, mais beaucoup d’exemples disponibles sont soit compliqués, soit inappropriés pour ce type d’application. Nous souhaitons qu’un utilisateur puisse sélectionner un type d’élément à ouvrir, qu’il affiche un écran de recherche, puis qu’il modifie les données, lesquelles peuvent être un enregistrement parent-enfant. Je vois des outils de démonstration qui semblent éliminer une grande partie du temps de développement, mais je ne comprends pas comment utiliser ces éléments ensemble. Ces outils sont-ils appropriés pour des applications réelles ou sont-ils uniquement bons pour les démos ?

R : Au fil des années, une multitude de produits de démonstration ont été présentés, mais de nombreux composants de l’actuel kit Silverlight peuvent faire gagner beaucoup de temps. Une partie de l’astuce consiste à intégrer suffisamment de flexibilité afin que vous puissiez employer des techniques de développement automatisées au moment et dans les cas opportuns. Par exemple, vous pouvez générer nombre de vos écrans automatiquement au début du développement, puis en personnaliser certains d’eux, à mesure que vous approchez de la version définitive de l’application. Nous allons voir comment combiner la navigation, les fenêtres enfant et le formulaire de données (DataForm) pour créer une interface utilisateur fort utile, avec notamment un affichage maître/détails des données. Cette interface ne requiert pas de code personnalisé, mais vous pouvez lui ajouter des contrôles utilisateur personnalisés lorsque l’approche par défaut ne fonctionne pas. Vous-même ou un concepteur graphique pouvez améliorer l’aspect général car ces contrôles se prêtent bien aux effets de style.

Pour mettre l’accent sur une association intelligente de parties d’interface utilisateur personnalisées et automatiques, je vais ignorer l’étape du pipeline et prendre l’hypothèse d’un objet de données tout simple et d’un service local qui gère les opérations sur les données. Nous allons aussi passer l’étape de la création des menus et des commandes. Nous allons voir une application avec un lien hypertexte servant à accéder à une page d’édition. Lorsque l’utilisateur sélectionne le lien, une boîte de dialogue de recherche pseudo-modale apparaît et permet un futur filtrage des données avant l’affichage complet de la page d’édition. Les affichages de recherche et d’édition sont basés sur le contrôle DataForm. Ce dernier a été conçu pour une utilisation avec RIA Services, mais l’exemple illustre sa mise en oeuvre avec un autre pipeline (fictif ). Peter Vogel propose une introduction au contrôle DataForm dans un article précédent (« Silverlight 3 intègre le développement d’applications orientées données », http://www.itpro.fr, Club Abonnés, IT Pro Magazine, novembre 2009).

J’utiliserai également le Managed Extensibility Framework (MEF) afin d’introduire de la flexibilité dans l’application résultante. Lors de la mise en place des composants clés de l’application, notamment les agencements de données, vous pouvez employer une solution généralisée, sauf lorsqu’un comportement personnalisé est nécessaire. Cet exemple a été créé dans Visual Studio 2008 avec Silverlight 3, la version de novembre du Silverlight Toolkit et MEF Preview 8 (téléchargée après la résolution de bug du 11 novembre 2009). Je commence par créer une application de navigation Silverlight (Silverlight Navigation Application), laquelle est disponible sous forme de type de projet après l’installation du Silverlight Toolkit. Elle crée une page avec un cadre de navigation utilisable pour vous déplacer dans l’application. Si vous travaillez dans le navigateur, ce contrôle fournit une meilleure interactivité. Même si cette page a d’emblée belle allure, sa véritable valeur tient à son utilisation en tant que page maître. Vous pouvez ajouter des liens, un menu sous forme d’arborescence et d’autres contrôles pour manipuler la zone de contenu. Ces liens apparaîtront au cours de la navigation et lui conféreront un comportement, du type précédent et suivant. Vous pouvez aussi enrichir visuellement la page maître afin de conférer un aspect exclusif à votre application. L’ajout d’un lien à la page permet à l’utilisateur de lancer la navigation :

<HyperlinkButton Style=»{StaticResource LinkStyle}» NavigateUri=»/Invoice»
TargetName=»ContentFrame» Content=»invoice»/>

TargetName pointe vers un cadre Silverlight qui gère la navigation URI, y compris le mappage. Le mappage évite aux emplacements physiques codés en dur d’apparaître dans tout le code source de votre application et affiche les URI abstraits et non physiques à l’utilisateur final :

<navigation:Frame.UriMapper>
<uriMapper:UriMapper> <uriMapper:UriMapping Uri=»» MappedUri=»/Views/Home.xaml»/>
<uriMapper:UriMapping Uri=»/Invoice»
MappedUri=»/Views/GeneralForm.xaml?biz=Invoice»/>
<uriMapper:UriMapping Uri=»/{page- Name}»
MappedUri=»/Views/{pageName}.xaml»/>
</uriMapper:UriMapper>
</navigation:Frame.UriMapper>

La première entrée mappe le contenu par défaut, la deuxième le contenu explicite et la troisième, le contenu restant.

Dès que l’utilisateur sélectionne le lien hyper-texte, la navigation vers la page est automatique. Il s’agit d’une page de navigation Silverlight (Silverlight Navigation Page) créée via la boîte de dialogue Add New Item. Le paramètre de requête est disponible dans la méthode NavigateTo de la page cible :

Protected Overrides Sub OnNavigatedTo(ByVal e As
NavigationEventArgs)
Dim argName = «biz»
If NavigationContext. QueryString.
ContainsKey(argName) Then _bizClassName =
NavigationContext. QueryString(argName)

Le type cible de l’argument biz est utilisable avec un peu de MEF pour sélectionner une fenêtre de recherche. Une fabrique MEF peut activer une fenêtre de recherche personnalisée s’il en existe une et, dans le cas contraire, employer une recherche par défaut. Qu’elle soit standard ou personnalisée, la fenêtre de recherche doit implémenter une interface personnalisée (ISearchForm) et être une ChildWindow pour permettre l’affichage modal. La fenêtre de recherche est stockée deux fois, dans un champ de chaque type :

_searchForm = _searchFactory. _
GetItem(_bizClassName)
_searchChild = TryCast( _
_searchForm, ChildWindow)
If _searchChild Is Nothing Then
Throw New InvalidOperationException( _
«Must be child window») End If

Silverlight diffère de WinForm car il ne bloque pas complètement la thread lorsqu’une boîte de dialogue est affichée. Cela requiert que la boîte de dialogue respecte un modèle asynchrone et déclenche un événement lorsqu’elle est fermée par l’utilisateur :

AddHandler _searchChild.Closed, _
AddressOf Search_Closed
_searchForm.Show(_bizClassName)
End If
End Sub

Une fois la fenêtre de recherche fermée, le contrôle retourne au gestionnaire d’événements Search_Closed. Cette méthode vérifie le résultat de la boîte de dialogue pour déterminer de quelle manière l’utilisateur a fermé la fenêtre. S’il ne s’agit pas d’une annulation, une autre fabrique MEF essaie de trouver un contrôle utilisateur edit personnalisé. Si elle en trouve un, il s’affiche et remplit la zone de contenu de cette page :

If _searchChild.DialogResult Then
Dim edit = TryCast(_editFactory.GetItem( _
_bizClassName), UserControl)
If edit IsNot Nothing Then
Me.dataContentBorder.Child = edit
Else
Me.dataContentBorder.Child = GetDataForm()
End If
Else
Me.NavigationService.GoBack()
End If

Si aucun contrôle utilisateur edit personnalisé n’est disponible, la méthode GetDataForm crée un contrôle utilisateur DataForm standard et définit un gestionnaire d’événements pour l’événement Auto- GeneratingField. Une fabrique MEF crée le service permettant de récupérer les données :

Private Function GetDataForm() As UIElement
Dim df = New DataForm()
df.SetBinding(DataForm.ItemsSourceProperty, _
New Data.Binding())
AddHandler df.AutoGeneratingField, _
AddressOf DataForm_AutoGeneratingField
_bizService = _bizServiceFactory.GetItem( _
_bizClassName)
Dim items = _bizService.RetrieveList( _
_searchForm.Filter)
Me.DataContext = items
Return df
End Function