Comme nous l'avons vu dans les deux cours précédents, une WebPart est très pratique pour la mise en place de contenu sur votre site Web. Dans le cours précédent, nous avons vu comment définir des propriétés pour une WebPart permettant à l'utilisateur d'influencer directement sur le comportement de la WebPart. Cependant, parfois, l'interface proposée par SharePoint est trop pauvre pour facilement représenter notre propriété, nous allons donc voir comment développer un panneau de propriétés personnalisé pour une WebPart. Le but de la WebPart que nous allons développer est d'afficher "Bonjour" dans la langue choisie par la propriété. Nous choisissons de contenir ces langues dans une liste déroulante. Commencez par créer un nouveau projet WSP Builder vide dans Visual Studio 2008. Une fois ceci fait, cliquez avec le bouton droit sur votre projet et cliquez sur Add > New Item. Dans la fenêtre qui apparaît, choisissez WebPart Feature et nommez la WPEditorPane : Une fois cette Webpart ajoutée, Visual Studio va automatiquement créer une certaine architecture pour vous faciliter le développement de votre WebPart. Si vous ne comprenez pas cette architecture, nous vous conseillons de relire le premier cours sur les WebParts dans cette section. Ouvrez maintenant le fichier elements.xml pour modifier la section dans laquelle notre Webpart apparaîtra, modifiez donc la propriété Group et QuickAddGroup par AreaProg pour afficher votre WebPart dans la section AreaProg. Nous allons maintenant passer au code de notre WebPart. Comme d'habitude, nous allons supprimer une grosse partie du code généré par Visual Studio. Ouvrez donc le fichier WPEditorPane.cs et supprimez le code superflu. Au final, cela vous donnera ceci :

namespace WPEditorPane
{
	[Guid("d1807b4d-c547-471a-b3af-6c517639ebd1")]
	public class WPEditorPane : Microsoft.SharePoint.WebPartPages.WebPart
	{
		public WPEditorPane()
		{
			this.ExportMode = WebPartExportMode.All;
		}

		protected override void OnLoad(EventArgs e)
		{
			this.EnsureChildControls();
		}
	}
}

Jusqu'à présent, il n'y a rien de bien compliquer. La première chose que nous implémenter est la propriété. Effectivement, notre panneau de configuration personnalisé va se charger de proproser à l'utilisateur de modifier une propriété en la présentant dans un format plus adapté à celle-ci. Par exemple, nous allons proposer 4 langues pour la propriété Langage, c'est clairement plus simple de le présenter sous forme d'une liste déroulante. Définissez donc la propriété suivante :

[Personalizable(PersonalizationScope.Shared)]
[WebBrowsable(true)]
public string Langage
{
	get;
	set;
}

Ici, nous définissons la propriété Langage qui va permettre de contenir le choix de l'utilisateur pour la valeur de cette propriété. Nous n'avons plus besoin d'autant d'attributs que dans le cours précédent, car notre propriété sera directement contenue dans notre Editor Part (panneau de configuration). Passons maintenant à la fonction RenderContents qui va nous permettre d'afficher Bonjour dans la langue choisie par l'utilisateur :

protected override void RenderContents(HtmlTextWriter writer)
{
	switch (Langage)
	{
		case "FR" :
		writer.Write("Bonjour");
		break;

		case "EN" :
		writer.Write("Hello");
		break;

		case "NL" :
		writer.Write("Dag");
		break;

		case "TR" :
		writer.Write("Merhaba");
		break;

		default:
		writer.Write("[Set Language]");
		break;
	}
} 

Ici, il n'y a rien de bien compliqué. Nous vérifions la valeur de la propriété Langage et selon cette valeur, nous affichons Bonjour dans la langue contenue dans cette propriété. Si aucune valeur proposée ne correspond au contenu de la propriété, c'est qu'elle n'a pas été modifiée, nous affichons donc [Set Language]. Nous allons maintenant développer notre panneau de configuration. Pour cela, nous allons devoir ajouter une nouvelle classe. Cliquez donc avec le bouton droit sur le dossier WebPartCode et cliquez sur Add > Class et nommez la Editor.cs. Par défaut, le namespace comporte le nom du dossier, modifiez donc cela pour avoir le même namespace que le code de notre WebPart. Ajoutez ensuite les directives suivantes à votre classe :

using Microsoft.SharePoint;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.WebControls;
using System.Web.UI; 

La première chose que nous allons devoir faire est de faire dériver notre classe de EditorPart. C'est ainsi qu'il sera possible d'indiquer que cette classe est une panneau de configuration. Cela nous servira également à l'ajouter à la liste des panneaux de configurations existants. Modifiez donc la signature de votre classe ainsi :

class Editor : EditorPart 

Notre panneau de configuration devra contenir une liste déroulante vous proposant les différentes valeurs de propriété possible, déclarez donc celle-ci comme variable de votre classe :

DropDownList lang; 

Nous allons maintenant surcharger la méthode CreateChildControls pour vous permettre d'ajouter les différentes valeurs à la liste déroulante et d'afficher celle-ci dans le panneau de configuration :

protected override void CreateChildControls()
{
	lang = new DropDownList();

	lang.Items.Add("FR");
	lang.Items.Add("EN");
	lang.Items.Add("NL");
	lang.Items.Add("TR");
	Controls.Add(new LiteralControl("Langage : "));
	Controls.Add(lang);
}

