Utilização dos controles lum_interfaceHeader, lum_tabularData e lum

Nesta seção serão tratados os controles mais genéricos (lum_interfaceHeader, lum_tabularData e lum_link), que aparecem em praticamente todas as interfaces Lista Rápida e Lista dos serviços que as possuem. Para exemplificar, será utilizada a interface Lista Rápida do serviço de Notícias, cujo XML exibe todos os 3 controles citados acima.

Para obter este XML, instancie o serviço de Notícias e cadastre alguns conteúdos através da interface administrativa do serviço. Verifique o XML exibido pela interface Lista Rápida, no right-click da interface, opção Estilo, aba XML do editor. (Abaixo estão somente os trechos do XML que serão customizados):

<data>

<title>Lista rápida (Notícias)</title>

</data>

</control>

<data>

<title>Lumis expande operação no Brasil</title>

</publishStartDate>

<name>img_logoLumis.gif</name>

<href>data/files/img_logoLumis.gif</href>

<imageLegend>Logo da Lumis</imageLegend>

</introductionImage>

<introduction>A Lumis (www.lumis.com.br), desenvolvedora da plataforma de software para portais corporativos, Lumis Portal Suíte, estende operações para o Sul do Brasil, com uma unidade de negócios recém-instalada em Curitiba.</introduction>

</row>

<title>Magazine Luiza implanta nova plataforma de intranet</title>

</publishStartDate>

<name>img_logoLumis.gif</name>

<href>data/files/img_logoLumis.gif</href>

<imageLegend>Logo da Lumis</imageLegend>

</introductionImage>

<introduction>Depois de utilizar, por um ano, solução própria para gerenciar o Portal Luiza, a rede de varejo migra para ferramenta da Lumis. A intranet atende a 10 mil funcionários.</introduction>

</row>

</data>

</control>

<data>

</data>

</control>

</controls>

</renderData>

• O controle de lum_interfaceHeader traz apenas o título da interface, o que pode ser modificado também através da opção Propriedades no right-click da interface.

• O controle de lum_tabularData traz todo o conteúdo cadastrado na interface administrativa do serviço. Se assemelha ao controle lum_navigationList, porém ao invés de receber apenas links, no serviço de Notícias, o lum_tabularData estará recebendo no XML os campos título e introdução de cada notícia cadastrada, além da data e imagem de introdução;

• O controle de lum_link traz o link para a interface Lista do mesmo serviço. Como a interface Lista Rápida, que por padrão traz somente as últimas notícias cadastradas, o XML traz automaticamente esse link para a interface Lista, que exibe todas as notícias cadastradas.

Com essas informações, pode-se codificar um XSL a partir do zero, como no exemplo de lum_navigationList. O objetivo é trazer os controles na seguinte ordem:

1. Cabeçalho (lum_interfaceHeader)

2. Últimas notícias cadastradas (lum_tabularData)

3. Link para todas as notícias cadastradas exibidas na interface Lista (lum_link)

Para iniciar a customização dos controles da interface Lista Rápida, crie um novo XSL em um diretório para customização (ex: lumisdata/def/yyyy/service/xxxx/style/ListaRapida.xsl, onde YYYY é o diretório do projeto e XXXX é o diretório do serviço ) e inclua o seguinte código XSL:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">

<xsl:import href="../../../../lumis/doui/style/DouiControls.xsl" />

<xsl:output omit-xml-declaration = "yes" method="html" />

<xsl:template match="/">

<div>

<xsl:for-each select="//control[@type='lum_tabularData']/data/row">

<div>

(<xsl:value-of select="publishStartDate/value" />)

<br />

<xsl:value-of disable-output-escaping="yes" select="introduction" />

</div>

</xsl:for-each>

» <a href="{//control[@type='lum_link']/data/href}"><xsl:value-of select="//control[@type='lum_link']/data/text" /></a>

</div>

</xsl:template>

</xsl:stylesheet>

