msdn10_capa.JPG

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

 

TreeView com XSL no ASP.NET

por George Shepherd

 

Controles de estilo de árvore (TreeView) aparecem em todo lugar nos aplicativos desktop. Por exemplo, a exibição clássica do Windows® Explorer mostra as informações do diretório usando um controle de árvore. A exibição de dados como uma árvore com nós recolhíveis é conveniente para analisar os dados que estão hierarquicamente estruturados.

Para exibir o conteúdo de um diretório, clique no sinal de mais (+) perto do nó do diretório e ele se expandirá. Não há razão para que este tipo de interface do usuário não seja fornecida em uma página da Web — e isso é o que o WebControl da TreeView faz.

Estes controles não têm suporte na Microsoft, mas o código-fonte completo está disponível em http://www.asp.net/IEWebControls/Download.aspx. Coloque os controles que desejar na caixa de ferramentas selecionando Tools | Customize Toolbox em Visual Studio® .NET.

 

O TreeView e o Designer

Como ocorre com os outros controles do Internet Explorer, o TreeView inclui suporte total ao Designer. Manipular os controles da TreeView do Designer é parecido com a manipulação da maioria dos outros controles baseados em designer. O Designer oferece uma representação visual dos controles como eles devem aparecer no navegador do cliente. O Designer também apresenta uma lista de propriedades para adaptar no gerenciamento dos controles de árvore.

Para usar os controles TreeView no seu aplicativo, basta selecionar um na caixa de ferramentas e soltá-lo em um formulário. Uma vez que o controle TreeView estiver no Designer, as propriedades poderão ser gerenciadas facilmente através da janela apropriada. A Figura 1 mostra o controle estático TreeView como aparece pela primeira vez no Designer.

 

image001.gif

Figura 1 TreeView no formulário

 

Por padrão, o TreeView não tem nós. Para fazer o controle funcionar, você precisará adicionar alguns, seja por programação ou através do Designer. O suporte do Designer para o TreeView inclui uma caixa de diálogo para definição dos tipos de nós. Adicionar tipos de nós é realmente muito simples. A Listagem 1 mostra o código-fonte gerado pelo Designer após você ter inserido vários nós em uma página ASPX.

 

Listagem 1 Exibindo a TreeView