Tutorial: Crear un diseñador de controles básico para un control de servidor Web

Artículo
10/22/2014

Actualización: noviembre 2007

En este tutorial se muestra cómo crear un diseñador de controles básico para proporcionar una interfaz de usuario en tiempo de diseño para un control de servidor Web.

Cuando crea un control de servidor ASP.NET personalizado, puede crear un diseñado asociado para representar el control en una herramienta de diseño visual como Microsoft Visual Studio 2005. El diseñador permite al entorno host representar una interfaz de usuario en tiempo de diseño para el control, de forma que los programadores puedan configurar fácilmente las propiedades y el contenido del control. Para obtener más información acerca de las características de diseñador y las distintas clases de diseñador que puede asociar a un control personalizado, vea Información general sobre los diseñadores de controles ASP.NET.

Durante este tutorial aprenderá a:

Crear un diseñador de controles compuestos estándar y asociarlo a un control compuesto.
Crear un diseñador de controles compuestos redimensionables y asociarlo a un control compuesto.
Crear un diseñador de controles contenedores básicos con una región modificable y asociarlo a un control WebControl. Este diseñador le permite agregar texto a la región modificable en la superficie de diseño, y también puede arrastrar otros controles adicionales a la región.
Hacer referencia a los controles personalizados (y sus diseñadores asociados) en una página Web.
Trabajar con la página Web en la vista Diseño en Visual Studio 2005.

Requisitos previos

Para poder completar este tutorial, necesitará:

Visual Studio 2005, que utilizará para crear una página Web que aloja sus controles personalizados y sus diseñadores asociados.
Un sitio Web ASP.NET, para la página que aloja los controles. Si ya tiene este tipo de sitio configurado, puede utilizarlo como punto de partida para este tutorial. En caso contrario, para obtener información detallada sobre la creación de un directorio o sitio virtual, vea Cómo: Crear y configurar directorios virtuales en IIS 5.0 y 6.0.

Crear controles y diseñadores personalizados

En esta sección creará tres controles de servidor Web básicos y un diseñador de controles personalizados asociado para cada uno de ellos.

Para crear un archivo para el código

En un editor, cree un nuevo archivo denominado SimpleControlDesigners con la extensión apropiada para el lenguaje en el que vaya a trabajar. Por ejemplo, en Visual Studio 2005, cree un nuevo archivo de clase denominado SimpleControlDesigners.vb o SimpleControlDesigners.cs.

Agregue las referencias de espacio de nombres siguientes que son necesarias para trabajar con las clases de diseñador. Agregue también un espacio de nombres para contener los controles y los diseñadores asociados.

Imports System
Imports System.ComponentModel
Imports System.ComponentModel.Design
Imports System.Drawing
Imports System.Web.UI
Imports System.Web.UI.Design
Imports System.Web.UI.Design.WebControls
Imports System.Web.UI.WebControls

Namespace Samples.AspNet.VB.Controls
End Namespace

using System;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Drawing;
using System.Web.UI;
using System.Web.UI.Design;
using System.Web.UI.Design.WebControls;
using System.Web.UI.WebControls;

namespace Samples.AspNet.CS.Controls 
{
}

Guarde el archivo.

Ahora está en condiciones de crear un control de servidor Web compuesto y un diseñador asociado. Un diseñador puede residir en el mismo ensamblado que el control o en otro diferente; en este tutorial los creará en el mismo archivo de código y ensamblado por comodidad.

Para crear un control compuesto y un diseñador asociado

Dentro del espacio de nombres que declaró en el archivo SimpleControlDesigners, cree una declaración pública para una clase de control compuesto que herede de CompositeControl, como se muestra en el ejemplo de código siguiente.
```
    Public Class SimpleCompositeControl
        Inherits CompositeControl
    End Class
```
```
 public class SimpleCompositeControl : CompositeControl
    {
    }
```

Agregue a la clase las propiedades públicas que se muestran en el ejemplo de código siguiente. Se utilizarán para crear parte de la interfaz de usuario de la página Web.

Dim _prompt As String = "Please enter your date of birth: "
Overridable Property Prompt() As String
    Get
        Dim o As Object
        o = ViewState("Prompt")
        If o Is Nothing Then
            Return _prompt
        Else
            Return CType(o, String)
        End If
    End Get
    Set(ByVal value As String)
        ViewState("Prompt") = value
    End Set
