ASP.NET - Implementando efeito de sombra com AJAX

Veja como é fácil implementar o efeito de sombra em controles ASP.NET utilizando o AJAX ToolKit.

por Fellipe Borges

Olá, meu nome é Fellipe Borges e este é o meu primeiro artigo no Linha de Código. Espero através dele ajudar você desenvolvedor a implementar novas funcionalidades nos seus projetos de forma clara, rápida e objetiva.

Introdução

Vamos lá, você viu em um site um textbox, button, image, etc com um efeito de sombra que lhe pareceu muito interessante. Então resolveu aplicar no seu site utilizando-se dos métodos comuns (Javascript e CSS) e percebeu que não é uma tarefa tão simples quanto parece. Ok, se isso não aconteceu com você, pelo menos aconteceu comigo.

Mas cá entre nós, para que reescrever código que está pronto e funciona bem? Pensando nisso, quero lhe apresentar o Extender do AJAXControlKit chamado "DropShadowExtender". Com ele, a implementação do efeito de sombra nos seus controles ASP.NET é rápida e fácil, e o melhor: funciona.

Instalação

Não vou perder tempo explicando o que é e como funciona o AJAX. Caso você ainda não saiba, aqui mesmo no Linha de Código existem artigos explicando. Vamos direto à instalação.

Você terá que ter duas "coisas" instaladas na sua máquina:

1. Microsoft AJAX
2. Microsoft AjaxToolkit

Observação: a Microsoft deixou de utilizar o codenome ATLAS (o qual era a versão beta-experimental) para utilizar o seu nome definitivo: AJAX. Inclusive o toolkit, que passou a ser chamado de AjaxToolKit. Então daqui pra frente, vamos chamá-los de AJAX e AjaxToolKit.

1 - Microsoft AJAX - essa instalação é muito simples, acesse o site do ASP.NET (www.asp.net) e clique em AJAX. Na página do AJAX clique em "download". Até a publicação deste artigo, a versão era a 1.0 beta, se ainda for, clique no link "Microsoft ASP.NET AJAX v1.0 Beta", senão clique na versão que aparecer. Você será redirecionado para a página de downloads da Microsoft, por lá clique em "download" e baixe o executável.
A instalação é simples, utilize o método NNF (next, next, finish) - Risos.

2 - Microsoft AJAX ToolKit - é o toolkit que contém o nosso controle desejado, o "DropShadowExtender". Para baixá-lo, clique no link "ASP.NET AJAX Control Toolkit", na página de download do www.asp.net (a página que você estava agora à pouco). O toolkit não precisa ser instalado, ele apenas deve ser descompactado. Descompacte-o na pasta desejada. Vá até a basta "SampleWebSite\Bin" e copie os dois arquivos que estão lá (AjaxControlToolkit.dll e AjaxControlToolkit.pdb). Crie uma pasta chamada "AjaxToolKit" na sua pasta "\Arquivos de Programas\Microsoft ASP.NET" e cole os dois arquivos copiados lá dentro.
(Caso não tenha a pasta Microsoft ASP.NET você deve criá-la).
Ok, seu computador já está apto a produzir web pages muito mais interessantes e ricas com o AJAX, então mãos à obra!

Mãos à obra!

Agora que você já está com as DLL"s necessárias instaladas, vamos começar nosso projeto.
Abra o Visual Studio e clique em File> New Web Site, conforme mostra a Figura 1.

Figura 1 - Novo web site

Selecione o template chamado "ASP.NET AJAX-Enabled Web Site" e no local onde nosso web site ficará gravado, informe uma pasta "D:\Linha de Código\DropDownShadowExtender" ou uma pasta que preferir.
Clique em "Ok" e seu web site preparado para utilizar AJAX será criado na pasta especificada.
Veja o exemplo na Figura 2.

Figura 2 - Template ASP.NET AJAX-Enabled Web Site Note que na sua página Default.aspx, já foi criado um controle do tipo "ScriptManager". Este controle é obrigatório em toda e qualquer página que utilize AJAX, é ele quem vai gerenciar as chamadas XML no servidor. Você pode deixá-lo da maneira como vem, para este exemplo não será necessário nenhuma modificação no componente. Veja como deve ficar sua página Default.aspx na Figura 3.

Figura 3 - componente ScriptManager adicionado automaticamente

Agora vamos adicionar os controles pertencentes ao AJAX ToolKit a nossa barra de ferramentas (toolbox). É muito simples: clique com o botão direito do mouse sobre um local vazio na sua barra de ferramentas e selecione a opção "Add Tab" conforme mostra a Figura 4.

