SharePoint 2010 & Visual Studio 2012–Step 5–Nouveautés & Ma première application Silverlight avec OData

Posted on Updated on

Bonjour à tous.

Encore un nouveau billet concernant les nouveautés de Visual Studio 2012 RC pour le développement SharePoint 2010. Petit rappel :

Nous allons rentrer plus en détail dans le développement avec la création d’un WebPart Silverlight permettant de requêter des données par le biais de OData.

Mais me direz-vous, qu’est-ce que OData ? Je vous conseille pour cela un peu de lecture glanée sur le Web :

Pour résumer, c’est la possibilité d’interroger des données au travers d’un WebService (http/https) via un protocole défini et standardisé retournant du JSON ou ATOM (du XML de reste). Je vous laisse vous documenter sur ce sujet.

Revenons à notre thèmes principal. Comment créer ce WebPart Silverlight, le packager et le déployer dans SharePoint 2010 en utilisant Visual Studio 2012. C’est ce que nous allons voir !

(Je précise que Silverlight n’est pas ma tasse de thé !)

1/ Créer le WebPart dans la solution.

Je vous rappelle que nous avions laissé la solution dans cet état au précédent billet :

100

Nous avons déjà créé une colonne de site, un content type et un modèle de bibliothèque de documents.

Pour créer notre WebPart Silverlight, commençons par faire un clic-droit sur le projet, puis “Add > New Item”

101

Dans la fenêtre qui s’ouvre, sélectionner “Silverlight WebPart” et nommons le “WPSilverlight” puis cliquer sur “Add” :

102

Une nouvelle fenêtre s’ouvre, sélectionner “Create a new…” si ce n’est pas déjà fait. Cela va créer un nouveau projet dans la solution actuelle, de type Silverlight qui abritera tout le projet permettant d’implémenter le contrôle Silverlight. Le projet sera compilé puis les binaires seront copiés dans la solution SharePoint automatiquement. Pratique !

