XML

introductie

Joost van Meeteren

XML - met voorbeeld 1

Kenmerkend voor XML ('Extensible Markup Language') is dat het geen weergave-opmaaktaal is zoals (X)HTML.

XML-bestanden bieden alleen gestructureerde informatie aan zoals een boekenlijst of adressenlijst die vervolgens door een CSS-stylesheet of XSL-bestand zijn opmaakstructuur krijgt.

In tegenstelling tot (X)HTML kunnen in XML zelf ontworpen tags worden gebruikt. In (X)HTML ben je gebonden aan een vast paradigma aan (opmaak)tags zoals <b></b> voor vette tekst.

De DocType Declaration ('DTD') van XML ziet er als volgt uit:

<?xml version="1.0" encoding="ISO-8859-1"?>

Deze 'DTD' is verplicht om het XML-bestand dan ook volgens de regels te kunnen valideren.

Een XML-bestand zou er in de basis zo uit kunnen zien:

<?xml version="1.0" encoding="ISO-8859-1"?>
<popmuziek>
<nummer>
<titel>Me and Mrs. Jones</titel>
<artiest>Billy Paul</artiest>
</nummer>
<nummer>
<titel>Sexual Healing</titel>
<artiest>Marvin Gaye</artiest>
</nummer>
</popmuziek>

De eerste regel is de (verplichte) 'DTD' van het XML-bestand.

De inhoud van het bestand bestaat uit een lijstje van twee popnummers met de uitvoerende artiesten erbij. De data worden gestructureerd ingedeeld door gebruik te maken van de tags <titel></titel> en <artiest></artiest> die op hun beurt ingebed liggen in een tag <nummer></nummer>.

Het geheel aan informatie - thematisch ingedeeld door gebruik te maken van specifieke tags - wordt ingebed in de tag <popmuziek></popmuziek>.

Bovenstaand XML-bestand zou vervolgens met een CSS-stylesheet zijn opmaakvorm kunnen krijgen.

Om een CSS-opmaakbewerking te bewerkstelligen moet aan het XML-bestand de volgende regel die vlak onder de 'DTD' komt te staan, worden toegevoegd:

<?xml-stylesheet type="text/css" href="xml.css"?>

Opmerking 1. Het bestand 'xml.css' is de CSS-stylesheet die verbonden wordt aan het XML-bestand.

Opmerking 2. Het gebruik van CSS ('Cascading Style Sheet') in XML is een optie, maar XSL ('Extensible Stylesheet Language') is de beste optie al was het maar dat XSL-bestanden gewoonweg meer opmaakopties toelaten. Maar daarover vindt u verderop meer.

Opmerking 3. Zonder het CSS-bestand wordt de inhoud van het XML-bestand alleen als broncode weergegeven in de browser.

Het XML-bestand (verbonden met een CSS-opmaak) komt er dan als volgt uit te zien:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/css" href="xml.css"?>
<popmuziek>
<nummer>
<titel>Me and Mrs. Jones</titel>
<artiest>Billy Paul</artiest>
</nummer>
<nummer>
<titel>Sexual Healing</titel>
<artiest>Marvin Gaye</artiest>
</nummer>
</popmuziek>

Hier vindt u het XML-voorbeeld met CSS-opmaak: XML-webpagina met CSS-opmaak.

De ermee verbonden CSS-stylesheet heeft de volgende inhoud:

popmuziek {
      background-color: #f3f3f3;
      width: 100%;
}
nummer {
      display: block;
      margin-top: 2pt;
      margin-bottom: 5pt;
      margin-left: 10pt;
}
titel {
      display: block;
      color: #ff0000;
      font-size: 12pt;
}
artiest {
      display: block;
      color: #0000ff;
      font-size: 12pt;
}

Opmerking 4. Zo'n lijst met popsongs kan in het XML-bestand eindeloos worden uitgebreid.

XML - met voorbeeld 2

