În acest tutorial, vom aventura în lumea XSL (T) și vom explica ceea ce este, cum să tragem datele dintr-un document XML, o iterație de bază și declarațiile de bază de conectare și condiționale.

Detalii tutoriale

• Program: Orice editor de text
• Versiune: 1 din 1
• Dificultate: Mediu
• Durata estimată de finalizare: 25min

Prezentare generală

Uneori, aveți seturi de date uriașe care sunt analizate ca XML care trebuie formatate astfel încât cineva care nu știe să citească XML poate citi datele. În acest tutorial, vă voi arăta cum se face cu puterea XSL (T).

Ce este XSL (T)?

XSL (T) este scurt pentru Extensible Style Sheet Language (Transformation). Chiar dacă este o "foaie de stil", are un scop diferit de CSS (Cascading Stylesheets). XSL (T) nu este utilizat pentru efect vizual, ci în schimb extrage date (sau transformă) din XML și utilizează combinația de HTML și CSS pentru a le formata. XSL (T) are de asemenea proprietăți dinamice în sensul că puteți face iterații și afirmații condiționale pe un fișier XML static.

XSL (T) nu este utilizat pentru efect vizual, ci în schimb extrage date (sau transformă) din XML și utilizează combinația de HTML și CSS pentru a le formata.

De ce să utilizați XSL (T)?

XSL (T) poate fi folosit pentru a organiza arbori mari de XML, astfel încât oricine să-l poată citi. De exemplu, un aparat de căutare Google servește ca interogări XML. Pentru ca XML să fie citit de un utilizator general, trebuie să apară o transformare. Acesta este locul în care XSL (T) joacă un rol vital. Ar putea fi, de asemenea, folosit pentru a modela o pagină de feed-uri RSS, deoarece sursa este tot în XML. Este, de asemenea, folosit ca principală limbă templantă pentru echipa de lucru Autonomy (EMS) și astfel de open source CMS-uri ca Symphony.

XSL (T) reduce, de asemenea, sarcina serverului. Deoarece XSLT poate face transformarea pe partea clientului, serverul dvs. trebuie să facă mai puțin de lucru, deoarece nu interogați datele din baza de date. Funcțiile JavaScript și funcțiile de pe server pot fi configurate pentru a spune documentului să utilizeze un șablon XSL (T) specific sau să poată sursa șablonul în cadrul fișierului XML real. Pentru acest tutorial, vom merge pur și simplu la sursa XSL (T) șablon în fișierul XML.

Noțiuni de bază

Obiectivul nostru este de a crea o listă a vacanțelor pe care dorim să continuăm și de a efectua o logică asupra datelor pentru a ne comunica ce destinații sunt din gama noastră de prețuri. În acest caz, bugetul nostru este de 999 USD pentru vacanța noastră și vom indica când prețul este peste bugetul nostru. De asemenea, le vom ordona în ordine descrescătoare, astfel încât să vedem imediat ce călătorii sunt din bugetul nostru.

În primul rând veți avea nevoie de un fișier XML. Continuați și deschideți editorul de text preferat și creați un fișier nou și numiți trips.xml. Am furnizat un exemplu de fișier XML pe care îl puteți descărca și utiliza sau puteți copia și lipi în codul de mai jos.

     Statele Unite ale Americii Florida Orlando 1000   Statele Unite ale Americii Michigan Detroit 600   Spania Madrid 5000   Statele Unite ale Americii California San Jose 800  

Primul și singurul lucru pe care trebuie să-l facem pentru acest document este de a adăuga o referință la locul în care trăiește fișierul .xsl. În acest caz, vom crea o foaie de stil numită trips.xsl.

  ... 

Început Foaia de stil extinsă

Începeți prin crearea unui nou document în editorul dvs. de text preferat și salvând-l ca trips.xsl. Apoi, putem să lansăm foaia de stiluri reale. Mai întâi trebuie să specificați versiunea XML și codarea șablonului. Dacă sunteți familiarizat cu XML, este aceeași versiune și sintaxă de codificare

 ... 

