È arrivato il momento di creare anche gli attributi con
l'XSLT. Fino a questo momento non abbiamo ancora preso in considerazione il caso
in cui l'XML contenga degli URL relativi a siti web o a delle immagini che
dobbiamo visualizzare nell'output HTML.
Sappiamo che in HTML i TAG <img> e <a> , che ci permettono
rispettivamente di caricare immagini e di creare collegamenti ipertestuali,
hanno degli attributi. In particolare <img> ha un attributo src che
indica l'URL dell'immagine da caricare mentre l'elemento <a> ha un
attributo href che contiene l'URL del collegamento ipertestuale.
Nell'XSLT utilizziamo l'elemento <xsl:attribute>
per creare un attributo e assegnargli un valore. Questo elemento infatti
possiede un attributo name che indica il nome dell'attributo che dev'essere
creato.
Questo piccolo esempio ci chiarirà le idee:
<a>
<xsl:attribute name="href">
http://www.html.it
</xsl:attribute>
Parola linkata
</a>
il codice XSLT che abbiamo appena scritto crea
l'attributo href per l'elemento <a> e gli assegna il valore http://www.html.it.
Questo darà luogo al seguente codice HTML:
<a href="http://www.html.it">Parola
linkata</a>
Vediamo ora un esempio di codice un po' più complesso in
modo da vedere in modo pratico come creare un output HTML decisamente più
complesso.
Abbiamo modificato il documento XML inserendo per ogni artista un URL del
proprio sito web e per ogni album un collegamento ad una immagine.
Esempio 15.
Documento XML mostrato parzialmente per vedere le piccole modifiche ( listacd15.xml
) :
.
.
<artista nome="Stanley Jordan">
<url>http://www.stanleyjordan.com</url>
<albums>
<album>
<!-- Cd acquistato a Roma nell'agosto del 2000 -->
<titolo>Magic Touch</titolo>
<anno>1985</anno>
<etichetta>Blue Note</etichetta>
<durata>59</durata>
<img>magic_SJ.gif</img>
</album>
<album>
<!-- Cd avuto in regalo per il compleanno del 2001-->
<titolo>Stolen Moments</titolo>
<anno>1991</anno>
<etichetta>Blue Note</etichetta>
<durata>72</durata>
<img>stolen_SJ.gif</img>
</album>
</albums>
</artista>
.
.
.
Codice XSLT utilizzato ( listacd_es15.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>
<table cellpadding="1"
cellspacing="2" width="450" align="center"
bgcolor="#000000">
<xsl:for-each select="listacd/artista">
<tr>
<td colspan="2" width="450" bgcolor="#ff8855">
<b>Artista: </b>
<xsl:value-of select="@nome"/>
<br/>
<b>URL sito web: </b>
<a target="_blank">
<xsl:attribute name="href">
<xsl:value-of select="url"/>
</xsl:attribute>
<xsl:value-of select="url"/>
</a>
</td>
</tr>
<xsl:for-each
select="albums/album">
<xsl:if
test="position() mod 2 = 0">
<tr
bgcolor="#f8f8f8">
<td width="150" align="center">
<img>
<xsl:attribute name="src">
<xsl:text>img/</xsl:text>
<xsl:value-of select="img"/>
</xsl:attribute>
</img>
</td>
<td width="300">
<b>Titolo: </b>
<xsl:value-of select="titolo"/>
<br/>
<b>Anno: </b>
<xsl:value-of select="anno"/>
<br/>
<b>Etichetta: </b>
<xsl:value-of select="etichetta"/>
<br/>
</td>
</tr>
</xsl:if>
<xsl:if
test="position() mod 2 != 0">
<tr
bgcolor="#CCFFFF">
<td width="150" align="center">
<img>
<xsl:attribute name="src">
<xsl:text>img/</xsl:text>
<xsl:value-of select="img"/>
</xsl:attribute>
</img>
</td>
<td width="300">
<b>Titolo: </b>
<xsl:value-of select="titolo"/>
<br/>
<b>Anno: </b>
<xsl:value-of select="anno"/>
<br/>
<b>Etichetta: </b>
<xsl:value-of select="etichetta"/>
<br/>
</td>
</tr>
</xsl:if>
</xsl:for-each>
<tr>
<td>
<br/>
</td>
</tr>
</xsl:for-each>
</table>
</html>
</xsl:template>
</xsl:stylesheet>
Risultato in Output della trasformazione
(esempio 15).
<html>
<table cellpadding="1" cellspacing="2" width="450" align="center" bgcolor="#000000">
<tr>
<td colspan="2" width="450" bgcolor="#ff8855"><b>Artista: </b>Stanley Jordan<br><b>URL sito web: </b><a target="_blank" href="http://www.stanleyjordan.com"> http://www.stanleyjordan.com</a></td>
</tr>
<tr bgcolor="#CCFFFF">
<td width="150" align="center"><img src="img/magic_SJ.gif"></td>
<td width="300"><b>Titolo: </b>Magic Touch<br><b>Anno: </b>1985<br><b>Etichetta: </b>Blue Note<br></td>
</tr>
<tr bgcolor="#f8f8f8">
<td width="150" align="center"><img src="img/stolen_SJ.gif"></td>
<td width="300"><b>Titolo: </b>Stolen Moments<br><b>Anno: </b>1991<br><b>Etichetta: </b>Blue Note<br></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td colspan="2" width="450" bgcolor="#ff8855"><b>Artista: </b>Nick Drake<br><b>URL sito web: </b><a target="_blank" href="http://www.nickdrake.com">http://www.nickdrake.com</a></td>
</tr>
<tr bgcolor="#CCFFFF">
<td width="150" align="center"><img src="img/pink_ND.gif"></td>
<td width="300"><b>Titolo: </b>Pink Moon<br><b>Anno: </b>1972<br><b>Etichetta: </b>Island<br></td>
</tr>
<tr bgcolor="#f8f8f8">
<td width="150" align="center"><img src="img/bryter_ND.gif"></td>
<td width="300"><b>Titolo: </b>Bryter Layter<br><b>Anno: </b>1970<br><b>Etichetta: </b>Island<br></td>
</tr>
<tr bgcolor="#CCFFFF">
<td width="150" align="center"><img src="img/five_ND.gif"></td>
<td width="300"><b>Titolo: </b>Five leaves left<br><b>Anno: </b>1970<br><b>Etichetta: </b>Island<br></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td colspan="2" width="450" bgcolor="#ff8855"><b>Artista: </b>Jeff Buckley<br><b>URL sito web: </b><a target="_blank" href="http://www.jeffbuckley.com">http://www.jeffbuckley.com</a></td>
</tr>
<tr bgcolor="#CCFFFF">
<td width="150" align="center"><img src="img/grace_JB.gif"></td>
<td width="300"><b>Titolo: </b>Grace<br><b>Anno: </b>1994<br><b>Etichetta: </b>Columbia<br></td>
</tr>
<tr bgcolor="#f8f8f8">
<td width="150" align="center"><img src="img/mistery_JB.gif"></td>
<td width="300"><b>Titolo: </b>Mistery white boy<br><b>Anno: </b>2000<br><b>Etichetta: </b>Columbia<br></td>
</tr>
<tr>
<td><br></td>
</tr>
<tr>
<td colspan="2" width="450" bgcolor="#ff8855"><b>Artista: </b>Joe Satriani<br><b>URL sito web: </b><a target="_blank" href="http://www.satriani.com">http://www.satriani.com</a></td>
</tr>
<tr bgcolor="#CCFFFF">
<td width="150" align="center"><img src="img/surfing_JS.gif"></td>
<td width="300"><b>Titolo: </b>Surfing with the alien<br><b>Anno: </b>1987<br><b>Etichetta: </b>Epic<br></td>
</tr>
<tr bgcolor="#f8f8f8">
<td width="150" align="center"><img src="img/not_JS.gif"></td>
<td width="300"><b>Titolo: </b>Not of this earth<br><b>Anno: </b>1988<br><b>Etichetta: </b>Relativity<br></td>
</tr>
<tr>
<td><br></td>
</tr>
</table>
</html>
Clicca
qui per vedere il risultato della trasformazione sul browser.
Clicca qui per vedere l'XSLT sul browser.
Come possiamo notare dall'esempio appena fatto abbiamo
utilizzato l'elemento <xsl:attribute> per creare attributi degli elementi
<img> e <a>. Naturalmente possiamo creare più di un attributo per
uno stesso elemento.
Notiamo che nel caso dell'immagine ad esempio tutti gli elementi che sono
inclusi tra
<xsl:attribute name="src"> e </xsl:attribute> vengono
aggiunti al valore dell'attributo src. Per poter specificare il percorso
dell'immagine abbiamo quindi aggiunto
<xsl:text>img/</xsl:text>. In questo modo l'url
completo di ogni immagine sarà img/immagine.gif. Ovviamente l'url potrebbe
anche essere specificato direttamente nell'XML o potrebbe essere un URL assoluto
anzichè relativo. Se però pensiamo che i dati dell'XML vengono presi da un
data base possiamo intuire che non è molto utile inserire nel nome
dell'immagine anche il suo percorso perchè se dovesse cambiare il percorso
dovremmo intervenire su tutti i dati del data base.
Specificare invece il percorso nel documento XSLT è invece una soluzione
ottimale anche se nel nostro caso modificare in seguito il percorso delle
immagini comporterebbe la modifica del testo in ogni parte del documento e se il
documento diventa più complesso la modifica diventa alquanto laboriosa.
In
questi casi risulta molto utile utilizzare le variabili, che vedremo nel
capitolo 9.
Da notare inoltre l'utilizzo dell'espressione <xsl:if
test="position() mod 2 = 0"> molto
utilizzata in XSLT permette di testare se abbiamo un elemento in posizione pari
o dispari e differenziare l'output come nel nostro caso, alternando i colori di
sfondo delle righe della tabella.
Di seguito quando introdurremo l'utilizzo delle varibili, avremmo modo di
rivedere questo esempio evitando di duplicare il codice come abbiamo fatto in
questo contesto, ma sfruttando proprio la versatilità e la flessibilità delle
variabili creando codice più leggibile e molto più breve.
