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).

Image non disponible
Formulaire simple pour créer une carte de visite
Listing 1 - CreateCard.aspx
Sélectionnez

<!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).

Image non disponible
L'extendeur de contrôle ColorPicker

Vous devez remplir deux étapes pour utiliser l'extendeur de contrôle ColorPicker dans le formulaire du Listing 1:

  1. Ajoutez un contrôle ScriptManager à la page
  2. 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 :

 
Sélectionnez

<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).

Image non disponible
Ajout d'un extendeur
Image non disponible
Sélection d'un extendeur de contrôle avec l'Assistant Extender

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.

Listing 2 - CreateCard.aspx (avec ColorPicker)
Sélectionnez

<%@ 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.

Listing 3 - CreateCardButton.aspx
Sélectionnez

<%@ 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.

Image non disponible
Affichage du sélécteur de couleur avec un bouton

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é.