PyroActive Webdesign Community
Bannertausch

Einführung in XSLT

Anhand eines konkreten Beispiels soll gezeigt werden, wie man mit Hilfe von XSL ein XML-Dokument in eine andere, für Menschen besser lesbare Form umgewandelt werden kann. Das Ergebnis wird ein Rezept für Bananenkuchen sein.

Zunächst einmal schauen wir uns das XML-Dokument an, in dem das Rezept 'versteckt' ist:

<?xml version="1.0" encoding="iso-8859-1"?>
<?xml-stylesheet href="default.xsl" type="text/xsl"?>
<rezept>
  <titel>Bananenkuchen</titel>
  <zutaten>
    <zutat menge="500 g">Mehl</zutat>
    <zutat menge="400 g">Bananennektar</zutat>
    <zutat menge="1 Pk.">Backpulver</zutat>
    <zutat menge="50 g">Zucker</zutat>
    <zutat>Salz</zutat>
    <zutat menge="25 g">Rosinen</zutat>
    <zutat menge="25 g">Schokoladenstreusel</zutat>
    <zutat menge="1 bis 2"
      link="http://www.bananen-seite.de/">Bananen</zutat>
    <zutat>Brauner Zucker</zutat>
  </zutaten>
  <zubereitung>
    Mehl und Backpulver mischen, sieben. Mit Zucker, Salz
    und Saft zu einem Teig verarbeiten. Bananen schälen,
    in kleine Stücke schneiden. Rosinen, Schokostreusel
    und Bananenstücke in den Teig geben. In eine
    Auflaufform geben, mit braunem Zucker bestreuen.
  </zubereitung>
  <zubereitung>
    40 Minuten bei 180° C Umluft backen.
  </zubereitung>
</rezept>
  

In dieser Form kann man das Rezept schon recht gut bearbeiten, wenn der Browser es jedoch ohne jegliche Transformation durch XSLT darstellen möchte, ist das Ergebnis wenig zufriedenstellend:

So gefällt XML garnicht

Das ist so natürlich für den Besucher der eigenen Site keine Freude. Was wir eigentlich wollen ist ja ein HTML-Dokument der Seite, und genau da kommt XSL - genauer: XSLT, der Teilbereich von XSL, der die Umwandlung des Dokuments beschreibt - ins Spiel. Die im Beispiel verwendete default.xsl:

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

  <xsl:template match="rezept">
    <html>
      <head>
        <title><xsl:value-of select="titel" /></title>
        <link rel="stylesheet" href="default.css" />
      </head>
      <body>
        <h1><xsl:value-of select="titel" /></h1>
        <xsl:apply-templates select="zutaten" />
        <h2>Zubereitung</h2>
        <ul>
          <xsl:for-each select="zubereitung">
            <li><xsl:value-of select="." /></li>
          </xsl:for-each>
        </ul>
      </body>
    </html>
  </xsl:template>

  <xsl:template match="zutaten">
    <p>
      <h2>Zutaten</h2>
      <xsl:element name="a">
        <xsl:attribute name="href"><xsl:value-of
          select="link" /></xsl:attribute>
        <xsl:attribute name="target">_blank</xsl:attribute>
        <xsl:value-of select="title" />
      </xsl:element>
      <xsl:apply-templates select="zutat" />
    </p>
  </xsl:template>

  <xsl:template match="zutat">
    <xsl:value-of select="@menge" />
    <xsl:text> </xsl:text>
    <xsl:choose>
      <xsl:when test="@link">
        <xsl:element name="a">
          <xsl:attribute name="href">
            <xsl:value-of select="@link" />
          </xsl:attribute>
          <xsl:value-of select="." />
        </xsl:element>
      </xsl:when>
      <xsl:otherwise>
        <xsl:value-of select="." />
      </xsl:otherwise>
    </xsl:choose>
    <br/>
  </xsl:template>

</xsl:stylesheet>
  

Nun sieht die Sache für den Betrachter der Site schon viel angenehmer aus:

So sollte ein Rezept aussehen

Einige Erläterungen zu XSLT: Unterhalb von <xsl:stylesheet> werden alle Elemente die nicht im Namensraum von XSLT liegen (also mit "xsl:" anfangen) einfach ausgegeben. Die eigentliche Transformation beruht auf Templates, die durch <xsl:template match="item">hier muss was hin</xsl:template> definiert werden. Immer wenn im XML-Dokument nun ein Node mit dem Namen item auftaucht wird dieses Element (mitsamt aller Unterelemente) durch "hier muss was hin" ersetzt.

Nun wollen wir aber nicht immer feste Texte an die Stelle bestimmter Elemente schreiben, sondern deren Inhalt verwenden. Dies geht mit <xsl:value-of select="Pfad" />. Der zu verwendende Pfad hägt davon ab, durch was man ersetzen möchte:

PfadBezieht sich auf
.Textinhalt des Elements
anschriftTextinhalt des Unterelements "anschrift"
@linkInhalt des Attributs "link"

Sollen auch auf die Unterelemente noch Templates angewendet werden, so gibt man dies durch <xsl:apply-templates /> an. Durch den Parameter select="item" wird das Anwenden der Templates auf Unterelemente mit dem Namen item beschränkt.

Der Vollständigkeit halber auch das verwendete Stylesheet:

body {
  font-size: 12pt;
  font-family: courier;
  margin: 1em;
  background: #FFFFEF;
}

a {
  text-decoration: underline;
  color: #0000C0;
}

h1, h2 {
  margin: 0;
  margin-bottom: 4pt;
}
  

Impressum | Erklärung zum Datenschutz | Inhalt morsen

Die Community:
1187798 Besucher
8897 Mitglieder






Noch kein Mitglied? Jetzt kostenlos anmelden!