Over XML en XSLT

XML en XSL gebruiken in webpagina's

Extensible Markup Language (XML) is een taal waarmee je informatie kunt structureren. Net als HTML kun je met XML je informatie structureren met behulp van tags, maar XML-tags zijn niet voorgedefinieerd zoals HTML-tags.In plaats daarvan laat XML je tags maken die je gegevensstructuur (schema) het beste definiëren. Tags worden genest binnen andere om een schema van bovenliggende en onderliggende tags te maken. Net als de meeste HTML tags hebben alle tags in een XML-schema een openings- en een sluitingstag.

Het volgende voorbeeld toont de basisstructuur van een XML-bestand.

<?xml version="1.0">

<mybooks>

<book bookid="1">

<pubdate>03/01/2004</pubdate>

<title>Displaying XML Data with Adobe Dreamweaver</title>

<author>Charles Brown</author>

</book>

<book bookid="2">

<pubdate>04/08/2004</pubdate>

<title>Understanding XML</title>

<author>John Thompson</author>

</book>

</mybooks>

In dit voorbeeld bevat elke bovenliggende <book> tag drie onderliggende tags: <pubdate>, <title>, en <author>. Maar elke <book> tag is ook een onderliggende tag van de <mybooks> tag, die één Niveau hoger staat in het schema. Je kunt XML-tags op elke gewenste manier benoemen en structureren, mits je tags dienovereenkomstig nest binnen andere, en elke openingstag een bijbehorende sluitingstag toewijst.

XML-documenten bevatten geen opmaak—het zijn gewoon containers van gestructureerde informatie. Zodra je een XML-schema hebt, kun je de Extensible Stylesheet Language (XSL) gebruiken om de informatie weer te geven. Op de manier waarop Cascading Style Sheets (CSS) je HTML laten opmaken, laat XSL je XML-gegevens opmaken. Je kunt stijlen, pagina-elementen, lay-out enzovoort definiëren in een XSL-bestand en dit koppelen aan een XML-bestand zodat wanneer een gebruiker de XML-gegevens in een browser bekijkt, de gegevens worden opgemaakt volgens wat je ook hebt gedefinieerd in het XSL-bestand. De content (de XML-gegevens) en presentatie (gedefinieerd door het XSL-bestand) zijn volledig gescheiden, wat je meer controle geeft over hoe je informatie op een webpagina wordt weergegeven. In essentie is XSL een presentatietechnologie voor XML, waarbij de primaire uitvoer een HTML-pagina is.

Extensible Stylesheet Language Transformations (XSLT) is een subset-taal van XSL waarmee je daadwerkelijk XML-gegevens op een webpagina kunt weergeven en kunt "transformeren", samen met XSL-stijlen, naar leesbare, gestileerde informatie in de vorm van HTML. Je kunt Dreamweaver gebruiken om XSLT-pagina's te maken waarmee je XSL-transformaties kunt uitvoeren met behulp van een application server of een browser. Bij een server-side XSL-transformatie doet de server het werk van het transformeren van de XML en XSL, en het weergeven ervan op de pagina. Bij een client-side transformatie doet een browser (zoals Internet Explorer) het werk.

De benadering die je uiteindelijk kiest (server-side transformaties tegenover client-side transformaties) hangt af van wat je probeert te bereiken als eindresultaat, de beschikbare technologieën, het niveau van toegang dat je hebt tot XML-bronbestanden en andere factoren. Beide benaderingen hebben hun eigen voordelen en beperkingen. Bijvoorbeeld, server-side transformaties werken in alle browsers terwijl client-side transformaties beperkt zijn tot alleen moderne browsers (Internet Explorer 6, Netscape 8, Mozilla 1.8 en Firefox 1.0.2). Server-side transformaties laten je XML-gegevens dynamisch weergeven vanaf je eigen server of vanaf elders op het web, terwijl client-side transformaties XML-gegevens moeten gebruiken die lokaal gehost zijn op je eigen webserver. Tot slot vereisen server-side transformaties dat je je pagina's implementeert op een geconfigureerde application server, terwijl client-side transformaties alleen toegang tot een webserver vereisen.