De aici se pot scufunda în scrierea unor XSL-uri. Pentru a porni foaia de stil, trebuie să lăsăm mai întâi browserul să știe că folosim o foaie de stil XSL și ce versiune. Acest element trebuie să înfășoare toată marcajul dvs. și trebuie închis la sfârșitul documentului, altfel documentul nu se va transforma.

    ... 

Dacă vom dori să validăm XHTML în documentul nostru împotriva standardelor W3C, atunci va trebui să includem un doctype care să se folosească la transformare și randare. Aici vom folosi XHTML Strict DTD. Facem acest lucru prin crearea unui element de auto-închidere numit xsl: ieșire. Cu acest element vom numi doctype.

     ... 

Apoi, vom începe șablonul real. Între tag-ul șablon deschis și închis se află unde toți XHTML-urile vor merge împreună cu orice alte elemente XSL (T). Este important să rețineți că ați setat o Meci pentru șablon. Acest atribut spune că merge la rădăcina documentului XML.

Transformare

Primul lucru pe care trebuie să-l facem acum este să începem un aspect XHTML de bază și să cuibăm în interiorul nostru xsl: template Etichete. De asemenea, am conectat un fișier css la document pentru a da documentului un anumit stil, dar stabilirea faptului că este dincolo de scopul acestui tutorial.

...          ... 

Astfel, primul nostru obiectiv este să preluăm elementul de titlu din documentul XML și să plasăm aceste date în titlul documentului html.

Înainte de a începe cu XSL, este important să notați unde există în interiorul arborelui XML "title". În acest caz, titlul este un descendent direct al elementului rădăcină al vacanței. Acum putem începe să scriem XSL-ul nostru. Pentru a putea spune browser-ului unde va trăi o bucată de date potrivită, vom folosi elementul xsl: value-of.

Suntem în rădăcina documentului deja prin eticheta xsl: șablon, dar trebuie să săpăm mai adânc în arborele XML pentru a selecta datele pe care le dorim. În acest caz, vom examina documentul pentru un element rădăcinal de vacanță cu copil de titlu.

...    ... 

Când mergem să deschidem fișierul XML (trips.xml) în browser, rezultatul nostru este elementul de titlu afișat în bara de titlu a browserului, unde ne-am aștepta ca acesta să se afle într-un site bazat pe XHMTL normal. De asemenea, observați că nu mai vedem structura arborelui XML, însă atunci când vedem sursa vedem că sursa documentului este XML.

Putem face un pas mai departe pentru a dovedi că transformarea de la XML la XHTML a apărut în browser utilizând un instrument precum FireBug sau Safari Inspector.

Pentru a adăuga o organizare vizuală, voi adăuga un marcaj, astfel încât datele noastre să fie puțin mai ușor de văzut.

...   
 
 
 
  
 
 
... 

După cum puteți vedea mai sus, am reușit să folosesc din nou elementul de titlu, dar de data aceasta în corpul documentului. Acest lucru poate fi extrem de util în reutilizarea și repopularea conținutului.

Apoi, vom dori să transformăm "călătoriile" noastre în XHTML. Bunul simț spune că ar trebui să putem să sunăm altul xsl: valoare de dar de data aceasta apelând la nodul copilului de "călătorie". Acest lucru ar funcționa dacă am avea doar o călătorie. Cu toate acestea, deoarece avem mai multe călătorii, trebuie să facem iterații sau looping prin documentul XML.

Iteration aka Looping

Ca și în toate limbile de programare, există declarații de iterație care fac buclă printr-un set specific de date și efectuează anumite metode pe ele. XLS (T) are o funcționalitate similară în extragerea datelor dintr-un document XML.

... ... ... 

Fragmentul de mai sus nu face decât ceea ce v-ați aștepta să facă. Spune xsl: pentru fiecare- element selectați tot ce există pe cale concediu / sfat.

Cu toate acestea, pentru a extrage efectiv datele, trebuie să facem puțin mai multă muncă. Din moment ce bugetul nostru pentru călătorii este de 999 de dolari, va trebui să preformăm o anumită logică asupra datelor. Dar, înainte de a face asta, permiteți sortarea datelor în funcție de preț în ordine descrescătoare.

