Artigo da .net Magazine 39 - Como criar um controle Web de abas com o MultiView

Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Para efetuar o download você precisa estar logado. Clique aqui para efetuar o login
Confirmar voto
0
 (0)  (0)

Artigo publicado na .net Magazine 39.

capa_NET39_G.gif

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;

  • MultiView e View;
  • Postbacks em controles ASP.NET.

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.

 

image004.gif

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.

 

image006.jpg

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).

 

image008.jpg

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.

 

image010.jpg

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

True), Category("Appearance"), _

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

 

True), DefaultValue(False), _

  Localizable(False), Category("Aba")> _

"

A exibição deste artigo foi interrompida :(
Este post está disponível para assinantes MVP

 
Você precisa estar logado para dar um feedback. Clique aqui para efetuar o login
Receba nossas novidades
Ficou com alguma dúvida?