XSL -- stylový jazyk pro náročné

Jiří Kosek ml.

eXtensible Stylesheet Language (XSL) pracuje na zcela jiném principu než kaskádové styly. XSL je jazyk, kterým vytváříme pravidla pro transformaci jedné třídy XML dokumentů na jiný XML dokument. Výsledný dokument, který vznikne aplikováním transformačních pravidel, je použit pro zobrazení. Dnes se nejčastěji XSL styl vytváří tak, aby výsledkem jeho aplikování byl HTML dokument. To umožňuje využít současná jádra prohlížečů, která si se zobrazením HTML poradí. Navíc lze XML dokumenty pomocí XSL transformovat do HTML ještě na serveru, a tak zpřístupnit XML dokumenty libovolnému prohlížeči.

Obr. 1: Princip práce s XSL styly

XSL je prozatím návrh standardu, který připravuje konsorcium W3C. XSL kromě transformačního jazyka (který bývá někdy označován jako XSLT) obsahuje i vlastní formátovací model, který můžeme použít například místo výstupu do HTML. Formátovací model vychází z jazyků CSS a DSSSL a jeho cílem je nabídnout minimálně to, co stylové jazyky, ze kterých vychází.

Pokud si chceme XSL vyzkoušet v praxi, musíme se dnes v podstatě omezit na XSLT. Ten je až na drobné výjimky ve shodě se standardem W3C implementován v IE 5.0. Formátovací model XSL zatím zvládají (a to pouze částečně) jen některé testovací implementace, které rozhodně nejsou určeny pro rutinní nasazení.

Dnes se podíváme na základy transformačního jazyka XSL, které si můžeme rovnou vyzkoušet například ve spojení s IE 5.0. Gecko zatím bohužel XSL nepodporuje. Až bude k dispozici i nějaká snadno dostupná implementace formátovací modelu XSL, určitě vás s ní na stránkách našeho týdeníku seznámíme.

Základy XSL

XSL styl je sám o sobě XML dokumentem. Měl by proto začínat odpovídající XML deklarací:

<?xml version="1.0" encoding="utf-8"?>

Jelikož je výsledkem aplikování XSL stylu XML dokument, musíme ve stylu používat elementy, které se vyskytnou ve výsledném XML dokumentu. Aby se navzájem nepomíchaly elementy z cílového dokumentu a ze stylu, používají se tzv. jmenné prostory (namespaces). Před názvy všech elementů stylu, které souvisejí s XSL se předřadí xsl:, aby se odlišily od ostatních. Použití jmenného prostoru je potřeba deklarovat u kořenového elementu stylu stylesheet.

<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

Samotný styl se skládá převážně ze šablon. Pomocí šablony vybereme vždy určitý element a určíme, co se má s jeho obsahem udělat. Definice šablony se provádí pomocí elementu template a elementy, na které se použije, se určují pomocí vzoru zapsaného do atributu match. Pokud bychom chtěli, aby se element para pomocí stylu přeměnil na HTML element p pro odstavec, použijeme následující šablonu:

<xsl:template match="para">
  <p><xsl:apply-templates/></p>
</xsl:template>

Element apply-templates XSL procesoru říká, aby obsah elementu para postoupil dalším šablonám -- ty zpracují samotný text odstavce, případně další elementy, které mohou například měnit použitý styl písma. Tagy <p> a </p> se objeví ve výsledném HTML dokumentu.

Pokud nechceme, aby byl zpracován celý obsah elementu, můžeme u apply-templates použít atribut select a pomocí vzoru určit, které části elementu se mají zpracovat.

Použití atributu select je velmi silný nástroj. Jeho vhodným použitím, můžeme části dokumentu vyřadit ze zobrazení nebo měnit pořadí elementů na výstupu. Kdybychom například chtěli náš ukázkový XML dokument zobrazit tak, že nejprve bude jméno autora, pak název článku a rubrika nebude vůbec zobrazena, použijeme ve stylu následující jednoduchou šablonu:

