Exemple de Concepteur de contrôles avec listes d'actions et services
Mise à jour : novembre 2007
La rubrique suivante décrit un exemple à l'aide de Concepteurs de contrôles ASP.NET avec des services et des listes d'action pour fournir une interface utilisateur au moment du design pour les contrôles serveur personnalisés.
Les sections suivantes contiennent un exemple de code qui montre comment créer et utiliser des Concepteurs de contrôles ASP.NET pour les contrôles serveur personnalisés. Plus particulièrement, cette rubrique (associée à la rubrique d'exemple de code connexe répertoriée ci-dessous) présente les fonctionnalités et tâches suivantes impliquées dans le travail avec les concepteurs :
Création de concepteurs qui utilisent des services hôtes concepteur et des listes d'action.
Association d'un concepteur à un contrôle personnalisé.
Compilation de contrôles et de leurs concepteurs associés dans un assembly.
Référencement des contrôles sur une page Web.
Travail avec les Concepteurs de contrôles en mode Design de Visual Studio 2005.
Deux versions de l'exemple de code pour les concepteurs sont incluses : une en Visual Basic et une autre en C#. L'exemple illustre des Concepteurs de contrôles personnalisés qui utilisent des services hôtes et des listes d'action. Vous pouvez rechercher l'exemple de code dans la rubrique Comment : utiliser des services et des listes d'actions avec les Concepteurs de contrôles. L'exemple de code comporte quatre contrôles personnalisés simples et créés uniquement pour illustrer l'utilisation de concepteurs. Trois des contrôles personnalisés dérivent de la classe Panel ; le quatrième est un contrôle Button personnalisé. Chacun des contrôles Panel dans le code source est également associé à un contrôle de concepteur personnalisé. Ces concepteurs utilisent des services pour permettre au contrôle d'interagir avec un environnement hôte tel que Visual Studio 2005. Dans un environnement de design visuel (mode Design, dans Visual Studio 2005), ces concepteurs fournissent le code pour vous permettre de créer des menus au moment du design avec différentes tâches pour configurer les contrôles.
Compilation d'un exemple
L'exemple Visual Basic et l'exemple C# ont les mêmes fonctionnalités, vous pouvez donc choisir l'exemple dans le langage de programmation que vous préférez.
Pour utiliser l'exemple que vous préférez, compilez-le en tant bibliothèque et placez l'assembly résultant dans le répertoire Bin de votre application Web.
L'exemple de code suivant indique comment compiler l'exemple à partir d'une invite de commandes.
vbc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:DesignerServicesAndListsVB.dll DesignerServicesAndLists.vb
csc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out: DesignerServicesAndListsCS.dll DesignerServicesAndLists.cs
Après avoir compilé l'exemple, souvenez-vous de copier le fichier DesignerServicesAndListsVB.dll ou DesignerServicesAndListsCS.dll résultant dans le dossier Bin de votre site Web.
Fichiers XML requis
En plus de l'assembly avec les contrôles et les concepteurs, l'exemple est dépendant de trois fichiers XML séparés. Ces fichiers XML contiennent des informations de style de base qui montrent comment les concepteurs peuvent utiliser des services fournis par l'environnement hôte. Dans ce cas, les concepteurs chargent dynamiquement des données de style à partir des fichiers XML au moment du design et utilisent ces données pour modifier l'apparence de contrôles sur l'aire de conception. Cet exemple montre l'utilisation de services hôtes concepteur et n'est pas une recommandation pour l'implémentation des définitions de style.
Les fichiers XML pour cet exemple résident dans le même dossier que la page Web ASP.NET sur laquelle vous hébergerez les contrôles. Le contenu pour les fichiers, RedStyle.xml, BlueStyle.xmlet GreenStyle.xml, est fourni au-dessous.
RedStyle.xml
<?xml version="1.0" encoding="utf-8" ?>
<styles>
<style name="BackColor" value="red"></style>
<style name="ForeColor" value="white"></style>
</styles>
BlueStyle.xml
<?xml version="1.0" encoding="utf-8" ?>
<styles>
<style name="BackColor" value="blue"></style>
<style name="ForeColor" value="white"></style>
</styles>
GreenStyle.xml
<?xml version="1.0" encoding="utf-8" ?>
<styles>
<style name="BackColor" value="green"></style>
<style name="ForeColor" value="white"></style>
</styles>
Utilisation des exemples de contrôles et de concepteurs dans une page ASP.NET
Pour travailler avec les exemples de contrôles et de concepteurs, vous devez placer les contrôles dans une page Web ASP.NET que vous pouvez utiliser dans un concepteur tel que Visual Studio 2005. Dans le cadre de cet exemple, vous devez ajouter une page Web ASP.NET à votre site Web dans Visual Studio 2005. En premier lieu, créez une page Web. Puis, en mode Source, supprimez le contenu de la page par défaut et ajoutez les directives Page et Register affichées dans l'exemple de code suivant.
<%@ page language="VB" %>
<%@ register tagprefix="aspSample"
assembly="DesignerServicesAndListsVB"
namespace="Samples.AspNet.VB.Controls" %>
<%@ page language="C#" %>
<%@ register tagprefix="aspSample"
assembly="DesignerServicesAndListsCS"
namespace="Samples.AspNet.CS.Controls" %>
.gif "Remarque") Remarque : |
|---|
La seule différence entre les directives pour Visual Basic et C# est l'attribut de langage dans la directive Page et l'extension du nom de l'assembly dans la directive Register. |
Vous devez également copier le code de balisage suivant au-dessous de la directive Register. (Ce code est le même que vous utilisiez Visual Basic ou C#.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>Designer Samples</title>
</head>
<body>
<form id="form1" >
<p style="font-family:tahoma;font-size:larger;
font-weight:bold">
Using Action Lists and Designer Host Services</p>
<div style="font-family:tahoma;font-size:x-small">
<span style="font-size: 10pt">Control #1 (ControlWithStyleTasksDesigner):
PanelContainerDesigner using a DesignerActionList, which
obtains a list of XML files in the project and sets
the style using the XML element
definitions.</span><p />
</div>
<aspSample:ControlWithStyleTasks id="ctl1"
backcolor="Red" forecolor="White">
Hello there.</aspSample:ControlWithStyleTasks>
<br />
<div style="font-family:tahoma;font-size:x-small">
<span style="font-size: 10pt">Control #2 (ControlWithConfigurationSettingDesigner):
PanelContainerDesigner using configuration settings
to obtain
the FrameCaption value.</span><p />
</div>
<aspSample:ControlWithConfigurationSetting
id="ctl2" >
Hello There
</aspSample:ControlWithConfigurationSetting>
<br />
<div style="font-family:tahoma;font-size:x-small">
<span style="font-size: 10pt">Control #3 (ControlWithButtonTasksDesigner):
PanelContainerDesigner using a smart-task action
item to insert a new button on the Web Forms page.</span><p />
</div>
<aspSample:ControlWithButtonTasks
id="ctl3" >
Hello There
</aspSample:ControlWithButtonTasks>
</form>
</body>
</html>
Paramètres de configuration pour l'exemple
L'un des concepteurs dans cet exemple utilise une entrée du fichier de configuration pour afficher dynamiquement un titre pour le mode Design sur l'un des contrôles personnalisés. Vous devez ouvrir le fichier Web.config de votre site Web ou en créer un s'il n'existe pas et ajouter une clé à l'élément <appSettings>, comme indiqué dans l'exemple de code suivant.
<appSettings>
<add key="ContainerControlTitle" value="Title from Config File"/>
</appSettings>
Test des Concepteurs de contrôles dans Visual Studio 2005
Après avoir ajouté le fichier .dll d'assembly compilé au dossier Bin de votre site Web, ajouté les fichiers XML, ajouté une page hôte avec les contrôles personnalisés référencés et créé l'entrée dans le fichier Web.config, vous pouvez travailler avec les contrôles dans le concepteur. Assurez-vous que la page est ouverte en mode Design dans Visual Studio 2005. Remarquez que trois contrôles Panel se trouvent sur la page. Si vous cliquez sur le contrôle, une région que vous pouvez modifier se dessine.
Test des services du concepteur et listes d'action
Vous pouvez tester le concepteur du premier contrôle en positionnant le pointeur de la souris sur l'angle droit supérieur du contrôle, puis en cliquant sur le bouton de la liste d'action. La capture d'écran suivante représente le contrôle avec la liste d'action affichée.
Contrôle avec la liste d'action affichée
.gif)
Dans la zone de texte Configurer Xml dans la liste d'action, vous pouvez choisir parmi les fichiers XML que vous avez créés précédemment. La sélection de l'un des fichiers XML existants met à jour le style au moment du design du contrôle avec les informations de style de ce fichier XML. Vous pouvez essayer la même technique à l'aide des noms des autres fichiers XML.
Un clic sur le bouton de la liste d'action du troisième contrôle affiche une liste d'action comme celle de la capture d'écran suivante.
Liste d'action du troisième contrôle
.gif)
La commande Ajouter un bouton ajoute un contrôle Button à la vue design. La commande Ajouter un bouton personnalisé ajoute une instance d'un contrôle bouton personnalisé à la page.
Test des services du concepteur et zones modifiables
Le deuxième contrôle affiche la légende Title Added From Config. Le concepteur utilise les services du concepteur pour extraire ce paramètre du fichier Web.config et l'ajouter à la vue design.
Le contrôle présente également une zone modifiable sur le contrôle. Vous pouvez cliquer sur la zone modifiable pour taper le nouveau contenu. Le contenu est rendu persistant dans le code source de la page.
Voir aussi
Tâches
Procédure pas à pas : création d'un Concepteur de contrôles de base pour un contrôle serveur Web
Comment : utiliser des services et des listes d'actions avec les Concepteurs de contrôles