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.