End Property

Overridable Property DOB() As DateTime
    Get
        Dim o As Object
        o = ViewState("DOB")
        If o Is Nothing Then
            Return DateTime.Now
        Else
            Return CType(o, DateTime)
        End If
    End Get
    Set(ByVal value As DateTime)
        ViewState("DOB") = value
    End Set
End Property

private String _prompt = "Please enter your date of birth: ";
public virtual String Prompt
{
    get
    {
        object o = ViewState["Prompt"];
        return (o == null) ? _prompt : (string)o;
    }
    set
    {
        ViewState["Prompt"] = value;
    }
}

public virtual DateTime DOB
{
    get
    {
        object o = ViewState["DOB"];
        return (o == null) ? DateTime.Now : (DateTime)o;
    }
    set
    {
        ViewState["DOB"] = value;
    }
}

Cree un método para agregar controles secundarios al control compuesto. El método siguiente agrega dos cuadros de texto y un salto de línea que serán visibles en la página Web.

Protected Overrides Sub CreateChildControls()
    Dim lab As New Label

    lab.Text = Prompt
    lab.ForeColor = System.Drawing.Color.Red
    Me.Controls.Add(lab)

    Dim lit As New Literal()
    lit.Text = "<br />"
    Me.Controls.Add(lit)

    Dim tb As New TextBox()
    tb.ID = "tb1"
    tb.Text = DOB.ToString()
    Me.Controls.Add(tb)

    MyBase.CreateChildControls()
End Sub

protected override void CreateChildControls() 
{
    Label lab = new Label();

    lab.Text = Prompt;
    lab.ForeColor = System.Drawing.Color.Red;
    this.Controls.Add(lab);

    Literal lit = new Literal();
    lit.Text = "<br />";
    this.Controls.Add(lit);

    TextBox tb = new TextBox();
    tb.ID = "tb1";
    tb.Text = DOB.ToString();
    this.Controls.Add(tb);

    base.CreateChildControls();
}

Cree una clase simple de diseñador de controles compuestos que derive de CompositeControlDesigner para asociar al control compuesto recién creado.

Aunque hay muchas características de representación de la interfaz de usuario que podría agregar al diseñador, el ejemplo de código siguiente simplemente crea un diseñador y reemplaza una propiedad clave de la clase base para impedir que se cambie el tamaño del control en la vista Diseño.

Public Class SimpleCompositeControlDesigner
    Inherits CompositeControlDesigner
    ' Set this property to prevent the designer from being resized.
    Public Overrides ReadOnly Property AllowResize() As Boolean
        Get
            Return False
        End Get
    End Property
End Class

public class SimpleCompositeControlDesigner : CompositeControlDesigner
{
    // Set this property to prevent the designer from being resized.
    public override bool AllowResize 
    {
        get { return false; }
    }
}

Inmediatamente encima de la declaración de clase para el control compuesto, agregue un atributo de metadatos Designer que asocie el control a la clase de diseñador recién creada, como se muestra en el ejemplo de código siguiente.
```
<Designer(GetType(SimpleCompositeControlDesigner))> _
Public Class SimpleCompositeControl
    Inherits CompositeControl
```
```
[Designer(typeof(SimpleCompositeControlDesigner))]
public class SimpleCompositeControl : CompositeControl
```
Guarde el archivo.

Ahora que ha creado un control de servidor Web compuesto personalizado y un diseñador asociado, puede crear un segundo control que derive del primero. El segundo control sólo difiere en que se puede cambiar el tamaño del diseñador asociado en la superficie de diseño.

Para crear un control compuesto cuyo tamaño se pueda cambiar y el diseñador asociado

Dentro del espacio de nombres que declaró en el archivo SimpleControlDesigners, cree una declaración pública para una nueva clase de control compuesto que herede del control SimpleCompositeControl que creó anteriormente. En el ejemplo de código siguiente se muestra una nueva declaración.
```
    Public Class SimpleCompositeControl2
        Inherits SimpleCompositeControl
    End Class
```
```
 public class SimpleCompositeControl2 : SimpleCompositeControl
    {
    }
```

Asocie este control a la clase base CompositeControlDesigner.

