Curso ASP.NET 3.5 em VB.NET e C# - Navigation
por Fernando Amaral

7. Navigation

Surgido no ASP.NET 2.0, são uma série de controles para auxiliar a navegação do usuário. Estes controles podem ser encontrados no grupo Navigation da barra de ferramentas do VS 2008, são eles:

· SiteMapPath

· Menu

· TreeView

SiteMapPath

O controle SiteMapPath permite exibir um mapa de navegação para o usuário, numa estrutura hierárquica a partir da página raiz da aplicação. Para demonstrar as funcionalidades do controle, vamos criar um suposto aplicativo de comércio eletrônico, com a seguinte estrutura:

A funcionalidade do controle SiteMapPath esta baseada em arquivo xml denominado web.sitemap, que pode ser facilmente criado pela opção Add New Item. Sua estrutura básica é a seguinte:

<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >     <siteMapNode url="" title=""  description="">         <siteMapNode url="" title=""  description="" />         <siteMapNode url="" title=""  description="" />     </siteMapNode> </siteMap>

Trata-se de um arquivo XML padrão. O nó raiz é denominado SiteMap. A estrutura do site deve ser representada por nós SiteMapNode, onde estes devem ser organizados de forma a representar a estrutura hierárquica do site. O atributo Url define o endereço da página, Title o titulo a ser exibido no controle, e descrição o Tool Tip que também será exibido no controle.

Importante ressaltar que o arquivo deve ser montado de forma hierárquica, ou seja, uma página deve ser adicionada dentro do nó siteMapNode da página hierarquicamente superior.

Para nossa aplicação proposta anteriormente, montei o seguinte arquivo:

<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="http://schemas.microsoft.com/AspNet/SiteMap-File-1.0" >     <siteMapNode url="Index.aspx" title="Página Principal"  description="Página Principal da Site">       <siteMapNode url="~/Informatica/Informatica.aspx" title="Departamento de Informática"  description="Produtos de Informática">         <siteMapNode url="~/Informatica/Impressoras/Impressoras.aspx" title="Impressoras"  description="VImpressoras Diversas" />         <siteMapNode url="~/Informatica/Monitores/Convencionais/Convencionais.aspx" title="Monitores Convencionais"  description="Monitores Convencionais" />         <siteMapNode url="~/Informatica/Monitores/LCD/LCD.aspx" title="Monitores LCD"  description="Monitores LCD" />       </siteMapNode>     </siteMapNode> </siteMap>

Observe que as impressoras estão dentro do nó do departamento de informática. Se não criarmos o arquivo desta forma, da página do departamento de informática poderemos navegar apenas para a página inicial.

Observe o sistema rodando:

Você não precisa configurar nenhuma propriedade do controle SiteMapPath para o mesmo funcionar, desde que o arquivo Web.sitemapth esteja correto. Bbasta adicionar o controle ao Web Form.

Analisando a janela de propriedades do SiteMapPath, você pode descobrir algumas coisas interessantes: Por exemplo, a propriedade Path Separator permite definir um caractere de separação entre os caminhos.

Através da Smart Tag você também pode definir uma auto-formatação para seu controle.

Menu

O controle Menu permite adicionar as funcionalidades de um menu em uma aplicação Web. Seu uso é simples: após adicionar um controle a um Web Form, basta abrir o editor de itens do menu através da Smart Tag do controle ou mesmo da janela de propriedades, onde é possível gerenciar o conteúdo do Menu.

O editor de menu possui uma pequena barra de ferramentas com as seguintes funcionalidades:

· Add a root item:  Adiciona um novo item no mesmo nível da seleção atual

· Add a child item:  Adiciona um novo item um nível acima da seleção atual

· Remove an iten:  Remove o item selecionado.

· Move the item up amongst its siblings:  Sobe o item verticamente;

· Move the item down amongst its siblings:  Desce o item verticalmente;

· Make the selected item a sibling of its parent:   Desce o item horizontalmente;

· Make the selected item a sibling of its parent:   Sobe o item horizontalmente.

Cada item possui diversas propriedades configuráveis, as mais significativas são text, que indica o texto a ser exibido no item, e navigateUrl: A URL de destino caso o usuário clique no item;

Adicionar os itens e configurar suas propriedades é tudo o que você precisa para tornar o controle funcional, mas isso não é tudo: Na smart tag do controle outra opção disponível é auto-format: Você pode dar um visual agradável ao seu menu sem muito trabalho.

Entre as propriedades do menu, orientation define o comportamento do menu: Horizontal ou Vertical.

