Uso del extensor de control ColorPicker (VB)

de Microsoft

ColorPicker es un extensor de AJAX de ASP.NET que ofrece una función de selección de colores para el cliente, con la interfaz de usuario en un control emergente. Se puede adjuntar a cualquier control de TextBox de ASP.NET. It.

Este tutorial tiene como objetivo explicar cómo se utiliza el extensor de control ColorPicker del kit de herramientas de control AJAX. El extensor de control ColorPicker muestra un cuadro de diálogo emergente que permite seleccionar un color. ColorPicker es útil para facilitar al usuario una interfaz intuitiva para seleccionar un color.

Extensión de un control de TextBox con el extensor de control ColorPicker

Por ejemplo, suponga que desea crear un sitio web que permita a los visitantes crear tarjetas de presentación personalizadas. Los visitantes pueden escribir el texto de la tarjeta de presentación y elegir el color. La página ASP.NET de la lista 1 contiene dos controles de TextBox, denominados txtCardText y txtCardColor. Al enviar el formulario, se muestran los valores seleccionados (véase la figura 1).

Simple form for creating a business card

Figura 01: Formulario simple para crear una tarjeta de presentación (haga clic para ver la imagen en tamaño completo)

Lista 1: CreateCard.aspx

<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<script runat="server">

    Protected Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text             
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</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>

El formulario de la lista 1 funciona, pero no ofrece una experiencia de usuario excelente. El usuario tiene que escribir un color en el TextBox. Si el usuario quiere un color especial (por ejemplo, solo el tono justo de verde guisante), el usuario tiene averiguar el código de color HTML sin ayuda.

Con el extensor de control ColorPicker, se puede crear una mejor experiencia de usuario. ColorPicker muestra un cuadro de diálogo de color cuando el movimiento pasa a un control de TextBox (véase la figura 2).

The ColorPicker Control Extender

Figura 02: Extensor de control ColorPicker (haga clic para ver la imagen en tamaño completo)

Tiene que completar dos pasos para usar el extensor de control ColorPicker con el formulario del listado 1:

  1. Añada a la página un control ScriptManager.
  2. Añada el extensor de control ColorPicker a la página.

Para poder usar el ColorPicker, tiene que agregar un ScriptManager a la página. Un buen sitio para incorporar el ScriptManager es justo debajo de la <etiqueta del >formulario del servidor de apertura. Puede arrastrar el ScriptManager a la página desde el cuadro de herramientas (el ScriptManager se encuentra en la pestaña de extensiones de AJAX). Como alternativa, puede escribir la siguiente etiqueta en vista de origen debajo de la etiqueta de formulario del servidor de apertura:

<asp:ScriptManager ID="ScriptManager1" runat="server" />

La manera más fácil de agregar el extensor de control ColorPicker a la página está en la vista de diseño. Si pasa el mouse sobre el control de TextBox txtCardColor, aparecerá una opción de tarea inteligente con la que puede agregar un extensor (véase la figura 3). Si elige esta opción, aparecerá el asistente del extensor (véase la figura 4).

Adding an extender

Figura 03: Adición de un extensor (haga clic para ver la imagen en tamaño completo)

Selecting a control extender with the Extender Wizard

Figura 04: Selección de un extensor de control con el asistente del extensor (haga clic para ver la imagen en tamaño completo)

Puede seleccionar el extensor de ColorPicker para extender el txtCardColor del TextBox con él. Haga clic en Aceptar para cerrar el cuadro de diálogo.

Una vez efectuados estos cambios, el origen de la página se asemeja a la lista 2.

Lista 2- CreateCard.aspx (con ColorPicker)

<%@ Page Language="VB" %>

<%@ 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 Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text            
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</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>

Observe que la página contiene ahora un control ColorPickerExtender que aparece directamente debajo del control txtCardColor del TextBox. El control ColorPickerExtender extiende el control txtCardColor para que aparezca un cuadro de diálogo con el selector de colores.

Uso de un botón para iniciar el cuadro de diálogo con el selector de colores

El extensor ColorPicker admite las siguientes propiedades:

  • PopupButtonId: identificador de un botón de la página que hace que aparezca el cuadro de diálogo con el selector de colores.
  • PopupPosition: posición, relativa al control de destino, del cuadro de diálogo del selector de colores. Los valores posibles son Absolute, Center, BottomLeft, BottomRight, TopLeft, TopRight, Right y Left (el valor predeterminado es BottomLeft).
  • SampleControlId: identificador de un control que muestra el color seleccionado.
  • SelectedColor: color inicial seleccionado por ColorPicker.

Puede usar estas propiedades para personalizar cómo se muestra el cuadro de diálogo con el selector de colores y cómo se muestra el color seleccionado. La página que aparece en la lista 3 muestra cómo se pueden usar algunas de estas propiedades.

Lista 3 - CreateCardButton.aspx

<%@ Page Language="VB" %>

<%@ 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 Sub btnSubmit_Click(ByVal sender As Object, ByVal e As System.EventArgs)
        ' Show the panel
        pnlResults.Visible = true
        
        ' Show the selected values
        lblSelectedText.Text = txtCardText.Text             
        lblSelectedColor.Text = txtCardColor.Text
    End Sub
</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 página de la lista 3 incluye un botón para elegir color (véase la figura 5). Al hacer clic en este botón, aparece el cuadro de diálogo con el selector de colores encima del TextBox. Si selecciona un color en el cuadro de diálogo, el color seleccionado aparecerá como color de fondo del control etiqueta lblSample.

La propiedad PopupButtonID de ColorPicker se usa para asociar el botón de selección de color con el extensor ColorPicker. Cuando se introduce un valor para la propiedad PopupButtonID, deja de aparecer el cuadro de diálogo con el selector de colores cuando el foco está en el control de destino. Tiene que hacer clic en el botón para que aparezca el cuadro de diálogo.

La propiedad SampleControlID se utiliza para asociar un control que muestra el color seleccionado con ColorPicker. ColorPicker cambia el color de fondo de este control al color seleccionado en cada momento.

Displaying the color picker dialog with a button

Figura 05: Visualización del cuadro de diálogo con el selector de colores con un botón (haga clic para ver la imagen en tamaño completo)

Resumen

En este tutorial, ha aprendido a usar el extensor de control ColorPicker para mostrar un cuadro de diálogo emergente con el selector de colores. En primer lugar, hemos repasado cómo mostrar el cuadro de diálogo cuando el foco pasa a un control de TextBox. A continuación, ha aprendido a crear un botón que muestra el cuadro de diálogo con el selector de colores al hacer clic en él.