In deze zelfstudie gaan we op avontuur in de wereld van XSL (T) en leggen we uit wat het is, hoe we gegevens van een XML-document, basis-iteratie en basisaanmelding en voorwaardelijke verklaringen kunnen ophalen.

Zelfstudiedetails

• Programma: Elke teksteditor
• Versie: 1 van 1
• Moeilijkheidsgraad: Medium
• Geschatte voltooiingstijd: 25min

Overzicht

Soms heb je enorme datasets die zijn uitgepraat als XML en die moeten worden opgemaakt, zodat iemand die niet weet hoe XML moet worden gelezen, de gegevens kan lezen. In deze tutorial laat ik je zien hoe dat wordt gedaan met de kracht van XSL (T).

Wat is XSL (T)?

XSL (T) is een afkorting voor Extendable Stylesheet Language (Transformation). Hoewel het een "stylesheet" is, heeft het een ander doel dan CSS (Cascading Stylesheets). XSL (T) wordt niet gebruikt voor visueel effect, maar in plaats daarvan het extraheren van gegevens (of transformeren) van XML en het gebruiken van de combinatie van HTML en CSS om ze te formatteren. XSL (T) heeft ook de dynamische eigenschappen in de zin dat je iteratie- en voorwaardelijke uitspraken kunt doen op een statisch XML-bestand.

XSL (T) wordt niet gebruikt voor visueel effect, maar in plaats daarvan het extraheren van gegevens (of transformeren) van XML en het gebruiken van de combinatie van HTML en CSS om ze te formatteren.

Waarom XSL gebruiken (T)?

XSL (T) kan worden gebruikt voor het organiseren van grote bomen van XML, zodat iedereen het kan lezen. Een Google Search Appliance levert bijvoorbeeld query's op als XML. Voor die XML die door een algemene gebruiker moet worden gelezen, moet er een transformatie plaatsvinden. Dit is waar XSL (T) een cruciale rol speelt. Het kan ook worden gebruikt om een ​​RSS-feedspagina te stylen, omdat de bron zich allemaal in XML bevindt. Het wordt ook gebruikt als de belangrijkste templating-taal voor Autonomy's Teamsite (EMS) en dergelijke open source CMS's als Symphony.

XSL (T) vermindert ook de belasting van de server. Aangezien XSLT de transformatie aan de clientzijde kan uitvoeren, moet uw server minder werk doen, aangezien u niet naar gegevens in de database zoekt. JavaScript en serverfuncties kunnen worden ingesteld om het document te vertellen dat een specifieke XSL (T) -sjabloon moet worden gebruikt of u kunt de sjabloon binnen het daadwerkelijke XML-bestand vinden. Voor deze zelfstudie gaan we eenvoudigweg de XSL (T) -sjabloon in het XML-bestand plaatsen.

Ermee beginnen

Ons doel is om een ​​lijst van vakanties te maken waar we naar toe willen en enkele logica op de gegevens uit te voeren om ons te laten weten welke bestemmingen buiten onze prijsklasse vallen. In dit geval is ons budget $ 999 voor onze vakantie en we gaan aangeven wanneer de prijs boven ons budget ligt. We zullen ze ook in aflopende volgorde bestellen, zodat we meteen kunnen zien welke reizen buiten ons budget vallen.

Allereerst zul je een XML-bestand nodig hebben. Ga je gang en open je favoriete teksteditor en maak een nieuw bestand aan en noem dit trips.xml. Ik heb een voorbeeld XML-bestand verstrekt dat u kunt downloaden en gebruiken, of u kunt de onderstaande code kopiëren en plakken.

     Verenigde Staten van Amerika Florida Orlando 1000   Verenigde Staten van Amerika Michigan Detroit 600   Spanje Madrid 5000   Verenigde Staten van Amerika Californië San Jose 800  

Het eerste en enige dat we met dit document moeten doen, is een verwijzing toevoegen naar waar ons .xsl-bestand leeft. In dit geval maken we een stylesheet met de naam trips.xsl.

  ... 

Begin met het uitbreidbare stylesheet

Begin met het maken van een nieuw document in je favoriete teksteditor en sla het op als trips.xsl. Vervolgens kunnen we het eigenlijke stylesheet starten. U moet eerst de XML-versie en de codering voor de sjabloon opgeven. Als u bekend bent met XML, is het dezelfde versie en coderingssyntaxis

 ... 

