> 

Clique aqui para ler todos os artigos desta edição

 

 

DHTML com ASP.NET

 

 

Este artigo discute

Este artigo usa as seguintes tecnologias

·       O que é DHTML;

·       Criação de controles ASP .NET;

·       Trabalhando com postbacks em controles ASP .NET;

·       Interação entre código JavaScript e controles ASP .NET.

Visual Basic .NET, ASP.NET 2.0, JavaScript, DHTML e CSS

 

 

 

A manipulação do HTML de forma dinâmica no cliente, afim de prover maior interatividade entre o usuário e a aplicação e criar animações, é uma prática muito utilizada há alguns anos. São muitos os sites, portais e aplicações web em que podemos movimentar, esconder, trocar fontes e cores de elementos diversos. Com a popularização do AJAX essa prática tem crescido ainda mais. O foco deste artigo é trazer o DHTML às aplicações ASP.NET e entender como fazer a comunicação entre os dados gerados dinamicamente no cliente e o servidor.

 

O que é DHTML

DHTML é a sigla de Dynamic HTML e não é uma tecnologia por si só, mas a utilização de um grupo de tecnologias, como HTML, linguagem de script (como JavaScript ou VBScript), CSS (Cascading Style Sheets) e o modelo de objetos do HTML (DOM - Document Object Model). Com DHTML pode-se modificar a visualização e o comportamento de uma página após ela ter sido carregada no navegador cliente, dando a impressão de interatividade e dinamismo. Todo o código manipulado fica no cliente e não é enviado ao servidor até que exista um postback.

A questão toda reside em como informar o servidor das mudanças feitas no cliente e como persistir esses dados. Suponha que em determinada aplicação o usuário possa trocar dinamicamente a cor de fundo de algum elemento, com uso de DHTML. No primeiro postback essa informação é perdida, já que o servidor não tem conhecimento da troca de cor que ocorreu apenas no cliente. Como resolver esse problema? Obviamente precisamos criar um canal de comunicação entre os elementos para os quais queremos persistir as mudanças, e o servidor que precisa ser informado de tal mudança.

 

O cenário do projeto

Para fazer a prova de conceito que integrará DHTML com comunicação das mudanças dinâmicas no cliente ao servidor, criaremos um controle web que terá três comportamentos dinâmicos disponíveis: será possível ser arrastado com drag and drop, poderá ter sua cor de fundo alterada através da mudança dos dados de um DropDownList e permitirá a adição dinâmica de itens ao DropDownList.

A solução será composta de dois projetos, um do tipo Web Site e outro do tipo Class Library. O projeto que fará a prova de conceito é o projeto do tipo Class Library que conterá uma classe que herdará de WebControl chamada DHTMLPanel. A criação desse projeto é baseada no Template Web Control Library para facilitar a criação de referências e arquivos de exemplo. O projeto Web Site contém simplesmente uma página web (default.aspx) que hospedará o controle, onde seu objetivo é simplesmente testar o controle.

 

Criando o projeto de controle

Inicie o Visual Studio 2005 e na página inicial clique em Create Project. Em Project Types selecione Visual Basic>Windows e escolha o item Web Control Library. Digite o nome “DHTML.Library” para o projeto e marque a opção Create directory for solution. Para o nome da solução digite apenas “DHTML”. Clique em OK.

Note que o Visual Studio adiciona um arquivo com controle customizado de exemplo, com o nome WebCustomControl1. Não utilizaremos esse arquivo, portanto podemos excluí-lo do projeto.  Adicionaremos agora o arquivo que conterá nosso controle customizado. Vá ao menu Project>Add New Item e escolha WebCustomControl. Nomeie-o para “DHTMLPanel.vb” e clique em Add.

Exclua a propriedade Text e o método RenderContents do arquivo, já que não usaremos nenhum dos dois. O controle deverá também implementar duas interfaces importantes: IPostBackDataHandler e InamingContainer. Ao implementar as interfaces, os métodos serão criados automaticamente. Será também necessário adicionar uma declaração de Imports ao início do arquivo para o namespace System.Drawing. O código da classe gerado deve estar semelhante ao da Listagem 1.

 

Listagem 1. Código Inicial do controle

Imports System

Imports System.Collections.Generic

Imports System.ComponentModel

Imports System.Text

Imports System.Web

Imports System.Web.UI

Imports System.Web.UI.WebControls

Imports System.Drawing

 

False), PersistChildren(True), _

  DefaultEvent("PosicaoAlterada"), _

  DefaultProperty("Posicao"), _

  ToolboxData("<{0}:DHTMLPanel runat=""server"">")> _

Public Class DHTMLPanel

    Inherits WebControl

    Implements IPostBackDataHandler, INamingContainer

#Region " Implementação de IPostBackDataHandler "

    Protected Function LoadPostData( _

      ByVal postDataKey As String, _

      ByVal postCollection As System.Collections. _

      Specialized.NameValueCollection) As Boolean _

      Implements System.Web.UI.IPostBackDataHandler. _

      LoadPostData

    End Function

    Protected Sub RaisePostDataChangedEvent() _

      Implements System.Web.UI.IPostBackDataHandler. _

      RaisePostDataChangedEvent

    End Sub

#End Region

End Class

 

Nesse momento, o editor do Visual Studio estará indicando que o evento PosicaoAlterada não existe. Vamos resolver esse problema e criar o código desse evento. O controle lançará dois eventos, o já mencionado PosicaoAlterada e também CorAlterada.

O primeiro sinalizará que houve uma mudança de posição, através de uma operação de drag and drop e o outro indicará uma mudança de cor de fundo no controle. O código a ser implementado seguirá as melhores práticas, com um método nomeado On mais o nome do evento, de forma a facilitar futuras heranças sobre o código gerado. O código deverá ficar como o da Listagem 2.

 

Listagem 2. Declaração de eventos do controle

#Region " Eventos "

    Protected Sub OnCorAlterada(ByVal e As EventArgs)

        RaiseEvent CorAlterada(Me, e)

    End Sub

    Public Event CorAlterada As EventHandler

    Protected Sub OnPosicaoAlterada( _

      ByVal e As EventArgs)

        RaiseEvent PosicaoAlterada(Me, e)

    End Sub

    Public Event PosicaoAlterada As EventHandler

#End Region

 

Vamos então expor a propriedade padrão do controle, chamada Posicao, que conterá a posição do controle após a operação de drag and drop. A implementação é simples, conforme mostrado na Listagem 3, com utilização do viewstate para armazenar o dado, e exposta como uma interface do tipo System.Drawing.Point. A posição inicial é assumida sempre como 0,0, ou seja, no ponto inicial, sem drag and drop.

 

Listagem 3. Declaração da propriedade Posicao

#Region " Propriedades "

...

Quer ler esse conteúdo completo? Tenha acesso completo