Open the menu

    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:

    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:

    • 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 &#187; 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:

    using_lum_interfaceheader_lum_tabulardata_and_lum_link_controls_001

    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:

    using_lum_interfaceheader_lum_tabulardata_and_lum_link_controls_002