Demonstra Passo a passo: Criando um criador controle básico para um controle de servidor Web

Artigo
10/15/2014

Essa explicação passo a passo demonstra como criar um designer de controle básico para fornecer uma interface de usuário (UI) de tempo de design para um controle de servidor Web.

Quando você cria um controle de servidor ASP.NET personalizada, você pode criar um designer associado para processar o controle em uma ferramenta de design visual, como Microsoft Visual Studio 2005.O Designer permite que o ambiente de hospedagem processe uma interface do usuário de tempo de design para o controle, para que os desenvolvedores possam facilmente configurar as propriedades e conteúdo do controle.Para obter mais informações sobre recursos de designer e as diversas classes de designer que é possível associar a um controle personalizado, consulte Visão Geral sobre os Designers de Controle do ASP.NET.

Durante este explicação passo a passo, você aprenderá como:

Criar um designer padrão de controle composto e associá-la com um controle composto.
Criar um designer redimensionável de controle composto e associá-la com um controle composto.
Criar um designer de caixa de controles básica com uma região editável e associá-la a um controle WebControl.Este designer permite que você adicione texto à região editável sobre a superfície de design, e você também pode arrastar controles adicionais para a região.
Referenciar os controles personalizados (e seus criadores associados) em um página da Web.
Trabalhar com a página da Web no modo design no Visual Studio 2005.

Pré-requisitos

A fim de concluir este explicação passo a passo, será necessário:

Visual Studio 2005, que será usado para criar uma página da Web que hospeda os controles personalizados e seus criadores associados.
Um site ASP.NET da Web, para a página que hospeda os controles.Se você tiver um site já configurado, você pode usar esse site como um ponto de partida para este explicação passo a passo.Otherwise, for details on creating a virtual directory or site, see Como: Criar e configurar diretórios virtual no IIS 5.0 e 6.0.

Criar controles personalizados e designers

Nesta seção, você cria três controles básicos de servidor Web e um designer de controle personalizado associado para cada um deles.

Para criar um arquivo para o código

Em um editor criar um novo arquivo chamado SimpleControlDesigners com a extensão apropriada para o linguagem que você está trabalhando. Por exemplo, em Visual Studio 2005, criar um novo arquivo de classe chamado SimpleControlDesigners.vb ou SimpleControlDesigners.cs.

Adicione as seguintes referências de namespace que são necessárias para trabalhar com as classes de designer.Também adicione um namespace para conter os controles e os designers associados.

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 
{
}

Salve o arquivo.

Agora você está pronto para criar um controle de servidor Web composto e um designer associado.Um designer pode estar no mesmo assembly que o controle ou em um diferente; nessa explicação passo a passo, você os cria no mesmo arquivo de código e conjunto de módulos (assembly) para sua conveniência.

Para criar um controle composto e um designer associado

Dentro do namespace que você declarou no arquivo SimpleControlDesigners, crie uma declaração pública para uma classe de controle composto que herda de CompositeControl, conforme a seguir no exemplo de código.
```
    Public Class SimpleCompositeControl
        Inherits CompositeControl
    End Class
```
```
 public class SimpleCompositeControl : CompositeControl
    {
    }
```

Adicione as propriedades públicas mostradas no exemplo de código a seguir para a classe.Esses serão usados para criar parte da interface do usuário na página da 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;
    }
}

Crie um método para adicionar controles filho para o controle composto.O método a seguir adiciona duas caixas de texto e uma quebra de linha que serão visíveis na página da 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();
}

Crie uma classe do designer de controle composto simples que é derivado de CompositeControlDesigner para associar com o controle composto que você acabou de criar.

Embora haja uma variedade de recursos de processamento de interface do usuário que você pode adicionar para o criador, o exemplo de código a seguir simplesmente cria o designer e substitui uma propriedade chave na classe base para impedir que o controle seja redimensionado no modo de design.

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; }
    }
}

Imediatamente acima a declaração de classe para o controle composto, adicione um atributo Designer de metadados que associa o controle com a classe de designer que você acabou de criar, conforme mostrado na exemplo de código a seguir.
```
<Designer(GetType(SimpleCompositeControlDesigner))> _
Public Class SimpleCompositeControl
    Inherits CompositeControl
```
```
[Designer(typeof(SimpleCompositeControlDesigner))]
public class SimpleCompositeControl : CompositeControl
```
Salve o arquivo.

Agora que você criou um controle de servidor Web de composto personalizado e um designer associado, você pode criar um segundo controle que é derivado do primeiro.O segundo controle difere somente em que o designer associado pode ser redimensionada na superfície de design.

Para criar um controle composto redimensionável e designer associado

