Utilização dos controles lum_interfaceHeader, lum_tabularData e lum_link
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):
- 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_tabularDatatraz 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:
- Cabeçalho (lum_interfaceHeader)
- Últimas notícias cadastradas (lum_tabularData)
- 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:
- 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:
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:
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.
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.
Visualização da interface Lista Rápida após aplicação do CSS: