P>
Clique aqui para ler todos os artigos desta edição
ASP.NET
Como criar um controle Web de abas com o MultiView
Este artigo discute |
Este artigo usa as seguintes tecnologias: |
· Criação de controles ASP.NET; · Controles container;
|
Visual Basic.NET, ASP.NET, JavaScript e CSS |
Um conceito muito utilizado hoje em dia são as abas. Inicialmente apenas algumas aplicações possuíam esse tipo de auxilio à navegação, como o Excel. Há pouco tempo os navegadores também passaram a adotar o conceito, inclusive o Internet Explorer, agora em sua versão 7.
Não faltou muito para a idéia passar também para os sites e aplicações Web. Alguns exemplos são o site de parceiros da Microsoft (www.microsoft.com/brasil/parceiros/nivel/cert/bene.aspx), a Wikipedia (pt.wikipedia.org), além dos quatro maiores bancos privados do país: Itaú (www.itau.com.br), Bradesco (www.bradesco.com.br), Unibanco (www.unibanco.com.br) e Santander Banespa (www.santanderbanespa.com.br).
Não há como negar que o conceito é um sucesso. Ele traz simplicidade de navegação, beleza, e um ar de sofisticação à aplicação Web. Como então aproveitar do conceito sem precisar passar horas em cima de um código difícil de escrever, ou pior, difícil de manter?
Melhor ainda, como utilizar todo o conhecimento que possuímos em programação Orientada a Objetos e modelo de objetos ASP.NET a nosso favor, tornando o trabalho mais fácil? A resposta é simples e não poderia ser outra: criação de um controle web customizado.
Nota: Para uma uma introdução à criação de controles customizados, consulte meu artigo na edição anterior. Neste artigo nos aprofundaremos bastante no assunto, então é desejável que o leitor consulte o referido material para obter os conhecimentos básicos.
Neste artigo vamos criar e testar com poucas linhas de código um controle customizado, capaz de ter suas abas clicadas e exibir a aba correta, ocultando as outras. O controle vai exibir uma interface em tempo de design capaz adicionar abas e incluir controles filhos, que trabalharão normalmente dentro da página e serão exibidos somente quando a aba associada for clicada.
A base do controle
A Microsoft, quando desenvolveu o .NET Framework, e como parte dele o ASP.NET, criou uma série de controles altamente funcionais para a Web. Muitos, aguardamos ansiosamente um controle com abas, mas ele não veio.
No entanto a Microsoft deu alguns controles muito parecidos. Vamos analisar os requisitos de um controle de abas:
· Tem que ter abas “clicáveis”;
· Tem que ter uma área de conteúdo que apareça somente quando sua respectiva aba é clicada;
· Tem que ser capaz de trabalhar com os controles filhos colocados sob ele.
Se analisarmos friamente o que precisamos é de um MultiView com abas, afinal, é exatamente isso que o MultiView faz, ele exibe somente uma View de cada vez, e oculta as outras. Infelizmente o MultiView não tem nenhuma opção de inclusão de abas, mas isso não será um problema.
.net PLUS!
Acesse agora o mesmo o Portal .net Plus (www.devmedia.com.br/dotnet) e assista a uma vídeo aula de Moacir Casemiro, que mostra como trabalhar com o MultiView em aplicações ASP.NET.
www.devmedia.com.br/articles/viewcomp.asp?comp=2422
Podemos utilizar o MultiView como inspiração e adotar o mesmo conceito. Não deve ser muito difícil e não haverá necessidade de reinventarmos a roda. E para manter o padrão do nome, vamos chamar nosso controle de MultiAbas.
Com utilização do Reflector podemos ver o segredo por trás do MultiView. Dêem uma boa olhada no método Render, constante na Listagem 1.
Listagem 1. Método Render do MultiView
Protected Friend Overrides Sub Render( _
ByVal writer As HtmlTextWriter)
Dim view1 As View = Me.GetActiveView
If (Not view1 Is Nothing) Then
view1.RenderControl(writer)
End If
End Sub
Note que todo o trabalho feito no Render é verificar qual o View ativo e renderizá-lo sobre o HtmlTextWriter. Todo o resto do MultiView é suporte a essa única função, além de outras que auxiliam na hora de desenvolver com ele.
Você deve estar imaginando que o resto da funcionalidade está no controle View, mas esse é um controle ainda mais simples, sem ter nem mesmo um Render, ou outro semelhantes, como RenderBeginTag ou RenderEndTag.
Uma outra informação é relevante: o View é marcado com o atributo ParseChildren(False), para indicar que ele não sabe quem são seus filhos e não vai tratá-los como propriedades, afinal podemos adicionar quem quisermos como subcontroles do View.
Já o MultiView faz justo o oposto: considera que o View é seu único filho aceitável, e declara ParseChildren(GetType(View)). Não temos motivo para não seguir o mesmo caminho, afinal, essa é justamente a funcionalidade que estamos buscando.
Como a funcionalidade é simples e para fugir das especificidades da implementação da Microsoft, vamos usar o código do MultiView apenas como inspiração, em vez de herdar diretamente dele.
O modelo do controle
O controle vai ter um modelo simples de usar. Sua estrutura será mesmo semelhante a um MultiView. Veja na Figura 1 como faremos sua implementação em um Web Form.
Figura 1. Modelo do controle MultiAbas
O projeto conterá três classes, sendo dois controles (MultiAbas e Aba) e uma classe de coleção (Abas), utilizada como coleção de controles Aba, em uma propriedade do MultiAbas. A Figura 2 mostra o diagrama de classes da solução gerado pelo Visual Studio 2005.
Figura 2. Diagrama de classes da solução
Note no MultiAbas que poderemos alterar as propriedades de cores das Abas e do conteúdo, além da cor do texto e a largura do controle. Poderemos também recuperar as configurações da Aba selecionada, seu índice, obter a coleção de Abas, tudo através de propriedades do controle.
Os métodos são os responsáveis por toda a ação e comportamento do controle, principalmente o Render. A Aba por sua vez possui uma propriedade que indica se ela está selecionada e o texto que aparecerá na aba propriamente dita. Não possui nenhum método, porque não precisa, já que é simplesmente um objeto de dados.
Para implementar os controles precisaremos de um Assembly do tipo Class Library (que gera uma DLL). Vamos por a mão na massa e iniciar o projeto.
O projeto do controle
Inicie o Visual Studio 2005 e, na página inicial, crie um novo projeto. Selecione Visual Basic>Windows e escolha Web Control Library. Digite o nome “Abas.Controles” e verifique se a opção Create directory for solution está selecionada. Para o nome da solução digite apenas “Abas” e clique em OK (Figura 3).
Figura 3. Criando o projeto do controle
Note que o Web Control Library já contém um arquivo com controle customizado de exemplo chamado WebCustomControl1 e o abre para visualização. Não utilizaremos esse arquivo, portanto podemos excluí-lo do projeto.
Criando a classe Aba
Vamos iniciar pelas classes auxiliares. Dessa forma fica mais claro quando passarmos para MultiAbas em si, que contém todo o comportamento que estamos buscando. Adicionaremos então o arquivo que conterá o controle Aba. Vá ao menu Project>Add New Item e escolha Web Custom Control. Nomeie o item “Aba.vb” e clique em Add (Figura 4). Esse controle, continuando a analogia com o MultiView, seria o View.
Figura 4. Criando a Aba do controle MultiAba
Manteremos a implementação da propriedade Text, já que ela é perfeita para a nossa necessidade, que é nomear a Aba. Mas não precisaremos do RenderContents, pode apagá-lo. Esse controle não vai precisar de nenhum Render, já que toda renderização vai ser a partir dos seus filhos, colocados pelo usuário do controle em seu conteúdo.
Teremos ainda uma propriedade chamada Selecionada, booleana, que indicará se a Aba está selecionada. Sua implementação segue a mesma técnica da propriedade Text e está descrita na Listagem 2.
Listagem 2. Criando a propriedade Selecionada do controle
DefaultValue(""), Localizable(True)> _
Property Text() As String
Get
Dim s As String = CStr(ViewState("Text"))
If s Is Nothing Then
Return String.Empty
Else
Return s
End If
End Get
Set(ByVal Value As String)
ViewState("Text") = Value
End Set
End Property
Localizable(False), Category("
...