In alcuni casi è necessario che il parser non processi dei blocchi di codice per far sì che questi vengano portati direttamente nell'output. Facciamo un esempio molto pratico.
Consideriamo l'XSL e l'output HTML dell'esempio 18.
Adesso mettiamo il caso che vogliamo creare nel layout HTML una tabella con
tutte le foto delle copertine degli album disposte su tre colonne. Poichè nel
nostro caso abbiamo 9 album dovremmo avere una tabella di tre righe per tre
colonne. Apparentemente sembra una cosa molto semplice ma ben presto ci
accorgeremo che non lo è affatto.
Per compiere l'operazione infatti dobbiamo creare un ciclo utilizzando l'elemento <xsl:for-each>; e creare delle colonne all'interno della <table> che devono essere interrotte ogni tre album, chiudendo la riga e aprendone una nuova con </tr><tr>.
Come facciamo però ad aggiungere questo codice HTML nell'XSLT?
Poichè il documento XSLT dev'essere un documento XML ben formato non possiamo certo mettere TAG che non hanno il corrispondente TAG di apertura o chiusura, poichè il processore ci segnalerebbe subito l'errore!
Per fare questo vengono utilizzati i blocchi CDATA che
vengono così identificati:
<![CDATA[
Blocco di testo non processato ]]>
I blocchi CDATA possono essere utilizzati sia nel
documento XML che in quello XSLT e spesso vengono utilizzati assieme a del
codice Java Script.
Vediamo ora di mostrare l'esempio pratico che abbiamo
illustrato alcune lezioni fa, riprendendo come XML il documento
utilizzato nell'esempio 18.
Esempio 20.
Codice XSLT utilizzato ( listacd_es20.xslt ):
<?xml version="1.0" encoding="UTF-8"?> <!-- Prologo XML -->
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<xsl:variable name="percorso">img/</xsl:variable>
<table cellpadding="1" cellspacing="2" width="390" align="center" bgcolor="#000000">
<tr>
<xsl:for-each select="listacd/artista/albums/album">
<td colspan="2" width="130" bgcolor="#fff3ff" align="center">
<img src="{$percorso}{img}"/><br/>
<b><xsl:value-of select="../../@nome"/></b><br/>
<xsl:value-of select="titolo"/>
</td>
<xsl:if test="position() mod 3 = 0">
<!-- Blocco CDATA assieme a codice Javascript -->
<script>
<![CDATA[document.write("</tr><tr>")]]>
</script>
<!-- FINE Blocco CDATA assieme a codice Javascript -->
</xsl:if>
</xsl:for-each>
</tr>
</table>
</html>
</xsl:template>
</xsl:stylesheet>
Risultato in Output della trasformazione
(esempio 20).
<html>
<table cellpadding="1" cellspacing="2" width="390" align="center" bgcolor="#000000">
<tr>
<td colspan="2" width="130" bgcolor="#fff3ff" align="center">
<img src="img/magic_SJ.gif"><br><b>Stanley Jordan</b><br>Magic Touch
</td>
<td colspan="2" width="130" bgcolor="#fff3ff" align="center">
<img src="img/stolen_SJ.gif"><br><b>Stanley Jordan</b><br>Stolen Moments
</td>
<td colspan="2" width="130" bgcolor="#fff3ff" align="center">
<img src="img/pink_ND.gif"><br><b>Nick Drake</b><br>Pink Moon</td>
<script>document.write("</tr><tr>");</script>
<td colspan="2" width="130" bgcolor="#fff3ff" align="center">
<img src="img/bryter_ND.gif"><br><b>Nick Drake</b><br>Bryter Layter
</td>
<td colspan="2" width="130" bgcolor="#fff3ff" align="center">
<img src="img/five_ND.gif"><br><b>Nick Drake</b><br>Five leaves left
</td>
<td colspan="2" width="130" bgcolor="#fff3ff" align="center">
<img src="img/grace_JB.gif"><br><b>Jeff Buckley</b><br>Grace
</td>
<script>document.write("</tr><tr>");</script>
<td colspan="2" width="130" bgcolor="#fff3ff" align="center">
<img src="img/mistery_JB.gif"><br><b>Jeff Buckley</b><br>Mistery white boy
</td>
<td colspan="2" width="130" bgcolor="#fff3ff" align="center">
<img src="img/surfing_JS.gif"><br><b>Joe Satriani</b><br>Surfing with the alien
</td>
<td colspan="2" width="130" bgcolor="#fff3ff" align="center">
<img src="img/not_JS.gif"><br><b>Joe Satriani</b><br>Not of this earth
</td>
<script>document.write("</tr><tr>");</script></tr>
</table>
</html>
Clicca
qui per vedere il risultato della trasformazione sul browser.
Clicca qui per vedere l'XSLT sul browser.
Da notare che il codice che viene portato in output è il
seguente
<script>document.write("</tr><tr>");</script>
ovvero
un'istruzione JavaScript che in fase di elaborazione viene interpretata dal
Browser e genera nel documento HTML i due tag </tr><tr> i quali permette appunto
di ottenere il risultato grafico che ci eravamo prefissati.