XML

Webseiten mit XML erstellen

Vorbemerkung

Wird eine Webseite in HTML geschrieben, werden mit den HTML-Tags sowohl der Inhalt (Text, Daten) als auch die Struktur der Darstellung dieser festgelegt (z.B. Überschrift, Absatz, Aufzählung, Tabellenzellen). Zu den HTML-Tags sind Formatangaben möglich. Ohne Formatierungsanweisungen verwendet der Webbrower Standardformate für die jeweiligen Elemente.

Im Gegensatz zu HTML werden bei der Verwendung von XML Inhalt und Darstellung konsequent getrennt. Der Inhalt der Webseite wird in einer XML-Datei erfasst. Die Darstellung (Struktur, Formatierung) wird mit einem CSS- oder XSLT-Stylesheet festgelegt, die im einfachsten Fall mit einer CSS- bzw. XSL-Datei bereitgestellt werden. Aus zwei Gründen bevorzuge ich XSL-Stylesheets:

Mit CSS ist nur die Darstellung von XML - so wie es ist - definierbar. Mit XSL-Stylesheets kann aus XML neues XML generiert werden, zusätzlich zu einer Datensammlung z.B. ein Inhaltsverzeichnis, s. Beispiel. Daneben können zusätzliche Angabe, wie z.B. Beschriftungen von Dateneingabefeldern eingefügt werden.
XSL selbst wird in XML geschrieben, CSS hat dagegen eine eigene Syntax.

Weder XML- noch XSL-Datei sind unmittelbar zur Darstellung bestimmt. Vielmehr wird im Ergebnis eines Transformationsprozesses aus XML-Daten und XSLT-Stylesheet HTML-Code generiert. Dieser wird von einem Webbrowser wie der HTML-Code einer statischen HTML-Seite dargestellt.

XML + XSLT = HTML

HTML

Beispiel einer einfachen HTML-Seite, HTML-Code:

<!-- Dateiname: htmlsample.html -->
<html>
   <head>
      <title>Beispiel HTML-Seite</title>
   </head>
   <body>
      <h1>Telefonverzeichnis</h1>
      <p>Meine Freunde</p>
      <table border="1">
         <tr>
            <th>Name</th>
            <th>Vorname</th>
            <th>Telefonnummer</th>
         </tr>
         <tr>
            <td>Sorglos</td>
            <td>Susi</td>
            <td>+49 123 123456</td>
         </tr>
         <tr>
            <td>Zufall</td>
            <td>Reiner</td>
            <td>+49 321 654321</td>
         </tr>
         <tr>
            <td>Mustermann</td>
            <td>Otto</td>
            <td>+49 789 789789</td>
         </tr>
      </table>
   </body>
</html>

HTML-Seite zeigen

XML

In einer XML-Datei werden nur Daten gespeichert. Die Benennung der Entities (Datenspeicherungseinheiten) legt der Ersteller selbst fest.

Beispiel einer einfachen XML-Datei:

<?xml version="1.0" ?>
<!-- Dateiname: xmlsample.xml -->
<Telefonverzeichnis>
   <Seitentitel>Beispiel XML-Seite</Seitentitel>
   <Ueberschrift>Telefonliste</Ueberschrift>
   <Zusatz>Meine Freunde</Zusatz>
   <Eintrag>
      <Name>Sorglos</Name>
      <Vorname>Susi</Vorname>
      <Telefonnummer>+49 123 123456</Telefonnummer>
   </Eintrag>
   <Eintrag>
      <Name>Zufall</Name>
      <Vorname>Reiner</Vorname>
      <Telefonnummer>+49 321 654321</Telefonnummer>
   </Eintrag>
   <Eintrag>
      <Name>Mustermann</Name>
      <Vorname>Otto</Vorname>
      <Telefonnummer>+49 789 789789</Telefonnummer>
   </Eintrag>
</Telefonverzeichnis>

XML-Seite zeigen

Ein Webbrower erhält mit solch einer XML-Datei keinerlei Information darüber, wie er die Daten zur Anzeige bringen soll. Ohne weitere Angaben können die Daten daher nur so dargestellt werden, wie sie in der XML-Datei gespeichert sind. Der Internet-Explorer prüft in diesem Fall, ob es sich um wohlgeformtes XML handelt und zeichnet die Dokumentelemente farbig aus, um deren Identifizierung zu vereinfachen. Sollte das Dokument nicht wohlgeformt sein, wird eine Fehlermeldung ausgegeben.

Wohlgeformtheit ist die Minimalanforderung für eine XML-Datei. Wohlgeformt sind XML-Dateien, die folgende Anforderungen erfüllen:

Auf der obersten Dokumentebene existiert nur ein einziges Element.
Elemente müssen korrekt verschachtelt werden. Ein Element muss immer in demselben Element enden, in dem es beginnt.
Jedes Element muss ein Start- als auch ein End-Tag besitzen oder als leeres Element gekennzeichnet werden.
Die Bezeichnung des Elements muss im Start- und Endtag übereinstimmen.
Bei den Namen der Elementtypen wird zwischen Groß- und Kleinschreibung unterschieden.

XSLT

