XSLT: L'istruzione xsl:template

In questo articolo mostrerò come poter utilizzare l'istruzione XSLT xsl:template, all'interno di un foglio di stile, per trasformare un documento XML in una pagina XHTML nel momento in cui viene ricevuto dal browser, cioè appena prima che il risultato del processo di trasformazione XSLT venga presentato all'utente.

Affidarsi al server o al client?

Sempre più spesso è necessario elaborare e presentare dati contenuti in documenti XML. Fortunatamente, esistono componenti_software e tecniche applicabili facilmente sia lato server sia lato client per raggiungere tale scopo.

L'utilizzo di XSLT a mio avviso è specifico del lato client: poiché i più recenti browsers supportano questo standard, non trovo motivo alcuno di dover garantire la compatibilità cross-browser del risultato lavorando il documento XML lato server e delegando il compito della trasformazione XSLT al client si risparmiano risorse sul web server.

Un'alternativa all'utilizzo di XSLT é la trasformazione di documenti XML tramite l'oggetto Javascript XMLHttpRequest(), cuore di qualunque RIA (abbreviazione di Rich Internet Application) e del noto rivoluzionario Web2.0.

I dati XML

Per creare la base dati XML mi sono ispirato al giardinaggio, immaginando alcuni possibili oggetti e piante contenuti in una piccola serra.

Dunque, partiamo con il documento XML:

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

<!-- Aggancio il foglio di style xsl 
    che genererà la parte grafica -->
<?xml-stylesheet 
    type="text/xsl" href="Template.xsl"?>

<!-- Una possibile serra -->
<serra>
  <pianta>
    <nome>Geranio</nome>
    <esterno>true</esterno>
    <colore>rosso</colore>
    <color>red</color>
  </pianta>
  <pianta>
    <nome>Rosa</nome>
    <esterno>true</esterno>
    <colore>arancione</colore>
    <color>orange</color>
  </pianta>
  <pianta>
    <nome>celosia</nome>
    <esterno>true</esterno>
    <colore>viola</colore>
    <color>violet</color>
  </pianta>
  <pianta>
    <nome>felce</nome>
    <esterno>false</esterno>
    <colore>verde scuro</colore>
    <color>darkgreen</color>
  </pianta>
  <vaso>
    <diametro>22 cm</diametro>
    <desc>piccolo</desc>
    <util>Utilizzato per piccole piante 
        o fiori (viola, cactus)</util>
    <color>brown</color>
  </vaso>
  <vaso>
    <diametro>44 cm</diametro>
    <desc>medio</desc>
    <util>Utilizzato per piante o fiori 
        (rosa, ficus) di medie dimensioni</util>
    <color>silver</color>
  </vaso>
  <attrezzo>
    <nome>Zappa</nome>
    <dimensioni>30x10 cm</dimensioni>
    <materiale>acciaio</materiale>
    <util>Utilizzato per fioriere di medie 
        dimensioni e piccole profondita'</util>
    <color>silver</color>
  </attrezzo>
</serra>

Dopo aver visto il documento XML dell'esempio, sul quale non c'è niente da dire né commentare, passiamo alla parte più interessante dell'articolo, ovvero il processo di trasformazione XSLT dei dati XML.

Creazione ed Utilizzo di Template XSLT

Per iterare agilmente, all'interno di un documento XML, su tutti i child nodes di un nodo padre (nel nostro caso la root del documento) ed applicare ad ognuno il corrispettivo template, che si occuperà di trasformare il contenuto XML del nodo in puro XHTML per il browser, farò uso del selettore XPath '*' per valorizzare l'attributo match dell'istruzione <xsl:apply-templates match="nome del nodo" />.


Nel foglio di stile XSLT che ho creato è presente un commento per ogni linea di codice che contiene istruzioni o dichiarazioni di rilevante importanza, quindi basta leggere attentamente il codice sotto riportato per poter capire il funzionamento e l'utilizzo dell'istruzione xsl:template e non solo.

