Costruire un sito con xml #2
Nel precedente articolo spiegavo come creare la pagina vera e propria, mentre ora spiegherò come inserire il file xsl che è responsabile della grafica e della “programmazione xml” se così vogliamo definirla. Per esempio, il foglio xsl si occuperà della generazione dei tag xhtml necessari ai vari tag semantici di xml.
Senza indugi quindi procediamo con lo sviluppo:
Innanzitutto bisogna includere il file xsl nel foglio xml, per cui, riapriamo il foglio creato nel precedente tutorial e sotto la prima riga andiamo a mettere:
Questo includerà il file xsl. Come potete vedere viene trattato come un foglio di presentazione.
Ora possiamo pure chiudere il file xml, ed aprire un nuovo file chiamato style.xsl, in cui inserire innanzitutto queste intestazioni:
<?xml version=“1.0”?>
<xsl:stylesheet version=“1.0” xmlns:xsl=“http://www.w3.org/1999/XSL/Transform” xmlns=“http://www.w3.org/1999/xhtml”>
<xsl:output method=“html” indent=“yes”
doctype-system=“http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”
doctype-public=”-//W3C//DTD XHTML 1.0 Strict//EN” />
Come si può notare è molto simile ad un doctype per l’html, ed infatti svolge la stessa identica funzione.
Proseguendo oltre:
Questo è molto importante perchè racchiude tutto il template html, e infatti viene chiuso dopo </html>
Ora possiamo partire con l’htm vero e proprio. Ho usato per sveltezza e comodità un layout della serie Gala di html.it
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<title><xsl:value-of select=“page/header/title” /></title>
<meta http-equiv=“content-type” content=“text/html; charset=iso-8859-1” />
</head>
<body>
<div id=“container”>
<div id=“header”>
<h1><xsl:value-of select=“page/header/title” /></h1>
</div>
Come si può notare in questa prima parte ci sono degli elementi che non sono propriamente html. Sono richiami xml, e come tali, cercano una stringa nel file xml e la inseriscono. Nel caso di page/header/title cercherà la stringa di testo dentro <page> <header> <title> e la inserirà.
<div id=“wrapper”>
<div id=“content”>
<div id=“news”>
<xsl:for-each select=“page/content/post”>
<h2><xsl:value-of select=“date” /></h2>
<p><xsl:apply-templates select=“text”/></p>
</xsl:for-each>
</div>
</div>
</div>
Questa è la funzione vera e propria. Infatti lui cercherà gli elementi dati dentro il file xml e li ripeterà fino a che non sono finiti. Per essere molto chiari, in un blog questa parte l’iterazione col database che estrapola i dati contenuti e li mostra rendendoli aggraziati con html.
<div id=“footer”>
<p>Copyright 2008.</p>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Quest’ultimo blocco chiude il tutto.
Per ora questo è tutto, nell’ultima parte di questa serie spiegherò come inserire il foglio di stile e alcune considerazioni tipo i motori di ricerca.
Sergius
05 Jul 2008, alle 6:57
Ciau Marco sto studiando x un esame ed essendo alle prime armi con l’xml e l’xlst stavo sbirciando il tuo sito
Non ho capito da questa parte in poi : <xsl:template match=”/”>
questa funzione a cosa serve?? e il resto?? grazie!!!
Marco
05 Jul 2008, alle 11:18
Ciao Sergius, <xsl:template> va messo prima dell’html come spiegavo, diciamo che lo racchiude, e serve per definire le regole applicate dentro l’attributo match (/ per nodo figlio di altro nodo, * per nodo nipote di nodo).
Per gli altri passaggi ti invito a scaricare il pacchetto del sito completo, così puoi capire meglio, e oltretutto leggere questa guida, molto ben fatta dove ti spiega tutto nel dettaglio