De forma predeterminada, este ejemplo crea un diseñador básico cuyo tamaño se puede cambiar para el control compuesto.

<Designer(GetType(CompositeControlDesigner))> _
Public Class SimpleCompositeControl2
    Inherits SimpleCompositeControl
End Class

[Designer(typeof(CompositeControlDesigner))]
public class SimpleCompositeControl2 : SimpleCompositeControl
{
}

Guarde el archivo.

Los dos primeros controles que creó eran controles compuestos que asoció a diseñadores de controles compuestos. Ahora creará un control sencillo que deriva de WebControl y lo asociará a una clase ContainerControlDesigner. Este tipo de diseñador es útil cuando desea asociar un diseñador a un único control de servidor Web personalizado y proporcionar una única región modificable en la superficie de diseño. El control personalizado que crea aquí no implementa ninguna funcionalidad real; es sólo para mostrar las características de la clase ContainerControlDesigner.

Nota:
También podría proporcionar esta misma funcionalidad utilizando un control compuesto y un diseñador como los que creó anteriormente. Este ejemplo sólo está pensado para mostrar cómo puede utilizar la clase ContainerControlDesigner y asociarla a un control WebControl.

Para crear un control de servidor Web y un diseñador de contenedores con una región modificable

Dentro del espacio de nombres que declaró en el archivo SimpleControlDesigners, cree una declaración pública para una nueva clase de control de servidor Web, como se muestra en el ejemplo de código siguiente.
```
   Public Class SimpleContainerControl
        Inherits WebControl
        Implements INamingContainer
    End Class
```
```
 public class SimpleContainerControl : WebControl, INamingContainer
    {
    }
```

Cree una clase de diseñador de controles contenedores para asociarla al control personalizado. Implemente dos propiedades: una propiedad FrameStyle para contener el estilo del marco del diseñador y una propiedad FrameCaption para contener el texto de encabezado del marco. Estas propiedades proporcionan un marco para que el control se represente y se seleccione de manera visible en la superficie de diseño. El código para el diseñador y las propiedades se muestra en el ejemplo de código siguiente.

Nota:
La clase ContainerControlDesigner controla automáticamente todos los demás aspectos de cómo se representa el control personalizado en tiempo de diseño y de cómo se proporciona una única región modificable.

Public Class SimpleContainerControlDesigner
    Inherits ContainerControlDesigner

    Dim _style As Style

    ' Add the caption by default.
    Public Overrides ReadOnly Property FrameCaption() As String
        Get
            Return "A Simple ContainerControlDesigner"
        End Get
    End Property

    Public Overrides ReadOnly Property Framestyle() As Style
        Get
            If _style Is Nothing Then
                _style = New Style()
                _style.Font.Name = "Verdana"
                _style.Font.Size = New FontUnit("XSmall")
                _style.BackColor = Color.LightBlue
                _style.ForeColor = Color.Black
            End If

            Return _style
        End Get
    End Property

End Class

public class SimpleContainerControlDesigner : ContainerControlDesigner
{
    private Style _style = null;

    // Add the caption by default. Note that the caption 
    // will only appear if the Web server control 
    // allows child controls rather than properties. 
    public override string FrameCaption
    {
        get
        {
            return "A Simple ContainerControlDesigner";
        }
    }

    public override Style FrameStyle
    {
        get
        {
            if (_style == null)
            {
                _style = new Style ();
                _style.Font.Name = "Verdana";
                _style.Font.Size = new FontUnit ("XSmall");
                _style.BackColor = Color.LightBlue;
                _style.ForeColor = Color.Black;
            }

            return _style;
        }
    }
}

Asocie el diseñador al control. Justo encima de la declaración de clase para el control de servidor Web, agregue el atributo de metadatos Designer. Tenga en cuenta que en este caso, como se muestra en el ejemplo de código siguiente, también agrega el atributo ParseChildren con un parámetro false. Esto indica al analizador en tiempo de diseño que trate el contenido interno de controles como controles secundarios, en lugar de como propiedades. En este caso, desea tratar el contenido interno de este control como controles secundarios, de forma que pueda arrastrar realmente otros controles de servidor a la región modificable en tiempo de diseño, así como modificar sus propiedades.
```
<Designer(GetType(SimpleContainerControlDesigner))> _
<ParseChildren(False)> _
Public Class SimpleContainerControl
    Inherits WebControl
    Implements INamingContainer
End Class
```
```
[Designer (typeof(SimpleContainerControlDesigner))]
[ParseChildren (false)]
public class SimpleContainerControl : WebControl, INamingContainer
{
}
```
Guarde el archivo.

