Lorsqu'on crée un nouveau contrôle web personnalisé, qui hérite de la classe WebControl (System.Web.UI.WebControls), il peut être intégré dans la boîte à outils de Visual Studio de façon à être utilisé comme les contrôles existants, avec un icône personnalisé et sans avoir à être créé par le code.
Afin d'exposer ces possibilités, j'ai créé un contrôle qui affiche une image et son texte alternatif (wouhou !) selon le diagramme de classes ci-dessous.
Création du contrôle
Dans un premier temps, il faut créer la classe du contrôle à laquelle on ajoute 2 propriétés publiques : l'url de l'image (LogoUrl) et son texte alternatif (CompanyName).
Le rendu est défini dans la méthode surchargée Render, dans laquelle on ajoute la balise html img pour l'affichage avec, pour paramètres, les valeurs issues des propriétés.
public class LogoControl : WebControl
{
public LogoControl() {}
private string _logoUrl;
private string _companyName;
public string LogoUrl
{
get { return _logoUrl; }
set { _logoUrl = value; }
}
public string CompanyName
{
get { return _companyName; }
set { _companyName = value; }
}
protected override void Render(HtmlTextWriter writer)
{
writer.WriteFullBeginTag("div");
writer.WriteLine("<img src=\"{0}\" alt=\"{1}\" />", _logoUrl,
_companyName);
writer.WriteEndTag("div");
}
}
Modification de l'icône du contrôle dans la boîte à outils
Pour définir un icône au contrôle web personnalisé, il faut ajouter l'attribut ToolboxBitmap à la classe LogoControl en lui passant en paramètre soit l'url de l'image,
[ToolboxBitmap(@"D:\Sources\net4wam\Samples\LogoControl\LogoIcon.bmp")]
soit la référence de l'image enregistrée en ressource de la bibliothèque de classe.
[ToolboxBitmap(typeof(LogoControl), "LogoIcon.bmp")]
N.B. : Pour ajouter une image aux ressources de l'application lors de la compilation, il suffit de modifier la propriété Action de génération en tant que Ressource incorporée.
Après avoir compilé le projet et avoir ajouté le contrôle à la boîte à outils de Visual Studio (clic droit, Choisir les éléments...), on obtient le résultat ci-dessous :
Modification du rendu dans le designer
Une fois que notre contrôle est disponible dans la boîte à outils, il est possible de le glisser directement sur la page et d'éditer les propriétés en mode design.
Tant que les propriétés ne sont pas renseignées, l'image ne pourra pas s'afficher, dans quel cas on aura le rendu ci-contre sur la page.
Pour palier à cet affichage et inviter le développeur à éditer les propriétés, il est possible de modifier le rendu en mode design grâce à une classe qui hérite de ControlDesigner (System.Web.UI.Design).
class LogoControlDesigner : ControlDesigner
{
public override string GetDesignTimeHtml()
{
LogoControl _logoControl = (LogoControl)this.Component;
if (_logoControl.LogoUrl == null || (_logoControl.LogoUrl != null
&& _logoControl.LogoUrl.Trim().Length == 0))
{
return "<div id=\'mcl1\' " +
"style=\'background-color:#F0F0F0;font-family:Tahoma;" +
font-size:11px;border:1px outset;padding:5px;\' >" +
"<strong>LogoControl</strong> - " + _logoControl.ID +
"<br /><br />" +
"Veuillez définir l'url de l'image pour afficher le contrôle."+
"</div>";
}
else
{
return base.GetDesignTimeHtml();
}
}
}
Il suffit de surcharger la méthode GetDesignTimeHtml() qui permet d'afficher un rendu différent que celui du contrôle. Dans ce cas, on vérifie si la propriété de l'adresse de l'image est renseignée, le cas échéant on affiche un message demandant de définir l'url de l'image.
Une fois que cette classe est construite, il suffit de la lier à LogoControl à l'aide de l'attribut Designer, en lui définissant le type du contrôle créé précédemment.
[Designer(typeof(LogoControlDesigner))]
Le résultat ci-dessous
Affichage sur la page
Une fois les propriétés définies, on obtient le résultat suivant dans le navigateur.
Code source (C#)
