Clique aqui para ler esse artigo em PDF.
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. " [...] continue lendo...
