Paramétrage et personnalisation des WebParts

N'hésitez pas à commenter cet article ! Commentez Donner une note à l'article (5)

Article lu   fois.

L'auteur

Site personnelSite personnel

Liens sociaux

Viadeo Twitter Facebook Share on Google+   

I. Pré requis

Lors d'un article précédent (consulter), nous avons vu comment mettre en place les différents éléments afin de constituer une page avec des Webparts. Je conseil vivement de le lire si cela n'est pas déjà fait. Bien entendu, il est toujours nécessaire d'avoir Visual Studio 2005 et SQL Express ou SQL Server.

II. Introduction

Dans ce tutorial, nous allons voir comment paramétrer et personnaliser les Webparts. En effet, l'une des forces des Webparts, est qu'il est possible de les paramétrer depuis le navigateur avec une grande facilité pour l'utilisateur.
Le développement n'est pas trop difficile tant que l'on souhaite faire des choses simples, mais risque de se corser si l'on souhaite personnaliser par exemple les Editorparts. Mais pas de panique, nous y allons en douceur.

III. Interface de base

Pour commencer, placez sur une page aspx vierge en mode design :

  1. Un webpartmanager
  2. Un tableau composé de 2 lignes et 2 colonnes
  3. Un linkbutton dans chaque colonne de la première ligne, que nous nommerons Normal et Edit
  4. Une webparzone dans la première colonne de la deuxième ligne
  5. Une editorzone dans la case restante
  6. Un AppearanceEditorPart dans l'editorzone
  7. Un PropertyGridEditorPart dans l'editorzone

Ensuite ajoutez un événement onclick à chaque linkbutton (en double cliquant dessus) et rajoutez le code suivant :

 
Sélectionnez

protected void Normal_Click(object sender, EventArgs e)
{
	WebPartManager1.DisplayMode = WebPartManager.BrowseDisplayMode;
}

protected void Edit_Click(object sender, EventArgs e)
{
	WebPartManager1.DisplayMode = WebPartManager.EditDisplayMode;
}
			

IV. Webpart de base

Dans le première article nous avons effectivement créé des Webparts, mais ce n'étais pas réellement de véritable Webpart, en effet, une webpartzone convertit tous les contrôles en Webpart. Nous allons ici créer de Vrai Webpart. Pour commencer, ajoutez à votre site web un fichier .cs que nous nommerons WebPartBase. La classe ainsi crée sera notre base pout toutes nos Webparts. Notons que cette classe héritera de la classe User Control et de l'interface IWebPart que nous implémenterons.

 
Sélectionnez

public class WebPartBase : UserControl, IWebPart
{
    public WebPartBase()
    {
    }

    protected string _title = "Pas de titre.";
    public string Title
    {
        get
        {
            return _title;
        }
        set
        {
            _title = value;
        }
    }

    protected string _subTitle = string.Empty;
    public string Subtitle
    {
        get
        {
            return _subTitle;
        }
        set
        {
            _subTitle = value;
        }
    }

V. Première Webpart

Nous allons maintenant faire notre première Webpart qui sera personnalisable. Pour cela rajoutons à notre site web un User Control. De base un User Control hérite de la classe User Control, mais cette fois ci, comme nous avons fait notre Webpart de base, nous allons faire hériter notre User Control par notre classe WebPartBase.

 
Sélectionnez

public partial class MyWebPart : WebPartBase

Le fait d'avoir crée un User control nous permet de bénéficier du mode design.
Ajoutons à notre User Control une simple textbox.
Ensuite, revenons à notre page principale, et faisons glisser depuis le " Solution Explorer " notre User Control vers une webpartzone. Et là, magie, notre User Control est interprété comme une Webpart. Vous pouvez lancer votre navigateur pour voir le résultat.

VI. Personnalisation

Rentrons dès maintenant dans le vif du sujet, c'est-à-dire la personnalisation. Dans notre exemple, il serait bien de personnalisé le contenu de notre textbox.
Pour cela, rajoutons ceci à notre User Control :

 
Sélectionnez

private string _texte;

[WebBrowsable(true), Personalizable(true), WebDescription("Parametrez le texte"), WebDisplayName("Mon texte")]
public string Texte
{
	get
	{
		return _texte;
	}
	set
	{
		_texte = value;
	}
}

protected void Page_PreRender(object sender, EventArgs e)
{
	if (string.IsNullOrEmpty(_texte) == true)
		TextBox1.Text = "Aucun texte";
	else
		TextBox1.Text = Texte;
}
			

Avant les explications détaillées, lancez votre navigateur. Nous voyons bien que dans la textbox il y est marqué "Aucun texte ". Cela signifie que vous n'avez rien parametré. Pour cela, cliquez sur le linkbutton Edit. Nous voyons apparaître la webpartzone. Ensuite cliquez sur le petit triangle afin de faire apparaître le menu et cliquez sur Edit. Nous avons à présent l'editorzone qui c'est affiché avec les deux editorparts que nous avions ajouté. Regardez bien dans la property grid, ce que nous avons. Et oui un champ texte avec " Mon texte " et " Parametrez le texte " en tooltip. Ajoutons du texte et cliquons sur ok ou sur appliquer. Vous voyez maintenant que le texte de la webpart à changé. Si vous fermez votre navigateur, vous verez en le réouvrant que votre nouveau texte est bien là. Et oui, c'est ce que l'on appelle la personalisation !!!

A. Explications

La personalisation permet de sauvegarder de nombreux types different et adapte l'interface graphique selon le type de la variable.