• O controle lum_link é chamado mais de uma vez porque ele é usado em dois campos, um para montar o href do link e outro para inserir o texto “mais” do link. No caso do lum_tabularData, como está sendo chamado para formar o loop <xsl:for-each />, não é necessário chamá-lo mais de uma vez, já que todos os campos dentro do <xsl:for-each /> já partem da hierarquia //control[@type='lum_tabularData']/data/row ;

• O campo Introdução possui o atributo disable-output-escaping=”yes”. Este atributo é necessário para todos os <xsl:value-of /> que chamem campos que possuem cadastro HTML. Isso evita que, na visualização final, um cadastro do tipo “<strong>Esse texto em negrito</strong>” chegue exatamente como “<strong>Esse texto em negrito</strong>”, ao invés de “Esse texto em negrito”;

• O caracter » serve para inserir um caractere ( » ) antes do texto do link. No XSL só pode ser usada formatação do tipo (&#XXXX;) para inserir caracteres especiais, onde XXXX é sempre um valor numérico específico para cada caractere. (Mais informações sobre caracteres especiais podem ser encontradas em: http://www.cssplay.co.uk/menu/code.html)

• Os <div> vazios no código serão utilizados mais a frente para facilitar a implementação do layout por CSS.

Portanto, com o XSL acima tem-se o seguinte layout para a interface Lista Rápida:

xsl009

Continuando o XSL, para incluir imagens de introdução, deve-se fazer um teste para saber se existe uma imagem cadastrada, pois casa não exista, a tag <img> não pode estar vazia no código. O mesmo é necessário para a legenda da imagem. Esta apenas será inserida caso exista legenda cadastrada. Segue o restante do código XSL, agora para exibir imagem e legenda. O código deve estar depois do XSL da data de publicação e antes do XSL da introdução:

<xsl:for-eachselect="//control[@type='lum_tabularData']/data/row">

<div>

(<xsl:value-of select="publishStartDate/value" />)

<br />

<xsl:if test="introductionImage/name != ''">

<xsl:if test="introductionImage/imageLegend != ''">

<xsl:attribute name="alt"><xsl:value-of select="introductionImage/imageLegend" /></xsl:attribute>

</xsl:if>

</img>

</xsl:if>

<xsl:value-of disable-output-escaping="yes" select="introduction" />

</div>

</xsl:for-each>

Após o término da codificação XSL para a interface Lista Rápida, pode-se customizar seu layout adicionando classes CSS aos <div> vazios.

<xsl:for-eachselect="//control[@type='lum_tabularData']/data/row">

<div>

(<xsl:value-of select="publishStartDate/value" />)

</div>

<xsl:if test="introductionImage/name != ''">

<xsl:if test="introductionImage/imageLegend != ''">

<xsl:attribute name="alt"><xsl:value-of select="introductionImage/imageLegend" /></xsl:attribute>

</xsl:if>

</img>

</xsl:if>

<xsl:value-of disable-output-escaping="yes" select="introduction" />

</div>

</xsl:for-each>

» <ahref="{//control[@type= 'lum_link']/data/href}"><xsl:value-ofselect="//control[@type='lum_link']/data/text" /></a>

</div>

As classes CSS podem estar localizadas em tags <style/> antes de um </xsl:template> de um <xsl:template match>. As classes CSS também podem estar em um arquivo externo, sem as <style/>. Este arquivo deverá ser aplicado a uma página ou canal, através de suas propriedades.

#listaRapida {

padding:8px;

border:1px solid #ccc;

}

#listaRapida .tit {

font-size:110%;

text-transform:uppercase;

padding-bottom:8px;

}

#listaRapida .rowtit {

padding-bottom:5px;

}

#listaRapida img.dataImage {

float:left;

margin:0 8px 12px 0;

border-left:2px solid #ccc;

}

#listaRapida br {

line-height:70%;

}

#listaRapida a {

color:#003399;

}

Visualização da interface Lista Rápida após aplicação do CSS:

xsl011