Traduction▲
Cet article est la traduction la plus fidèle possible de l'article original : Using the ColorPicker Control Extender
Introduction▲
Le but de ce tutoriel est d'expliquer comment vous pouvez utiliser l'extendeur de contrôle ColorPicker d'AJAX Control Toolkit. L'extendeur de contrôle ColorPicker affiche un popup qui vous permet de sélectionner une couleur. Le ColorPicker est utile lorsque vous voulez fournir une interface utilisateur intuitive pour permettre à un utilisateur de choisir une couleur.
Etendre un contrôle TextBox avec l'extendeur de contrôle ColorPicker▲
Imaginez, par exemple, que vous voulez créer un site Web qui permet aux visiteurs de créer des cartes d'affaires personnalisées. Les visiteurs peuvent entrer un texte pour leur carte d'affaires et en choisir la couleur. La page ASP.NET du Listing 1 contient deux contrôles TextBox, nommés txtCardText et txtCardColor. Lorsque vous soumettez le formulaire, les valeurs sélectionnées sont affichées (voir Figure 1).
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
// Show the panel
pnlResults.Visible = true;
// Show the selected values
lblSelectedText.Text = txtCardText.Text;
lblSelectedColor.Text = txtCardColor.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<h1>Create a Business Card</h1>
<asp:Label
ID="lblCardText"
Text="Card Text"
AssociatedControlID="txtCardText"
runat="server" />
<br />
<asp:TextBox
ID="txtCardText"
Runat="server" />
<br /><br />
<asp:Label
ID="lblCardColor"
Text="Card Color"
AssociatedControlID="txtCardColor"
runat="server" />
<br />
<asp:TextBox
ID="txtCardColor"
Runat="server" />
<br /><br />
<asp:Button
ID="btnSubmit"
Text="Submit"
Runat="server" OnClick="btnSubmit_Click" />
<asp:Panel ID="pnlResults" Visible="false" runat="server">
<h2>Your Selection</h2>
Selected Card Text:
<asp:Label
ID="lblSelectedText"
Runat="server" />
<br />
Selected Card Color:
<asp:Label
ID="lblSelectedColor"
Runat="server" />
</asp:Panel>
</div>
</form>
</body>
</html>Le formulaire du Listing 1 fonctionne, mais il ne permets pas une bonne expérience utilisateur. L'utilisateur doit taper une couleur dans la zone de texte. Si l'utilisateur veut une couleur spécialisée - par exemple, juste la bonne nuance de verts - l'utilisateur doit trouver le code de couleur HTML sans aucune aide.
Vous pouvez utiliser l'extendeur de contrôle ColorPicker afin de créer une meilleure expérience utilisateur. Le ColorPicker affiche une boîte de dialogue de couleur lorsque vous mettez le focus sur un contrôle TextBox (voir Figure 2).
Vous devez remplir deux étapes pour utiliser l'extendeur de contrôle ColorPicker dans le formulaire du Listing 1:
- Ajoutez un contrôle ScriptManager à la page
- Ajouter l'extendeur de contrôle ColorPicker à la page
Avant de pouvoir utiliser le ColorPicker, vous devez ajouter un ScriptManager à votre page. Un bon endroit pour ajouter le ScriptManager est juste en dessous de la balise <form>. Vous pouvez faire glisser le ScriptManager sur la page depuid la boîte à outils (le ScriptManager est situé sous l'onglet Extensions AJAX). Sinon, vous pouvez taper la balise suivante dans le code source en dessous de la balise form :
<asp:ScriptManager ID="ScriptManager1" runat="server" />La façon la plus simple d'ajouter l'extendeur de contrôle ColorPicker à la page est d'utiliser le mode Création. Si vous passer votre souris sur la zone de texte txtCardColor, le menu "Tâche Textbox" apparaît et vous permet d'ajouter un extendeur (voir Figure 3). Si vous choisissez cette option, l'Assistant Extender apparaît (voir Figure 4).
Vous pouvez choisir l'extendeur de contrôle ColorPicker afin d'étendre la txtCardColor TextBox avec l'extendeur de contrôle ColorPicker. Cliquez sur OK pour fermer la boîte de dialogue.
Après avoir apporté ces modifications, le code source de la page ressemble au Listing 2.
<%@ Page Language="C#" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
// Show the panel
pnlResults.Visible = true;
// Show the selected values
lblSelectedText.Text = txtCardText.Text;
lblSelectedColor.Text = txtCardColor.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<h1>Create a Business Card</h1>
<asp:Label
ID="lblCardText"
Text="Card Text"
AssociatedControlID="txtCardText"
runat="server" />
<br />
<asp:TextBox
ID="txtCardText"
Runat="server" />
<br /><br />
<asp:Label
ID="lblCardColor"
Text="Card Color"
AssociatedControlID="txtCardColor"
runat="server" />
<br />
<asp:TextBox
ID="txtCardColor"
AutoCompleteType="None"
Runat="server" />
<cc1:ColorPickerExtender
ID="txtCardColor_ColorPickerExtender"
TargetControlID="txtCardColor"
Enabled="True"
runat="server">
</cc1:ColorPickerExtender>
<br /><br />
<asp:Button
ID="btnSubmit"
Text="Submit"
Runat="server" OnClick="btnSubmit_Click" />
<asp:Panel ID="pnlResults" Visible="false" runat="server">
<h2>Your Selection</h2>
Selected Card Text:
<asp:Label
ID="lblSelectedText"
Runat="server" />
<br />
Selected Card Color:
<asp:Label
ID="lblSelectedColor"
Runat="server" />
</asp:Panel>
</div>
</form>
</body>
</html>Notez que la page contient à présent un contrôle ColorPickerExtender qui apparaît directement sous le contrôle txtCardColor. Le contrôle ColorPickerExtender étends le contrôle txtCardColor de sorte qu'il affiche un dialogue de sélection de couleur.
Utilisation d'un bouton pour ouvrir la boîte de dialogue Color Picker ▲
L'extendeur ColorPicker possède les propriétés suivantes:
- PopupButtonId - L'ID d'un bouton sur la page qui provoque l'apparition de la boîte de dialogue du sélecteur de couleur.
- PopupPosition - La position, par rapport au contrôle visé, de la boîte de dialogue du sélecteur de couleur. Les valeurs possibles sont Absolute, Center, BottomLeft, BottomRight, TopLeft, TopRight, Right et Left (par défaut BottomLeft).
- SampleControlId - L'ID d'un contrôle qui affiche la couleur sélectionnée.
- SelectedColor - La couleur initiale du ColorPicker.
Vous pouvez utiliser ces propriétés pour personnaliser la façon dont la boîte de dialogue du sélecteur de couleur est affichée, ainsi que la façon dont la couleur sélectionnée est affichée. La page du Listing 3 illustre la manière dont vous pouvez utiliser plusieurs de ces propriétés.
<%@ Page Language="C#" %>
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void btnSubmit_Click(object sender, EventArgs e)
{
// Show the panel
pnlResults.Visible = true;
// Show the selected values
lblSelectedText.Text = txtCardText.Text;
lblSelectedColor.Text = txtCardColor.Text;
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title></title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server" />
<h1>Create a Business Card</h1>
<asp:Label
ID="lblCardText"
Text="Card Text"
AssociatedControlID="txtCardText"
runat="server" />
<br />
<asp:TextBox
ID="txtCardText"
Runat="server" />
<br /><br />
<asp:Label
ID="lblCardColor"
Text="Card Color"
AssociatedControlID="txtCardColor"
runat="server" />
<br />
<asp:TextBox
ID="txtCardColor"
AutoCompleteType="None"
Runat="server" />
<asp:Button
ID="btnPickColor"
Text="Pick Color"
Runat="server" />
<asp:Label
ID="lblSample"
Runat="Server"> Sample </asp:Label>
<cc1:ColorPickerExtender
ID="txtCardColor_ColorPickerExtender"
TargetControlID="txtCardColor"
PopupButtonID="btnPickColor"
PopupPosition="TopRight"
SampleControlID="lblSample"
Enabled="True"
runat="server">
</cc1:ColorPickerExtender>
<br /><br />
<asp:Button
ID="btnSubmit"
Text="Submit"
Runat="server" OnClick="btnSubmit_Click" />
<asp:Panel ID="pnlResults" Visible="false" runat="server">
<h2>Your Selection</h2>
Selected Card Text:
<asp:Label
ID="lblSelectedText"
Runat="server" />
<br />
Selected Card Color:
<asp:Label
ID="lblSelectedColor"
Runat="server" />
</asp:Panel>
</div>
</form>
</body>
</html>La page du Listing 3 comprend un bouton "Pick Color" (voir figure 5). Lorsque vous cliquez sur ce bouton, le sélecteur de couleur apparaît au-dessus de la TextBox. Si vous sélectionnez une couleur dans la boîte de dialogue, la couleur sélectionnée apparaît en tant que couleur de fond du contrôle de type Label lblSample.
La propriété PopupButtonID du ColorPicker est utilisée pour associer le bouton "Pick Color" avec le ColorPicker. Lorsque vous fournissez une valeur à la propriété PopupButtonID, le dialogue de sélection de couleur n'apparaît plus lorsque le contrôle obtient le focus. Vous devez cliquer sur le bouton pour afficher la boîte de dialogue.
La propriété SampleControlID est utilisée pour associer un contrôle qui affiche la couleur sélectionnée avec le ColorPicker. Le ColorPicker modifie la couleur de fond de ce contrôle pour qu'elle devienne la couleur actuellement sélectionnée.
Résumé▲
Dans ce tutoriel, vous avez appris comment utiliser l'extendeur de contrôle ColorPicker pour afficher un dialogue de séléction de couleur. Tout d'abord, nous avons examiné la façon dont vous pouvez afficher la boîte de dialogue lorsque le focus est mis sur un contrôle TextBox. Ensuite, vous avez appris comment créer un bouton qui affiche le dialogue de séléction de couleur lorsque le bouton est cliqué.