On paramètre donc le nom du projet, le répertoire de création du projet, le langage (C#) puis la version de Silverlight (5.0 dans mon cas, 4.0 est aussi disponible). Puis cliquer sur “Finish” :

103

Après quelques secondes, le nouveau projet est créé et le designer Silverlight se charge :

104

106

Dans le projet SharePoint, une nouvelle fonctionnalité (feature) est créée et référencera tous les fichiers utiles pour notre projet Silverlight en particulier les fichiers XML permettant de référencer notre WebPart dans SharePoint. On retrouve donc le fichier “Elements.xml” et “WPSilverlight.webpart” dans cette feature :

107

Le fichier “Elements.xml” va permettre de déclarer le que SharePoint doit utiliser le fichier “WPSilverlight.webpart” mais également le fichier XAP produit par le projet Silverlight :

108

Et dans le fichier “WPSilverlight.webpart” on déclare à SharePoint comment déployer notre WebPart contenu dans la solution. On va par exemple indiquer dans quelle catégorie placer le WebPart, ses dimensions par défaut, son nom dans la galerie de WebParts ou encore un éventuel message d’erreur qui pourra apparaitre lorsque l’utilisateur ne parviendra pas à ajouter ce composant sur une page :

109

2/ Voyons maintenant ce fameux projet Silverlight :

112

Un bon nombre de références sont déjà ajoutées au projet, essentielles aux WebParts Silverlight pour SharePoint 2010.

Cependant un certain nombre de références vont nous être utilises afin de requêter en OData des données provenant de SharePoint. Nous allons donc ajouter deux références au projet Silverlight :

  • System.Windows.Data
  • System.Data.Services.Client

Pour cela, clic-droit sur le répertoire “References” dans le projet Silverlight puis “Add Reference” :

113

Nous allons rechercher nos deux références dans les Assemblies déjà disponibles sur le serveur :

114

115

116

117

118

3/ Notre projet référence maintenant les bonnes Assemblies. Il va falloir ajouter une référence vers le WebService SharePoint 2010 afin de requêter ces données (créer la DataSource).

Pour cela, nous allons ajouter un “Service Reference”. Clic-droit sur le projet, “Add Service Reference” :

119

Une fenêtre s’ouvre où nous allons saisir l’URL du WebService en question… nous ne la connaissons pas encore, mais cela reste simple ! Pour cela, nous allons juste entrer l’URL de notre site SharePoint. Dans mon cas http://sp2010demo  et on clique sur “Go”. Visual Studio 2012 va rechercher tout seul le service qui doit être exposé par SharePoint :

120

Une fois trouvé, Visual Studio va rajouter seul le bout d’URL manquant, vous n’avez rien à faire. Il va donc rajouter : /_vti_bin/ListData.svc et présenter le service (Panel de gauche) disponible. Il vous suffit de nommer votre nouveau service (“ServiceReference”) et cliquer sur “OK”.

121

La référence au service est bien ajoutée au projet Silverlight dans la solution :

122

4/ Nous allons essayer de compiler la solution afin de vérifier qu’il n’y a aucun problème. Dans mon cas j’ai quelques centaines d’erreurs qui remontent (337 pour être exact) !

123

Rien de grave, en fait en ajoutant nos références aux Assemblies, le compilateur s’y perd un peu mais rien de dramatique. Afin de supprimer ces erreurs, il vous suffira de supprimer deux références qui ont été ajoutées à la création du projet :

  • Microsoft.Data.OData.SL
  • Microsoft.Data.Services.Client.SL

On sélectionne donc ces deux références et on les supprime :

124

125

126

On compile, pas d’erreur… c’est la fête :

127

5/ La référence au service de requêtage des données est ajoutée, nous allons maintenant créer la fameuse DataSource qui nous permettra de “binder” les données provenant de SharePoint à un contrôle Silverlight de manière automatique. Pour cela, on sélectionne la référence au service puis on se dirige sur le menu “DATA” puis “Show Data Sources” :

128

Sur la gauche, une boite à outils s’ouvre présentant la DataSource récupérer par la référence au WebService SharePoint et on voit immédiatement les listes et bibliothèques SharePoint de notre site apparaitre :

129

Et là… rien de plus simple ! Ouvrons notre fichier MainPage.xaml contenant la fenêtre principale de notre application Silverlight…

130

On choisit une liste dans la DataSource (dans mon cas “Premiereliste” qui est l’instance de liste créée lors du déploiement de ma solution SharePoint, à partir du modèle) :

131

Un coup de Drag&Drop (glisser-déposer… Clignement d'œil) et c’est gagné !

132

Immédiatement, Visual Studio ajoute une DataGrid “bindée” sur notre DataSource dans la fenêtre du designer Silverlight.

il nous reste à fixer les dimensions, aligner, … faire du beau quoi !

133

Oh que c’est beau…

6/ Et ce n’est pas encore fini, maintenant il nous reste à mettre en place le mécanisme de chargement Asynchrone de notre DataGrid. Pour cela, nous allons faire un tout petit peu de code.

Ouvrons donc le fichier C# associé à notre MainPage.xaml (F7 depuis le designer Silverlight).

134

Première chose, ajouter les “usings” adéquats :

  • using SilverlightProject.ServiceReference //(référence vers le service créé tout à l’heure)
  • using System.Windows.Data
  • using System.Data.Services.Client

135

On enregistre, compile. Tout est ok.

Ensuite nous allons créer 3 attributs à la classe :

  • private IntranetDataContext context;
  • private CollectionViewSource collviewsource;
  • DataServiceCollection<PremiereListeItem> premierelistitems = new DataServiceCollection<PremiereListeItem>();

136

Et enfin implémenter deux méthodes, celle proposée par Visual Studio (UserControl_Loaded) puis dans un seconde temps une deuxième (premierelistitems_LoadCompleted).

La première sera appelée lorsque le UserControl Silverlight aura été chargé (à la fin du chargement du contrôle) et la seconde à la fin du chargement des données depuis la DataSource et qui bindera les données avec le contrôle.

Je ne détaille pas le code, ce n’est pas vraiment pertinent pour l’exemple.

137

private void UserControl_Loaded_1(object sender, RoutedEventArgs e)
{
    context = new IntranetDataContext(new Uri("http://sp2010demo/_vti_bin/ListData.svc"));
    if (!System.ComponentModel.DesignerProperties.GetIsInDesignMode(this))
    {
       collviewsource = (System.Windows.Data.CollectionViewSource)this.Resources["premiereListeViewSource"];
       premierelistitems.LoadCompleted += new EventHandler<LoadCompletedEventArgs>(premierelistitems_LoadCompleted);
       premierelistitems.LoadAsync(context.PremiereListe);
    }           
}
private void premierelistitems_LoadCompleted(object sender, LoadCompletedEventArgs e)
{
    if (e.Error == null)
    {
       collviewsource.Source = premierelistitems;
    }
    else
    {
       MessageBox.Show(string.Format("Une erreur s'est produite : {0}", e.Error.Message));
    }
}

Bien sûr il faut compiler. Tout doit être Ok. Il nous maintenant à déployer sur notre site SharePoint 2010. Mais avant cela nous allons vérifier que le debug pour les application Silverlight est bien activé. Pour cela, il faut se positionner sur le projet SharePoint, clic-droit, “Properties” :

138

Dans la partie SharePoint, il faut vérifier que la checkbox “Enable Silverlight debugging…” soit bien cochée. On sauve, compile.

139

Puis on déploie comme vu dans les précédents billets (F5 pour debugger) :

140

6/ Le navigateur s’ouvre sur l’accueil de notre site SharePoint. Il nous faut éditer la page d’accueil pour ajouter le composant WebPart :

144

Dans le ruban, Insérer > Composant WebPart :

145

Dans la galerie de WebParts, le notre apparait bien dans la section “Custom” => SharePointProject1 – WPSilverlight. On cliquer sur “Ajouter” :

146

Le WebPart est ajouté :

147

On sauvegarde la page :

148

7/ Aucune donnée n’apparait. Normal, la liste est vide ! Ajoutons donc un petit document de test :

149

150

151

152

Revenons sur la page d’accueil :

153

Le document que nous venons d’ajouter apparait bien. Vous pouvez directement debugger votre projet Silverlight depuis Visual Studio 2012 au besoin.

Plutôt simple non ? qu’est-ce qu’à ajouté Visual Studio 2012 sur ce mini-développement ? Principalement de nouvelles interface qui ont été intégrées au niveau des DataSources. On peut maintenant requêter très facilement des données SharePoint au travers des services OData et utiliser la source de données produite dans plusieurs type de projet. Cela ne se limite pas au Silverlight. En effet, on pourrait très bien créer une application cliente Métro/WPF qui présenterait ces données de la même manière. Un bon point pour VS2012 !

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s