La première ligne va nous permettre de créer l'instance de la liste déroulante. Les quatres lignes suivantes vont nous permettre d'ajouter quatres langues différentes dans cette liste. Comme vous le voyez, la valeur de ces langues sont les mêmes que celles testées dans le switch du code de la WebPart. La ligne suivante permet d'ajouter un LiteralControl, donc du texte pour la propriété. Ce texte sera Langage et permettra de donner un intitulé à notre propriété. Ensuite, nous ajoutons la liste déroulante au panneau de configuration. Nous allons ensuite devoir surcharger deux autres fonctions. Nous avons tout d'abord la fonction SyncChanges qui va permettre de synchroniser les deux parties de la WebPart. En d'autre terme, elle permettra de sélectionner dans le panneau de configuration la valeur de la propriété choisie. Surchargez la de cette manière :

public override void SyncChanges()
{
	EnsureChildControls();
	WPEditorPane wp = (WPEditorPane)this.WebPartToEdit;

	if (lang.Items.FindByText(wp.Langage) != null)
		lang.Items.FindByText(wp.Langage).Selected = true;
	else
		lang.Items[0].Selected = true;
} 

Quand vous allez modifier votre WebPart pour la première fois, la langue sera bien appliquée. Quand vous allez afficher à nouveau votre panneau de configuration pour modifier une deuxième fois la langue, il faut que le panneau de configuration sélectionne la bonne valeur correspondant à la langue actuellement utilisée. Nous faisons donc ça grâce à cette fonction. La fonction EnsureChildControls permet de s'assurer que tous les contrôles du panneau ont bien été chargés. Ensuite, il nous faut une manière de récupérer une instance de la WebPart. Pour cela, l'objet this contient l'objet WebPartToEdit qui est une référence vers notre WebPart (ou plus précisément, vers la WebPart à laquelle le panneau est attaché). Cet objet est de type WebPart, nous le castons donc en WPEditorPane. La condition suivante va simplement permettre de vérifier si la propriété a déjà été modifiée ou pas. Si elle n'a encore jamais été modifiée, elle renverra null, nous sélectionnerons donc le premier élément de la liste déroulante, par contre, si la propriété a été définie, nous sélectionnons la valeur correspondante. La deuxième fonction à surcharger est ApplyChanges. Comme son nom l'indique, celle-ci va permettre de modifier la propriété de la WebPart lorsque nous modifierons celle-ci dans le panneau de configuration. Surchargez la donc de cette manière :

public override bool ApplyChanges()
{
	EnsureChildControls();
	WPEditorPane wp = (WPEditorPane)this.WebPartToEdit;
	wp.Langage = lang.Text;
	return true;
} 

Encore une fois, nous appelons la fonction EnsureChildControls pour nous assurer que tous les contrôles du panneau ont été initialisés. Ensuite, de la même manière que dans la fonction précédente, nous récupérons une référence à notre WebPart et nous modifions la valeur de sa propriété Langage. La valeur retournée par cette fonction indique si la modification de la propriété s'est bien passée (true) ou non (false). Notre panneau de configuration est terminée, mais il reste la partie la plus importante. La section de code permettant de lier ce panneau de configuration à notre WebPart. Pour ce faire, revenez dans la classe de votre WebPart et surchargez la fonction CreateEditorParts :

public override EditorPartCollection CreateEditorParts()
{
	List<EditorPart> editors = new List<EditorPart>(1);
	EditorPart editor = new Editor();
	editor.ID = this.ID + "WPEditPane";
	editor.Title = "Editor Part Properties";
	editors.Add(editor);
	EditorPartCollection original = base.CreateEditorParts();
	return new EditorPartCollection(original, editors);
} 

Pour comprendre la tournure de ce code, il faut que vous compreniez bien que votre EditorPart n'est pas TOUT le panneau de configuration mais juste une partie que vous allez rajouter à l'existant. La façon de faire cela consiste à récupérer la liste des EditorPart liés à une WebPart et d'y ajouter notre ou nos EditorPart. Nous commençons donc par créer la liste qui contiendra notre EditorPart, c'est ainsi que l'on doit procéder. Etant donné que nous n'avons qu'un EditorPart, nous passons 1 an paramètre du constructeur de la liste pour lui assigner une capacité de un. Nous continuons en créant notre EditorPart que nous plaçons dans l'objet editor. Nous modifions ensuite l'ID de cet EditorPane ainsi que son Title qui correspond au titre affiché dans le panneau de configuration. Nous ajoutons ensuite notre EditorPane à la liste précédemment créée. Ensuite, nous récupérons la liste des EditorPane associés à la WebPart grâce à la fonction CreateEditorParts de la classe de base. Nous récupérons cette liste dans l'objet original. Ensuite, nous renvoyons un nouvel objet EditorPartCollection avec comme paramètre l'ancienne liste et la liste qui contient les EditorPart à ajouter. Cela permet de créer une nouvelle liste résultant de la fusion de ces deux dernières. Nous avons maintenant fini le développement, nous allons donc tester. Compilez et déployez votre projet grâce à WSP Builder. Ouvrez ensuite votre site SharePoint et allez dans Site Actions > Site Settings > Site features et activez votre WebPart : Une fois que vous avez activer votre feature, vous pouvez l'ajouter à votre page. Allez donc sur la page d'accueil de votre site et cliquez sur Site Actions > Edit Page. Cliquez ensuite sur Add a Web Part et ajoutez votre WebPart : Une fois votre Web Part ajoutée, vous devriez obtenir ceci : Comme vous le voyez, nous n'avons pas encore modifiée notre propriété, donc [Set Language] apparaît. Cliquez maintenant sur edit > Modify Shared Web Part. Le panneau de configuration apparait et comme vous le voyez, notre propriété est bien présentée sous forme de liste déroulante : Sélectionnez donc EN et validez : Comme vous le voyez, notre texte s'affiche maintenant en anglais. Modifiez à nouveau votre propriété et vous verrez que le panneau de configuration reprend bien l'ancienne valeur de la propriété pour sélectionner celle-ci dans la liste déroulante.