Le concept de Web Part est très connu sous SharePoint 2007, mais il est relativement inconfortable. Effectivement, sous SharePoint 2007, rien n'était prévu pour faire "le design" de notre Web Part de manière performante. Effectivement, on était obligé de taper tout le code relatif à l'affichage de la Web Part.

Avec SharePoint 2010, ce problème a été résolu par l'introduction d'un nouveau type de projet : les Visual Web Part. Après un rapide coup d'œil à l'architecture de ce type de projet, on se rend vite compte que c'est une simple "adaptation" d'une Web Part classique. Nous allons voir cela en nous basant sur exemple simple.

Exemple

Commencez en ouvrant Visual Studio 2010 et créez un projet du type Empty SharePoint Project et nommez le AreaProg.VisualWebParts.Example1 :



Définissez cette solution comme étant une solution de ferme (farm-solution). Effectivement, une Visual Web Part contiendra des fichiers à déployer dans certains dossiers "systèmes" de SharePoint, votre solution ne pourra donc être "sandboxée". Cliquez maintenant avec le bouton droit de votre souris sur votre projet et choisissez Add > New Item. Dans la fenêtre qui apparait, choisissez Visual Web Part et nommez la VWPExample :



L'architecture ainsi générée est la suivante :



Nous allons renommer la feature pour lui donner un nom plus explicite. Cliquez donc sur le dossier Feature1 et renommez la en VWPExample. Penchons nous maintenant sur l'architecture de notre Web Part. Premièrement, nous avons le fichier Elements.xml contenant le code suivant :

<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/" > <Module Name="VWPExample" List="113" Url="_catalogs/wp"> <File Path="VWPExample\VWPExample.webpart" Url="VWPExample.webpart" Type="GhostableInLibrary" > <Property Name="Group" Value="Custom" /> </File> </Module> </Elements>

Ce code XML va nous permettre d'uploader le fichier .webpart dans la galerie des Web part du site. Ainsi, celle-ci pourra être proposée lorsque l'on voudra ajouter une Web Part sur une page. Cette liste est du type 113 (attribut List) et son chemin d'accès est _catalogs/wp (attribut Url).

La seule propriété que nous allons modifier est celle-ci :

<Property Name="Group" Value="Custom" />

Cette propriété permet de définir le nom du dossier qui contiendra votre Web Part dans la liste des Web Parts. Remplacez donc la valeur actuelle par AreaProg. Au final, votre fichier ressemblera à :

<?xml version="1.0" encoding="utf-8"?> <Elements xmlns="http://schemas.microsoft.com/sharepoint/" > <Module Name="VWPExample" List="113" Url="_catalogs/wp"> <File Path="VWPExample\VWPExample.webpart" Url="VWPExample.webpart" Type="GhostableInLibrary" > <Property Name="Group" Value="AreaProg" /> </File> </Module> </Elements>

Le fichier suivant sur lequel nous allons nous pencher est VWPExample.webpart. Ce fichier va contenir la définition de la Web Part. Ce sera ce fichier qui sera uploadé dans la liste catalogs/wp à l'activation de la feature. Voici son contenu :

<?xml version="1.0" encoding="utf-8"?> <webParts> <webPart xmlns="http://schemas.microsoft.com/WebPart/v3"> <metaData> <type name="AreaProg.VisualWebParts.Example1.VWPExample.VWPExample, $SharePoint.Project.AssemblyFullName$" /> <importErrorMessage>$Resources:core,ImportErrorMessage;</importErrorMessage> </metaData> <data> <properties> <property name="Title" type="string">VWPExample</property> <property name="Description" type="string">My Visual WebPart</property> </properties> </data> </webPart> </webParts>

Nous avons tout d'abord la partie qui va contenir les métadonnées de la Web Part :

<metaData> <type name="AreaProg.VisualWebParts.Example1.VWPExample.VWPExample, $SharePoint.Project.AssemblyFullName$" /> <importErrorMessage>$Resources:core,ImportErrorMessage;</importErrorMessage> </metaData>

Le premier élément (type) va permettre d'indiquer le chemin de la classe qui sera attachée à la WebPart. Nous devons passer le chemin complet vers cette classe ; (namespace.classe), suivi d'une virgule suivie de la signature de la DLL contenant cette classe. Ici, étant donné que c'est la DLL qui résultera de la compilation de la solution courante, nous pouvons mettre $SharePoint.Project.AssemblyFullName$. Cette valeur sera automatiquement remplacée par la signature de la DLL lors de la compilation de notre solution.

L'élément importErrorMessage définit simplement le message d'erreur qui sera affiché si une erreur survient lors de l'importation de la WebPart. Nous avons ensuite deux propriétés de la Web Part :

<properties> <property name="Title" type="string">VWPExample</property> <property name="Description" type="string">My Visual WebPart</property> </properties>

La première propriété définit le titre qui sera affiché dans la liste contenant les WebPart alors que la deuxième propriété permet d'en définir la description. Modifiez ces deux propriétés de cette manière :

<properties> <property name="Title" type="string">Visual Web Part d'exemple</property> <property name="Description" type="string">Cette Web Part est un exemple développé pour le besoin d'AreaProg</property> </properties>

Vient ensuite le fichier VWPExample.cs. Celui-ci va contenir le code de la WebPart :

using System; using System.ComponentModel; using System.Runtime.InteropServices; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using Microsoft.SharePoint; using Microsoft.SharePoint.WebControls; namespace AreaProg.VisualWebParts.Example1.VWPExample { [ToolboxItemAttribute(false)] public class VWPExample : WebPart { // Visual Studio might automatically update this path when you change the Visual Web Part project item. private const string _ascxPath = @"~/_CONTROLTEMPLATES/AreaProg.VisualWebParts.Example1/VWPExample/VWPExampleUserControl.ascx"; public VWPExample() { } protected override void CreateChildControls() { Control control = this.Page.LoadControl(_ascxPath); Controls.Add(control); base.CreateChildControls(); } protected override void RenderContents(HtmlTextWriter writer) { base.RenderContents(writer); } } }

Vous remarquerez en premier lieu que cette classe dérive de WebPart. Nous avons ensuite cette ligne :

private const string _ascxPath = @"~/_CONTROLTEMPLATES/AreaProg.VisualWebParts.Example1/VWPExample/VWPExampleUserControl.ascx";

Pour la comprendre, il nous faut d'abord comprendre comment une WebPart est affichée. Pour faire simple, la fonction CreateChildControls va être appelée et se chargera de créer tous les contrôles qui seront affichés par la WebPart. Dans SharePoint 2007, c'est là qu'on définissait "l'interface graphique" de notre WebPart. Maintenant, nous avons ces trois lignes :

Control control = this.Page.LoadControl(_ascxPath); Controls.Add(control); base.CreateChildControls();

La première va charger le fichier ascx nommé VWPExampleUserControl.ascx. Si vous êtes un peu attentif, vous remarquerez que ce fichier est le dernier de notre arborescence que nous n'avons pas encore expliqué. Une fois ce contrôle chargé, nous l'ajoutons bêtement à la WebPart en l'ajoutant à la collection Controls. Nous appelons ensuite la fonction de la classe de base. Vous pouvez également supprimer la fonction RenderContents car elle ne nous servira à rien dans le cas présent.

Ceci nous amène au fichier VWPExampleUserControl.ascx. Comme nous l'avons dit tout à l'heure, ce fichier est un simple UserControl qui va contenir "l'interface graphique" de notre WebPart. Nous allons donc faire une WebPart très basique pour le montrer. Double-cliquez sur ce fichier pour obtenir ceci :

<%@ Assembly Name="$SharePoint.Project.AssemblyFullName$" %> <%@ Assembly Name="Microsoft.Web.CommandUI, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="SharePoint" Namespace="Microsoft.SharePoint.WebControls" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="Utilities" Namespace="Microsoft.SharePoint.Utilities" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Register Tagprefix="asp" Namespace="System.Web.UI" Assembly="System.Web.Extensions, Version=3.5.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35" %> <%@ Import Namespace="Microsoft.SharePoint" %> <%@ Register Tagprefix="WebPartPages" Namespace="Microsoft.SharePoint.WebPartPages" Assembly="Microsoft.SharePoint, Version=14.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %> <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="VWPExampleUserControl.ascx.cs" Inherits="AreaProg.VisualWebParts.Example1.VWPExample.VWPExampleUserControl" %>

Ces directives vont nous permettre d'utiliser les différents contrôles mis à disposition par ASP.NET et SharePoint. En bas de cette fenêtre se trouve un "bouton Design", cliquez dessus. Vous vous retrouvez alors sur un formulaire personnalisable où il vous suffira de faire glisser des contrôles depuis la Toolbox (onglet à gauche de votre fenêtre) pour créer votre interface graphique.

Dans la boite à outils, cherchez le groupe SharePoint Controls et localisez le contrôle ListProperty. Ce contrôle va simplement vous permettre de récupérer des propriétés de la liste courante. Glissez le sur votre formule et cliquez une fois dessus pour définir ces propriétés. Définissez alors la propriété Property sur Title pour afficher le contenu de la propriété Titre.

Placez ensuite votre curseur devant le contrôle et tapez "Title : ". Compilez et déployez maintenant votre Web Part. Rendez vous alors sur une Web Part Page de votre site SharePoint, cliquez sur l'onglet Page et choisissez Modifier la page. Vous pourrez voir apparaitre un petit dossier nommé AreaProg :



Le titre et la description que nous avons définit tout à l'heure sont bien affichées sur la page. Cliquez alors sur notre Web Part et cliquez sur Ajouter. Au final, votre Web Part affichera :



Ainsi que vous pouvez le constater, la Web Part affiche bien le titre de la liste courante. Cette liste est en fait celle dans laquelle est contenue notre Web Part Page.