Opmerking:

De gebruikersinterface van Dreamweaver CC en hoger is vereenvoudigd. Daarom zijn sommige opties die in dit artikel worden beschreven, niet beschikbaar in Dreamweaver CC en hoger. Meer informatie vindt u in dit artikel.

XML en XSL gebruiken in webpagina's

Extensible Markup Language (XML) is een taal waarmee u informatie kunt structureren. Evenals bij HTML kunt u bij XML informatie met tags structureren, maar XML-tags zijn niet vooraf gedefinieerd zoals de HTML-tags. Bij XML kunt u daarentegen tags maken die uw gegevensstructuur (schema) het best definiëren. Tags worden binnen andere tags genest en vormen een schema van boven- en onderliggende tags. Zoals bij de meeste HTML-tags hebben alle tags in een XML-schema een begin- en een eindtag.

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 heeft elke bovenliggende tag <book> drie onderliggende tags: <pubdate>, <title> en <author>. Elke tag <book> is echter ook een onderliggende tag van de tag <mybooks>, die één niveau hoger ligt in het schema. U kunt XML-tags willekeurige namen en structuren geven, zolang u ze dienovereenkomstig binnen andere nest en aan elke begintag een corresponderende eindtag toewijst.

XML-documenten bevatten geen opmaak – het zijn slechts containers van gestructureerde informatie. Als u eenmaal een XML-schema hebt, kunt u de informatie met Extensible Stylesheet Language (XSL) weergeven. Net zoals u met CSS (Cascading Style Sheets) HTML kunt opmaken, kunt u XML-gegevens opmaken met XSL. U kunt stijlen, pagina-elementen, opmaak, enzovoort definiëren in een XSL-bestand en dit aan een XML-bestand koppelen. Als een gebruiker de XML-gegevens in een browser bekijkt, worden de gegevens volgens uw definities in het XSL-bestand opgemaakt. De inhoud (de XML-gegevens) en de presentatie (in het XSL-bestand gedefinieerd) zijn volledig gescheiden, zodat u beter kunt bepalen hoe uw informatie op een webpagina verschijnt. In wezen is XSL de presentatietechnologie voor XML en de primaire uitvoer is een HTML-pagina.

Extensible Stylesheet Language Transformations (XSLT) is een hulptaal van XSL waarmee u feitelijk de XML-gegevens op een webpagina kunt weergeven. Hierbij kunt u de gegevens samen met XSL-stijlen “transformatie” naar leesbare en opgemaakte informatie in HTML-vorm. Met Dreamweaver kunt u XSLT-pagina's maken voor het uitvoeren van XSL-transformaties met een toepassingsserver of een browser. Bij een server-side XSL-transformatie zorgt de server voor het transformeren van XML en XSL en voor het weergeven op de pagina. Bij een client-side transformatie zorgt de browser (bijvoorbeeld Internet Explorer) daarvoor.

Welke benadering u uiteindelijk kiest (server-side dan wel client-side transformaties), is afhankelijk van het eindresultaat dat u beoogt, van de technologieën waarover u beschikt, van het toegangsniveau dat u hebt voor XML-bronbestanden, en van andere factoren. Beide benaderingen hebben hun eigen voordelen en beperkingen. Server-side transformaties werken bijvoorbeeld op alle browsers, terwijl client-side transformaties alleen werken op moderne browsers (Internet Explorer 6, Netscape 8, Mozilla 1.8 en Firefox 1.0.2). Bij server-side transformaties kunt u XML-gegevens dynamisch weergeven vanuit uw eigen server of vanuit overal elders op het web, terwijl client-side transformaties XML-gegevens moeten gebruiken die op uw eigen webserver aanwezig zijn. Tenslotte is voor server-side transformaties vereist dat u uw pagina's implementeert op een geconfigureerde toepassingsserver, terwijl voor client-side transformaties alleen toegang tot een webserver vereist is.

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 u server-side XSL-transformaties kunt uitvoeren. Als een toepassingsserver de XSL-transformatie uitvoert, kan het bestand met de XML-gegevens zich op uw eigen server bevinden of elders op het web. Bovendien kan elke browser de getransformeerde gegevens weergeven. Het implementeren van pagina's voor server-side transformaties is echter enigszins gecompliceerd en daarvoor is toegang vereist tot een toepassingsserver.