Ligando seu Menu a um arquivo Web.sitemap

Se você tem um arquivo Web.sitemap em sua aplicação, vimos que o controle SiteMapPath passa a utilizá-lo automaticamente, sem qualquer configuração ou alteração de propriedade.

Um controle Menu também pode fazer uso do arquivo, porém você terá que ligá-los manualmente. É extremante simples:

Adicione um controle SiteMapDataSource ao seu Web Form (disponível na Guia data da caixa de Ferramentas)

No Menu, altera a propriedade DataSourceID para o controle SiteMapDataSource adicionado.

Pronto! A partir de agora os itens de seu menu serão mapeados a partir do arquivo Web.sitemap que você criou anteriormente.

TreeView

O terceiro controle que estudaremos no capitulo é o TreeView. Trata-se de um poderoso controle que nos permite exibir estruturas navegáveis e aninhadas. Sua configuração básica é simples, ao mesmo tempo em que prove uma grande quantidade de propriedades e alguns eventos que tornam o controle altamente poderoso e flexível.

Para usar o controle basta adicioná-lo ao Web Form. Através da smart tag do controle podemos acessar um editor de itens idêntico ao do controle Menu:

Ainda na smart tag podemos definir um modelo de auto-formatação:

A propriedade Show Lines também presente na smart tag do controle permite que sejam exibidas linhas entre o nó raiz e seus nós aninhados:

Definidas as propriedades de cada Item, o controle esta pronto para ser utilizado.

Ligando seu TreeView a um arquivo Web.sitemap

Um controle TreeView também pode fazer uso do arquivo Web.sitemap, o processo é o mesmo do Menu:

Adicione um controle SiteMapDataSource ao seu Web Form (disponível na Guia data da caixa de Ferramentas)

No Menu, altera a propriedade DataSourceID para o controle SiteMapDataSource adicionado.

Seleção Múltipla

A propriedade ShowCheckBoxes permite que cada nó seja transformado em caixas de verificação, de forma que você poderá selecionar mais de um nó simultaneamente. Os valore possíveis para esta propriedade são:

· Root: Apenas os nós da raiz serão exibidos como caixas de verificação.

· Parent: Apenas os nós pais serão exibidos como caixas de verificação.

· Leaf: Apenas os nós folhas serão exibidos como caixas de verificação.

· All: Todos os nós serão exibidos como caixas de verificação.

Verificar programaticamente quais nós estão marcados é relativamente simples. Tudo a fazer é percorrer a lista de nós do controle usando um laço for next. No exemplo abaixo o código percorre a relação de nós e adiciona o texto do nó a um listbox:

Dim node As TreeNode For Each node In TreeView1.CheckedNodes ListBox1.Items.Add(node.Text) Next

foreach (TreeNode node in TreeView1.CheckedNodes) { ListBox1.Items.Add(node.Text); }

Gerenciando o controle em tempo de execução

Você também pode adicionar um nó programaticamente. No exemplo abaixo o nó é adicionado na raiz do TreeView:

Dim node As New TreeNode node.Text = "Móveis para escritório" node.NavigateUrl = "moveis.aspx" TreeView1.Nodes.Add(node)

TreeNode node; node = new TreeNode(); node.Text = "Móveis para escritório"; node.NavigateUrl = "moveis.aspx"; TreeView1.Nodes.Add(node);

Adicionar um nó aninhado a outro é um pouco mais complicado. Primeiro você deve localizar o nó pai utilizando o método FindNode, que recebe o caminho (path) do nó. Então basta adicionar um novo nó a sua coleção de nós filhos:

Dim Atual As TreeNode = _ TreeView1.FindNode("PáginaPrincipal/Departamento de Informática") Dim Novo As New TreeNode Novo.Text = "Móveis para escritório" Novo.NavigateUrl = "moveis.aspx" Atual.ChildNodes.Add(Novo)

TreeNode Atual = TreeView1.FindNode ("PáginaPrincipal/Departamento de Informática"); TreeNode Novo = new TreeNode(); Novo.Text = "Móveis para escritório"; Novo.NavigateUrl = "moveis.aspx"; Atual.ChildNodes.Add(Novo);

Na imagem abaixo você pode ver o resultado:

Para remover nós temos o método Remove.

Finalmente, podemos recolher um TreeView em tempo de execução:

TreeView1.CollapseAll

TreeView1.CollapseAll();

Ou mesmo expandir:

TreeView1.ExpandAll;

TreeView1.ExpandAll();