Dentro do namespace que você declarado no arquivo SimpleControlDesigners, crie uma declaração pública para uma nova classe de controle composto que herda do controle SimpleCompositeControl criado anteriormente.O exemplo de código a seguir demonstra um nova declaração.
```
    Public Class SimpleCompositeControl2
        Inherits SimpleCompositeControl
    End Class
```
```
 public class SimpleCompositeControl2 : SimpleCompositeControl
    {
    }
```

Associe este controle com a classe base CompositeControlDesigner.

Por padrão, este exemplo cria um designer básico, redimensionável para o controle composto.

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

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

Salve o arquivo.

Os primeiros dois controles que você criou eram controles compostos que você associou a designers controle composto.Agora você irá criar um controle simples que é derivado de WebControl, e associá-lo com uma classe ContainerControlDesigner.Esse tipo de Designer é útil quando você deseja associar um designer com um único controle de servidor Web personalizado e fornecer uma única área editável sobre o superfície de design.O controle personalizado que você criar aqui não implementa nenhuma funcionalidade real; ele existe somente para mostrar os recursos da classe ContainerControlDesigner.

Observação:
Você também pode fornecer essa mesma funcionalidade usando um controle composto e Designer, como aqueles criado anteriormente.Este exemplo destina apenas a mostrar como você pode usar a classe ContainerControlDesigner e associá-la a um controle WebControl.

Para criar um controle de servidor Web e um designer de recipiente com uma área editável

Dentro do namespace que você declarado no arquivo SimpleControlDesigners, crie uma declaração pública para uma nova classe de controle de servidor Web, como mostrado no exemplo de código a seguir.

   Public Class SimpleContainerControl
        Inherits WebControl
        Implements INamingContainer
    End Class

 public class SimpleContainerControl : WebControl, INamingContainer
    {
    }

Crie uma classe de designer de controle de recipiente para associar ao controle personalizado.Implemente duas propriedades: a FrameStyle propriedade para conter o estilo de quadro do designer e um FrameCaption propriedade para conter o texto do cabeçalho do quadro. Essas propriedades fornecem um quadro para o controle ser visivelmente processado e selecionado na superfície de design.O código para o designer e propriedades é mostrado na exemplo de código a seguir.

Observação:
A classe ContainerControlDesigner automaticamente trata todos os outros aspectos do processamento de controle personalizado no tempo de design e fornecendo uma única área editável.

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;
        }
    }
}

Associe o designer ao controle.Imediatamente acima a declaração de classe para o controle de servidor Web, adicione o atributo Designer de metadados.Observe que neste caso, como mostrado no exemplo de código a seguir, você também adicionar o atributo ParseChildren com um parâmetro false.Isso informa ao analisador de tempo de design para tratar o conteúdo interno de controles como controles filho, em vez de como propriedades.Nesse caso, você deseja tratar o conteúdo interno desse controle como controles filho para que você possa realmente arrastar outros controles de servidor para a área editável em tempo de design e também editar suas propriedades.
```
<Designer(GetType(SimpleContainerControlDesigner))> _
<ParseChildren(False)> _
Public Class SimpleContainerControl
    Inherits WebControl
    Implements INamingContainer
End Class
```
```
[Designer (typeof(SimpleContainerControlDesigner))]
[ParseChildren (false)]
public class SimpleContainerControl : WebControl, INamingContainer
{
}
```
Salve o arquivo.

Você criou três controles personalizados e designers de controle associados a eles.Tudo o que resta é compilar os controles em um conjunto de módulos (assembly) e, em seguida, trabalhar com eles em uma ferramenta de design visual.

Para compilar os controles personalizados e designers

Abra um prompt de comando para a pasta onde você criou o arquivo SimpleControlDesigners.Neste prompt, você pode compilar o código-fonte em um conjunto de módulos (assembly).

Observação:
Para executar os compiladores do .NET Framework a partir deste local, você deve já tiver adicionado o caminho da sua instalação do .NET Framework para a variável PATH do seu computador.Normalmente, esse caminho está sob o diretório de instalação do Windows em \Microsoft.NET\Framework\<número de versão>.Se você não atualizou a variável PATH, clique com o botão direito do mouse em Meu Computador, selecione Propriedades, clique na guia Avançado e clique no botão Variáveis de ambiente.Na lista Variáveis do sistema, clique duas vezes na variável PATH.Na caixa de texto Valor de Variável, adicione um ponto-e-vírgula (;) ao final dos valores existentes na caixa de texto e digite o caminho da instalação do .NET Framework.Clique OK para fechar cada caixa de diálogo.