Ga naar www.adobe.com/go/vid0165_nl voor een zelfstudie over XML.

Server-side XSL-transformaties

Dreamweaver biedt methoden voor het maken van XSLT-pagina's waarmee je server-side XSL-transformaties kunt uitvoeren. Wanneer een application server de XSL-transformatie uitvoert, kan het bestand met de XML-gegevens zich bevinden op je eigen server, of ergens anders op het web. Bovendien kan elke browser de getransformeerde gegevens weergeven. Het implementeren van pagina's voor server-side transformaties is echter enigszins complex en vereist dat je toegang hebt tot een application server.

Bij het werken met server-side XSL-transformaties kun je Dreamweaver gebruiken om XSLT-pagina's te maken die volledige HTML-documenten genereren (volledige XSLT-pagina's), of XSLT-fragmenten die een deel van een HTML-document genereren. Een volledige XSLT-pagina is vergelijkbaar met een gewone HTML-pagina. Het bevat een <body>-tag en een <head>-tag, en laat je een combinatie van HTML- en XML-gegevens op de pagina weergeven. Een XSLT-fragment is een stuk code, gebruikt door een apart document, dat geformatteerde XML-gegevens weergeeft. In tegenstelling tot een volledige XSLT-pagina is het een onafhankelijk bestand dat geen <body>- of <head>-tag bevat. Als je XML-gegevens op een eigen pagina wilt weergeven, zou je een volledige XSLT-pagina maken en je XML-gegevens eraan koppelen. Als je daarentegen XML-gegevens in een bepaald gedeelte van een bestaande dynamische pagina wilde weergeven — bijvoorbeeld een dynamische startpagina voor een sportwinkelvoor een sportwinkel, met sportscores van een RSS-feed weergegeven aan één kant van de pagina — zou je een XSLT-fragment maken en een verwijzing ernaar invoegen in de dynamische pagina. Het maken van XSLT-fragmenten en het gebruiken ervan in combinatie met andere dynamische pagina's om XML-gegevens weer te geven is het meer voorkomende scenario.

De eerste stap bij het maken van dit soort pagina's is het maken van het XSLT-fragment. Het is een apart bestand dat de lay-out, opmaak en dergelijke bevat van de XML-gegevens die je uiteindelijk wilt weergeven in de dynamische pagina.Zodra je het XSLT-fragment hebt gemaakt, voeg je een verwijzing ernaar in je dynamische pagina (bijvoorbeeld een PHP- of ColdFusion-pagina).De ingevoegde verwijzing naar het fragment werkt vergelijkbaar met een Server Side Include (SSI) — de opgemaakte XML-gegevens (het fragment) bevinden zich in een apart bestand, terwijl in de ontwerpweergave een tijdelijke aanduiding voor het fragment verschijnt op de dynamische pagina zelf.Wanneer een browser de dynamische pagina opvraagt die de verwijzing naar het fragment bevat, verwerkt de server de include-instructie en maakt een nieuw document waarin de opgemaakte inhoud van het fragment verschijnt in plaats van de tijdelijke aanduiding.

Je gebruikt het servergedrag XSL-transformatie om de verwijzing naar een XSLT-fragment in een dynamische pagina in te voegen.Wanneer je de verwijzing invoegt, genereert Dreamweaver een includes/MM_XSLTransform/ map in de hoofdmap van de site die een runtime-bibliotheekbestand bevat. De applicatieserver gebruikt de functies die zijn gedefinieerd in dit bestand bij het transformeren van de opgegeven XML-gegevens. Het bestand is verantwoordelijk voor het ophalen van de XML-gegevens en XSLT-fragmenten, het uitvoeren van de XSL transformatie en het weergeven van de resultaten op de webpagina.

Het bestand dat het XSLT-fragment bevat, het XML-bestand dat je gegevens bevat en het gegenereerde runtime-bibliotheekbestand moeten zich allemaal op de server bevinden om je pagina correct weer te geven. (Als je een extern XML-bestand selecteert als je databron—bijvoorbeeld een feed—moet dat bestand natuurlijk ergens anders op internet staan.)

