[SharePoint] Créer une Webpart et son EditorPart

Voici un petit tutoriel qui explique simplement comment créer une webpart et son editorpart.


Dans notre cas, nous prendrons comme exemple une visionneuse de pages web.
Son fonctionnement est simple, on lui passe une url dans l'Editorpart et la webpart affiche le site.


Etape 1 : Le projet

1. Création d'un nouveau projet dans VS 2008. Dans mon cas, j'utilise l'extension VSeWSS 1.2 pour VS2008.


2. Choisir le projet Sharepoint Webpart
   
   


3. Configurer comme vous les souhaitez les fichiers .xml et .webpart.
   

Etape 2 : La Webpart


Voici le code permettant l'affichage simpliste de notre IFrame qui permettra à notre webpart de visionner les pages.
Par défaut, votre projet aura créé une classe nommée Webpart1, c'est celle que nous utiliserons pour notre webpart.

public class WebPart1 : System.Web.UI.WebControls.WebParts.WebPart, IWebEditable
{

private string m_pageUrl = string.Empty;

//Url passé dans l'editorpart, elle sera renseignée par l'editorpart
[Browsable(false),
Personalizable(PersonalizationScope.Shared)]
public string PageUrl
{
get {return m_pageUrl;}
set {m_pageUrl = value;}
}

Protected override void RenderContents(HtmlTextWriter writer)
{
EnsureChildControls();
RenderIFrame(writer);
}

///

/// Gére l'affichage du IFrame avec la bonne URL
///

///
protected void RenderIFrame(HtmlTextWriter writer)
{ 

string frame = "outputIFrame_" + base.ClientID;
writer.AddStyleAttribute("display", "inline");
writer.AddAttribute(HtmlTextWriterAttribute.Id, frame);
writer.AddAttribute(HtmlTextWriterAttribute.Name, frame);
writer.AddStyleAttribute(HtmlTextWriterStyle.Width, "100%");
writer.AddStyleAttribute(HtmlTextWriterStyle.Height, "100%");
writer.AddAttribute("frameBorder", "0"); 

if (!string.IsNullOrEmpty(m_pageUrl))
{
writer.AddAttribute(HtmlTextWriterAttribute.Src, m_pageUrl);
}
writer.RenderBeginTag(HtmlTextWriterTag.Iframe);
writer.RenderEndTag();
} 

 

 



Etape 3 : L'EditorPart


Nous allons maintenant gérer notre editorpart.

1. Votre projet>Ajouter>Classe…
   
   


2. Le code pour l'editorpart :
   

public class Webpart1EditorPart : EditorPart
{

private TextBox txtPageUrl;
protected override void CreateChildControls() {

base.CreateChildControls();
//Affiche la textbox et son label
this.Controls.Add(new
LiteralControl("Url du site :
"));
txtPageUrl = new TextBox();
this.Controls.Add(txtPageUrl);
}

///

/// Applique les valeurs de l'editor part dans la webpart
///

///
public override bool ApplyChanges() {

 

EnsureChildControls();

 

 

WebPart1 webPart = this.WebPartToEdit as WebPart1;

if (webPart != null) {
webPart.PageUrl = txtPageUrl.Text;
}
return true;
}

///

/// Envoi les valeurs enregistrées de la webpart vers l'editorpart (au moment de l'Edition de la Webpart
///

public override void SyncChanges() {

EnsureChildControls();

WebPart1 webPart = this.WebPartToEdit as WebPart1;

if (webPart != null) {
txtPageUrl.Text = webPart.PageUrl;
}
}
}

 

 

 



Etape 4 : Lier l'EditorPart et la WebPart


Voici ce qu'il faut rajouter à la suite du code dans le fichier Webpart1.cs :

public
override
EditorPartCollection CreateEditorParts(){
List<EditorPart> editorParts = new List<EditorPart>(1);
EditorPart part = new WebPart1EditorPart();
part.ID = this.ID + "_Webpart1EditorPart";
editorParts.Add(part);EditorPartCollection baseParts = base.CreateEditorParts();
return new EditorPartCollection(baseParts, editorParts);
}

    

 

Il ne vous reste plus qu'à déployer votre webpart sur votre serveur de test.

 

La visionneuse personnalisée de site est terminée ;)