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.
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
style="Z-INDEX: 101; LEFT: 31px;
POSITION:absolute; TOP: 22px" runat="server"
Height="148px" Width="292px">
O TreeNode
Um TreeView vazio por si só não tem utilidade — qualquer estrutura baseada em árvore necessita de nós. Os nós da TreeView são representados pela classe TreeNode, que inclui várias propriedades padrão e auto-explicativas tais como as de Text e Checkbox. Além disso, o TreeNode inclui CSS para definir estilos, URLs de imagem para gráficos associados com determinados nós (por exemplo, nós de diretórios versus nós de arquivos), URL de navegação (para redirecionamento ao clicar em um nó), e uma seqüência de caracteres de dados a ser associada com o nó. A URL de navegação é útil para gerenciar dados hierárquicos que podem ser representados por URIs.
O TreeNode também inclui vários métodos para manipulação por programação. Por exemplo, a classe TreeNode inclui métodos para adição de novos nós a uma árvore. Explicarei como isso é feito ao criar uma TreeView por programação.
Tipos de Nós
A classe TreeNode reúne as propriedades para representar um nó individualmente. Apesar de ser possível definir cada um dos nós com dados não processados, muitas vezes é conveniente configurar valores padrão para diferentes tipos de nós. O TreeView permite criar seus próprios tipos de TreeNode para um TreeView. Os tipos de TreeNode definem propriedades padrão para objetos TreeNode. Por exemplo, ao configurar um TreeView para exibir uma estrutura de diretório, provavelmente você desejaria que o arquivo e os nós do diretório fossem representados por imagens diferentes. Definir os tipos de TreeNode permite associar imagens padrão para os nós de arquivo e uma para o nós de diretório.
TreeViews Dinâmicas
Enquanto a construção de um TreeView usando o Designer é simples, usar somente o Designer produzirá um TreeView estático. Se você souber de antemão como seus dados serão, tudo bem. Por outro lado, na maioria dos casos, se conhece muito pouco sobre como os dados serão mostrados até o momento da execução. Por exemplo, a representação de uma estrutura de diretório através do TreeView deve ser feita dinamicamente, uma vez que o conteúdo de um diretório muda com freqüência. Para ver como gerenciar um TreeView de forma dinâmica, vejamos um Explorer de diretórios baseado na Web criado para exibir o código-fonte do projeto através de um navegador.
O Explorer do projeto inclui dois TreeViews— um para categorizar tipos de projetos e outro para exibição da estrutura do diretório para cada projeto. Por último, o aplicativo inclui uma caixa de texto somente para leitura para exibir o conteúdo dos arquivos do código-fonte. A Figura 2 mostra o Explorer do projeto em ação.
Figura 2 Explorer do projeto
TreeViews e XML
Uma forma de preencher uma TreeView em tempo de execução é utilizar XML para representar dados hierárquicos. O formato do XML inclui um recipiente TREENODES e uma hierarquia arbitrariamente profunda de elementos. A Listagem 2 mostra alguns XML para preencher a TreeView do projeto atual. As categorias alto nível de projetos disponíveis incluem vários nós de projeto cada uma — e cada nó de projeto inclui uma seqüência de caracteres que representa fisicamente o diretório do projeto que contém todos os arquivos fonte.
Listagem 2 XML para Preenchimento da TreeView
NodeData="c:\asp.net labs\work" />
NodeData="c:\datagrid" />
NodeData="c:\csharpdraw" />
NodeData="c:\csharpscribble" />
NodeData="c:\samples\samples\vc7\mfc" />
NodeData="c:\samples\atlserver\onlineaddressbook"/>
NodeData="c:\samples\extensibility\managedcwinformswiz"/>
Quando os nós da TreeView estiverem descritos em XML, eles poderão ser submetidos ao controle usando data-binding normal do ASP.NET, conforme mostra a Listagem 3. Quando os atributos dos TreeNodeSrc dos TreeView apontam para o arquivo XML, chamar o DataBind conectará conteúdo do arquivo XML à TreeView. Ao trabalhar com o exemplo, modifique o arquivo XML para coincidir com os diretórios da sua máquina.
Listagem 3 Preenchendo a TreeView Utilizando XML
void Page_Load(object sender, System.EventArgs e)
{
if(!IsPostBack)
{
treeviewAvailableProjects.TreeNodeSrc =
"availableprojects.xml";
treeviewAvailableProjects.DataBind();
}
//CssCollection definido como campo da classe a ser
//usado mais tarde para definir o estilo do nó
string s = @"color:black;background:white;
border:black thin solid;";
HoverCssCollection = new CssCollection(s);
}
Construindo uma árvore de diretórios
A segunda forma de construir um TreeView em tempo de execução é adicionando os nós por programação. Quando o usuário seleciona um dos projetos disponíveis para exibir, a página ASPX examina o diretório e constrói um TreeView de forma dinâmica. A Listagem 4 mostra como você pode construir um TreeView para representar a estrutura física do diretório.
O código da Listagem 4 utiliza o suporte de diretório .NET Framework Class Library. O código começa com um objeto DirectoryInfo de alto nível representando um diretório (como "c:\samples"). O BuildDirectoryTree realiza iteração através das entradas do diretório. Quando um nó é encontrado, o BuildDirectoryTree acrescenta um nó de arquivo à árvore. Quando ele encontra uma entrada que representa um diretório, ele acrescenta um nó de diretório e chama recursivamente ele mesmo para gerar o próximo nível de nós. Observe que AddFileNode e AddDirectoryNode usam diferentes imagens para arquivos e diretórios e que o AddFileNode anexa o nome físico do arquivo às propriedades NodeData do nó. O Explorer do projeto necessita do nome do arquivo ao atender os eventos gerados pelo TreeView.
Listagem 4 Construindo uma TreeView para um Diretório Físico
TreeNode AddFileNode(FileInfo fi, TreeNode tnParent)
{
TreeNode tn = new TreeNode();
tn.Text = fi.Name;
tn.NodeData = fi.FullName;
tn.HoverStyle= HoverCssCollection;
tn.ImageUrl = "File.bmp";
tnParent.Nodes.Add(tn);
return tn;
}
TreeNode AddDirNode(DirectoryInfo di, TreeNode tnParent)
{
TreeNode tn = new TreeNode();
tn.Text = di.Name;
tn.ImageUrl = "Dir.bmp";
tnParent.Nodes.Add(tn);
return tn;
}
void BuildDirectoryTree(DirectoryInfo di, TreeNode tnParent)
{
try
{
foreach(FileSystemInfo fsi in di.GetFileSystemInfos())
{
Trace.Write("BuildDirectoryTree", di.FullName);
if(fsi.GetType() == typeof(FileInfo))
{
FileInfo fi = (FileInfo)fsi;
TreeNode tn = AddFileNode(fi, tnParent);
}
else
{
DirectoryInfo subDi = (DirectoryInfo)fsi;
TreeNode tn = AddDirNode(subDi, tnParent);
BuildDirectoryTree(subDi, tn);
}
}
}
catch(Exception e)
{
Trace.Warn("Building dir list", e.ToString());
}
}
Eventos do TreeView
Ao revisar os eventos gerados pelo TreeView, você verá que eles são muito parecidos com outros controles de seleção de estilo (como o ListBox, o CheckBox e o DropDownListBox). Por exemplo, há eventos indicando que o nó é verificado e que o índice do item selecionado foi alterado. Além disso, o TreeView gera eventos indicando que os nós foram expandidos ou recolhidos.
Por padrão, a propriedade AutoPostBack do TreeView é falsa. Isso significa que quando você expande, recolhe, verifica ou seleciona um nó, nenhum evento é gerado. Quando o navegador de destino é um navegador de nível superior, os controles usam DHTML para modificar a aparência da página — e o servidor fica confuso. Quando o navegador é um navegador de nível inferior, os eventos são gerados pelas mudanças, verificações, expansões e contrações da seleção. A Listagem 5 mostra o código que responde ao evento SelectedIndexChange do TreeView do projeto disponível, fazendo com que o TreeView que representa o diretório seja construído. Observe como o código de acesso do diretório é circundado por um bloco de prova.
Listagem 5 Respondendo ao Evento SelectedIndexChange
void treeviewAvailableProjects_SelectedIndexChange(
object sender, TreeViewSelectEventArgs e)
{
DirectoryInfo di;
string strDir;
string sSelectedNode;
this.textboxFileContents.Text = "";
treeviewProjectInfo.Nodes.Clear();
sSelectedNode =
treeviewAvailableProjects.SelectedNodeIndex;
TreeNode tnAvailProjects =
treeviewAvailableProjects.GetNodeFromIndex(
sSelectedNode);
strDir = tnAvailProjects.NodeData;
if(strDir != "")
{
TreeNode tn;
try
{
tn = new TreeNode();
treeviewProjectInfo.Nodes.Add(tn);
treeviewProjectInfo.Nodes[0].Text = strDir;
di = new DirectoryInfo(strDir);
BuildDirectoryTree(di, treeviewProjectInfo.Nodes[0]);
}
catch(Exception ex)
{
Trace.Warn(ex.ToString());
}
}
}
O TreeView utiliza um esquema de indexação de itens ligeiramente diferente de outros controles de seleção de estilo como do ListBox e do DropDownList. Quando um item é selecionado no DropDownList ou no ListBox, você pode recuperar com facilidade o índice de inteiros do item selecionado e seu nome de texto usando o nome das propriedades SelectedItemIndex e SelectedItem diretamente. O TreeView é um pouco mais complicado porque a SelectedNodeIndex do TreeView é uma seqüência de caracteres. O nó não pode ser consultado diretamente utilizando-se um inteiro. O índice da seqüência de caracteres inclui inteiros separados por pontos que representam a posição do nó na hierarquia. Por exemplo , a seqüência de caracteres "0.1.1.1" representa o nó realçado no projeto Info TreeView (o TreeView do lado direito) mostrado na Figura 2. Cada número representa uma posição dentro de cada nível. Os dois níveis e nós são baseados em zero. Exceto pela questão da indexação, responder os eventos do TreeNode é muito parecido com responder os eventos gerados por outros controles.
Estilos de Nós
Por último, os nós dentro do TreeView podem ser facilmente personalizados utilizando atributos de estilo CSS. A classe TreeNode inclui propriedades para gerenciamento do estilo padrão (o DefaultStyle), o estilo em foco (a propriedade HoverStyle) e o estilo selecionado (o SelectedStyle) para cada nó. É possível adicionar os estilos manualmente no código da página:
Text=" Node with Styles"
DefaultStyle="background:white;border:solid
1px;color:black "
Hover
SelectedStyle=
"color:blue;font-name:Arial;font-weight:bold"
/>
O designer também oferece suporte à adição de estilos CSS. Além disso, você pode adicionar os estilos por programação como mostrado na Listagem 3 e na Listagem 4 (consulte Page_Load e AddFileNode, respectivamente). O método AddFileNode atribui uma CssCollection definindo o estilo em foco para o nó do arquivo. Quando o mouse focaliza o nó, aparece uma borda ao redor. O comportamento do HoverStyle se aplica somente quando o navegador de destino é um navegador de nível superior compatível com DHTML.
Conclusão
As ferramentas de UI baseadas em árvore estão disponíveis para desenvolvedores de aplicativos desktop há muito tempo. Por exemplo, a MFC inclui uma classe de árvore e uma classe de TreeView para gerenciamento das interfaces de usuário no estilo do Internet Explorer e do Windows Explorer. O mesmo tipo de UI baseada em árvore está disponível para desenvolvedores ASP.NET. Manipular o controle do servidor do TreeView é muito parecido com programar qualquer outro controle de servidor ASP.NET. Existem uma série de propriedades, métodos e eventos disponíveis através de programação e através do Designer.
O TreeView têm suporte para representação hierárquica de dados utilizando a arquitetura de controle do servidor ASP.NET. Se o navegador de destino for um navegador de nível superior inteligente o bastante para utilizar DHTML, o TreeView emitirá o DHTML e os nós do TreeView interagirão com o usuário, sem ter que dar voltas. Os navegadores de nível inferior também funcionam, contudo, o usuário experimenta mais postbacks. Para ver como o TreeView reage diante da utilização de um navegador de nível inferior, defina a propriedade ClientTarget da página para "downlevel".
Download disponível em www.neoficio.com.br/msdn
