Estarei criando primeiramente um menu para ser utilizado por um sistema.

É bem simples de desenvolver e usar. Este artigo é dividido em duas partes. Estarei usando um componente free chamado skyMenu. Esse componente é feito apenas para ler um arquivo xml e mostrar em uma página .aspx. Estarei explicando passo a passo de como fazer o menu dinâmico para ser utilizado em qualquer sistema.

Criei um projeto chamado Artigos. Adicionei uma pasta chamada menu e dentro adicionei um arquivo chamado menu.ascx. Veja a figura 1-1 e 1-2.

Referência: 1-1

Cliquei com o botão direito em cima do projeto, fui ao menu Add Folder, logo após Regular Folder, digitei o nome menu. Figura 1-2.

Referência: 1-2

Depois da pasta criada, cliquei com o botão direito em cima da pasta menu, logo apo Add New Item..., adicionando um arquivo user control. Não esqueça que um arquivo user control, tem a extensão .ascx. Veja na figura 1-3 o passo a passo.

Referência: 1-3

A figura 1-4 mostra apenas user control, colocando o nome menu.ascx.

Referência: 1-4

Depois de criado, tenho que adicionar uma dll de referência no projeto para usá-la. Essa dll estará disponível para download neste artigo. Clique com o botão direito em cima do projeto e clique Add Reference, e escolha a dll. Veja na figura 1-5.

Referência: 1-5

A figura de referência 1-6 apenas mostra adicionando a dll no projeto para ser usada mais tarde. Lembre-se que essa dll é grátis e pode ser adicionada no seu projeto apenas clicando no Add Reference...

Referência: 1-6

Adicione dentro da página menu.ascx o código abaixo:

<%@ Register TagPrefix="cc1" Namespace="skmMenu" Assembly="skmMenu" %>

<cc1:menu id="Menu1" runat="server" ItemPadding="5" ItemSpacing="0" zIndex="2000" Font-Size="8pt"

            MenuFadeDelay="1" Cursor="Pointer" SubMenuCssClass="menu" Layout="Horizontal" HighlightTopMenu="false">

            <SelectedMenuItemStyle CssClass="menuSelecionado"></SelectedMenuItemStyle>

</cc1:menu>

Estou utilizando o menu dentro da página menu.ascx. Note que esse menu funciona em qualquer brownser, tanto faz se é IE, Mozilla ou FireFox, funciona do mesmo jeito e do mesmo layout. Esse código acima foi inserido na parte HTML da página.

Antes de inserir o code-behing da página menu.ascx, terei que criar um arquivo xml, pode ser de qualquer nome, estarei colocando o nome do mesmo como menu.xml. Adicione da mesma forma como adicionou o menu.ascx o menu.xml.

Referência: 1-7

Veja a figura de referência 1-8, mostra o código xml do arquivo do menu.xml.

Referência: 1-9

Depois de criar o arquivo menu.xml definindo o menu, abri o arquivo menu.ascx, cliquei duas vezes na página normalmente e adicionei o código abaixo:

protected void preencheMenu()

{

this.Menu1.DataSource = "http://localhost/Artigos/menu/menu.xml";

this.Menu1.DataBind();

}

Criei apenas um método protected chamado preencheMenu(), adicionando o datasource do Menu1, indicando o xml criado anteriormente. Logo depois, mando preencher o objeto com o DataBind().

Cliquei com o botão direito em cima do projeto e adicionei mais uma página chamada default.aspx, por enquanto a mesma terá só um prefixo incluindo o arquivo menu.ascx. Funciona como se fosse include no ASP 3.0.

Veja o código abaixo junto com a explicação:

Primeiramente adicionei um Prefixo indicando o nome do arquivo ascx.

<%@ Register TagPrefix="Prefixo" TagName="menu" src="menu/menu.ascx" %>

Depois de colocar o endereço correto do arquivo, uso o mesmo mais abaixo, com o seguinte código:

Prefixo: Nome do tagPrefix,

Id= pode ser qualquer nome

Runat = sempre deve ser o server

Fecha a tag.

<Prefixo:menu id="menu" runat="server"></Prefixo:menu>

A figura de referência 1-10 mostra como o código ficará na página default.aspx.

Referência: 1-10

Coloquei como página inicial do projeto o arquivo default.aspx e iniciei a aplicação. Veja na figura de referência 1-11 o funcionamento do menu. O interessante é que o menu funciona em qualquer brownser sem problemas.

Referência: 1-11

Espero que tenham gostado.

Mauricio Junior

mauricio@ascompras.com