Curso ASP.NET 3.5 em VB.NET e C# - 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.

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();