Vanaf hier kunnen we een beetje XSL schrijven. Om de stylesheet te starten, moeten we eerst de browser laten weten dat we een XSL-stylesheet gebruiken en welke versie. Dit element moet al uw markeringen omwikkelen en moet aan het eind van het document worden gesloten, anders zal het document niet transformeren.

    ... 

Als we de XHTML in ons document tegen de W3C-normen willen valideren, moeten we een doctype toevoegen om te gebruiken bij transformatie en render. Hier gaan we de XHTML Strict DTD gebruiken. We doen dit door een zelfsluitend element in te stellen xsl: uitgang. Met in dat element zullen we het doctype noemen.

     ... 

Vervolgens zullen we de eigenlijke sjabloon starten. Tussen de template open en close-tag is waar alles van XHTML samengaat met andere XSL (T) -elementen. Het is belangrijk om te weten dat u een wedstrijd voor de sjabloon. Dit attribuut zegt in principe naar de root van het XML-document te gaan.

transformatie

Het eerste dat we nu moeten doen, is een eenvoudige XHTML-lay-out starten en dat nestelen binnen onze xsl: template -tags. Ik heb ook een css-bestand gekoppeld aan een document om het document een bepaalde stijl te geven, maar het instellen ervan valt buiten het bestek van deze zelfstudie.

...          ... 

Ons eerste doel is dus om het titelelement uit het XML-document te halen en die gegevens in de titel van het html-document te plaatsen.

Voordat we met de XSL beginnen, is het belangrijk op te merken waar in de XML-boom de "titel" bestaat. In dit geval is de titel een directe afstammeling van het wortelelement van vakantie. We kunnen nu beginnen met het schrijven van onze XSL. Om de browser te kunnen vertellen waar een gekoppeld gegevensbestand gaat leven, gebruiken we het element xsl: value-of.

We zitten al in de root van het document via de xsl: template-tag, maar we moeten dieper in de XML-tree graven om de gewenste data te selecteren. In dit geval gaan we in het document kijken naar een wortelelement van vakantie met kind van titel.

...    ... 

Wanneer we ons XML-bestand (trips.xml) openen in de browser, is ons resultaat het titelelement dat wordt weergegeven in de titelbalk van de browser, waar we verwachten dat het zich op een normale op XHMTL gebaseerde site bevindt. Merk ook op dat we de XML-boomstructuur niet langer zien, maar als we de bron bekijken, zien we dat de bron van het document XML is.

We kunnen nog een stap verder gaan om te bewijzen dat de transformatie van XML naar XHTML heeft plaatsgevonden in de browser met behulp van een tool zoals FireBug of Safari Inspector.

Om wat visuele organisatie toe te voegen, voeg ik wat markeringen toe zodat onze gegevens een beetje makkelijker te bekijken zijn.

...   
 
 
 
  
 
 
... 

Zoals je hierboven kunt zien, heb ik het titelelement opnieuw gebruikt maar nu in de body van het document. Dit kan zeer nuttig zijn bij het hergebruik en de hergebruik van inhoud.

Vervolgens gaan we onze 'trips' transformeren naar XHTML. Gezond verstand zegt dat we gewoon een andere moeten kunnen bellen xsl: value-of maar deze keer roept het een kindknooppunt van "trip" op. Dit zou werken als we maar één reis hadden. Omdat we echter meerdere trips hebben, moeten we een iteratie uitvoeren of het XML-document doorlopen.

Iteration aka Looping

Zoals in alle programmeertalen zijn er iteratie-instructies die door een specifieke dataset lopen en er enkele methoden op uitvoeren. XLS (T) heeft vergelijkbare functionaliteit voor het extraheren van gegevens uit een XML-document.

... ... ... 

Het bovenstaande fragment doet vrijwel wat je zou verwachten. Het zegt xsl: for-each element selecteer alles dat op het pad bestaat vakantie / tip.

Om de gegevens daadwerkelijk te extraheren, moeten we echter wat meer werk doen. Aangezien ons budget voor de reizen $ 999 is, zullen we een aantal logica op de gegevens moeten uitvoeren. Maar voordat we dat doen, kunnen we de gegevens sorteren op prijs in aflopende volgorde.

sorteer-

...  ... ... 