<xsl:template match="zahlavi">
  <xsl:apply-templates select="autor"/>
  <xsl:apply-templates select="nazev"/>
</xsl:template>     

Důležitým nástrojem pro identifikaci jednotlivých částí dokumentu jsou vzory, které jsme použili v atributech match a select. Vzorem nemusí být jen samotný název elementu. Možnosti jsou mnohem širší, jak je vidět v tabulce 1.

Chceme-li vytvářet vlastní styly v XSL, musíme znát princip, na kterém styl pracuje. Na každý element dokumentu se aplikuje šablona, která má vyhovující vzor. Pokud je element možno zpracovat pomocí více šablon, má přednost ta poslední. Podle specifikace XSL by měl mít každý XSL procesor zabudovány šablony, které způsobí vypsání celého dokumentu. To usnadní psaní stylů, protože pak stačí pomocí šablon ošetřit elementy, u kterých požadujeme speciální formátování. IE bohužel tyto šablony nemá zabudované. Na začátku každého XSL stylu, který chceme použít i v IE, bychom proto měli uvést definici následujících tří šablon:

<xsl:template match="/">
  <xsl:apply-templates/>		
</xsl:template>

<xsl:template match="*">
  <xsl:apply-templates/>
</xsl:template>

<xsl:template match="text()">
  <xsl:value-of select="."/>
</xsl:template>

První šablona zajistí zpracování kořenového elementu dokumentu. Druhá šablona se postará o to, že budou zpracovány všechny elementy. Konečně poslední šablona do výsledného dokumentu vypíše textový obsah všech elementů na nejnižší úrovni. Díky tomu, že později uvedené šablony mají vyšší prioritu, neovlivní tyto tři šablony nijak další zpracování dokumentu.

Na ukázce 3 vidíte příklad stylu, který můžeme použít pro zpracování našeho ukázkového XML dokumentu. Výsledné zobrazení je téměř shodné jako při použití CSS. Mohli jsme si však dovolit provádět různá "kouzla", na která kaskádové styly nestačí. Pomocí šikovného vzoru jsme například získali název článku a umístili ho jako titulek stránky do popisu okna prohlížeče.

Ukázka 3: XSL styl a jeho zobrazení

XSL styl

<?xml version="1.0" encoding="utf-8"?>
<xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">

  <xsl:template match="/">
    <html>
      <head>
	<title>
	  <xsl:apply-templates select="clanek/zahlavi/nazev/text()"/>
	</title>
      </head>
      <body style="background-color: white;
	           font-family: Arial, Verdana, sans-serif"> 
	<xsl:apply-templates/>		
      </body>
    </html>
  </xsl:template>

  <xsl:template match="*">
    <xsl:apply-templates/>
  </xsl:template>

  <xsl:template match="text()">
    <xsl:value-of select="."/>
  </xsl:template>

  <xsl:template match="zahlavi">
    <div style="text-align: center;
                padding: 10pt;
                margin: 20pt; 
                background-color: silver;
                border: 4pt outset silver">
      <xsl:apply-templates/>
    </div>
  </xsl:template>

  <xsl:template match="rubrika">
    <div style="float: right; 
                color: yellow;
                font-size: small;
                font-weight: bold">
      <xsl:apply-templates/>
    </div>
  </xsl:template>
      
  <xsl:template match="nazev">
    <div style="font-size: 300%;
                text-transform: uppercase;
                color: blue;
                margin: 5pt">
      <xsl:apply-templates/>
    </div>
  </xsl:template>

  <xsl:template match="autor">
    <div style="font-style: italic">
      <xsl:apply-templates/>
    </div>
  </xsl:template>

  <xsl:template match="perex">
    <div style="margin: 5pt 20pt;
                font-style: italic;
                font-weight: bold">
      <xsl:apply-templates/>
    </div>
  </xsl:template>

  <xsl:template match="para">
    <div style="margin: 5pt 20pt">
      <xsl:attribute name="align">
	<xsl:choose>
	  <xsl:when test="@zarovnani[.='nastred']">center</xsl:when>
	  <xsl:when test="@zarovnani[.='doprava']">right</xsl:when>
	  <xsl:when test="@zarovnani[.='doleva']">left</xsl:when>
	  <xsl:otherwise>left</xsl:otherwise>
	</xsl:choose>
      </xsl:attribute>
      <xsl:apply-templates/>
    </div>
  </xsl:template>

  <xsl:template match="em">
    <strong>
      <xsl:apply-templates/>
    </strong>
  </xsl:template>

