Criando um Server Control

Descrição do artigo publicado no aspneti.com, cada artigo com seu resumo

ASP.NET – Criando um Server Control

 

Veremos neste artigo como criar um server control que pode ser usado em sua aplicação.

 

O que é um Server Control?

 

Server Control nada mais é do que um controle que roda no servidor, no caso do ASP.NET, todos os controles que tem a tag “runat=server”. Por exemplo, temos o controle TextBox que contém a tag runat=server, pois as informações que são processadas por ele passa pelo servidor e retorna ao browser no formato HTML.

São os controles que ficam na ToolBox e neste artigo iremos aprender a fazer um pequeno server control e adiciona-lo na ToolBox para poder utiliza-lo em outras aplicações.

 

Criando um Server Control

 

Vamos criar uma aplicação do tipo Class Library.

 

- Abra o Visual Studio 2005;

- Escolha Visual C#;

- Escolha Windows e uma aplicação tipo Class Library;

 

Antes de começarmos, devemos adicionar uma referência a .dll System.Web. Para isso, abra o Solution Explorer, clique com o botão direito do mouse sobre “References” e escolha “Add Reference...”. Na tela que se abre, na aba .NET, role a barra de rolagem quase ao final e procure por System.Web. Selecione-o e clique em OK.

 

Agora, vamos ao código fazer referência a esta .dll que acabamos de inserir em nosso projeto. Insira as seguintes linhas de código, abaixo do último using no topo da sua classe:

 

using System.Web.UI;

using System.Web.UI.WebControls;

 

Devemos também inserir uma referência a esta namespace:

 

using System.ComponentModel;

 

Mas...que tipo de controle iremos criar? Vamos criar uma coisa bem simples, pois a idéia que quero passar é de como um controle desses funcionam. Depois, use sua criatividade para criar os controles de sua necessidade, pois nem tudo que nós precisamos está na ToolBox, certo?!

 

O controle que iremos criar é apenas um Label no qual definimos a posição Esquerda e do Topo relativa à página e ele ficará posicionado onde foi determinado.

 

Bem, como iremos criar um controle do tipo Label, devemos fazer com que nossa classe herde de Label. Veja o seguinte código:

 

 

public class Class1 : Label

 

 

 

Legal, agora iremos começar a programar nosso controle. Primeiramente, vamos inserir um atributo chamado ToolBoxData  em nossa classe, que será a tag do nosso controle, quando visto pelo modo HTML no Visual Studio.

 

Para inserir oatributo, veja o código abaixo:

 

[ToolboxData("<{0}:MeuServerControl runat=\"server\" ID=\"MeuServerControl1\" ></{0}:MeuServerControl>")]

 

public class Class1 : Label

 

 

Obs.: Você pode dar o nome que quiser, chamei de MeuServerControl apenas para exemplo.

 

Iremos criar duas propriedades que serão configuráveis pelo “Property Window”, são elas Esquerda e Topo. O código a seguir mostra como criá-las:

 

private int _esquerda;

private int _topo;

 

public int Esquerda

{

get

      {

            int valor = _esquerda;

            return valor;

      }

      set

     

            _esquerda = value;

      }

}

 

 

 

 

 

 

 

public int Topo

{

get

      {

int valor = _topo;

            return valor;

      }

      set

      {

            _topo = value;

 

      }

}

 

Agora iremos colocar alguns atributos em nossas propriedades, são eles:

 

Category("Layout") = Indica que sua propriedade irá ficar na Categoria “Layout”. (Na Property Window, as propriedades são divididas por categoria)

 

DefaultValue("0") = O valor default que irá aparecer quando você arrastar o controle pra tela. Neste caso, na propriedade vai aparecer o valor “0”.

 

Description("Posição a esquerda relativa a tela.") = A descrição da propriedade.

 

Browsable(true) = Indica se a propriedade irá aparecer na Property Window.

 

 

Veja como ficará o código:

 

private int _esquerda;

private int _topo;

 

[

 Category("Layout"),

 DefaultValue("0"),

 Description("Posição a esquerda relativa a tela."),

 Browsable(true)

]

public int Esquerda

{

get

      {

            int valor = _esquerda;

            return valor;

}

     

set

      {

            _esquerda = value;

      }

}

 

 

 

 

[

 Category("Layout"),

 DefaultValue("0"),

 Description("Posição relativa ao topo da página."),

 Browsable(true)

]

 

public int Topo

{

get

{

int valor = _topo;

return valor;

}

      set

      {

            _topo = value;

}

}

 

 

OK, nosso controle já está quase pronto. Agora falta fazer com que ele seja renderizado pelo browser. Iremos substituir (override) dois métodos definidos em nossa classe herdada, são eles AddAttributesToRender e RenderContents.

 

O primeiro irá adicionar ao controle a propriedade Style juntamente com as propriedades que nós definimos, no caso, Esquerda e Topo.

Veja como fica o código:

 

protected override void AddAttributesToRender(HtmlTextWriter writer)

{

writer.AddAttribute(HtmlTextWriterAttribute.Style, "position:relative; left:" + this.Esquerda + "px; top:" + this.Topo + "px");

base.AddAttributesToRender(writer);

}

 

Por fim, iremos então substituir (override) o método RenderContents para que o nosso controle seja renderizado na linguagem HTML e mostrado na tela. Nele, nós apenas verificamos se o usuário digitou alguma coisa na propriedade Text, da Property Window, e renderizamos na tela. Veja o código:

 

protected override void RenderContents(HtmlTextWriter output)

{

if (this.Text.Trim() == "")

      {

            output.Write("MeuServerControl");

}

      else

      {

            output.Write(this.Text.Trim());

}

}

Pronto! Agora compile o seu projeto. Será gerado uma .dll com o nome do projeto dentro da pasta Bin/Debug ou Release (depende do que voce escolheu) na pasta do seu projeto.

 

Para usar seu controle, abra ou crie uma web aplicação asp.net. Abra o ToolBox, onde ficam os controles padrões, clique com o botão direito e vá na opção “Choose Items...”.

 

Vai aparecer uma tela com vários componentes a ser adicionado e um botão “Browser...”. Clique neste botão, vá até a pasta onde está localizada a .dll do nosso controle e clique Open. Depois aperte OK e o controle geralmente irá aparecer na Categoria “General” da ToolBox.

 

Agora arraste-o para a tela, vá no Property Window e coloque algum valor nas propriedades que criamos. Rode sua web aplicação e veja como ficou.

 

Com o Internet Explorer aberto, veja o código fonte da página. Ele deve mostrar o nosso controle com a tag HTML já renderizado pelo browser. Algo parecido com isto:

 

<span id="MeuServerControl1" style="position:relative; left:50px; top:90px"> MeuServerControl</span>

 

Então é isso, espero que tenham gostado. Este é meu primeiro artigo e espero escrever vários.

 

Obrigado!

Thiago Lima de Vargas