In questo tutorial, avventureremo nel mondo di XSL (T) e spiegheremo di cosa si tratta, come estrarre dati da un documento XML, iterazione di base e login di base e istruzioni condizionali.

Dettagli dell'esercitazione

• Programma: Qualsiasi editor di testo
• Versione: 1 di 1
• Difficoltà: medio
• Tempo di completamento stimato: 25min

Panoramica

A volte, hai enormi set di dati che vengono analizzati come XML che devono essere formattati in modo che qualcuno che non sa leggere XML possa leggere i dati. In questo tutorial, ti mostrerò come si fa con la potenza di XSL (T).

Cos'è XSL (T)?

XSL (T) è l'abbreviazione di Extendable Stylesheet Language (Transformation). Anche se si tratta di un "foglio di stile", ha un obiettivo diverso rispetto al CSS (Cascading Stylesheets). XSL (T) non viene utilizzato per effetti visivi, ma invece per estrarre dati (o trasformazioni) da XML e utilizzare la combinazione di HTML e CSS per formattarli. XSL (T) ha anche le proprietà dinamiche nel senso che è possibile eseguire iterazioni e istruzioni condizionali su un file XML statico.

XSL (T) non viene utilizzato per effetti visivi, ma invece per estrarre dati (o trasformazioni) da XML e utilizzare la combinazione di HTML e CSS per formattarli.

Perché usare XSL (T)?

XSL (T) può essere usato per organizzare grandi alberi di XML in modo che chiunque possa leggerlo. Ad esempio, un Google Search Appliance offre query come XML. Affinché l'XML possa essere letto da un utente generale, è necessario che avvenga una trasformazione. È qui che XSL (T) svolge un ruolo vitale. Potrebbe anche essere usato per lo stile di una pagina di feed RSS dal momento che la fonte è tutto in XML. È anche usato come il principale linguaggio di template per Autonomy's Teamsite (EMS) e CMS open source come Symphony.

XSL (T) riduce anche il carico del server. Poiché XSLT può eseguire la trasformazione sul lato client, il tuo server deve fare meno lavoro, dal momento che non stai interrogando i dati nel database. È possibile configurare le funzioni JavaScript e lato server per indicare al documento di utilizzare un modello XSL (T) specifico oppure è possibile creare il modello all'interno del file XML effettivo. Per questo tutorial, stiamo semplicemente andando a cercare il modello XSL (T) nel file XML.

Iniziare

Il nostro obiettivo è quello di creare un elenco di vacanze che vogliamo andare avanti, ed eseguire una logica sui dati per farci sapere quali destinazioni sono fuori dalla nostra fascia di prezzo. In questo caso il nostro budget è $ 999 per le nostre vacanze e stiamo per indicare quando il prezzo è superiore al nostro budget. Li ordineremo anche in ordine decrescente in modo da poter vedere subito quali viaggi sono fuori dal nostro budget.

Prima di tutto avrai bisogno di un file XML. Vai avanti e apri il tuo editor di testo preferito e crea un nuovo file e chiamalo trips.xml. Ho fornito un file XML di esempio che è possibile scaricare e utilizzare oppure è possibile copiare e incollare il codice riportato di seguito.

     Stati Uniti d'America Florida Orlando 1000   Stati Uniti d'America Michigan Detroit 600   Spagna Madrid 5000   Stati Uniti d'America California San Jose 800  

La prima e unica cosa che dovremo fare in questo documento è aggiungere un riferimento a dove vive il nostro file .xsl. In questo caso creeremo un foglio di stile chiamato trips.xsl.

  ... 

Iniziare il foglio di stile estendibile

Inizia creando un nuovo documento nel tuo editor di testo preferito e salvandolo come trips.xsl. Successivamente possiamo iniziare il vero foglio di stile. Dovrai prima specificare la versione XML e la codifica per il modello. Se hai familiarità con XML, è la stessa versione e sintassi di codifica

 ... 