Als u met server-side XSL-transformaties werkt, kunt u met Dreamweaver XSLT-pagina's maken die volledige HTML-documenten (hele XSLT-pagina's) genereren, of kunt u XSLT-fragmenten maken die een deel van een HTML-document genereren. Een hele XSLT-pagina komt overeen met een gewone HTML-pagina. De pagina bevat een <body>-tag en een <head>-tag en u kunt een combinatie van HTML- en XML-gegevens op de pagina weergeven. Een XSLT-fragment is stuk code in een afzonderlijk document dat opgemaakte XML-gegevens weergeeft. In tegenstelling tot een hele XSLT-pagina is het een onafhankelijke bestand dat geen <body>- of <head>-tag heeft. Als u XML-gegevens op een eigen pagina wilt weergeven, dient u een hele XSLT-pagina te maken en uw XML-gegevens daaraan te binden. Als u echter XML-gegevens in een bepaalde sectie van een bestaande dynamische pagina wilt weergeven, bijvoorbeeld een dynamische startpagina voor een winkel van sportartikelen met sportuitslagen van een RSS-bron aan één zijde van de pagina, dient u een XSLT-fragment te maken en de verwijzing hiernaar in de dynamische pagina op te nemen. XSLT-fragmenten maken en deze samen met andere dynamische pagina's gebruiken voor het weergeven van XML-gegevens, is het gebruikelijke scenario.

Het maken van het XSLT-fragment is de eerste stap bij het maken van dit soort pagina's. Het is een afzonderlijk bestand met de indeling, opmaak en dergelijke van de XML-gegevens die u uiteindelijk in de dynamische pagina wilt weergeven. Als u een XSLT-fragment maakt, plaatst u een verwijzing hiernaar in uw dynamische pagina (bijvoorbeeld een PHP- of ColdFusion-pagina). De ingevoegde verwijzing naar het fragment werkt ongeveer als een Server Side Include (SSI). De opgemaakte XML-gegevens (het fragment) bevinden zich in een afzonderlijk bestand en in de ontwerpweergave verschijnt een tijdelijke aanduiding op de dynamische pagina zelf. Als een browser de dynamische pagina met de verwijzing naar het fragment opvraagt, verwerkt de server de opgenomen instructie en maakt een nieuw document met de opgemaakte inhoud van het fragment in plaats van de tijdelijke aanduiding.

Server-side XSL-transformaties
A. De browser vraagt een dynamische pagina aan B. De webserver zoekt de pagina en geeft deze door aan de toepassingsserver C. De toepassingsserver scant de pagina op instructies en haalt het XSLT-fragment op D. De toepassingsserver voert de transformatie uit (leest het XSLT-fragment, haalt XML-gegevens op en maakt deze op) E. De toepassingsserver voegt het getransformeerde fragment op de pagina in en geeft deze terug aan de webserver F. De webserver verzendt de voltooide pagina naar de browser 

U gebruikt het servergedrag voor XSL-transformatie voor het invoegen van de verwijzing naar een XSLT-fragment in een dynamische pagina. Bij het invoegen van de verwijzing genereert Dreamweaver in de hoofdmap van de site een map includes/MM_XSLTransform/ met een runtime bibliotheekbestand. De toepassingsserver gebruikt de in dit bestand gedefinieerde functies bij het transformeren van de opgegeven XML-gegevens. Het bestand haalt de XML-gegevens en de XSLT-fragmenten op, voert de XSL-transformatie uit en plaatst de resultaten op de webpagina.

Het bestand met het XSLT-fragment, het XML-bestand met uw gegevens en het gegenereerde runtime bibliotheekbestand moeten alle op de server aanwezig zijn om de pagina correct te kunnen weergeven. (Als u een extern XML-bestand als gegevensbron gebruikt–bijvoorbeeld van een RSS-bron–moet dat bestand zich uiteraard elders op internet bevinden.)

U kunt met Dreamweaver ook hele XSLT-pagina's maken voor gebruik bij server-side transformaties. Een hele XSLT-pagina werkt op dezelfde manier als een XSLT-fragment, zij het dat, wanneer u de verwijzing naar de hele XSLT-pagina invoegt met het servergedrag voor XSL-transformatie, u de volledige inhoud van een HTML-pagina invoegt. De dynamische pagina (de .cfm-, .php- of asp-pagina die als de containerpagina fungeert) moet dus van alle HTML worden ontdaan voordat u de verwijzing invoegt.

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

Opmerking:

Uw server moet correct zijn geconfigureerd voor het uitvoeren van server-side transformaties. Neem contact op met de serverbeheerder voor meer informatie.

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). Zie www.w3schools.com/xsl/xsl_intro.asp voor meer informatie over browsers die XSL-transformaties wel of niet ondersteunen.

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 paneel 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.

Client-side XSL-transformaties
A. De browser vraagt het XML-bestand aan B. De server antwoordt door het XML-bestand naar de browser te verzenden C. De browser leest de XML-instructie en roept het XSLT-bestand aan D. De server verzendt het XSLT-bestand naar de browser E. De browser transformeert de XML-gegevens en geeft deze in de browser weer 

