XML en XSLT

With XSLT, you can convert XML documents to HTML.

Display XML using XSLT

XSLT(Extensible Stylesheet Language Transformations) is the recommended XML stylesheet language.

XSLT is much more complex than CSS. With XSLT, you can add/remove elements and attributes from the output file. You can also rearrange and sort elements, perform tests, and decide which elements to hide or display, etc.

XSLT uses XPath to find information in XML documents.

XSLT voorbeeld

We will use the following XML document:

<?xml version="1.0" encoding="UTF-8"?>
<breakfast_menu>
<food>
<name>Belgian Waffles</name>
<price>$5.95</price>
<description>Two of our famous Belgian Waffles with plenty of real maple syrup</description>
<calories>650</calories>
</food>
<food>
<name>Strawberry Belgian Waffles</name>
<price>$7.95</price>
<description>Light Belgian waffles covered with strawberries and whipped cream</description>
<calories>900</calories>
</food>
<food>
<name>Berry-Berry Belgian Waffles</name>
<price>$8.95</price>
<description>Light Belgian waffles covered with an assortment of fresh berries and whipped cream</description>
<calories>900</calories>
</food>
<food>
<name>French Toast</name>
<price>4,50 $</price>
<description Dikke sneetjes gemaakt van ons zelfgemaakte zure deegbrood</description>
<calories>600</calories>
</food>
<food>
<name Homestyle ontbijt</name>
<price>6,95 $</price>
<description Twee eieren, bacon of worst, toast en onze altijd populaire hash browns</description>
<calories>950</calories>
</food>
</breakfast_menu>

Voor het weergeven in de browser, conversie van XML naar HTML met XSLT uitvoeren:

Voorbeeld van XSLT-stijl:

<?xml version="1.0" encoding="UTF-8"?>
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<body style="font-family:Arial;font-size:12pt;background-color:#EEEEEE">
<xsl:for-each select="breakfast_menu/food">
  <div style="background-color:teal;color:white;padding:4px">
    <span style="font-weight:bold"><xsl:value-of select="name"/> - </span>
    <xsl:value-of select="price"/>
    </div>
  <div style="margin-left:20px;margin-bottom:1em;font-size:10pt">
    <p>
    <xsl:value-of select="description"/>
    <span style="font-style:italic">(calories per serving)</span>
    </p>
  </div>
</xsl:for-each>
</body>
</html>

Probeer het zelf

XSLT Handleiding

Als je meer wilt weten over XSLT, bezoek dan onze XSLT Handleiding.