Ha creado tres controles personalizados y los diseñadores de controles asociados. Sólo queda compilar los controles en un ensamblado y, a continuación, trabajar con ellos en una herramienta de diseño visual.

Para compilar los controles personalizados y diseñadores

Abra un símbolo del sistema a la carpeta donde creó el archivo SimpleControlDesigners. Desde este símbolo del sistema puede compilar el código fuente en un ensamblado.

Nota:
Para ejecutar los compiladores de .NET Framework desde esta ubicación, debe haber agregado la ruta de acceso de la instalación de .NET Framework a la variable PATH del equipo. Normalmente, esta ruta de acceso está bajo el directorio de instalación de Windows, en \Microsoft.NET\Framework\<número de versión>. Si no ha actualizado la variable PATH, haga clic con el botón secundario del mouse en Mi PC, seleccione Propiedades, haga clic en la ficha Opciones avanzadas y, después, haga clic en el botón Variables de entorno. En la lista Variables del sistema, haga doble clic en la variable PATH. En el cuadro de texto Valor de variable, agregue un signo de punto y coma al final de los valores existentes y, a continuación, escriba la ruta de acceso de la instalación de .NET Framework. Haga clic en Aceptar para cerrar todos los cuadros de diálogo.

Para ejecutar los compiladores de .NET Framework desde esta ubicación, debe haber agregado la ruta de acceso de la instalación de .NET Framework a la variable PATH del equipo. Normalmente, esta ruta de acceso está bajo el directorio de instalación de Windows, en \Microsoft.NET\Framework\<número de versión>. Si no ha actualizado la variable PATH, haga clic con el botón secundario del mouse en Mi PC, seleccione Propiedades, haga clic en la ficha Opciones avanzadas y, después, haga clic en el botón Variables de entorno. En la lista Variables del sistema, haga doble clic en la variable PATH. En el cuadro de texto Valor de variable, agregue un signo de punto y coma al final de los valores existentes y, a continuación, escriba la ruta de acceso de la instalación de .NET Framework. Haga clic en Aceptar para cerrar todos los cuadros de diálogo.

Compile los controles del archivo SimpleControlDesigners en un ensamblado utilizando el comando de compilación siguiente.

csc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersCS.dll simplecontroldesigners.cs

vbc /r:System.dll /r:System.Design.dll /r:System.Drawing.dll /debug+ /r:System.Web.dll /t:library /out:SimpleControlDesignersVB.dll SimpleControlDesigners.vb

Mueva el archivo de ensamblado resultante a la carpeta \Bin del sitio Web para la página que alojará los controles.

Nota:
Los usuarios de Visual Studio que deseen compilar los controles y diseñadores necesitarán agregar una referencia a System.Design.dll. Para obtener más información, vea Cómo: Agregar una referencia a un componente .NET o COM en un sitio Web.

Crear una página Web para alojar los controles

Ahora que ha creado un ensamblado con los controles personalizados y sus diseñadores de controles asociados, creará una página Web en Visual Studio 2005 para hacer referencia a los controles, ver cómo aparecen en la vista Diseño y cargar la página en un explorador.

Para crear una página Web para alojar los controles

Con el sitio Web abierto en Visual Studio 2005, cree una nueva página denominada ControlDesigners.aspx. En la parte superior de la página, justo debajo de la declaración de página, agregue una directiva Register para hacer referencia al ensamblado y los controles que creó previamente, como se muestra en el ejemplo de código siguiente.
```
<%@ Page Language="VB" %>
<%@ register tagprefix="aspSample" 
  assembly="SimpleControlDesignersVB" 
  namespace="Samples.AspNet.VB.Controls" %>
```
```
<%@ Page Language="C#" %>
<%@ register tagprefix="aspSample" 
  assembly="SimpleControlDesignersCS" 
  namespace="Samples.AspNet.CS.Controls" %>
```