Hetzelfde XML-bestand kan ook via een andere methode worden opgemaakt, namelijk via een XSL-bestand. Dit is een soort template die de opmaakeigenschappen van een (X)HTML-bestand en CSS-stylesheet heeft.

Het XSL-bestand combineert de opmaak / weergave van de gegevens uit het XML-bestand met een weergave van begeleidende tekst (als uit een HTML-bestand) ervan.

Het XML-bestand (verbonden met een XSL-opmaak) komt er dan als volgt uit te zien:

<?xml version="1.0" encoding="ISO-8859-1"?>
<?xml-stylesheet type="text/xsl" href="xml.xsl"?>
<popmuziek>
<nummer>
<titel>Me and Mrs. Jones</titel>
<artiest>Billy Paul</artiest>
</nummer>
<nummer>
<titel>Sexual Healing</titel>
<artiest>Marvin Gaye</artiest>
</nummer>
</popmuziek>

Hier vindt u het XML-voorbeeld met XSL-opmaak: XML-webpagina met XSL-opmaak.

Het ermee verbonden XSL-bestand heeft de volgende inhoud:

<?xml version="1.0" encoding="ISO-8859-1"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

<xsl:template match="/">

<html>

<body>

<h4 style="color:#0000cc"><u>Mijn CD-collectie</u></h4>

<p style="color:#0000cc; font-size: 10pt">Dit is een overzicht met mijn favoriete nummers:</p>

<xsl:apply-templates/>

</body>

</html>

</xsl:template>

<xsl:template match="nummer">
<p>
<xsl:apply-templates select="titel"/>
<xsl:apply-templates select="artiest"/>
</p>
</xsl:template>

<xsl:template match="titel">
<span style="color:#333333; font-size: 9pt; font-weight: bold"><u>Titel</u></span>: <span style="color:#ff0000; font-size: 10pt; font-weight: bold">
<xsl:value-of select="."/></span>
<br />
</xsl:template>

<xsl:template match="artiest">
<span style="color:#333333; font-size: 9pt; font-weight: bold"><u>Artiest</u></span>: <span style="color:#006600; font-size: 10pt; font-weight: bold">
<xsl:value-of select="."/></span>
<br />
</xsl:template>

</xsl:stylesheet>

Opmerking 5. Het XSL-bestand is een combinatie van een HTML-sectie (met daarbinnen een BODY-sectie) en een XML-databank met in dit geval popsongs. De BODY-sectie en databank zijn beide in de XSL:TEMPLATE-sectie geplaatst.
Zowel de BODY-sectie als de databank gebruiken de opmaakeigenschappen zoals gebruikt in een CSS-stylesheet.

Opmerking 6. Zonder het XSL-bestand wordt de inhoud van het XML-bestand alleen als broncode weergegeven in de browser.

Opmerking 7. De tekst in de BODY-sectie is als de tekst in een (X)HTML-bestand; de popsongs die daaronder staan worden gegenereerd uit het XML-bestand.

Opmerking 8. De lijst met popsongs kan in het XML-bestand weer eindeloos worden uitgebreid.

XML / XSL(T) - met voorbeeld 1 en 2

Op de volgende pagina bevindt zich een XML-webpagina waarvan de opmaak door een XSL-bestand wordt verzorgd: Voorbeeld 1 van XML met XSL-opmaak.

Deze pagina bevat een overzicht met literatuur die als aanvulling op mijn cursussen informatica dient.

Dit overzicht is ook terug te vinden onder het item 'Boeken informatica' in 'menu Informatica 1'. De bron en representatie van de data aldaar zijn beide in (X)HTML; de representatie van het XML-voorbeeld hierboven is in XHTML, maar geschreven in XML en opgemaakt in XSL.

Op de volgende pagina bevindt zich een tweede XML-webpagina waarvan de opmaak nu echter door een XSLT-bestand wordt verzorgd: Voorbeeld 2 van XML met XSLT-opmaak (deze XML-pagina wordt alleen niet in Firefox correct weergegeven).

