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