Es gibt mehrere Möglichkeiten XML-Daten für die Darstellung in einem Webbrowser aufzubereiten. XSLT ist die modernste. Sie ist äußerst leistungsfähig. Im Gegensatz zu anderen XML-Formatierungsmöglichkeiten besteht XSL selbst auch aus XML-Tags.

Die Funktionsweise von XSLT kann man mit der Serienbrieffunktion von Textverarbeitungsprogrammen vergleichen. Das Stylesheet übernimmt dabei die Aufgabe des Serienbriefhauptdokuments, welches nur Platzhalter für die Datenfelder enthält. Die XML-Datei fungiert als Datenquelle.

Es folgt das Beispiel eines Stylesheet, welches die Daten der XML-Datei oben in eine Ausgabe transformiert, welche der HTML-Datei am Anfang weitgehend entspricht. Zur HTML-Datei oben weist die folgende XSL-Transformation jedoch zwei Unterschiede auf:

Für die Daten im Entitie Zusatz enthält das Stylesheet keine Anweisung. Diese Information wird deshalb nicht angzeigt.
Mit Hilfe des XSL-Element sort wird die Tabelle nach dem Datenfeld Name in aufsteigender Reihenfolge sortiert.

Um HTML-Tags besser von XSL-Elementen unterscheiden zu können, schreibe ich in XSL-Stylesheets HTML-Tags immer in Großbuchstaben und XSL-Elemente immer in Kleinbuchstaben.

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

<xsl:template match="Telefonverzeichnis">
   <HTML>
      <HEAD>
         <TITLE><xsl:value-of select="Seitentitel"/></TITLE>
      </HEAD>
      <BODY>
         <H1><xsl:apply-templates select="Ueberschrift" /></H1>
         <P><xsl:apply-templates select="Zusatz" /></P>
         <TABLE BORDER="1">
            <TR>
               <TH>Nachname</TH>
               <TH>Vorname</TH>
               <TH>Telefonnummer</TH>
            </TR>
            <xsl:apply-templates select="Eintrag">
               <xsl:sort select="Name" order="ascending" />
            </xsl:apply-templates>
         </TABLE>
      </BODY>
   </HTML>
</xsl:template>

<xsl:template match="Eintrag">
   <TR>
      <TD>
         <xsl:value-of select="Name" />
      </TD>
      <TD>
         <xsl:value-of select="Vorname" />
      </TD>
      <TD>
         <xsl:value-of select="Telefonnummer" />
      </TD>
   </TR>
</xsl:template>

</xsl:stylesheet>

XSL-Seite zeigen

XSL-Transformation

Wie kommt es nun dazu, dass die Daten der XML-Datei mit dem Stylesheet zusammengeführt und die Anweisungen des Stylesheet ausgeführt werden? Die Transformation kann entweder durch ein Script oder durch eine statische Anweisung in der XML-Datei bewirkt werden. Zunächst soll die letztere Variante vorgestellt werden: In der XML-Datei ist vor dem Dokumentelement (Rootelement) die Verarbeitungsanweisung (Processing Instruction) xml-stylesheet einzufügen, die dem Browser das Stylesheet bezeichnet, welches für die Darstellung der XML-Daten zu verwenden ist. Code-Fragment:

<?xml version="1.0" ?>
<!-- Dateiname: xmlsampletable.xml -->
<?xml-stylesheet type="text/xsl" href="xmlsampletable.xsl" charset="ISO-8859-1"?>

<xsl:template match="Telefonverzeichnis">
...

XML-Seite zeigen

In dem folgenden, zweiten Beispiel werden die gleichen Daten durch das Stylesheet nicht zu einer Ausgabe in Tabellen- sondern in Listenform transformiert. Diesmal werden die Daten nach dem Datenfeld Name nicht in auf- sondern in absteigendender Folge sortiert. Auch in diesem Stylesheet gibt es keine Anweisung für das Datenfeld Zusatz:

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

<xsl:template match="Telefonverzeichnis">
   <HTML>
      <HEAD>
         <TITLE><xsl:value-of select="Seitentitel" /></TITLE>
      </HEAD>
      <BODY>
         <H1><xsl:apply-templates select="Ueberschrift" /></H1>
         <xsl:apply-templates select="Eintrag">
            <xsl:sort select="Name" order="descending" />
         </xsl:apply-templates>
      </BODY>
   </HTML>
</xsl:template>

<xsl:template match="Eintrag">
   <P>
      <DIV>
         <STRONG>Nachname: </STRONG><xsl:value-of select="Name" />
      </DIV>
      <DIV>
         <STRONG>Vorname: </STRONG><xsl:value-of select="Vorname" />
      </DIV>
      <DIV>
         <STRONG>Tel.-Nr: </STRONG><xsl:value-of select="Telefonnummer" />
      </DIV>
   </P>
</xsl:template>

</xsl:stylesheet>

XSL-Seite zeigen

Damit dieses Stylesheet auf die XML-Daten angewendet wird, muss die Verarbeitungsanweisung für das Stylesheet entsprechend geändert werden. Code-Fragment:

<?xml version="1.0" ?>
<!-- Dateiname: xmlsamplelist.xml -->
<?xml-stylesheet type="text/xsl" href="xmlsamplelist.xsl" charset="ISO-8859-1"?>

<xsl:template match="Telefonverzeichnis">
...

XML-Seite zeigen