Beide XML-voorbeelden worden door een XSL(T)-bestand opgemaakt en worden door dezelfde XML-database gevoed. Beide voorbeelden geven daarom dezelfde informatie. In het tweede voorbeeld wordt de informatie echter in een tabel (met een andere achtergrondkleur dan in de hoofdpagina) weergegeven.

Door de opmaak via het XSL(T)-bestand wordt er op het XML-bestand een zogenaamde 'XSL Transformatie' uitgevoerd waardoor de informatie als in een XHTML-omgeving wordt opgeroepen.

XML / XSL(T) / javascript - met voorbeeld 3 en 4

Opmerking 9. Als er een fout wordt gemaakt in de (opmaak)broncode of als er een verkeerd symbool wordt gebruikt in XML-bestanden, dan wordt het XML-bestand niet meer correct geladen in de browser. In dat geval komt er een geel 'fouten'-scherm tevoorschijn dat vermeldt welke fout er is gemaakt; er staat dan bijvoorbeeld: 'XML-parsefout: ongedefinieerde entiteit Locatie: file:///c:/xml/voorbeeld.xml Regelnummer 10, kolom 28: ... ...'.
In tegenstelling tot XML worden HTML-bestanden - ondanks fouten in de (opmaak)broncode of bij het ontbreken ervan of bij het gebruik van verkeerde lettersymbolen - doorgaans goed weergegeven in de browser.

Op de volgende adressen vindt u verdere informatie over XML:
http://nl.wikipedia.org/wiki/Extensible_Markup_Language (Extensible Markup Language | Wikipedia), http://www.w3c.nl/Dutch/xml-nl-10punten.shtml (XML in 10 punten | 1. XML is om data te structureren, enzovoorts), http://www.w3.org/XML/ (Extensible Markup Language) en http://www.xs4all.nl/~werksman/webmees/xml.html (XML Introductie | De Webmees van Hans Werksman).

En op de volgende adressen vindt u informatie over XSL:
http://nl.wikipedia.org/wiki/XSL (Extensible Stylesheet Language), http://www.w3.org/Press/1998/XSL-WD.html.nl (W3C Publiceert Eerste Concept Versie XSL 1.0), http://www.genias.nl/XML/slides/XSL-presentation/ (XSL an introduction) en http://www.xs4all.nl/~werksman/webmees/xsl.html (XSL Introductie | De Webmees van Hans Werksman).

In het volgende voorbeeld is er sprake van 'XML parsing'. 'XML parsing' is een methode waarbij de data uit een XML-bestand via een Javascript worden opgeroepen in de BODY-sectie van een (X)HTML-pagina.

Op de volgende pagina bevindt zich een (X)HTML-webpagina met 'XML parsing':
Voorbeeld 3 van XML met 'XML parsing'.

Opmerking 10. 'XML parsing' functioneert in de browser Firefox niet altijd even goed. Het is een methode die toegespitst is op gebruik in Internet Explorer en blijkbaar in andersoortige browsers niet altijd goed hoeft te functioneren. In Safari en Opera werkt 'XML parsing' overigens wel goed al zijn dit ook browsers van een ander type dan IE.

Het volgende voorbeeld toont een XML-pagina die net als 'Voorbeeld 2 van XML' wordt opgemaakt via een XSLT-bestand.

De voorbeeldpagina verschilt wezenlijk van 'Voorbeeld 1 van XML' en 'Voorbeeld 2 van XML' hierin, dat in deze XSL-pagina de invoegtoepassingen binnen de BODY-sectie staan. Bij de andere twee staan ze eronder.

Op de volgende pagina bevindt zich de XML-pagina met invoegtoepassingen binnen de BODY-sectie in het XSLT-bestand: Voorbeeld 4 van XML met XSL-opmaak (deze XML-pagina wordt alleen niet in Firefox correct weergegeven).

Joost De WebMaker
2002-2024 © Joost van Meeteren
Laatste update website: donderdag 21 november 2024