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

II. Introduction

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.

III. Interface de base

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 :

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

 
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éé 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 personnaliser 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 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

La personnalisation permet de sauvegarder de nombreux types différents 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 nécessaire d'ajouter au-dessus de chaque variable que vous souhaitez personnaliser une série d'attributs :

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

VII. 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é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.

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

 
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;
        
        // 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.

VIII. Création de notre propre Editorpart

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.

 
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.

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

Voilà notre Editorpart est terminé. J'espère que vous avez tous suivi.
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.
Voilà, il ne reste plus qu'à essayer. ;)

Il y a une chose qu'il ne faut pas oublier, c'est de modifier notre propriété du CodeVille. Il faut passer notre WebBrowsable(true) à WebBrowsable(false). En effet, sinon nous aurions toujours notre textbox.

IX. Conclusion

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.

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.