Figura 4 - Adicionando uma nova tab

Será necessário dar um nome à nossa nova tab, digite "AJAX ToolKit". Sua barra de ferramentas deve ficar como mostra a Figura 5.

Figura 5 - Sua barra nova barra de ferramentas

Agora temos que adicionar os itens à nova tab que foi criada. Para isso, clique com o botão direito do mouse sobre dentro da tab "AJAX ToolKit" e selecione a opção "Choose Items", conforme mostra a Figura 6.

Figura 6 - Incluindo os itens na tab "AJAX ToolKit" Será exibida uma lista dos controles disponíveis para a sua toolbox, porém os controles do AJAX ToolKit não aparecem nesta lista, por esse motivo teremos que localizar a DLL que instalamos à pouco. Para isso clique em "Browse" conforme mostra a Figura 7.

Figura 7 - Lista de componentes da sua toolbox

Agora temos que selecionar a DLL do AJAX ControlKit. Lembra que nós a instalamos à pouco? Se você seguiu os passos do item "Instalação", então a DLL se encontra na pasta "\Arquivos de Programas\Microsoft ASP.NET\AJAXToolKit". Caso você tenha instalado em outra pasta, vá até ela. Nós iremos selecionar a DLL chamada "AjaxControlToolKit.dll"conforme mostra a Figura 8.

Figura 8 - Selecionando a DLL do AJAX ControlKit

Clique em "Abrir", os controles do AJAX ControlKit irão aparecer na lista já selecionados. Deixe como está e clique em "Ok". Observe que sua tab foi preenchida com todos os controles disponíveis no AJAX ControlKit, conforme mostra a Figura 9.

Figura 9 - Controles do AJAX ControlKit

Ok, você notou que até agora apenas preparamos o ambiente. Então sem mais delongas vamos começar a codificar (ou arrastar os componentes da toolbox).

Vá até a aba "Standard" e selecione o controle "Panel". Arraste ele para o seu formulário, e (chega de drag and drop) clique em "Source". Vamos definir algumas propriedades do nosso "Panel"que foi inserido.

A propriedade essencial nesse momento é o "Id" pois é através dele que o controle "DropShadow Extender" vai saber qual controle vai implementar a sombra, então defina o id como "PanelExemplo". Coloque uma cor de fundo no seu panel também através da propriedade BackColor, eu utilizei a cor "#3399FE". Veja como deverá ficar o código na Figura 10.

Figura 10 - Código do Panel Clique em "Design"para ver como ficou seu formulário, ele deve estar parecido com o mostrado na Figura 11.

Figura 11 - Aparência do formulário após incluir o panel

Vá até a aba "ATLAS TollKit" e arraste o controle "DropShadowExtender" para o formulário, logo abaixo do "PanelExemplo", conforme mostra a Figura 12.

Figura 12 - Adicionando o controle DropShadowExtender

Agora precisamos configurar o controle adicionado, para isso voltemos ao código. Clique em source. Temos que configurar algumas propriedades do controle. Confira na Tabela 1, as principais propriedades do controle. Configure-o conforme o código mostrado na Figura 13.

Figura 13 - Propriedades do controle DropShadowExtender

Pronto! Seu panel já está devidamente sombreado. Para ver o resultado vamos ter que compilar o Web Site, para tal, pressione F5. O web site será compilado e mostrado em uma página web, conforme mostra a Figura 14, fácil não???

Figura 14 - Resultado do Panel sombreado

Fácil não???? Vamos incrementar mais um pouco deixando nosso Panel com as bordas arredondadas, inclusive a sombra. Feche a página web e volte ao fonte do seu formulário. Agora vamos setar as propriedades "Rounded" e "Radius" com os valores "True" e "10" respectivamente, conforme mostra a Figura 15. Novamente aperte a tecla F5 para compilar a página e ver o resultado, o qual deve estar igual a Figura 16.

Figura 15 - Código fonte com as propriedades "Rounded"e "Radius"

Figura 16 - Panel com as bordas arredondadas

Experimente utilizar outros controles, como TextBoxes, Buttons e Labels por exemplo. O resultado é muito satisfatório.

Conclusão

Vimos como é fácil implementar a sombra nos controles do ASP.NET com a (super) ajuda dos extenders do AJAX ControlKit. Uma vez preparado o ambiente, tudo é muito simples e rápido.

Espero que você tenha gostado deste artigo e que ele seja útil no seu web site.

Dúvidas e sugestões de artigos, me envie um email fi_tsi@yahoo.com.br

Até o próximo artigo e sucesso nos projetos .NET!