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:

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.

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
Futebol
Basquete

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.

def/lumis/service/news/style/List.xsl do tema esporte

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:lum="http://www.lumis.com.br/doui" exclude-result-prefixes="lum" version="1.0">
<xsl:import href="lum_basetheme/List.xsl" ></xsl:import>
<xsl:output omit-xml-declaration = "yes" method="xml" ></xsl:output>
 
 <xsl:template name="listItem">
         <b><lum:field id="title" ></lum:field></b> (<lum:field id="publishStartDate/value" ></lum:field>)<br /> 
         <lum:field id="introductionImage" isImage="true" class="imgleft" ></lum:field> 
         <lum:field id="introduction" isHtml="false" ></lum:field> 
 </xsl:template>
 
 <lum:form>
         <xsl:call-template name="renderStyleLink" ></xsl:call-template>
         <div class="cLumList">
                 <xsl:call-template name="renderTopTitle" ></xsl:call-template>
                 
                 <lum:control type="lum_filters"></lum:control>
                 
                 <lum:loop>
                         <table cellpadding="0" cellspacing="0">
                         <tr>
                                 <td class="row">
                                         <xsl:choose>
                                                 <xsl:when test="@href">
                                                         <a href="{@href}">
                                                                 <xsl:call-template name="listItem"></xsl:call-template>
                                                         </a>
                                                 </xsl:when>
                                                 <xsl:otherwise>
                                                         <xsl:call-template name="listItem"></xsl:call-template>
                                                 </xsl:otherwise>
                                         </xsl:choose>
                                 </td>
                         </tr>
                         </table>
                 </lum:loop>
                 
                 <lum:control type="lum_pagination"></lum:control>
                 
                 <div class="cLumHorDotline"><img src="lumis/portal/client/images/Pix.gif" alt=" " title="" /></div>
                 
         </div>
 </lum:form>
 
 <xsl:template name="renderTopTitle">
         <table class="cLumTopTitle">
                 <tr>
                         <td class="cLumTopTitleImg">
                                 <img src="img/icone.jpg" />
                         </td>
                         <td class="cLumTopTitleHeader">
                                 <lum:interfaceHeader></lum:interfaceHeader>
                         </td>
                 </tr>
         </table>
 </xsl:template>
 
 <xsl:template match="control[@type='lum_interfaceHeader']" name="lum_interfaceHeader">
         <xsl:value-of select="data/title" ></xsl:value-of>
 </xsl:template>
 
 <xsl:template name="renderStyleLink">
         <link href="css/style.css" type="text/css" rel="stylesheet" />
 </xsl:template>
</xsl:stylesheet>

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.

def/lumis/service/news/style/List.xsl do tema futebol

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.