Je kunt ook Dreamweaver gebruiken om volledige XSLT-pagina's te maken voor gebruik met server-side transformaties. Een volledige XSLT-pagina werkt op exact dezelfde manier als een XSLT-fragment, alleen wanneer je de verwijzing naar de volledige XSLT-pagina invoegt met behulp van het XSL Transformation server behavior, voeg je de volledige inhoud van een HTML-pagina in. Daarom moet de dynamische pagina (de .cfm-, .php- of .asp-pagina die fungeert als containerpagina) van alle HTML worden ontdaan voordat je de verwijzing invoegt.

Dreamweaver ondersteunt XSL-transformaties voor ColdFusion-, ASP- en PHP-pagina's.

Client-side XSL-transformaties

U kunt XSL-transformaties op de client uitvoeren zonder een toepassingsserver. Met Dreamweaver kunt u een hele XSLT-pagina maken die de transformaties uitvoert. Voor client-side transformaties is echter aanpassing vereist van het XML-bestand met de gegevens die u wilt weergeven. Bovendien werken client-side transformaties alleen in moderne browsers (Internet Explorer 6, Netscape 8, Mozilla 1.8 en Firefox 1.0.2). 

Maak eerst een hele XSLT-pagina en koppel daaraan een XML-gegevensbron. (Dreamweaver vraagt u om de gegevensbron te koppelen wanneer u de nieuwe pagina maakt.) U kunt een XSLT-pagina helemaal zelf samenstellen of u kunt een bestaande HTML-pagina omzetten naar een XSLT-pagina. Als u een bestaande HTML-pagina omzet naar een XSLT-pagina, moet u daaraan met het deelvenster Bindingen (Venster > Bindingen) een XML-gegevensbron koppelen.

Als uw XSLT-pagina klaar is, moet u deze koppelen aan het XML-bestand met de XML-gegevens door in het XML-bestand zelf een verwijzing in te voegen naar de XSLT-pagina (ongeveer zoals u een verwijzing invoegt naar een externe CSS-stijlpagina in de sectie <head> van een HTML-pagina). In een browser moeten bezoekers het XML-bestand zien (niet de XSLT-pagina). Als bezoekers de pagina bekijken, voert de browser de XSL-transformatie uit en geeft de XML-gegevens weer die door de gekoppelde XSLT-pagina zijn opgemaakt.

De relatie tussen de gekoppelde XSLT- en XML-pagina's is in principe dezelfde, maar is anders dan de externe CSS/HTML-paginamodellen. Als u een HTML-pagina met inhoud hebt (bijvoorbeeld tekst), gebruikt u een externe stijlpagina voor de opmaak van die inhoud. De HTML-pagina bepaalt de inhoud. De externe CSS-code, die de gebruiker nooit te zien krijgt, bepaalt de presentatie. Bij XSLT en XML is de situatie omgekeerd. Het XML-bestand (dat de gebruiker nooit ziet in zijn ruwe vorm) bepaalt de inhoud en de XSLT-pagina bepaalt de presentatie. De XSLT-pagina bevat de tabellen, opmaak, afbeeldingen enzovoort die de standaard HTML gewoonlijk bevat. Als een gebruiker het XML-bestand in een browser bekijkt, wordt de inhoud door de XSLT-pagina opgemaakt.

Wanneer je Dreamweaver gebruikt om een XSLT- pagina te koppelen aan een XML-pagina, voegt Dreamweaver de juiste code voor je in bovenaan de XML-pagina. Als je eigenaar bent van de XML-pagina waaraan je koppelt (dat wil zeggen, als het XML-bestand uitsluitend op je webserver staat), hoef je alleen Dreamweaver te gebruiken om de juiste code in te voegen die de twee pagina's koppelt. Wanneer je eigenaar bent van het XML-bestand, zijn de XSL-transformaties die door de client worden uitgevoerd volledig dynamisch.Dat betekent dat wanneer je de gegevens in het XML-bestand bijwerkt, elke HTML-uitvoer die gebruikmaakt van de gekoppelde XSLT- pagina automatisch wordt bijgewerkt met de nieuwe informatie.

