Piccolo tutorial su eXtensible Stylesheet Language Transformation (XSLT)
XSLT è una tecnologia sviluppata dal W3C che permette, a partire da dati in formato XML, di generare documenti nei più disparati formati. L'esempio che vedremo in questo breve tutorial genera a partire da un file XML una pagina XHTML 1.0 Strict.
Ammettiamo di avere un file XML che contiene i nostri appunti. Il contenuto del file XML รจ il seguente:
<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="transformation.xsl"?>
<notes>
<note>
<headingLevel1>Titolo livello 1 olé</headingLevel1>
<paragraph>
Questa è la <strong>prima</strong> nota
<emphatized>scritta</emphatized> con
<link url="http://www.w3.org/XML/" urllang="en-EN">XML</link>.
</paragraph>
<list type="ordered">
<list-item>
elemento 1 di una lista <strong>ordinata</strong>
</list-item>
<list-item>elemento 2 <emphatized>corsivo</emphatized></list-item>
<list-item>
sito del <link url="http://www.w3.org/" urllang="en-EN">W3C</link>
</list-item>
<list-item>
<headingLevel3>Titolo livello 3 olé</headingLevel3>
<list type="unordered">
<list-item>
elemento 1 di una lista <strong>non ordinata</strong>
</list-item>
<list-item>
elemento 2 <emphatized>corsivo</emphatized>
</list-item>
</list>
</list-item>
</list>
</note>
</notes>
Ora ciò che dobbiamo fare è creare una trasformazione XSLT che generi una pagina XHTML gestendo correttamente le lettere accentate e tutti gli elementi: titoli, paragrafi, liste e via dicendo. La trasformazione è la seguente:
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output omit-xml-declaration="yes"/>
<xsl:template match="/">
<xsl:text disable-output-escaping="yes">
<![CDATA[
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
]]>
</xsl:text>
<xsl:text disable-output-escaping="yes">
<![CDATA[
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="it" lang="it">
]]>
</xsl:text>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Appunti</title>
</head>
<body>
<xsl:apply-templates/>
</body>
<xsl:text disable-output-escaping="yes">
<![CDATA[
</html>
]]>
</xsl:text>
</xsl:template>
<!-- Every text must be escaped-->
<xsl:template match="text()">
<xsl:value-of select="." disable-output-escaping="yes"/>
</xsl:template>
<!-- Heading levels -->
<xsl:template match="headingLevel1">
<h1><xsl:value-of select="." disable-output-escaping="yes"/></h1>
</xsl:template>
<xsl:template match="headingLevel2">
<h2><xsl:value-of select="." disable-output-escaping="yes"/></h2>
</xsl:template>
<xsl:template match="headingLevel3">
<h3><xsl:value-of select="." disable-output-escaping="yes"/></h3>
</xsl:template>
<xsl:template match="headingLevel4">
<h4><xsl:value-of select="." disable-output-escaping="yes"/></h4>
</xsl:template>
<xsl:template match="headingLevel5">
<h5><xsl:value-of select="." disable-output-escaping="yes"/></h5>
</xsl:template>
<xsl:template match="headingLevel6">
<h6><xsl:value-of select="." disable-output-escaping="yes"/></h6>
</xsl:template>
<!-- paragraphs -->
<xsl:template match="paragraph">
<p>
<xsl:apply-templates/>
</p>
</xsl:template>
<!-- Lists -->
<xsl:template match="//list[@type='ordered']">
<ol>
<xsl:apply-templates/>
</ol>
</xsl:template>
<xsl:template match="//list[@type='unordered']">
<ul>
<xsl:apply-templates/>
</ul>
</xsl:template>
<xsl:template match="list/list-item">
<li>
<xsl:apply-templates/>
</li>
</xsl:template>
<!-- Commons -->
<xsl:template match="//strong">
<strong><xsl:value-of select="." disable-output-escaping="yes"/></strong>
</xsl:template>
<xsl:template match="//emphatized">
<em><xsl:value-of select="." disable-output-escaping="yes"/></em>
</xsl:template>
<xsl:template match="//link">
<a>
<xsl:attribute name="href"><xsl:value-of select='@url'/></xsl:attribute>
<xsl:attribute name="hreflang"><xsl:value-of select='@urllang'/></xsl:attribute>
<xsl:value-of select="."/>
</a>
</xsl:template>
</xsl:stylesheet>
A questo punto basterà aprire il file XML con un browser che supporta lato client le trasformazioni XSLT (in questo caso, strano a dirsi, tutti i browser tranne Firefox) per vedere il risultato. Se invece volete generare un file XHTML sul vostro filesystem allora potete usare Xalan o strumenti simili.
Alcune note
Il template
<xsl:template match="text()">
<xsl:value-of select="." disable-output-escaping="yes"/>
</xsl:template>
serve a trasformare il testo correttamente. Se mancasse questo template le entità all'interno dei tag con figli non sarebbero trasformate correttamente.
Il template
<xsl:template match="//link">
<a>
<xsl:attribute name="href"><xsl:value-of select='@url'/></xsl:attribute>
<xsl:attribute name="hreflang"><xsl:value-of select='@urllang'/></xsl:attribute>
<xsl:value-of select="."/>
</a>
</xsl:template>
per la gestione dei link fa vedere come vanno gestiti gli attributi.
Potete anche scaricare l'esempio.
Scritto da Elia Contini il 23 Maggio 2009 alle 18:54 | 3 commenti
Tabelle con righe a colori alternati
Come si crea una tabella XHTML con le righe a colori alternati? Semplice usando CSS. Vediamo come. Innanzi tutto il codice di markup:
<table summary="tabella di esempio: le righe dispari
hanno sfondo bianco mentre quelle pari hanno sfondo
celeste pallido.">
<tr>
<th>Intestazione 1</th>
<th>Intestazione 2</th>
</tr>
<tr>
<td class="odd">contenuto cella 1</td>
<td class="odd">contenuto cella 2</td>
</tr>
<tr>
<td class="even">contenuto cella 3</td>
<td class="even">contenuto cella 4</td>
</tr>
<tr>
<td class="odd">contenuto cella 5</td>
<td class="odd">contenuto cella 6</td>
</tr>
<tr>
<td class="even">contenuto cella 7</td>
<td class="even">contenuto cella 8</td>
</tr>
</table>
Le celle delle righe dispari appartengono alla classe odd mentre le celle delle righe pari appartengono alla classe even.
Si obietterà che bastava definire le classi sulle righe, per intenderci sugli elementi tr, ed io vi rispondo con una domanda: funziona su tutti i browser?
Fatto il markup ora scriviamo le regole di presentazione, i CSS. Ecco le semplici regole:
table
{
/* elimina gli spazi tra le celle */
border-collapse: collapse;
/* centra la tabella nella pagina */
margin: 0 auto;
padding: 0;
width: 80%
}
td
{
color: #000;
margin: 0;
padding: 0.2em
}
td.odd
{
background-color: #fff;
}
td.even
{
background-color: #d4dde5;
}
L' esempio mostra il risultato che si ottiene.
Scritto da Elia Contini il 29 Settembre 2008 alle 15:24 | 3 commenti
