Navegação > Home / Javascript / Menu dinâmico com XML + XSL e Javascript

Menu dinâmico com XML + XSL e Javascript

fevereiro 9, 2009 por Reinaldo Nascimento  
Em Javascript

Comente

Esse fim de semana tive que fazer uma navegação dinâmica em uma página html que precisa rodar dentro de um CD-Rom. Partindo desse princípio, defini que usaria Javascript e XML para a parte de chamada aos dados e XSL para formatar os resultados.

Até aí tudo bem, mas como se trata de um script dinâmico para rodar em meio local, ou seja, fora do ambiente de servidor, o desafio foi mais interessante.

Preparei alguns scripts para mostrar como cheguei ao resultado que eu queria.

Estrutura do arquivo XML

<?xml version="1.0" encoding="utf-8" ?>
<MENU>
 
<Item id="1" title="Link Superior" url_top="#">
<SubItem seq="1" url="http://www.terra.com.br">Sublink 1</SubItem>
<SubItem seq="2" url="http://www.globo.com">Sublink 2</SubItem>
<SubItem seq="3" url="http://www.uol.com.br">Sublink 3</SubItem>
</Item>
 
<Item id="2" title="Link Superior 2" url_top="#">
<SubItem seq="4" url="http://www.ig.com.br">Sublink 4</SubItem>
<SubItem seq="5" url="http://www.google.com.br">Sublink 5</SubItem>
<SubItem seq="6" url="http://www.altavista.com.br">Sublink 6</SubItem>
</Item>
 
<Item id="3" title="Link Superior 3" url_top="qualquer_pagina.php">
<SubItem seq="7" url="http://www.microsoft.com">Sublink 7</SubItem>
<SubItem seq="8" url="http://www.apple.com">Sublink 8</SubItem>
<SubItem seq="9" url="http://www.uai.com.br">Sublink 9</SubItem>
</Item>
 
</MENU>

Salve o arquivo com o nome “menu.xml”.

Agora vou mostrar a estrutura do arquivo XSL

<?xml version="1.0" encoding="iso-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:asp="http://www.microsoft.com">
<xsl:output method="html" indent="yes" encoding="iso-8859-1"/>
<!-- O parâmetro abaixo solicita ao parser que ignore os espaços em branco do resulta
isso faz com que resultados vazios sejam ignorados -->
<xsl:strip-space elements="*"></xsl:strip-space>
 
<!--Aqui começa o template do menu-->
<xsl:template match="MENU/*">
 
<!--Criamos uma variável com o nome do Node-->
<xsl:variable name="NodeName">
<xsl:value-of select="name(current())"/>
</xsl:variable>
 
<!--Carrega o primeiro nível do menu e sua url (url_top)-->
<li><a href="{@url_top}"><xsl:value-of select="@title"/></a>
<ul>
<!--Aqui fazemos um loop para pegar todos os filhos do item superior (pai)-->
<xsl:for-each select="node()">
 
<!--Criamos uma variavel com o nome do node filho -->
<xsl:variable name="ChildNodeName">
<xsl:value-of select="./child::node()"/>
</xsl:variable>
 
<!--Agora montamos o link-->
<li><a href="{@url}"><xsl:value-of select="$ChildNodeName"/></a></li>
 
</xsl:for-each>
</ul>
</li>
 
</xsl:template>
</xsl:stylesheet>

Salve o arquivo com o nome “menu.xsl”.

Finalmente o Javascript que possibilita a “mágica” :) 

function xslMenu( vXml, vXsl, vEl )
{
if ( document.implementation &amp;&amp; document.implementation.createDocument ){
// *** Mozilla
var xsltProcessor = new XSLTProcessor();
 
// *** carrega o arquivo XSL
var myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", vXsl, false);
myXMLHTTPRequest.send(null);
 
// *** importa o xsl como Stylesheet
xslStylesheet = myXMLHTTPRequest.responseXML;
xsltProcessor.importStylesheet(xslStylesheet);
 
// *** carrega o arquivo XML
myXMLHTTPRequest = new XMLHttpRequest();
myXMLHTTPRequest.open("GET", vXml, false);
myXMLHTTPRequest.send(null);
var xmlSource = myXMLHTTPRequest.responseXML;
 
// *** Formata o XML com o método transform e imprime o
// *** resultado em vEl (elemento onde será carregado o resultado)
var resultDocument = xsltProcessor.transformToFragment(xmlSource, document);
document.getElementById(""+ vEl +"").appendChild(resultDocument);
 
} else if (window.ActiveXObject){
// *** IE
// *** carrega o XML
xml = new ActiveXObject("MSXML2.DOMDocument");
xml.async = false
xml.load(vXml)
// *** carrega o XSL
xsl = new ActiveXObject("MSXML2.DOMDocument");
xsl.async = false
xsl.load(vXsl)
// *** Transforma
document.getElementById(""+ vEl +"").innerHTML=xml.transformNode(xsl);
} else {
// *** Navegador sem suporte
alert("O navegador não é suportado");
}
}

Agora salve o arquivo com o nome “script.js”.

Crie agora um arquivo html chamado, por exemplo, index.html com a seguinte estrutura:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fazendo Sites - Criando um menu dinâmico com XML + XSL e Javascript</title>
<script type="text/javascript" src="script.js"></script>
 
<script type="text/javascript">
<!--
    function carregaMenu()
    {
        xslMenu('menu.xml', 'menu.xsl', 'menu');
    }
    // aguarda 1 segundo antes de chamar a
    // a função que carrega o menu
    setTimeout(carregaMenu, 1000);
 
-->
</script>
 
</head>
 
<body>
<div id="base">
    <ul id="menu">
    <!--Aqui vem o menu-->
    </ul>
</div>
 
</body>
</html>

O resultado será o seguinte:

ul_sem_css

A base para o menu está ai. Foi criada uma estrutura de <UL><LI><A>, que possibilitará inúmeras formatações, efeitos e aplicações.

Em suma, os códigos acima são auto explicativos e os comentários lhe ajudarão a entender o funcionamento.

Até a próxima.

Tags: , , , , , ,

Posts Relacionados

Deixe sua mente falar!

Conte-nos o que você pensa sobre este artigo...
ah sim, e se você quiser personalizar seu comentário, adquira um gravatar!