Als je geen eigenaar bent van de XML-pagina waaraan je koppelt (bijvoorbeeld als je XML-gegevens van een RSS feed ergens op het web wilt gebruiken), is de workflow wat ingewikkelder. Om client-side transformaties uit te voeren met XML-gegevens van een externe bron, moet je eerst het XML-bronbestand downloaden naar dezelfde map waar je XSLT-pagina staat. Wanneer de XML-pagina in je lokale site staat, kun je Dreamweaver gebruiken om de juiste code toe te voegen die deze koppelt aan de XSLT-pagina, en beide pagina's (het gedownloade XML-bestand en de gekoppelde XSLT-pagina) naar je webserver uploaden. Wanneer de gebruiker de XML-pagina in een browser bekijkt, formatteert de XSLT-pagina de content, net zoals in het vorige voorbeeld.

Het nadeel van het uitvoeren van klantzijde XSL-transformaties op XML-gegevens die afkomstig zijn van een externe bron is dat de XML-gegevens slechts gedeeltelijk "dynamisch" zijn. Het XML-bestand dat je downloadt en wijzigt is slechts een "momentopname" van het bestand dat elders op het web staat.Als het oorspronkelijke XML-bestand op het web wijzigt, moet je het bestand opnieuw downloaden, het koppelen aan de XSLT-pagina en het XML-bestand opnieuw naar je webserver uploaden.De browser geeft alleen de gegevens weer die het ontvangt van het XML-bestand op je webserver, niet de gegevens in het oorspronkelijke XML-bronbestand.

XML-gegevens en herhalende elementen

Het Herhalende regio XSLT-object laat je herhalende elementen van een XML-bestand binnen een pagina weergeven.Elke regio die een XML-gegevens plaatshouder bevat kan worden omgezet in een herhaalde regio.De meest voorkomende regio's zijn echter een tabel, een tabelrij of een serie tabelrijen.

Het volgende voorbeeld toont hoe het Repeating Region XSLT-object wordt toegepast op een tabelrij die menu-informatie voor een restaurant weergeeft.De eerste rij toont drie verschillende elementen uit het XML-schema: item, beschrijving en prijs.Wanneer het Herhalende regio XSLT-object wordt toegepast op de tabelrij en de pagina wordt verwerkt door een applicatie server of een browser, wordt de tabel herhaald met unieke gegevens ingevoegd in elke nieuwe tabelrij.

Wanneer je een Herhalende regio XSLT-object toepast op een element in het Documentvenster, verschijnt er een dunne, getabbeerde, grijze omtrek rond de herhaalde regio.Wanneer je je werk bekijkt in een browser (Bestand > Voorvertoning in browser), verdwijnt de grijze omtrek en breidt de selectie zich uit om de opgegeven herhalende elementen in het XML-bestand weer te geven, zoals in de vorige illustratie.

Wanneer je het Herhalende regio XSLT-object aan de pagina toevoegt, wordt de lengte van de XML-gegevensplaatshouder in het Documentvenster ingekort. Dit komt doordat Dreamweaver de XPath-expressie (XML Path Language) voor de XML-gegevensplaatshouder bijwerkt zodat die relatief is aan het pad van het herhalende element.

Het volgende voorbeeld toont bijvoorbeeld de code voor een tabel die twee dynamische plaatshouders bevat, zonder een Herhalende regio XSLT-object dat op de tabel wordt toegepast:

<table width="500" border="1">

<tr>

<td><xsl:value-of select="rss/channel/item/title"/></td>

</tr>

<tr>

<td><xsl:value-of select="rss/channel/item/description"/></td>

</tr>

</table>

De volgende code is voor dezelfde tabel met het Herhalende regio XSLT-object erop toegepast:

<xsl:for-each select="rss/channel/item">

<table width="500" border="1">

<tr>

<td><xsl:value-of select="title"/></td>

</tr>

<tr>

<td><xsl:value-of select="description"/></td>

</tr>

</table>

</xsl:for-each>

In het voorgaande voorbeeld heeft Dreamweaver het XPath bijgewerkt voor de items die binnen de herhalende regio vallen (titel en beschrijving) om relatief te zijn ten opzichte van het XPath in de omsluitende <xsl:for-each> tags, in plaats van het volledige document.

