ASP.NET 2.0 - Contrôles web personnalisés et améliorations du designer (1ère partie)

Par Frédéric Colin, posté le 23/12/2005

Profil : Développeur | Niveau : Intermédiaire (200)

Tags : Asp.net | Partager :

1 Présentation

Cet article en 2 parties ne traite pas à proprement parler de la conception des contrôles web personnalisés (custom control) mais se concentre sur tout ce que l'on peut faire avec le designer pour l'améliorer ou le personnaliser.

Un pré-requis est donc d'avoir déjà réalisé des contrôles web avec Visual Studio.

Voici le découpage de l'article :

1^ère partie :

? Un designer personnalisé pour notre contrôle

? ToolboxBitmap, TagPrefix et ToolboxData

? Editeur de propriété personnalisé

2^ème partie :

? Web Resource

? Smart Tag

La 2^ème partie est consacrée aux nouveautés de Visual Studio 2005.

Si vous êtes familiers avec le développement de custom control sous Visual Studio 2003, vous pouvez passer directement à la deuxième partie.

Pour illustrer cet article, nous allons créer un contrôle serveur qui permet de placer une animation Flash dans une page aspx, de la configurer via le designer de Visual Studio ou même en code behind.

La réalisation de cet exemple requiert le matériel suivant: Visual Studio 2005, IIS, Internet Explorer + le plugin Flash.

Cet article a été réalisé sur les versions suivantes :

§ Framework .NET version 2.0.50727

§ Visual Studio 2005 version 8.0.50727.42 (RTM.050727-4200)

2 Construction du Contrôle

Voici, sans rentrer dans les détails, la classe du contrôle Flash que l'on va compléter par la suite pour la partie designer. FlashControl est placée dans le namespace Bewise.Web.UI.WebControls et hérite de System.Web.UI.Control

La première chose à faire est d'ajouter une référence à l'assembly System.Web, puis de faire appel aux namespace suivants dans la classe :

   1:  using System.ComponentModel;
   2:  using System.Web.UI;

Voici les propriétés publiques de configuration du contrôle :

   1:    [DefaultValue(false), Category("Flash")]
   2:          public bool BrowserDetection
   3:          {
   4:              get
   5:              {   object o = ViewState["BrowserDetection"];
   6:                  return (o == null) ? false : (bool)o;
   7:              }
   8:              set
   9:              {   ViewState["BrowserDetection"] = value; }
  10:          }
  11:   
  12:          [DefaultValue(""), Category("Flash"),
  13:          Description("URL du fichier Flash à afficher.")]
  14:          public string MovieUrl
  15:          {
  16:              get
  17:              {   object o = ViewState["FlashMovieUrl"];
  18:                  return (o == null) ? string.Empty : o.ToString().Trim();
  19:              }
  20:              set
  21:              {   ViewState["FlashMovieUrl"] = value; }
  22:          }
  23:   
  24:          [DefaultValue(true), Category("Navigateur ciblé")]
  25:          public bool InternetExplorerCodeEnabled
  26:          {
  27:              get
  28:              {   object o = ViewState["InternetExplorerCodeEnabled"];
  29:                  return (o == null) ? true : (bool)o;
  30:              }
  31:              set
  32:              {   ViewState["InternetExplorerCodeEnabled"] = value; }
  33:          }
  34:   
  35:          [DefaultValue(true), Category("Navigateur ciblé")]
  36:          public bool NetscapeCodeEnabled
  37:          {
  38:              get
  39:              {   object o = ViewState["NetscapeCodeEnabled"];
  40:                  return (o == null) ? true : (bool)o;
  41:              }
  42:              set
  43:              {   ViewState["NetscapeCodeEnabled"] = value; }
  44:          }

Nous voyons déjà ici quelques éléments propres à l'utilisation du contrôle dans le designer, notamment les attributs rajoutés aux propriétés :

· DefaultValue : Valeur considérée comme valeur par défaut dans la fenêtre propriétés

· Category : Catégorie dans la fenêtre propriétés (si n'existe pas elle est crée)

· Description : Commentaire associée à la propriété

Pour terminer la structure minimum du contrôle, il faut redéfinir la méthode Render(), le cour du contrôle, c'est ici que s'effectue le rendu HTML dans le navigateur :

   1:          protected override void Render(HtmlTextWriter output)
   2:          {
   3:              if (BrowserDetection)
   4:                  BrowserDetect();
   5:   
   6:              if (InternetExplorerCodeEnabled)
   7:              {
   8:                  // balise object + attributs
   9:                  output.WriteBeginTag("object");
  10:                  output.WriteAttribute("id", this.ID);
  11:                  output.WriteAttribute("classid", "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000");
  12:                  output.WriteAttribute("codebase", "http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab");
  13:                  output.WriteLine(HtmlTextWriter.TagRightChar);
  14:   
  15:                  // balise param + attributs
  16:                  output.WriteBeginTag("param");
  17:                  output.WriteAttribute("name", "movie");
  18:                  output.WriteAttribute("value", MovieUrl);
  19:                  output.WriteLine(HtmlTextWriter.TagRightChar);
  20:              }
  21:   
  22:              if (NetscapeCodeEnabled)
  23:              {
  24:                  // balise embed + attributs
  25:                  output.WriteBeginTag("embed");
  26:                  output.WriteAttribute("name", this.ID);
  27:                  output.WriteAttribute("src", MovieUrl);
  28:                  output.WriteAttribute("type", "application/x-shockwave-flash");
  29:                  output.WriteAttribute("pluginspage", "http://www.macromedia.com/go/getflashplayer");
  30:                  output.WriteLine(HtmlTextWriter.TagRightChar);
  31:   
  32:                  // fermeture balise embed
  33:                  output.WriteEndTag("embed");
  34:              }
  35:   
  36:              if (InternetExplorerCodeEnabled)
  37:              {
  38:                  // fermeture balise object
  39:                  output.WriteEndTag("object");
  40:              }
  41:          }

On obtiendra le code suivant dans le navigateur :

   1:  <object id="FlashControl1" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab">
   2:  <param name="movie" value="movie/welcome.swf">
   3:  <embed name="FlashControl1" src="movie/welcome.swf" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer">
   4:  embed>
   5:  object>

Ceci est le code minimal pour afficher une animation Flash dans une page web, notez l'imbrication d'une balise dans la balise, selon la capacité du navigateur à utiliser des ActiveX, Internet Explorer sur Windows utilise

Commentaires