Para executar os compiladores do .NET Framework a partir deste local, você deve já tiver adicionado o caminho da sua instalação do .NET Framework para a variável PATH do seu computador.Normalmente, esse caminho está sob o diretório de instalação do Windows em \Microsoft.NET\Framework\<número de versão>.Se você não atualizou a variável PATH, clique com o botão direito do mouse em Meu Computador, selecione Propriedades, clique na guia Avançado e clique no botão Variáveis de ambiente.Na lista Variáveis do sistema, clique duas vezes na variável PATH.Na caixa de texto Valor de Variável, adicione um ponto-e-vírgula (;) ao final dos valores existentes na caixa de texto e digite o caminho da instalação do .NET Framework.Clique OK para fechar cada caixa de diálogo.

Compile os controles do arquivo SimpleControlDesigners em um conjunto de módulos (assembly) usando o seguinte comando de compilação.

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

Mova a arquivo do assembly resultante para a pasta \Bin do site da Web para a página que irá hospedar os controles.

Observação:
Os usuários Visual do Studio que deseja compilar os controles e designers precisam adicionar uma referência ao sistema.Design.dll.Para obter mais informações, consulte Como: Adicionar uma referência a um componente COM ou .NET em um site da Web.

Criando uma página da Web para hospedar os controles

Agora que você criou um conjunto de módulos (assembly) com os controles personalizados e seus designers de controle associado, você criará um página da Web em Visual Studio 2005 para fazer referência os controles, verá como aparecem no modo Design e carregará a página em um navegador.

Para criar um página da Web para hospedar os controles

Com o site em aberto no Visual Studio 2005, criar uma nova página chamada ControlDesigners.aspx. Na parte superior da página, logo abaixo da declaração da página, adicione um Register diretiva para fazer referência a assembly e sistema autônomo controles que você criou anteriormente, sistema autônomo neste exemplo de código a seguir.
```
<%@ 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" %>
```

Conclua o restante da página sistema autônomo mostra o exemplo de código a seguir, para fazer referência a cada um dos três controles criado anteriormente: SimpleCompositeControl, SimpleCompositeControl2, e SimpleContainerControl. Observe que para fazer referência a cada controle, você usa o prefixo aspSample especificado na diretiva 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>

Salve a página.

Agora você pode testar a página no modo de design para ver como funcionam os designers de controle.

Para demonstrar o processamento dos controles em tempo de design

Alterne para modo de design para a página.

Os controles devem aparecer como na seguinte imagem.Observe que o segundo controle composto é redimensionável e a primeira não é.

Página ControlDesigners.aspx no modo de design
Clique na região de conteúdo do caixa de controles e digite algum conteúdo de texto para o controle.
Alterne para modo de exibição de fonte e localize o código-fonte para a caixa de controles.Confirme que o texto digitado na região agora aparece no código-fonte.
Alterne de volta para modo Design.
Clique na moldura do controle, posicione o ponteiro do mouse sobre um dos ícones de redimensionamento e redimensione a caixa de controles.
Clique na região editável do controle no final do conteúdo de texto e pressione ENTER para adicionar uma quebra de linha.
Arraste um controle Button da ToolBox e solte-para a área editável sob o texto digitado.Arraste um controle Label da ToolBox e solte-próxima ao botão.Isso demonstra que você pode arrastar controles filho para a área editável.Se você desejar, você pode definir propriedades nos controles filho em tempo de design, e você podere adicionar código para o controle Button para atualizar a propriedade Text do controle Label em tempo de execução.

A página com os controles que você acabou de adicionar deve ser semelhante à seguinte imagem.

Controle de recipiente com controles filho
Salve a página.

Para visualizar a página em tempo de execução

Carregar a página em um navegador.

Os controles devem aparecer como você os personalizou no modo de design.Sua página deve ter a aparência da tela seguinte.

Página de Web de controles de designers concluídos

Próximas etapas

Essa explicação passo a passo demonstrou as tarefas básicas envolvidas na criação um controle personalizado associado a um designer composto ou de caixa de controles.Você criou controles personalizados com designers que permitiram que você redimensionasse os controles e adicionasse texto em uma região editável no modo design no Visual Studio 2005.Sugestões para explorações adicionais incluem:

Investigar os outros poderosos novos recursos que estão disponíveis com designers de controle.Para obter mais informações, consulte Visão Geral sobre os Designers de Controle do ASP.NET.
Tente criar cenários de designer mais avançados em que você cria processamento em tempo de design especializado e tira proveito dos recursos, como listas de ação.Para obter detalhes, consulte:Designer de controle de amostra com listas de ação e serviços.

Consulte também

Conceitos

Visão Geral sobre os Designers de Controle do ASP.NET

Compartilhar via