Triere

...  ... ... 

După cum puteți vedea mai sus, sortarea datelor de către un anumit nod este destul de ușoară. Din moment ce xsl: pentru fiecare- declarația selectează nodul de călătorie și stabilește domeniul de aplicare pe care îl putem spune pur și simplu xsl: sortare pentru a selecta nodul de preț și pentru a căuta Tip de date număr apoi setați Ordin la Descendentă. Este important să rețineți că xsl: sortare declarația se închide automat ().

Previzualizarea

Ei bine, în acest moment s-ar putea să te întrebi cum arată această listă de concediu. Pentru a previzualiza ceea ce am deschis trips.xml în browserul dvs. Asigurați-vă că nu vedeți .xsl fişier.

Probabil vă zgâriați capul întrebându-vă de ce nu avem rezultate. Acest lucru se datorează faptului că nu am obținut la ce date să privim. xsl: sortare declarația nu furnizează date, este pur și simplu un filtru pentru momentul în care sunt prezente datele.

Alegerea și testarea

Deoarece vrem să dăm câteva indicii pentru prețurile care sunt în afara bugetului nostru, trebuie să le facem Test împotriva anumitor parametri. Facem asta cu combinația dintre xsl: alege, xsl: când test = " și xsl: în caz contrar. Dacă aveți experiență de programare, trebuie să recunoașteți acest concept al controlului fluxului condiționalilor. Dacă nu este încă destul de simplu de urmat.

     BLAH   blip   

Începem fluxul logic cu xsl: alege, aceasta va iniția declarația similară cu dacă în limbi precum PHP. Imediat după aceea avem primul nostru Test. Îi spunem XSL (T) cand prețul este mai mare decât (>) 999 do BLAH, în caz contrar BLIP.

În continuare trebuie să înlocuim BLAH și BLIP cu cârlige în XML.

...   
$ ,    
  ...  ... 

În fragmentul de mai sus, configurați elementul de listă cu o clasă de "prea mult". Această clasă va colora călătoriile din bugetul nostru în roșu. Apoi folosim xsl: valoare de pentru a apuca prețul, orașul, statul, țara și data. Este important să rețineți că data poate fi accesată de la fiecare nod de "călătorie" utilizând simbolul @. Același tip de declarații au fost văzute mai devreme când ați obținut titlul pentru lista noastră. De asemenea, am adăugat simbolul dolar ($) și virgulă () pentru a formata corect datele.

   
$ ,    
   
$ ,    
  

Mai departe trebuie să precizăm ce vrem să se întâmple cu celelalte elemente dacă îndeplinesc constrângerile noastre de sub 999 dolari. În acest caz, vom încerca să le tipărim într-un articol de listă fără nici o clasă specială atașată acestora. Trecem prin și selectând toate acele noduri ca și noi prea mult noduri (preț, oraș, stat, țară și dată).

Punându-l pe Togeather

           
 
 
 
     
$ ,    
   
$ ,    
    
 
 
    

În acest moment ar trebui să avem ceva util pentru a vedea în browser.

Deschideți trips.xml ca înainte. Dacă totul a mers bine ar trebui să aveți ceva similar cu cel prezentat mai sus. XSL (T) este un limbaj foarte puternic care vă permite să schimbați drastic modul în care sunt prezentate datele XML. Mai jos sunt câteva resurse pentru a afla mai multe despre XSL (T).

• Documentația W3C
• Școli W3C XSL
• XSLT Wikipedia
• XSLT a doua ediție de Doug Tidwell

Scrie un tutorial Plus

Știați că puteți câștiga până la 600 USD pentru a scrie un tutorial PLUS și / sau pentru noi? Căutăm tutoriale detaliate și bine scrise despre HTML, CSS, PHP și JavaScript. Dacă sunteți în măsură, contactați Jeffrey la [email protected].

Rețineți că o compensație reală va depinde de calitatea tutorialului final și a scenariului.

• Urmați-ne pe Twitter sau abonați la Nettuts + RSS Feed pentru cele mai bune tutoriale de dezvoltare web de pe web.