Als u Dreamweaver gebruikt om een XSLT-pagina aan een XML-pagina te koppelen, voegt Dreamweaver bovenaan in de XML-pagina de juiste code voor u in. Als u eigenaar bent van de XML-pagina waaraan u koppelt (dat wil zeggen dat het XML-bestand alleen op uw webserver aanwezig is), hoeft u alleen met Dreamweaver de juiste code in te voegen die de beide pagina's koppelt. Als u eigenaar bent van het XML-bestand, zijn de door de client uitgevoerde XSL-transformaties volledig dynamisch. Dit houdt in dat, telkens als u de gegevens in het XML-bestand bijwerkt, elke HTML-uitvoer met de gekoppelde XSLT-pagina automatisch wordt bijgewerkt aan de hand van de nieuwe informatie.

Opmerking:

De XML- en XSL-bestanden voor client-side transformaties moeten zich in dezelfde directory bevinden. Anders leest de browser het XML-bestand en zoekt deze de XSLT-pagina voor de transformatie, maar zal deze de elementen (stijlpagina's, afbeeldingen en dergelijke) die door de relatieve koppelingen in de XSLT-pagina gedefinieerd zijn, niet vinden.

Als u niet de eigenaar bent van de XML-pagina waaraan u koppelt (bijvoorbeeld als u XML-gegevens van een RSS-bron ergens op het web wilt gebruiken), is de workflow iets gecompliceerder. Voor het uitvoeren van client-side transformaties met XML-gegevens van een externe bron moet u eerst het XML-bronbestand downloaden naar de directory waarin uw XSLT-pagina zich bevindt. Als de XML-pagina op uw lokale site aanwezig is, kunt u met Dreamweaver de juiste code toevoegen die de XML-pagina aan de XSLT-pagina koppelt en beide pagina's (het gedownloade XML-bestand en de gekoppelde XSLT-pagina) naar uw webserver posten. Als de gebruiker in een browser de XML-pagina bekijkt, wordt de inhoud door de XSLT-pagina opgemaakt, net als in het vorige voorbeeld.

Het nadeel van het uitvoeren van client-side XSL transformaties op XML-gegevens uit een externe bron is dat de XML-gegevens slechts gedeeltelijk “dynamisch" zijn. Het XML-bestand dat u downloadt, is slechts een “momentopname" van het bestand dat zich elders op het web bevindt. Als het oorspronkelijke XML-bestand ergens op het web gewijzigd wordt, moet u het opnieuw downloaden, het opnieuw aan de XSLT-pagina koppelen, en het XML-bestand opnieuw naar uw webserver posten. De browser geeft alleen de gegevens weer die het van het XML-bestand op uw webserver ontvangt, niet de gegevens die het oorspronkelijke XML-bronbestand bevat.

XML-gegevens en herhalende elementen

Met Herhalingsgebied XSLT-object kunt u herhalende elementen van een XML-bestand op een pagina herhalen. Elk gebied met een tijdelijke aanduiding voor XML-gegevens kan als herhalingsgebied worden aangemerkt. De meestvoorkomende gebieden zijn echter een tabel, tabelrij of een reeks tabelrijen.

In het volgende voorbeeld wordt geïllustreerd hoe het Herhalingsgebied XSLT-object wordt toegepast op een tabelrij met menu-informatie voor een restaurant. De eerste rij toont drie elementen van het XML-schema: gerecht, beschrijving en prijs. Als Herhalingsgebied XSLT-object op de tabelrij wordt toegepast en de pagina wordt verwerkt door een toepassingsserver of een browser, wordt de tabel herhaald met in elke nieuwe tabelrij unieke ingevoegde gegevens.

Het herhalingsgebied voor het XSLT-object is toegepast

Als u Herhalingsgebied XSLT-object op een element in het documentvenster toepast, verschijnt een dunne, grijze omtrek met een tab rond het herhaalde gebied. Als u uw werk in een browser bekijkt (Bestand > Voorvertoning in browser), verdwijnt de grijze omtrek, wordt de selectie uitgebreid en geeft deze de opgegeven herhalende elementen in het XML-bestand weer, zoals in de vorige afbeelding.

Als u een Herhalingsgebied XSLT-object aan de pagina toevoegt, wordt de lengte van de tijdelijke aanduiding voor de XML-gegevens in het documentvenster ingekort. Dat komt omdat Dreamweaver het XPath (XML Path language) voor de tijdelijke aanduiding voor de XML-gegevens bijwerkt, zodat dit gerelateerd is aan het pad van het herhalende element.

De volgende code is voor een tabel met twee dynamische tijdelijke aanduidingen en waarbij geen Herhalingsgebied XSLT-object is 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 maar waarbij wel het Herhalingsgebied XSLT-object is 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 vorige voorbeeld heeft Dreamweaver het XPath bijgewerkt voor alle elementen die binnen het herhalingsgebied vallen (titel en omschrijving), en relatief zijn ten opzichte van het XPath in de ingesloten <xsl:for-each>-tags in plaats van het volledige document.

Dreamweaver genereert ook in andere gevallen contextrelatieve XPath-expressies. Als u bijvoorbeeld een tijdelijke aanduiding voor XML-gegevens naar een tabel sleept waarin al een herhalingsgebied voor het XSLT-object is toegepast, geeft Dreamweaver automatisch het XPath weer dat gerelateerd is aan het bestaande XPath in de ingesloten <xsl:for-each>-tags.

XML-gegevens voorvertonen

Als u Voorvertoning in browser (Bestand > Voorvertoning in browser) gebruikt om de XML-gegevens te bekijken die u in een XSLT-fragment of een hele XSLT-pagina hebt ingevoegd, is de engine die de XSL-transformatie uitvoert, voor elke situatie verschillend. Voor dynamische pagina's met XSLT-fragmenten voert de toepassingsserver telkens de transformatie uit. Andere keren kan Dreamweaver of de browser dat doen.

De volgende tabel geeft een overzicht van de situaties bij gebruik van Voorvertoning in browser en de engines die de verschillende transformaties uitvoeren.

In browser bekeken paginatype Gegevenstransformatie uitgevoerd door
Dynamische pagina met XSLT-fragment Toepassingsserver
XSLT-fragment of hele XSLT-pagina Dreamweaver
XML-bestand met koppeling naar hele XSLT-pagina Browser

De volgende onderwerpen bevatten richtlijnen voor het bepalen van de juiste voorvertoningsmethodes op basis van uw wensen.

Pagina's voor server-side transformaties voorvertonen

Bij server-side transformaties ziet de bezoeker van de site uiteindelijk de inhoud die door uw toepassingsserver getransformeerd is. Bij het bouwen van XSLT- en dynamische pagina's voor gebruik met server-side transformaties is het altijd raadzaam om de dynamische pagina met het XSLT-fragment te bekijken in plaats van het XSLT-fragment zelf. In het eerste scenario gebruikt u de toepassingsserver, die zorgt dat uw voorvertoning overeenstemt met wat de bezoekers van de site zullen zien als ze uw pagina bezoeken. In het tweede scenario voert Dreamweaver de transformatie uit en kunnen de resultaten enigszins afwijken. Wanneer u het XSLT-fragment maakt, kunt u dit ook voorvertonen met Dreamweaver, maar u krijgt de meest accurate resultaten voor de gegevensweergave als u de toepassingsserver gebruikt voor het voorvertonen van uw dynamische pagina nadat u het XSLT-fragment hebt ingevoegd.

Pagina's voor client-side transformaties voorvertonen

Bij client-side transformaties ziet de bezoeker van de site uiteindelijk de inhoud die door een browser getransformeerd is. U bereikt dat door een koppeling toe te voegen van het XML-bestand naar de XSLT-pagina. Als u het XML-bestand in Dreamweaver opent en in een browser voorvertoont, dwingt u de browser om het XML-bestand te laden en de transformatie uit te voeren. U ervaart dan hetzelfde als de bezoeker van uw site.

Deze benadering bemoeilijkt echter foutoplossingen voor uw pagina, omdat de browser de XML transformeert en intern de HTML genereert. Als u de optie Bron weergeven (of het equivalent daarvan) kiest om fouten in de gegenereerde HTML op te lossen, ziet u alleen de originele XML die de browser heeft ontvangen, niet de volledige HTML (tags, stijlen enzovoort) die voor de weergave van de pagina zorgt. Om de volledige HTML zichtbaar te maken bij het bekijken van de broncode moet u de XSLT-pagina in een browser bekijken.

Hele XSLT-pagina's en XSLT-fragmenten voorvertonen

Bij het maken van hele XSLT-pagina's en XSLT-fragmenten zult u uw werk willen voorvertonen om te kunnen zorgen dat uw gegevens correct worden weergegeven. Als u een hele XSLT-pagina of een XSLT-fragment met Voorvertoning in Browser bekijkt, voert Dreamweaver de transformatie uit met een ingebouwde transformatie-engine. Deze methode geeft u snelle resultaten en vergemakkelijkt het u om uw pagina stapsgewijs op te bouwen en de fouten erin op te lossen. Het biedt u ook een manier om de volledige HTML (tags, stijlen enzovoort) te bekijken met de optie Bron weergeven (of het equivalent daarvan) in de browser.

Opmerking:

Deze methode wordt doorgaans gebruikt wanneer u begint met het bouwen van XSLT-pagina's, ongeacht de vraag of u uw gegevens op de client dan wel de server laat transformeren.

Dit werk is gelicentieerd onder de Creative Commons Naamsvermelding/Niet-commercieel/Gelijk delen 3.0 Unported-licentie  De voorwaarden van Creative Commons zijn niet van toepassing op Twitter™- en Facebook-berichten.

Juridische kennisgevingen   |   Online privacybeleid