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