Paramétrage et personnalisation des WebParts

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 conseille 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.

Dans ce tutoriel, 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.

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

1. Un webpartmanager ;
2. Un tableau composé de deux lignes et deux 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 :

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

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

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

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;
        }
    }
…

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.

public partial class MyWebPart : WebPartBase

Le fait d'avoir créé 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.

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

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 n’y est marqué « Aucun texte ». Cela signifie que vous n'avez rien paramétré. 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és. 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 a changé. Si vous fermez votre navigateur, vous verrez en le rouvrant que votre nouveau texte est bien là. Eh oui, c'est ce que l'on appelle la personnalisation !!!

VI-A. Explications▲

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

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

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 bytes 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 :

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;
        
        // Personnalisation du titre de la webpart
        this.Title = string.Format("{0} à {1}", ville, heure);

        // Recuperation des images de la meteo issue 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;
}

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

Vous êtes certainement en train de vous dire que c'est bien joli les Editorparts, mais s'il n'y a que des textboxes, ce n'est pas très rigolo. Je vous arrête ici tout 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 villes. 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.

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 :

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.

VIII-A. Implémentation▲

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 contrôles déjà présents
    Controls.Clear();
    
    // Notre dropdownlist
    _listVille = new DropDownList();
    
    //Nos différentes 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;
    }
}

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;
    }
}

La personnalisation 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.