Zoals je hierboven kunt zien is het sorteren van gegevens door een specifiek knooppunt vrij eenvoudig. Sinds de xsl: for-each statement selecteert het trip-knooppunt en stelt de scope in die we eenvoudig kunnen zien xsl: sort om het prijsknooppunt te selecteren en naar de te zoeken data type aantal stel dan de bestellen naar aflopend. Het is belangrijk op te merken dat de xsl: sort verklaring is zelfsluitend ().

Een voorbeeld van

Nou, op dit moment vraag je je misschien af ​​hoe deze vakantie-lijst eruit ziet. Om een ​​voorbeeld te bekijken van wat we hebben geopend trips.xml in uw browser. Zorg ervoor dat u de. Niet bekijkt .xsl het dossier.

U krabt waarschijnlijk uw hoofd en vraagt ​​zich af waarom we geen resultaten hebben. Dit komt omdat we niet hebben gekeken naar welke gegevens we kijken. De xsl: sort statement is geen sourcing data, het is gewoon een filter voor wanneer data aanwezig is.

Kiezen en testen

Omdat we een indicatie willen geven voor prijzen die buiten ons budget vallen, moeten we dat doen Test tegen sommige parameters. We doen dit met de combinatie van xsl: choose, xsl: when test = " en xsl: anders. Als u een programmeerervaring hebt, moet u dit concept van stroomregeling van conditionals herkennen. Zo niet, dan is het nog steeds vrij eenvoudig om te volgen.

     BLAH   BLIP   

We beginnen de logische stroom mee xsl: choose, dit gaat de verklaring initialiseren vergelijkbaar met als in talen zoals PHP. Direct daarna hebben we onze eerste test. Daar vertellen we XSL (T) aan wanneer de prijs is groter dan (>) 999 do BLAH, anders BLIP.

Vervolgens moeten we BLAH en BLIP vervangen door haken aan onze XML.

...   
$ ,    
  ...  ... 

In het bovenstaande fragment stellen we ons lijstitem in met een klasse "te veel". Deze les kleurt de reizen die buiten ons budget vallen rood. We gebruiken het dan xsl: value-of om de prijs, stad, staat, land en datum te pakken. Het is belangrijk om op te merken dat de datum toegankelijk kan zijn vanaf elk "reis" knooppunt door het @ symbool te gebruiken. Deze zelfde soort uitspraken werden eerder gezien toen je de titel voor onze lijst kreeg. We hebben ook het dollarteken ($) en de komma () toegevoegd om de gegevens correct te formatteren.

   
$ ,    
   
$ ,    
  

Vervolgens moeten we aangeven wat we met de andere items willen doen als ze voldoen aan onze beperking van minder dan $ 999. In dit geval gaan we ze gewoon afdrukken in een lijstitem waaraan geen speciale klasse is gekoppeld. We doorlopen en selecteren alle knooppunten die we hebben gebruikt voor de te veel knooppunten (prijs, stad, staat, land en datum).

Alles toevoegen aan Togeather

           
 
 
 
     
$ ,    
   
$ ,    
    
 
 
    

Tegen die tijd zouden we eigenlijk iets nuttigs moeten hebben om naar te kijken in de browser.

Open trips.xml zoals eerder. Als alles goed is gegaan, zou je iets moeten hebben dat lijkt op wat hierboven wordt getoond. XSL (T) is een zeer krachtige taal waarmee u drastisch kunt veranderen hoe XML-gegevens worden gepresenteerd. Hieronder vindt u enkele bronnen voor meer informatie over XSL (T).

• W3C-documentatie
• W3C Schools XSL
• XSLT Wikipedia
• XSLT Second Edition door Doug Tidwell

Schrijf een Plus-zelfstudie

Wist je dat je tot $ 600 kunt verdienen voor het schrijven van een PLUS tutorial en / of screencast voor ons?? We zijn op zoek naar diepgaande en goed geschreven tutorials over HTML, CSS, PHP en JavaScript. Als je van het vermogen bent, neem dan contact op met Jeffrey via [email protected].

Houd er rekening mee dat de daadwerkelijke compensatie afhankelijk is van de kwaliteit van de laatste zelfstudie en screencast.

• Volg ons op Twitter of abonneer je op de Nettuts + RSS Feed voor de beste tutorials voor webontwikkeling op internet.