1 Présentation
Nous avons vu dans la première partie de cet article sur les contrôles web personnalisés comment personnaliser le designer et comment améliorer la saisie des propriétés avec un éditeur personnalisé.
Rappel du 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
Si vous n’avez pas lu la première partie, je vous invite à la télécharger à l’adresse suivante :
http://www.bewise.fr/technologies/articles.aspx
Nous allons compléter ici le contrôle web personnalisé FlashControl qui a servi d’exemple dans la première partie. Pour rappel ce contrôle serveur permet de placer une animation Flash dans une page aspx, et de la configurer via le designer de Visual Studio.
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 Web Resources
Les Web Resources sont une nouveauté ASP.NET 2.0 et changent complètement la façon d’intégrer des fichiers clients (images, styles, scripts) dans vos applications web.
En ASP.NET 1.x, afin de gérer les ressources clientes utilisées par vos contrôles et communes à plusieurs applications, la meilleure façon était de les placer dans le répertoire virtuel aspnet_client. A l’inverse de l’utilisation de Page.RegisterClientScriptBlock() pour générer les scripts dans le source, cette méthode avait le double avantage de ne pas alourdir le code HTML des pages et de pouvoir placer les fichiers js en cache.
Grâce à ASP.Net 2.0, les Web Resources permettent de simplifier et sécuriser ceci en embarquant toutes vos ressources dans l’assembly et d’y accéder grâce au Web Resource handler.
Ceci est donc très utile dans le cadre d’un contrôle personnalisé, on va pouvoir inclure dans la dll de l’assembly tout le code des contrôles ainsi que toutes les ressources utilisées (fichiers javascript .js, feuille de style css, images, documents XML, …).
Pour notre FlashControl, nous allons rajouter une image qui sera affichée à la place du contrôle dans le designer en cas d’erreur (pas de fichier flash spécifié par exemple).
On réalise ceci en 3 étapes :
1. inclure le fichier image dans le projet Visual Studio et le déclarer comme resource embarquée; bouton droit sur le fichier / Properties / Build Action : Embedded Resource
2. Déclarer la ressource au niveau de l’Assembly dans le fichier AssemblyInfo, à l’aide de l’attribut WebResource :
[assembly: WebResource("Bewise.Web.UI.WebControls.error.gif", "image/gif")]
Ceci permet de nommer la ressource (attention il faut la préfixer avec le namespace), de préciser son type mime, et d’autoriser son accès par le client web.
3. Ajouter le code pour servir la ressource au navigateur client. La méthode GetWebResourceUrl() obtient une URL d’accès à la ressource pour votre application web. Voici sa syntaxe :
Page.ClientScript.GetWebResourceUrl(typeof(FlashControl), "Bewise.Web.UI.WebControls.error.gif")
Premier paramètre : le type de l’assembly (sans le namespace)
Deuxième paramètre : le nom de la ressource avec le namespace
Nb : dans le cadre d’un fichier javascript, la méthode à utiliser est :
Page.ClientScript.RegisterClientScriptResource(typeof(CustomControl), "CustomControlScript.js");
Dans le code ci-dessous, la méthode Render (qui effectue le rendu du contrôle dans le navigateur) de la classe FlashControl est complétée par un bloc try/catch et la génération d’une balise HTML <img> dont l’URL pointe vers la ressource image dans l’assembly.
try
{
. . .
}
catch
{
output.WriteBeginTag("img");
output.WriteAttribute("src", Page.ClientScript.GetWebResourceUrl(typeof(FlashControl), "Bewise.Web.UI.WebControls.error.gif"));
output.WriteLine(HtmlTextWriter.TagRightChar);
output.WriteEndTag("img");
output.WriteBeginTag("font");
output.WriteAttribute("color", "red");
output.WriteLine(HtmlTextWriter.TagRightChar);
output.Write("Erreur FlashControl.");
output.WriteEndTag("font");
}
Et le résultat dans le navigateur :
Un coup d’œil au source de la page nous confirme l’utilisation de l’image contenue dans l’assembly :
<img src="/FlashObject/WebResource.axd?d=rhekw_pKSBOK7hfF29WQsZLuh6Smh0lEpHlND2k6HqOI06Gt4s5nTnJa-Ap1Pet-eIyeFNGCk1K5c5-CZZZ-Ew2&t=632706030672879339">
</img><font color="red">
Erreur FlashControl.</font>
L’URL vers l’image dans l’assembly a été généré par la méthode GetWebResourceUrl().
3 Smart Tag
Encore une nouveauté de 2005 : les Smart Tag. Il s’agit des panels qui affichent les tâches courantes relatives à un contrôle ; accessible par une petite flèche placée en haut des contrôles, comme vous pouvez le voir dans Visual Studio 2005 avec la GridView ou la TreeView. Ils permettent de gagner un temps précieux et de simplifier le travail dans le designer.
Le Smart Tag de la GridView
Ainsi, un Smart Tag permet non seulement d’exposer des propriétés et de les regrouper par catégories comme dans la fenêtre de propriétés standard de Visual Studio, mais également d’en améliorer l’affichage et l’efficacité : utilisation de checkbox pour les booléen, calendrier, ColorPicker, afficher/masquer des éléments en fonction des valeurs de propriétés, ou encore des liens vers d’autres fenêtres détaillées telle que des wizards.
Le lien « Edit Columns… » du Smart Tag de la GridView fait apparaître une fenêtre d’édition complète et bien pratique
Bien au-delà d’un simple effet de mode, le Smart Tag apportera un vrai plus pour l’utilisateur de votre contrôle.
Avant de les utiliser pour notre projet, voici la présentation des éléments d’un Smart Tag :
Designer Action Item : chaque élément (propriété, lien, …) du Smart Tag
Designer Action Headers : regroupement d’Action Item en catégories
Designer Action List : représente la liste des 2 éléments ci-dessus
Toutes les classes relatives au Smart Tag sont présente dans le NameSpace System.ComponentModel.Design de l’assembly System.Design.dll
Pour inclure un Smart Tag à notre contrôle, il suffit de compléter la classe du designer en redéfinissant la propriété ActionLists de type DesignerActionListCollection qui donne accès à la liste des éléments du Smart Tag (Designer Action Item).
N’oubliez pas de faire référence aux namespace dans cette classe, mais si vous oubliez, Visual Studio 2005 vous le propose automatiquement (encore une nouveauté bien utile !) dès lors que vous avez bien ajouté une référence à l’assembly System.Design.dll dans votre projet.
On va créer le Smart Tag dans une nouvelle classe FlashDesignerActionList du namespace Bewise.Web.UI.Design elle hérite de System.ComponentModel.Design.DesignerActionList.
Le constructeur prend en paramètre une référence du contrôle que j’affecte à une variable privée typée.
internal class FlashDesignerActionList : System.ComponentModel.Design.DesignerActionList
{
private FlashControl flashControl;
public FlashDesignerActionList(IComponent component) : base(component)
{
flashControl = (FlashControl)component;
}
Puis nous allons décrire chacune des propriétés qui seront exposées dans le Smart Tag :
public bool BrowserDetection
{
get { return flashControl.BrowserDetection; }
set { GetPropertyByName("BrowserDetection").SetValue(flashControl, value); }
}
public bool InternetExplorerCodeEnabled
{
get { return flashControl.InternetExplorerCodeEnabled; }
set { GetPropertyByName("InternetExplorerCodeEnabled").SetValue(flashControl, value); }
}
public bool NetscapeCodeEnabled
{
get { return flashControl.NetscapeCodeEnabled; }
set { GetPropertyByName("NetscapeCodeEnabled").SetValue(flashControl, value); }
}
[Editor(typeof(FlashUrlEditor), typeof(UITypeEditor))]
public string MovieUrl
{
get { return flashControl.MovieUrl; }
set { GetPropertyByName("MovieUrl").SetValue(flashControl, value); }
}
Notez l’utilisation d’une méthode GetPropertyByName(string propName) qui permet d’obtenir un « proxy » de la propriété du contrôle afin de refléter les modifications en direct dans la fenêtre de propriétés. Voici le code de cette méthode :
private PropertyDescriptor GetPropertyByName(string propName)
{
PropertyDescriptor prop = TypeDescriptor.GetProperties(flashControl)[propName];
if(prop == null)
throw new ArgumentException("Propriété invalide.",propName);
else
return prop;
}
Pour terminer cette classe redéfinissons la méthode GetSortedActionItems(). Cette méthode va remplir les éléments du Smart Tag dans l’ordre que vous spécifiez, avec éventuellement les règles d’affichage pour certaines propriétés.
Il s’agit de remplir une liste de DesignerActionItem avec un cas particulier selon la valeur de la propriété BrowserDetection. Ici nos DesignerActionItem sont des catégories (DesignerActionHeaderItem) et des propriétés (DesignerActionPropertyItem).
Détail du constructeur d’un DesignerActionPropertyItem (hérite de DesignerActionItem) :
new DesignerActionPropertyItem(
"Nom de la propriété",
"Désignation de la propriété dans le Smart Tag",
"Catégorie",
"Description tooltip")
Code complet :
public override DesignerActionItemCollection GetSortedActionItems()
{
DesignerActionItemCollection listActionItems = new DesignerActionItemCollection();
listActionItems.Add(new DesignerActionHeaderItem("Flash"));
listActionItems.Add(new DesignerActionPropertyItem(
"MovieUrl",
"MovieUrl",
"Flash",
"Specifie l'URL du fichier Flash (swf) à afficher."));
listActionItems.Add(new DesignerActionPropertyItem(
"BrowserDetection",
"Automatic browser detection",
"Flash",
"Active la détection automatique du navigateur."));
if (!BrowserDetection)
{
listActionItems.Add(new DesignerActionHeaderItem("Navigateur cible"));
listActionItems.Add(new DesignerActionPropertyItem(
"InternetExplorerCodeEnabled",
"Internet Explorer code",
"Navigateur cible",
"Spécifie la génération de code propre à Internet Explorer."));
listActionItems.Add(new DesignerActionPropertyItem(
"NetscapeCodeEnabled",
"Netscape/Mozilla code",
"Navigateur cible",
"Spécifie la génération de code propre à Netscape/Mozilla."));
}
return listActionItems;
}
Ici, les propriétés InternetExplorerCodeEnabled et NetscapeCodeEnabled sont masquées si l’option BrowserDetection est cochée.
Il ne manque plus qu’à intégrer notre Smart Tag à notre contrôle, pour cela il faut compléter la classe du designer (FlashDesigner) en redéfinissant la propriété ActionLists :
private DesignerActionListCollection listDesignerActionItems = null;
public override System.ComponentModel.Design.DesignerActionListCollection ActionLists
{
get
{
if (listDesignerActionItems == null)
{
listDesignerActionItems = new DesignerActionListCollection();
listDesignerActionItems.Add(new FlashDesignerActionList(this.Component));
}
return listDesignerActionItems;
}
}
Et faire appel au namespace suivant en entête de fichier :
using System.ComponentModel.Design;
Et voilà le résultat dans le designer :
Dans notre Smart Tag les options Internet Explorer code et Netscape/Mozilla code ne sont visible que si la propriété détection automatique du navigateur est décochée.
Nous avons vu dans cet article comment améliorer et personnaliser l’utilisation du designer dans Visual Studio 2005 lors de la construction de contrôles web personnalisées (custom control). La mise à disposition de Smart Tag dans vos contrôles est un plus indéniable que sauront apprécier les utilisateurs. La version complète du FlashControl (avec l’ensemble des propriétés supportées par Flash) est disponible avec le code source de cet article et vous pouvez l’utiliser librement dans vos projets.