La rappresentazione grafica è scarna volutamente per non offuscare la parte di elaborazione XSLT.

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

<!-- dichiaro che tipo di documento 
    il browser deve interpretare -->
<xsl:stylesheet version="1.0"
    xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<!-- scelgo di iniziare l'elaborazione 
    del documento XML a partire dal nodo serra -->
<xsl:template match="/serra">

<html>
<head>
  <title>Serra</title>
  <style>
    div{width: 50%; text-align:left;}
    table{width: 1%;color: darkblue;}
    td{white-space: nowrap;width: 1%;}
  </style>
</head>
<body>
  <center>

  <!-- per ogni nodo figlio di serra 
      applico il rispettivo template -->
  <xsl:apply-templates select="*"/>

  </center>
</body>
</html>

</xsl:template>

<!-- template per la rappresentazione 
    grafica di ogni nodo pianta -->
<xsl:template match="pianta">

<!-- utilizzo di una variabile: 
    é il valore del nodo color, 
    figlio del nodo pianta -->
<div style="background-color: {color}">
  <table>
    <tr> 
      <th colspan="2"> Pianta </th>
    </tr>
    <tr>
      <td> Nome : </td>
      <td> 
        <!-- Estraggo il valore del tag nome -->
        <xsl:value-of select="nome" /> 
      </td>
    </tr>
    <tr>
      <td> Da Esterno : </td>
      <!-- il costrutto XSLT choose 
          e' come switch di Java -->
      <xsl:choose>
        <!-- l'istruzione XSLT when 
            e' come il case di Java -->
        <xsl:when test="esterno = 'true'">
           <td> Si </td>
        </xsl:when>

        <!-- otherwise viene utilizzato 
            se non viene trovata nessuna condizione 
            vera di when.E' il default del switch Java -->
        <xsl:otherwise>
          <td> No </td>
        </xsl:otherwise>
      </xsl:choose>
    </tr>
    <tr>
      <td> Colore : </td>
      <td> <xsl:value-of select="colore" /> </td>
    </tr>
  </table>
</div>
<br />
</xsl:template>

<!-- template per la rappresentazione 
    grafica di ogni nodo vaso -->
<xsl:template match="vaso">
<div style="background-color: {color}">
  <table>
    <tr> <
      th colspan="2"> Vaso </th> 
    </tr>
    <tr>
      <td> Diametro : </td>
      <td> 
        <xsl:value-of select="diametro" />
      </td>
    </tr>
    <tr>
      <td> Descrizione : </td>
      <td>
        <xsl:value-of select="desc" />
      </td>
    </tr>
    <tr>
      <td> Nota : </td>
      <td>
        <xsl:value-of select="util" />
      </td>
    </tr>
  </table>
</div>
<br />
</xsl:template>

<!-- template per la rappresentazione 
    grafica di ogni nodo attrezzo -->
<xsl:template match="attrezzo">
<div style="background-color: {color}">
  <table>
    <tr>
      <th colspan="2"> 
        <xsl:value-of select="nome" />
      </th>
    </tr>
    <tr>
      <td> Dimensioni : </td>
      <td>
        <xsl:value-of select="dimensioni" />
      </td>
    </tr>
    <tr>
      <td> Materiale : </td>
      <td>
        <xsl:value-of select="materiale" />
      </td>
    </tr>
    <tr>
      <td> Nota : </td>
      <td> 
        <xsl:value-of select="util" /> 
      </td>
    </tr>
  </table>
</div>
<br />
</xsl:template>

</xsl:stylesheet>

Per poter testare l'esempio, è necessario creare un file XML di nome Template.xml contenente il codice XML presentato nella 1a parte dell'articolo, poi, sempre nella stessa cartella, è da creare un file XSLT di nome Template.xsl che contiene il codice XSLT riportato sopra; aprendo il file Template.xml con il browser avverrà magicamente la trasformazione XSLT.

Alla prossima,
MA.