Utilização do controle lum_navigationList

Para customizar o estilo da interface Menu do serviço Barra de Navegação deve-se customizar o controle de lum_navigationList que utilizado somente nas interfaces deste serviço. A figura a seguir exibe o XML gerado por uma interface Menu:

using_lum_navigationlist_control_001

A figura acima mostra que no mesmo pop onde é visualizado e adicionado os estilos (através de arquivos XSL) pode-se visualizar o XML da interface (na aba XML). O quadro abaixo exibe o XML organizado no controle lum_navigationList, editado de modo a mostrar somente os campos que serão trabalhados na customização de XSL a fim de diminuir a complexidade:

Observando este XML, pode-se montar o código XSL. A partir da adição de um novo estilo para a interface Menu e partindo do código em branco pode-se trabalhar a estrutura básica do XSL, apenas com resultados que chegam pela hierarquia de data/row no XML:

É importante verificar a validade do caminho do <xsl:import />, para que a interface customizada continue referenciando o DouiControls.xsl na sua pasta correta, de outro modo o XSL apresentará erro.
Recomenda-se manter o import para o DouiControls.xsl em qualquer arquivo XSL para o produto, visto que ele traz o XSL genérico para todos os controles do mesmo;
Usar o código <a href="{href}"></a> é exatamente a mesma coisa que usar <a><xsl:attribute name="href"><xsl:value-of select="href" /></xsl:attribute></a>. Simplifica a leitura;
Os <div> vazios no código serão utilizados mais a frente para facilitar a implementação do layout por CSS.

Nem sempre o XML da interface Menu trará essa estrutura simples para montar links de cada item de menu. Itens de menu cadastrados na interface Administração do serviço Barra de Navegação podem conter links externos, inclusive com a possibilidade de abrir em um pop. Para adequar o XSL para inserir estas funcionalidades, deve-se adicionar um template que montará esses links. O template será chamado logo após a tag <a>, pois ele montará exatamente o atributo href desta tag.

O código portanto ficará assim (com a adição do template "linkProperties" na linha 20, sendo chamado na linha 11, logo após a tag <a> sem seu atributo "href"):

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:import href="../../../../lumis/doui/style/DouiControls.xsl" ></xsl:import>
<xsl:output omit-xml-declaration="yes" method="xml" ></xsl:output>

<xsl:template match="/">
	<div>
		<ul>
			<xsl:for-each select="//control[@type='lum_navigationList']/data/row">
				<li>
					<a>
						<xsl:call-template name="linkProperties"></xsl:call-template>
						<xsl:value-of select="name" ></xsl:value-of>
					</a>
				</li>
			</xsl:for-each>
		</ul> 
	</div>
</xsl:template>

<xsl:template name="linkProperties">
	<xsl:if test="onClick">
		<xsl:attribute name="onclick">
			<xsl:value-of select="onClick" ></xsl:value-of>
		</xsl:attribute>
	</xsl:if>
	<xsl:if test="href">
		<xsl:attribute name="href">
			<xsl:value-of select="href" ></xsl:value-of>
		</xsl:attribute>
	</xsl:if>
	<xsl:if test="target">
		<xsl:attribute name="target">
			<xsl:value-of select="target" ></xsl:value-of>
		</xsl:attribute>
	</xsl:if>
</xsl:template>
 
</xsl:stylesheet>

Com o código XSL acima o menu terá um resultado funcional, porém com layout ainda simples como exibido na figura a seguir:

using_lum_navigationlist_control_002

O layout pode ser customizado com CSS, deixando o menu com uma aparência mais elaborada. Para isso, deve-se adicionar um <div> com um id da classe que dará a formatação ao menu. O <div> deve englobar o seguinte trecho do código anterior:

As classes CSS devem estar localizadas em tags HTML <style />, antes de um </xsl:template> de um <xsl:template match>.

Uma outra opção é incluir em um arquivo CSS o código acima, sem a tag <style>, em um arquivo CSS externo, aplicado a uma página ou canal. Com o CSS aplicado ou adicionado ao XSL, o layout do menu terá o seguinte layout , como exibido na figura abaixo:

using_lum_navigationlist_control_003

O CSS aplicado determinou a cor da fonte, pano de fundo e bordas em volta de cada item.