Da qui possiamo immergerci nella scrittura di alcuni XSL. Per avviare il foglio di stile dobbiamo prima far sapere al browser che stiamo usando un foglio di stile XSL e quale versione. Questo elemento deve avvolgere tutto il tuo mark up e dovrebbe essere chiuso alla fine del documento altrimenti il ​​documento non si trasformerà.

    ... 

Se vogliamo convalidare l'XHTML all'interno del nostro documento rispetto agli standard W3C, allora dovremo includere un doctype da usare su trasformazione e rendering. Qui useremo il DTD XHTML Strict. Lo facciamo configurando un elemento di chiusura automatica chiamato xsl: uscita. Con in questo elemento chiameremo il doctype.

     ... 

Successivamente, inizieremo il modello attuale. Tra il template open e close il tag è dove tutto l'XHTML andrà insieme ad altri elementi XSL (T). È importante notare che hai impostato a incontro per il modello. Questo attributo in pratica dice andare alla radice del documento XML.

Trasformazione

La prima cosa che dobbiamo fare ora è avviare un layout XHTML di base e annidarlo all'interno del nostro xsl: template tag. Ho anche collegato un file css al documento per dare un po 'di stile al documento, ma impostarlo non rientra nell'ambito di questo tutorial.

...          ... 

Quindi il nostro primo obiettivo è quello di prendere l'elemento titolo dal documento XML e inserirli nel titolo del documento html.

Prima di iniziare con XSL, è importante notare dove esiste il "titolo" dell'albero XML. In questo caso il titolo è un discendente diretto dell'elemento principale della vacanza. Ora possiamo iniziare a scrivere il nostro XSL. Per poter dire al browser dove sta andando a vivere un dato corrispondente utilizziamo l'elemento xsl: value-of.

Siamo nella radice del documento già attraverso il tag xsl: template, ma dobbiamo scavare più a fondo nell'albero XML per selezionare i dati che vogliamo. In questo caso cercheremo nel documento un elemento radice della vacanza con figlio del titolo.

...    ... 

Quando apriamo il nostro file XML (trips.xml) nel browser, il nostro risultato è l'elemento del titolo visualizzato nella barra del titolo del browser, dove ci aspetteremmo che si trovasse in un normale sito basato su XHMTL. Si noti inoltre che non vediamo più la struttura ad albero XML, tuttavia quando visualizziamo l'origine vediamo che la fonte del documento è XML.

Possiamo fare un ulteriore passo avanti per dimostrare che la trasformazione da XML a XHTML si è verificata nel browser utilizzando uno strumento come FireBug o Safari Inspector.

Per aggiungere qualche organizzazione visuale, aggiungerò del markup in modo che i nostri dati siano un po 'più facili da guardare.

...   
 
 
 
  
 
 
... 

Come puoi vedere sopra, ho riutilizzato l'elemento titolo ancora una volta, ma questa volta nel corpo del documento. Questo può essere estremamente utile per il riutilizzo e il riutilizzo dei contenuti.

Successivamente, vorremmo trasformare i nostri "viaggi" in XHTML. Il buon senso dice che dovremmo essere in grado di chiamarne un altro xsl: value-of ma questa volta chiama il nodo figlio di "viaggio". Questo funzionerebbe se avessimo un solo viaggio. Tuttavia, dato che abbiamo più viaggi, dobbiamo fare un po 'di iterazione o scorrere il documento XML.

Iteration aka Looping

Come in tutti i linguaggi di programmazione, esistono istruzioni di iterazione che eseguono il looping di un set di dati specifico ed eseguono alcuni metodi su di esse. XLS (T) ha funzionalità simili nell'estrazione di dati da un documento XML.

... ... ... 

Il frammento sopra fa praticamente quello che ti aspetteresti che faccia. Sta dicendo xsl: for-each elemento seleziona tutto ciò che esiste sul percorso vacanze / suggerimento.

Tuttavia, per estrarre effettivamente i dati abbiamo bisogno di fare un po 'più di lavoro. Dal momento che il nostro budget per i viaggi è $ 999, dovremo preformare qualche logica sui dati. Ma prima di farlo, possiamo ordinare i dati in base al prezzo in ordine decrescente.