  • Types qui donnent un champ texte : string, int, float, double, date …
  • Type qui donne un radiobutton: bool
  • Type qui donne une listbox : enum

Il est necessaire d'ajouter au dessus de chaque variable que vous souhaitez personnaliser une serie d'attributs :

  • WebBrowsable : défini si la variable est affichée
  • Personalizable : défini si la variable doit etre personalisée, donc être sauvegardée.
  • WebDescription : défini la description de la varible (tooltip)
  • WebDisplayName : défini le nom de la variable dans l'interface

VI. Webpart Météo

Nous allons maintenant faire une Webpart qui affiche la météo de la ville que l'on a paramétré dans l'Editorpart. Nous utiliserons le fichier XML qui est fournis par weather.com Pour commencer, ajoutons un nouveau User Control, qui hérite de notre classe WebPartBase. Faite glisser le User Control dans une webzone. Dans le code behind, ajoutons ce code, qui permet de personnaliser le code de la ville.

 
Sélectionnez

private string _codeVille;

[WebBrowsable(true), Personalizable(true), WebDescription("Ajouter un code de la ville"), WebDisplayName("Code Ville")]
public string CodeVille
{
	get
	{
		return _codeVille;
	}
	set
	{
		_codeVille = value;
	}
}

Ensuite rajoutons une méthode qui va télécharger le fichier XML depuis le site weather.com

 
Sélectionnez

private XmlDocument GetXML(string ville)
{
	//Configuration de l'url avec la ville
	string url = string.Format("http://xoap.weather.com/weather/local/{0}?cc=*&unit=m", ville);	

	//Nouvelle instance de la classe WebClient
	System.Net.WebClient wc = new System.Net.WebClient();
	wc.Credentials = System.Net.CredentialCache.DefaultCredentials;
        
	// Téléchargement du contenu de la page dans un tableau de bytes
	byte[] myDataBuffer = null;
	myDataBuffer = wc.DownloadData(url);
        
	//Passage d'un tableau de byte en stream
	MemoryStream ms = new MemoryStream(myDataBuffer);
	XmlDocument doc = new XmlDocument();
        
	//Chargement du stream en document xml
	doc.Load(ms);
	
	return doc;
}

Il ne reste plus qu'à réaliser un bel affichage.
Rajoutons ce code au Page_Load:

 
Sélectionnez

if (string.IsNullOrEmpty(CodeVille) == false)
{
	try
	{
		this.Visible = true;
 		XmlDocument xmld = GetXML(CodeVille);
 		
		//Traitement du XML Document
		string ville = xmld.SelectSingleNode("/weather/loc/dnam").InnerText;
		string heure = xmld.SelectSingleNode("/weather/loc/tm").InnerText;
		
		// Personalisation du titre de la webpart
		this.Title = string.Format("{0} à {1}", ville, heure);

		// Recuperation des images de la meteo issu du repertoire images
		Image1.ImageUrl = ResolveClientUrl("~/images/" + xmld.SelectSingleNode("/weather/cc/icon").InnerText + ".gif");
		
		TMax.Text = "Max: " + xmld.SelectSingleNode("/weather/cc/tmp").InnerText + "°C";
		Hyg.Text = "Hum: " + xmld.SelectSingleNode("/weather/cc/hmid").InnerText + "%";
	}
	catch
	{
		this.Title = "Ville inconue";
		this.Visible = false;
	}
}
else
{
	this.Title = "Ville inconue";
	this.Visible = false;
}

Voila, il ne reste plus qu'à lancer votre navigateur et paramétrer le code de la ville. Par exemple pour Paris : FRXX0076.

VIII. Création de notre propre Editorpart

Vous êtes certainement entrain de vous dire que c'est bien jolie les Editorparts, mais s'il n'y a que des textboxes, ce n'est pas très rigolo. Je vous arrête ici de suite, nous allons voir comment créer notre propre Editorpart. Attention, cette partie est assez technique.
Nous allons continuer avec notre Webpart de météo. En effet, ce n'est pas trop professionnel si nous devons connaître le code la ville par cœur. Nous allons donc créer notre propre Editorpart qui comprend une dropdownlist qui contient une petite liste de ville. Bien entendu, il est possible de mettre dans un Editorpart des User Controls. Pour commencer, nous allons créer un nouveau fichier de code que nous allons appeler VilleEditorPart. Dans ce fichier, nous rajoutons une interface ICodeVille. Elle va permettre de communiquer entre notre Webpart et notre Editorpart.

 
Sélectionnez

public interface ICodeVille
{
    string CodeVille
    {
        get;
        set;
    }
}

Dans notre User Control, il suffit que notre classe meteo hérite de ICodeVille.
Ensuite, pour que notre classe VilleEditorPart soit un EditorPart, nous allons le faire hériter d'EditorPart. Il ne nous reste plus qu'à overrider les méthodes suivantes :

 
Sélectionnez

public override bool ApplyChanges()
public override void SyncChanges()
protected override void CreateChildControls()
protected override void RenderContents(HtmlTextWriter writer)
private DropDownList TheDropDownList
  • La première méthode est appelée lorsque l'on est en mode édition et que l'on applique des changements.
  • La seconde méthode est appelée lorsque l'on entre en mode édition afin de remettre les paramètres dans les contrôles.
  • La troisième méthode est appelée lorsque l'on crée les contrôles enfants, dans notre cas, une dropdownlist.
  • La quatrième méthode est appelée lors de l'écriture du code html.
  • La dernière est une propriété qui permet de récupérer notre dropdownlist.

A. Implémentation

Nous n'avons rien de particulier à mettre dans le constructeur. Implémentons nos méthodes:

 
Sélectionnez

private DropDownList _listVille;

public override bool ApplyChanges()
{
	// Recuperation de la webpart en cours d'edition
	ICodeVille part = (ICodeVille)WebPartToEdit.WebBrowsableObject;
	
	// Selection faite par l'utilisateur
	part.CodeVille = TheDropDownList.SelectedValue;
	
	return true;
}

public override void SyncChanges()
{
	// Recuperation de la webpart en cours d'edition
	ICodeVille part = (ICodeVille)WebPartToEdit.WebBrowsableObject;
	string ville = part.CodeVille;
	if (string.IsNullOrEmpty(ville) == true)
		return;
	// Retrouver la ville dans la liste
	foreach (ListItem item in _listVille.Items)
	{
		if (item.Value == ville)
		{
			item.Selected = true;
			break;
		}
	}
}

protected override void CreateChildControls()
{
	// Vide les controles déjà présents
	Controls.Clear();
	
	// Notre dropdownlist
	_listVille = new DropDownList();
	
	//Nos differentes villes proposées
	_listVille.Items.Add(new ListItem("Paris", "FRXX0076"));
 	_listVille.Items.Add(new ListItem("Lyon", "FRXX0055"));
	_listVille.Items.Add(new ListItem("Marseille", "FRXX0059"));
	_listVille.Items.Add(new ListItem("Bordeaux", "FRXX0016"));
	
	// Ajout de notre dropdownlist a notre contrôle père
 	Controls.Add(_listVille);
}

protected override void RenderContents(HtmlTextWriter writer)
{
	writer.Write("Selectionnez une ville.");
	writer.WriteBreak();
	
	// Ecriture du code html du dropdownlist
	_listVille.RenderControl(writer);
	
	writer.WriteBreak();
}

private DropDownList TheDropDownList
{
	get
	{
		//Recréer notre control s'il n'existe plus
		EnsureChildControls();
		return _listVille;
	}
}

Voila notre Editorpart est terminé. J'espère que vous avez tous suivis.
Repassons à notre Webpart météo. Pour l'instant notre Webpart n'utilise pas notre editorpart. Pour cela, il faut que notre classe Meteo hérite de l'interface IWebEditable. Et rajoutons ce code :

 
Sélectionnez

public EditorPartCollection CreateEditorParts()
{
	ArrayList editorArray = new ArrayList();
	VilleEditorPart edPart = new VilleEditorPart();
	edPart.ID = this.ID + "_VilleEditorPart1";
	editorArray.Add(edPart);
	EditorPartCollection editorParts = new EditorPartCollection(editorArray);
	return editorParts;
}

public object WebBrowsableObject
{
	get
	{
		return this;
	}
}

Et pour finir, il faut que notre Webpart implémente l'interface ICodeVille afin de bien faire la jointure entre notre Webpart et notre Editorpart.
Il y a une chose qu'il ne faut pas oublier, c'est de modifier notre propriete du CodeVille. Il faut passer notre WebBrowsable(true) à WebBrowsable(false). En effet, sinon nous aurions toujours notre textbox. Voila, il ne rest plus qu'a essayer ;)

IX. Conclusion

La personalisation des Webparts est vraiment magique, les possibilités de créations sont infinies.
Si vous le souhaitez, il est possible de remplacer notre dropdownlist par un User Control.

Vous avez aimé ce tutoriel ? Alors partagez-le en cliquant sur les boutons suivants : Viadeo Twitter Facebook Share on Google+   

Les sources présentées sur cette page sont libres de droits, et vous pouvez les utiliser à votre convenance. Par contre, la page de présentation constitue une oeuvre intellectuelle protégée par les droits d'auteurs. Copyright © 2005 Nicolas Humann . Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents, images, etc sans l'autorisation expresse de l'auteur. Sinon vous encourez selon la loi jusqu'à 3 ans de prison et jusqu'à 300 000 E de dommages et intérêts. Cette page est déposée à la SACD.