Dreamweaver genereert contextrelatieve XPath-expressies ook in andere gevallen. Als je bijvoorbeeld een XML-gegevensplaatshouder naar een tabel sleept die al een herhalende regio XSLT-object heeft toegepast, toont Dreamweaver automatisch het XPath relatief ten opzichte van het bestaande XPath in de omsluitende <xsl:for-each> tags.

XML-gegevens voorvertonen

Wanneer je Voorvertoning in browser gebruikt (Bestand > Voorvertoning in browser) om XML-gegevens te bekijken die je hebt ingevoegd in een XSLT-fragment of een volledige XSLT-pagina, verschilt de engine die de XSL-transformatie uitvoert per situatie. Voor dynamische pagina's met XSLT-fragmenten voert de applicatieserver altijd de transformatie uit. In andere gevallen kan Dreamweaver of de browser de transformatie uitvoeren.

De volgende tabel geeft een overzicht van de situaties bij het gebruik van Voorvertoning in browser en de engines die de respectieve transformaties uitvoeren:

De volgende onderwerpen bieden richtlijnen om je te helpen bepalen welke voorvertoningsmethodes geschikt zijn, op basis van je behoeften.

Pagina's bekijken voor server-side transformaties

In het geval van server-kant transformaties wordt de content die de websitebezoekers uiteindelijk zien getransformeerd door je applicatieserver. Bij het maken van XSLT- en dynamische pagina's voor gebruik met server-side transformaties is het altijd beter om een voorvertoning te bekijken van de dynamische pagina die het XSLT-fragment bevat in plaats van het XSLT-fragment zelf.In het eerste scenario maak je gebruik van de applicatieserver, wat ervoor zorgt dat je voorvertoning consistent is met wat je websitebezoekers zullen zien wanneer ze je pagina bezoeken. In het laatste scenario voert Dreamweaver de transformatie uit en kan enigszins inconsistente resultaten opleveren.Je kunt Dreamweaver gebruiken om je XSLT-fragment te bekijken terwijl je het bouwt, maar je kunt de meest nauwkeurige resultaten van de gegevensweergave zien als je de applicatieserver gebruikt om je dynamische pagina te bekijken nadat je het XSLT-fragment hebt ingevoegd.

Pagina's voor client-side transformaties voorvertonen

In het geval van client-side transformaties wordt de content die websitebezoekers uiteindelijk zien getransformeerd door een browser.Dit bereik je door een koppeling toe te voegen van het XML-bestand naar de XSLT-pagina. Als je het XML-bestand opent in Dreamweaver en het bekijkt in een browser, dwing je de browser om het XML-bestand te laden en de transformatie uit te voeren. Dit biedt je dezelfde ervaring als die van je websitebezoeker.

Het gebruik van deze aanpak maakt het echter moeilijker om fouten op te sporen in je pagina omdat de browser de XML transformeert en de HTML intern genereert.Als je de optie Paginabron weergeven van de browser selecteert om fouten op te sporen in de gegenereerde HTML, zie je alleen de oorspronkelijke XML die de browser heeft ontvangen, niet de volledige HTML (tags, stijlen enzovoort) die verantwoordelijk is voor de weergave van de pagina.Om de volledige HTML te zien bij het bekijken van broncode, moet je een voorvertoning van de XSLT-pagina in een browser weergeven.

Hele XSLT-pagina's en XSLT-fragmenten voorvertonen

Bij het maken van volledige XSLT-pagina's en XSLT-fragmenten wil je een voorvertoning van je werk bekijken om er zeker van te zijn dat je gegevens correct worden weergegeven.Als je Voorvertoning in browser gebruikt om een volledige XSLT-pagina of een XSLT-fragment weer te geven, voert Dreamweaver de transformatie uit met een ingebouwde transformatie-engine.Deze methode geeft je snelle resultaten en maakt het gemakkelijker om je pagina stapsgewijs te bouwen en fouten op te sporen.Het biedt ook een manier om de volledige HTML (tags, stijlen enzovoort) te bekijken door de optie Bron weergeven in de browser te selecteren.

Verwante informatie

• XML-zelfstudie
• XSL-transformaties op de server uitvoeren
• XSL-transformaties op de client uitvoeren
• Herhalende XML-elementen weergeven