</xsl:stylesheet>

Pomocí stylu zpracuje XSL procesor náš dokument a vznikne HTML stránka:

<html>
  <head>
    <title>
      XML a stylové jazyky
    </title>
  </head>
  <body style="background-color: white; font-family: Arial, 
  Verdana, sans-serif">
    <div style="text-align: center; padding: 10pt; margin: 20pt; 
    background-color: silver; border: 4pt outset silver">
      <div style="float: right; color: yellow; font-size: small; 
      font-weight: bold">
        Téma týdne
      </div>
      <div style="font-size: 300%; text-transform: uppercase; 
      color: blue; margin: 5pt">
        XML a stylové jazyky
      </div>
      <div style="font-style: italic">
        Jiří Kosek
      </div>
    </div>
    <div style="margin: 5pt 20pt; font-style: italic; font-weight: 
    bold">
      V několika předchozích číslech Computerworldu jsme se
      seznámili s jazykem XML a s tím jak v něm vytvářet dokumenty.
      Jazyk XML je výborný formát pro přenos dat mezi různýmu
      systémy. V určitém okamžiku však vždy do procesu zpracování
      dokumentů a dat vstupuje člověk. V tomto okamžiku je potřeba
      dokument prezentovat ve formě, která je pro člověka
      nejsrozumitelnější.
    </div>
    <div style="margin: 5pt 20pt" align="center">
      Jazyk XML definuje pouze strukturu dokumentů. Chceme-li však
      dokument přehledně zobrazit, musíme nějakým způsobem
      definovat, jak se jednotlivé elementy zobrazí -- jakou
      barvou, jakým písmem, jak budou zarovnané apod. Pro definici
      vzhledu dokumentů se dnes používají tzv. <strong>stylové
      jazyky</strong> . Mezi tři nejznámější a nejpoužívanější
      patří jazyky CSS, XSL a DSSSL.
    </div>
    <div style="margin: 5pt 20pt" align="right">
      V dnešním tématu týdne se na ně podíváme podrobněji a ukážeme
      si, jak vytvořit XML dokument a odpovídající styl tak, aby se
      dokument dal zobrazit v prohlížečích, které podporují XML
      (konkrétně tedy v Internet Exploreru 5.0 a ve vývojové verzi
      Netscape Navigatoru známé pod názvem Gecko).
    </div>
  </body>
</html>

Zobrazení dokumentu pomocí XSL stylu v IE 5.0. XSL je mnohem flexibilnější a mocnější nástroj než CSS. Na druhou stranu zatím nepodporuje některé typografické finesy CSS jako pseudoelementy pro první písmeno či řádku.

XSL podporuje i mnoho dalších konstrukcí, o kterých jsme se dosud nezmínili. Není problém styl obohatit o podmínky, cykly a další. K dispozici máme několik nástrojů na řazení elementů podle téměř libovolných kritérií. Chceme-li některé elementy automaticky číslovat, není to samozřejmě pro XSL problém. Podobně jako u CSS. můžeme v jednom stylu načítat další a jejich kombinováním dosáhnout požadovaného výsledku. Podrobnější informace o XSL naleznete v návrhu specifikace XSL na stránkách konsorcia W3C.