Complete el resto de la página como se muestra en el ejemplo de código siguiente para hacer referencia a cada uno de los tres controles que creó anteriormente: SimpleCompositeControl, SimpleCompositeControl2 y SimpleContainerControl. Observe que para hacer referencia a cada control utiliza el prefijo aspSample especificado en la directiva Register.

<!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 >
    <title>Designers Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Control Designers
        </p>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl id="SimpleControl1"  />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2"   
            height="87px" width="238px" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
                Container</span>
        </div>
        <aspSample:SimpleContainerControl id="SimpleControl3"  
            height="57px">
            Type some content here.
        </aspSample:SimpleContainerControl>
        <br /><br />
    </div>
    </form>
</body>
</html>

<!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 >
    <title>Designers Page</title>
</head>
<body>
    <form id="form1" >
    <div>
        <p style="font-family:tahoma;font-size:large;
            font-weight:bold">
            Simple Control Designers
        </p>
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, no-resize</span>
        </div>
        <aspSample:SimpleCompositeControl id="SimpleControl1"  />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
            Composite, resize</span>
        </div>
        <aspSample:SimpleCompositeControl2 id="SimpleControl2"   
            height="87px" width="238px" />
        <br /><br />
        <div style="font-family:tahoma;font-size:x-small;">
            <span style="font-size: 14pt">
                Container</span>
        </div>
        <aspSample:SimpleContainerControl id="SimpleControl3"  
            height="57px">
            Type some content here.
        </aspSample:SimpleContainerControl>
        <br /><br />
    </div>
    </form>
</body>
</html>

Guarde la página.

Ahora puede probar la página en la vista Diseño para ver cómo funcionan los diseñadores de controles.

Para mostrar la presentación en tiempo de diseño de los controles

Cambie a la vista Diseño para la página.

Los controles deben aparecer como los de la captura de pantalla siguiente. Observe que se puede cambiar el tamaño del segundo control compuesto, pero no el del primero.

Página ControlDesigners.aspx en la vista Diseño
Haga clic en el área de contenido del control contenedor y escriba algún contenido de texto para el control.
Cambie a la vista Código fuente y busque el código fuente para el control contenedor. Confirme que el texto que escribió en la región aparece ahora en el código fuente.
Vuelva a cambiar a la vista Diseño.
Haga clic en el marco del control, sitúe el puntero del mouse sobre uno de los iconos de cambio de tamaño y cambie el tamaño del control contenedor.
Haga clic en la región modificable del control al final del contenido de texto y presione ENTRAR para agregar un salto de línea.
Arrastre un control Button desde el Cuadro de herramientas y colóquelo en la región modificable debajo del texto que escribió. Arrastre un control Label desde el Cuadro de herramientas y colóquelo junto al botón. Esto muestra que se pueden arrastrar controles secundarios a la región modificable. Si lo desea, puede establecer propiedades de los controles secundarios en tiempo de diseño y puede agregar código para el control Button para actualizar la propiedad Text del control Label en tiempo de ejecución.

La página con los controles recién agregados debe ser similar a la captura de pantalla siguiente.

Control contenedor con controles secundarios
Guarde la página.

Para ver la página en tiempo de ejecución

Cargue la página en un explorador.

Los controles deben aparecer como los personalizó en la vista Diseño. Su página debe ser similar a la captura de pantalla siguiente.

Página Web con los diseñadores de controles finalizada

Pasos siguientes

En este tutorial se han mostrado las tareas básicas necesarias para crear un control personalizado asociado a un diseñador de controles compuestos o contenedores. Ha creado controles personalizados con diseñadores que le permitían cambiar el tamaño de los controles y agregar texto en una región modificable en la vista Diseño en Visual Studio 2005. Sugerencias para una exploración más a fondo:

Investigue las otras características nuevas y eficaces que están disponibles con los diseñadores de controles. Para obtener más información, vea Información general sobre los diseñadores de controles ASP.NET.
Pruebe a crear escenarios de diseñador más avanzados donde cree una representación en tiempo de diseño especializado y aproveche características como las listas de acciones. Para obtener información detallada, vea Ejemplo de diseñador de controles con listas de acciones y servicios.

Vea también

Conceptos

Información general sobre los diseñadores de controles ASP.NET