Ordinamento

...  ... ... 

Come puoi vedere sopra, ordinare i dati da un nodo specifico è abbastanza facile. Dal momento che il xsl: for-each l'istruzione seleziona il nodo di viaggio e imposta l'ambito che possiamo semplicemente dire xsl: sort per selezionare il nodo del prezzo e cercare il tipo di dati numero quindi imposta il ordine a discendente. È importante notare che il xsl: sort la dichiarazione è auto-chiusura ().

l'anteprima

Bene, a questo punto potresti chiederti come appare questa scheda di vacanza. Per vedere in anteprima ciò che abbiamo aperto trips.xml nel tuo browser. Assicurati di non visualizzare il .xsl file.

Probabilmente ti stai grattando la testa chiedendoti perché non abbiamo alcun risultato. Questo perché non abbiamo originato i dati da guardare. Il xsl: sort la dichiarazione non è fonte di dati è semplicemente un filtro per quando i dati sono presenti.

Scelta e test

Dal momento che vogliamo dare qualche indicazione per i prezzi che sono fuori dal nostro budget, abbiamo bisogno di Test contro alcuni parametri. Lo facciamo con la combinazione di xsl: choose, xsl: when test = " e xsl: in caso contrario. Se hai esperienza di programmazione dovresti riconoscere questo concetto di controllo del flusso dei condizionali. Se non è ancora abbastanza semplice da seguire.

     BLAH   BLIP   

Iniziamo il flusso logico con xsl: choose, questo sta per inizializzare la dichiarazione simile a Se in lingue come PHP. Subito dopo abbiamo il nostro primo test. Stiamo dicendo a XSL (T) quando il prezzo è maggiore di (>) 999 di BLAH, altrimenti BLIP.

Quindi dobbiamo sostituire BLAH e BLIP con i ganci nel nostro XML.

...   
$ ,    
  ...  ... 

Nel frammento di cui sopra abbiamo impostato la nostra voce di elenco con una classe di "troppo-molto". Questa classe colorerà i viaggi fuori dal nostro budget in rosso. Allora stiamo usando xsl: value-of per prendere il prezzo, città, stato, paese e data. È importante notare che la data può essere accessibile da ciascun nodo "trip" utilizzando il simbolo @. Questo stesso tipo di affermazioni sono state viste prima quando hai ottenuto il titolo della nostra lista. Abbiamo anche aggiunto il simbolo del dollaro ($) e la virgola () per formattare correttamente i dati.

   
$ ,    
   
$ ,    
  

Dobbiamo poi dichiarare cosa vogliamo accadere agli altri articoli se rispettano il nostro limite inferiore a $ 999. In questo caso, li stamperemo solo in una lista senza una classe speciale ad essi associata. Stiamo esaminando e selezionando tutti gli stessi nodi che abbiamo fatto per il troppo nodi (prezzo, città, stato, paese e data).

Mettendola tutta Togeather

           
 
 
 
     
$ ,    
   
$ ,    
    
 
 
    

A questo punto dovremmo effettivamente avere qualcosa di utile da guardare nel browser.

Apri trips.xml come prima. Se tutto è andato bene dovresti avere qualcosa di simile a quanto mostrato sopra. XSL (T) è un linguaggio molto potente che consente di modificare drasticamente la presentazione dei dati XML. Di seguito sono riportate alcune risorse per ulteriori informazioni su XSL (T).

• Documentazione W3C
• W3C Schools XSL
• XSLT Wikipedia
• XSLT Seconda edizione di Doug Tidwell

Scrivi un tutorial Plus

Sapevi che puoi guadagnare fino a $ 600 per scrivere un tutorial PLUS e / o screencast per noi? Stiamo cercando tutorial dettagliati e ben scritti su HTML, CSS, PHP e JavaScript. Se sei dell'abilità, contatta Jeffrey a [email protected].

Si prega di notare che il risarcimento effettivo dipenderà dalla qualità del tutorial finale e screencast.

• Seguici su Twitter o iscriviti al feed Nettuts + RSS per i migliori tutorial di sviluppo web sul web.