Tutorial Silverlight 4 WCF RIA Services avec 0 ligne de code

Article mis à jour : mai 2010 pour la sortie de Silverlight 4 RTW et WCF RIA Services RTW

Pendant la plénière du 1er jour aux Techdays 2010, j’ai relevé en direct le défi de créer une application RIA en Silverlight 4 “from scratch” (depuis 0 donc) en moins de 5 minutes. C’était l’occasion de découvrir le nouvel outillage proposé par Visual Studio 2010 à ce sujet. Voici les étapes à suivre pour le refaire à la maison. Vous pouvez suivre également la vidéo de la plénière pour le refaire.

Pré-requis : il vous faudra Visual Studio 2010 accompagné de Silverlight 4/WCF RIA Services. Vous pouvez trouver l’ensemble des ressources nécessaires en téléchargement ici : https://www.silverlight.net/getstarted/silverlight-4/#tools

Pour une introduction générale à WCF RIA Services (ex .NET RIA Services), n’hésitez pas à lire cet ancien billet. C’est également le début d’un tutorial en 4 étapes si vous souhaitez tester une partie de ce framework avec Visual Studio 2008 et Silverlight 3. Vous pouvez également suivre ce même tutorial avec Visual Studio 2010/Silverlight 4 si vous souhaitez un peu comprendre la magie cachée derrière le framework WCF RIA Services.

Note : dans un 2ème billet, nous verrons comment aller un peu plus loin toujours avec la même simplicité.

Nous allons partir également de la base SQL Express 2008 ci-dessous :

Donc prenez bien soin de la récupérer pour commencer ce tutoriel. Le but du jeu : nous avons une base de données contenant une liste de films, des acteurs jouant dans ces films et les réalisateurs de ces mêmes films. Nous allons afficher la liste des acteurs sous la forme d’une grille de manière relativement riche en ne tapant aucune ligne de code. Merci Visual Studio 2010 et RIA Services !

1 – Lancez Visual Studio 2010, créez un projet Silverlight de type “Business Application” et nommez le “DemoKeynoteTechdays

demokeynotetd_001

2 – Nous nous retrouvons donc avec une solution contenant 2 projets : la partie serveur (ASP.NET) nommée “DemoKeynoteTechdaysRC.Web” et la partie cliente (Silverlight) nommée “DemoKeynoteTechdays”. Côté serveur, il nous faut une base de données, une couche d’accès aux données et un moyen de se connecter à cette couche d’accès aux données depuis le client Silverlight. Commençons par le plus simple : drag’n’droppez les 2 fichiers (MDF et LDF) contenus dans le fichier ZIP à télécharger plus haut dans le répertoire “App_Data” de votre couche serveur :

demokeynotetd_002

Si vous double-cliquez sur “FilmsTechdays2010.mdf”, vous avez la possibilité d’explorer la base de données d’exemples dans le “Server Explorer” :

demokeynotetd_003

Vous pouvez même générer un diagramme dans la partie “Database Diagrams” et vous arriverez à ce résultat :

demokeynotetd_004

J’étais parti d’ici dans la démo des TechDays.

3 – Maintenant que nous avons notre base de données, il nous faut générer une couche d’accès aux données. Nous allons automatiser la création de cette couche d’accès aux données en faisant appel à Entity Framework (EF). EF va s’occuper de générer un mapping objet relationnel à partir de nos tables. On pourra alors discuter avec des entités plutôt que de s’occuper à parler le langage SQL pour la manipulation de données. Ajoutez un nouvel élément de type “ADO.NET Entity Data Model” à la partie serveur et nommé le “FilmsModel.edmx”. Ce 1er écran de l’assistant va apparaître :

demokeynotetd_005

Indiquez que vous souhaitez générer un modèle depuis une base de données existante. A noter que depuis Visual Studio 2010/.NET 4, nous avons Entity Framework v4 qui peut générer un modèle pouvant ensuite être poussé en base de données :

demokeynotetd_006

Faites “Next” (en mode IT Pro ;-)) jusqu’à cet écran :

demokeynotetd_007

Choisissez toutes les tables sauf la table système. Vous aurez alors ce diagramme de présenté dans le concepteur d’entity framework :

demokeynotetd_008

Notez que la table intermédiaire entre Films et Acteurs a été masquée. La relation N-N est bien modélisée.

Notre couche d’accès aux données a donc été générée automatiquement. Compilez la solution (touche F6) avant d’aller plus loin.

4 – La dernière étape de la partie serveur consiste à créer un service d’accès à la couche de données. Vous connaissez peut-être déjà les Web Services ou les services WCF. Nous allons partir sur l’utilisation de WCF RIA Services (ex .NET RIA Services) pour rendre accessible notre couche de données à des clients distants, en l’occurrence ici Silverlight. Pour cela, ajoutez un nouvel élément au projet serveur de type “Domain Service Class”, nommez le “FilmsService.cs” puis cliquez sur “Add” :

demokeynotetd_009

Ensuite, c’est à ce niveau que vous précisez les entités que vous souhaitez rendre accessibles côté client Silverlight. Cochez toutes les entités pour les avoir au moins en lecture puis par exemple autorisez l’édition sur les acteurs :

demokeynotetd_010rc 

Note : pour ceux qui ont déjà testé les versions précédentes, vous noterez l’apparition d’une nouvelle case “Expose OData endpoint”. Cela va nous permettre de ré-exposer notre source de données à d’autres clients (Ajax, PHP, Windows Phone 7, etc.) en utilisant le protocole OData. Si vous désirez en savoir davantage sur ce sujet, rendez-vous sur cet article : Comment exposer une application WCF RIA Services à d’autres clients : OData endpoint (2/5)

Cliquez sur “Ok” et à nouveau du code est généré automatiquement pour vous. Avant d’aller plus loin, compilez votre solution (F6). Nous avons alors fini de nous occuper de la partie serveur. Pour l’instant, toujours pas la moindre ligne de code tapée avec nos mimines. De vrais fainéants dirait mon chef Eric !

5 – Rendez-vous désormais dans la partie cliente Silverlight, le projet “DemoKeynoteTechdays”. Ouvrez la vue “Home.xaml” située sous le répertoire “Views”. Nous allons simplifier cette vue au maximum. Retirez tout le XAML présent entre ces 2 balises : <Grid x:Name="LayoutRoot"></Grid>

6 – Affichez les sources de données disponibles côté client en vous rendant dans le menu “Data –> Show Data Sources”

demokeynotetd_011

Vous devriez alors voir apparaitre ce genre de résultat :

demokeynotetd_012

7 – C’est à ce niveau que nous allons indiquer les champs que nous souhaitons afficher ou non ainsi que la manière de les afficher. Vous pouvez déjà observer que la propriété “DateNaissance” a automatiquement été mappée sur un contrôle de type “DatePicker”. C’est déjà sympa. Ce que nous allons indiquer également, c’est que nous ne souhaitons pas afficher la propriété “Id” à nos utilisateur et que nous voulons afficher la photo de l’acteur directement plutôt qu’une chaîne de caractères indiquant l’Url vers cette photo. Pour l’Id, cliquez sur la combobox et retenez le choix “None” :

demokeynotetd_013

Pour la propriété “UrlPhoto”, si le choix “Image” n’est pas encore disponible, prenez le choix “Customize” :

demokeynotetd_014

La fenêtre suivante apparaît. Cochez “Image” puis faites “Ok”.

demokeynotetd_015

Maintenant, vous pouvez mapper la propriété “UrlPhoto” à un contrôle de type “Image” :

demokeynotetd_016

8 – Notre source de données est configurée, nous pouvons la prendre et la drag’n’dropper sur notre formulaire Home :

demokeynotetd_017

Pour afficher la grille en pleine page, faites bouton droit sur la grille –> “Reset Layout” –> “All” :

demokeynotetd_018

9 – Il nous reste à définir l’ordre d’affichage des colonnes. Pour cela, cliquez sur “…” à côté de la propriété “Columns” de votre “DataGrid” :

demokeynotetd_019

Sur cet écran, choisissez l’ordre d’apparence de vos colonnes puis faites “Ok” :

demokeynotetd_020

Et voilà ! C’est terminé. Vous pouvez lancer l’ensemble en faisant “CTRL + F5” (sans debug) et vous obtiendrez ce résultat :

demokeynotetd_021

Vous pouvez jouer avec le contrôle calendrier pour modifier la date d’anniversaire. Testez aussi d’entrer plus de 15 caractères dans le prénom. Une règle de validation est automatiquement appliquée côté client (sans aller/retour serveur). Elle a été déduite automatiquement depuis le schéma de la base de données précisant que le type était nvarchar(15). Rien ne sert donc de laisser l’utilisateur saisir plus de 15 caractères dans la zone de saisie.

demokeynotetd_022

Pour terminer, vous pouvez même installer l’application en dehors du navigateur en faisant bouton droit “Install DemoKeynoteTechdays Application onto this computer…” le tout sans installation de runtime supplémentaire sur le poste client !

Voilà, ça sera tout pour aujourd’hui. Vous avez vu, WCF RIA Services est quand même assez magique pour adresser facilement de nombreux scénarios. Nous rentrerons un peu plus en détails dans le post suivant pour ajouter du paging, une vue maître détail et la possibilité d’enregistrer les changements avec un minimum de sécurité.

David