Freigeben über

Tutorial Silverlight 4 WCF RIA Services avec 0 ligne de code

  • Artikel

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

Comments

  • Anonymous
    February 22, 2010
    Punaise ! 0 ligne de codes ! Le contrôle côté client automatique (pour le varchar 15) est énorme aussi. Merci pour cette démo ! Sans rapport, par simple curiosité, connais tu la library Reactive Extensions (Rx) pour le devlpmt async ? Si oui, l'as tu déjà testé ? je ne trouve pas beaucoup d'article à ce sujet.

  • Anonymous
    February 22, 2010
    Hello Nicolas, Merci pour ton retour. :) Non, je ne connais pas cette librairie. Désolé. Pourquoi t'intéresses-tu à cette librairie particulière ? Bye, David

  • Anonymous
    March 05, 2010
    Vraiment sympa comme technique de développement !!! Par contre ça n'a l'air de fonctionner qu'avec SQL Server ? Mais ce n'est qu'une beta, est ce que sur la version finale on peut espérer le support de n'importe quel driver ODBC ? En tout cas merci pour t'as demo !!

  • Anonymous
    March 08, 2010
    Bonjour Sebastien, Dans ma démo, j'utilise Entity Framework qui fonctionne à base de providers. Nous livrons par défaut un provider pour SQL Server (normal ! ;)) mais il en existe (des payants) pour Oracle et mySQL par exemple. Ensuite, rien ne vous oblige à utiliser Entity Framework non plus. Le pattern WCF RIA Services est ouvert et peut tout à fait consommer votre propre couche d'accès aux données (à base d'ADO.NET), vos objets, des services existants, etc. Donc, oui, si vous le voulez vous pouvez réexposer n'importe quelle source de données. Par contre, vous n'aurez pas forcément le même niveau de productivité que je montre dans cette série de posts. Malgré tout, vous retrouvez une grande partie des intérêts de RIA Services: simplification de la communication asynchrone client RIA/Serveur, projection des règles métiers, etc. Bye, David

  • Anonymous
    March 22, 2010
    The comment has been removed

  • Anonymous
    March 22, 2010
    The comment has been removed

  • Anonymous
    March 27, 2010
    The comment has been removed

  • Anonymous
    March 27, 2010
    Désolé du dérangement, j'ai fini par tout désinstaller et réinstaller avec les configuration par défaut, j'avais installer VS 2010 sur le D: et maintenant qu'il est installé sur %systemdrive% tout fonctionne correctement. Bon Week End.

  • Anonymous
    March 29, 2010
    Bonjour Vladimir, Merci pour votre retour et content que vous ayez trouvé par vous même ! :) Bye, David

  • Anonymous
    March 31, 2010
    Merci pour tout vos tutoriaux! Vraiment génial. Je me demandais si avec SL4 et le nouveau RIA services il serait possible d'avoir du "push" a partir de DB vers le client? En d'autre mots est-il possible d'implanter un "two way binding" du contrôle jusqu'à la DB via RIA Service. Il me semble que ce type de binding ne fonctionne que pour du binding entre composante. EX. Un datagrid et son dataform... Est-ce que quelqu'un a déjà implentaer une classe qui pourrait faire du "polling" de la DB pour voir si une collection est "dirty" ? Merci

  • Anonymous
    September 09, 2010
    Bonjour, J'ai essayé d'adapter sur ma propre BDD SQL Server 2005 et lorsque je lance mon client j'ai l'erreur : "System.ServiceModel.DomainServices.Client.DomainOperationsException: Load operation failed for query 'GetCustomers. Le serveur distant a retourné une erreur: Not Found.'" Quelqu'un peut-il m'aider.

  • Anonymous
    November 14, 2010
    tu n'as pas du créer tes table avec le shémat DBO

  • Anonymous
    December 27, 2010
    Super Tutorial David, Merci. Pourquoi le champ de type date ne se centre-t-il pas verticalement, contrairement à ce qui est indiqué par défaut dans la configuration et contrairement aux autres champs ?

  • Anonymous
    March 11, 2011
    Bonsoir David,je voulais savoir comment faire des requetes de suppression surtout plusieurs suppressions en meme temps en appuyant sur la touche SUP.Si qqn a une idee,merci d'avance

  • Anonymous
    June 30, 2011
    Bonjour, J'ai l'erreur suivante si ma source de données est une vue SQL Server, au lieu d'une table : "Load operation failed for query 'GetV2PresenceSce'. La référence d'objet n'est pas définie à une instance d'un objet." où v2PresenceSce est le nom de ma vue. Merci pour votre réponse. Anne-Marie

  • Anonymous
    March 12, 2012
    Bonjour, je me demande si on peut utliser le WCF Ria services pour acceder à une base de données distante à partir d'un windows phone? et quelle methode dois_je aborder ??

  • Anonymous
    March 12, 2012
    Bonjour Ines, Oui, c'est possible. Cela fait d'ailleurs parti d'une autre série de tutoriaux que j'ai fait à ce sujet. Je parle de Windows Phone ici : blogs.msdn.com/.../comment-exposer-une-application-wcf-ria-services-224-d-autres-clients-soap-endpoint-3-5.aspx Bye, David

  • Anonymous
    July 29, 2012
    bonjour j'arrive pas a avoir la liste de table dans le name services dans visual basic

  • Anonymous
    August 27, 2012
    Bonjour à tous, je suis entrain de développer une application web en silverlight 5 et j'ai réussi à afficher les données de ma table dans une GridView   Mais moi j'aimerais bien savoir comment je peux faire un filtre par exemple afficher les noms des clients dans un listBox  j'ai besoin de vous  aide et Merci d'avance

  • Anonymous
    July 02, 2013
    Bonjour, une petite question es que cette méthode est aussi valable avec une application WinRT?