Open the menu

    Exemplo de criação de temas

    Como exemplo de criação de temas, suponha um portal com uma área de notícias. Essa área possui uma área de notícias esportivas. A área de notícias esportivas se subdivide em duas outras áreas: futebol e basquete.

    Analogamente, suponha que as listas de notícias estão dispostas como a figura abaixo:

    themes_creation_example_000

    Supondo que a apresentação das listas de notícias de esportes, futebol e basquetes devem ser diferentes, foi decidido criar três temas distintos para esse portal: esportes, basquete e futebol.

    themes_creation_example_001

    Os temas br.com.lumis.theme.esporte, br.com.lumis.theme.futebol e br.com.lumis.theme.basquete foram aplicados nos canais Esportes, Futebol e Basquete, respectivamente. Os canais Futebol e Basquete, além de aplicar seus respectivos temas, ainda aplicam o tema br.com.lumis.theme.esporte, após os seus respectivos temas.

    A aparência desejada para cada lista é:

    • Esportes

      themes_creation_example_002
    • Futebol

      themes_creation_example_003
    • Basquete

      themes_creation_example_004

    O tema esporte possui, além do arquivo de definição:

    • def/lumis/service/news/style/List.xsl
    • www/css/style.css
    • www/img/icone.jpg

    O tema futebol possui, além do arquivo de definição:

    • def/lumis/service/news/style/List.xsl
    • www/css/style.css
    • www/img/icone.jpg

    O tema basquete possui, além do arquivo de definição:

    • www/css/style.css
    • www/img/icone.jpg

    XSLs

    O XSL do tema esporte é a base para toda a área de esporte.

    Nesse XSL é possível verificar que ele importa o XSL "lum_basetheme/List.xsl". O prefixo "lum_basetheme" indica ao portal que o XSL a ser importado pertence ao tema base (aquele aplicado anteriormente, ou nenhum tema caso o tema atual seja o primeiro). O arquivo é relativo ao arquivo que está realizando o import (no caso, lumis/service/news/style/List.xsl). Então o arquivo a ser importado neste exemplo será o lumis/service/news/style/List.xsl original do serviço de notícias.

    Este XSL redefine o template de formulário para alterar a sua renderização e redefine o template listItem para alterar sua renderização.

    Esse tema também importa "lum_basetheme/List.xsl".

    No caso da lista de futebol, o XSL utilizado será o XSL do tema futebol. Esse XSL importará o XSL do tema esporte. Por fim, o XSL do tema esporte importará o XSL original do serviço de Notícias.

    Ou seja, no caso da lista de futebol, os templates de formulário e listItem serão utilizados do XSL do tema futebol.

    CSSs

    O template renderStyleLink, definido no XSL do tema esporte, renderiza um link referenciando o arquivo "css/style.css". O arquivo final a ser referenciado dependerá de qual(is) tema(s) está(ão) sendo utilizado(s) na página acessada.

    Na página de lista de esportes, o CSS referenciado será o do tema esportes. Na página de futebol o CSS utilizado será o de futebol e na página de lista de basquete será o do tema basquete.

    No CSS do tema futebol é possível ver duas classes que são definidas em seu XSL: cLumListItem_Fut1 e cLumListItem_Fut2.

    Imagens

    Assim como os CSSs, as imagens referenciadas pelo código HTML poderão ser substituídas dependendo de qual(is) tema(s) está(ão) sendo aplicado(s) na página em visualização.

    Download dos exemplos