Index
Einführung
Eine bedeutende Rolle spielen Stylesheets nicht nur in HTML Dokumenten sondern auch bei der Formatierung von XML Dateien. Bei XML (Extensible Markup Language) handelt es sich um eine Meta-Sprache, die zur Definition anderer Sprachen verwendet wird. Einem XML Dokument liegt lediglich eine logische Gliederung zugrunde, die keine Informationen über die Darstellung der Daten enthält. Die Verwendung von XML Dateien wird gerade im Bereich der asynchronen Datenübertragung zwischen Webserver und Browser immer wichtiger, findet jedoch auch in anderen Bereichen schon seit längerem statt.
Zur Formatierung von XML Dateien können Cascading Stylesheets (CSS) oder auch Extensible Stylesheets (XSL) verwendet werden. Ein weseltlicher Vorteil bei der Verwendung von XSL besteht darin, dass damit auch eine Filterung und Sortierung der XML Datei ermöglicht wird.
Zur Formatierung von XML Dateien können Cascading Stylesheets (CSS) oder auch Extensible Stylesheets (XSL) verwendet werden. Ein weseltlicher Vorteil bei der Verwendung von XSL besteht darin, dass damit auch eine Filterung und Sortierung der XML Datei ermöglicht wird.
Vorwort zu den Beispielen
Für die folgenden Beispiele, die ein Layout mit CSS bzw. XSL demonstrieren nehmen wir an, dass eine XML Datei der hier dargestellten Form vorhanden ist. Beachten Sie die rot gefärbte Zeile, die zum Einbinden der Styledatei verwendet wird.
Eine Ansicht der XML Datei (ohne eingebundenes Stylesheet) finden Sie hier.
<?xml version="1.0" encoding="iso8859-1"?>
<?xml-stylesheet type="text/css" href="style.css"?>
<mitarbeiter>
<eintrag>
<personalnr>356</personalnr>
<vorname>Manfred</vorname>
<nachname>Maier</nachname>
</eintrag>
<eintrag>
<personalnr>357</personalnr>
<vorname>Horst</vorname>
<nachname>Mueller</nachname>
</eintrag>
<eintrag>
<personalnr>358</personalnr>
<vorname>Hans</vorname>
<nachname>Mustermann</nachname>
</eintrag>
</mitarbeiter>
<?xml-stylesheet type="text/css" href="style.css"?>
<mitarbeiter>
<eintrag>
<personalnr>356</personalnr>
<vorname>Manfred</vorname>
<nachname>Maier</nachname>
</eintrag>
<eintrag>
<personalnr>357</personalnr>
<vorname>Horst</vorname>
<nachname>Mueller</nachname>
</eintrag>
<eintrag>
<personalnr>358</personalnr>
<vorname>Hans</vorname>
<nachname>Mustermann</nachname>
</eintrag>
</mitarbeiter>
Eine Ansicht der XML Datei (ohne eingebundenes Stylesheet) finden Sie hier.
Layout mit CSS
Wenn Sie bereits etwas Erfahrung in der Arbeit mit CSS haben, werden Sie sich schon denken können, wie die Anweisungen in der Styledatei aussehen müssen. Wie bei der Arbeit mit HTML beziehen sich die Anweisungen auf die Elementnamen der XML Datei. Der folgende Codeausschnitt zeigt eine mögliche Formatierung.
Eine Ansicht der XML Datei mit den hier aufgeführten CSS Anweisungen finden Sie hier.
mitarbeiter {
font-family: Verdana, Georgia, sans-serif;
font-size: 10px;
color: #000;
}
eintrag {
display: block;
margin: 8px;
padding: 4px;
width: 250px;
border: 1px solid #000;
}
personalnr {
font-weight: bold;
padding-left: 5px;
}
vorname {
padding-left: 10px;
}
font-family: Verdana, Georgia, sans-serif;
font-size: 10px;
color: #000;
}
eintrag {
display: block;
margin: 8px;
padding: 4px;
width: 250px;
border: 1px solid #000;
}
personalnr {
font-weight: bold;
padding-left: 5px;
}
vorname {
padding-left: 10px;
}
Eine Ansicht der XML Datei mit den hier aufgeführten CSS Anweisungen finden Sie hier.
Layout mit XSL
Das folgende Beispiel zeigt ein mögliches Layout unter Verwendung von Extensible Stylesheets. Auf eine Sortierung wird hier zur Vereinfachung vorerst verzichtet. Wie Sie erkennen können werden die Daten der XML Datei mithilfe von XSL in Form einer HTML Datei dargestellt. Das XSL Template öffnet zuerst eine Tabelle und gibt einen Tabellenkopf aus. Der rot gefärbte Teil wird für jeden Eintrag der XML Datei wiederholt.
Zu Beginn muss die Zeile <?xml-stylesheet type="text/css" href="style.css"?> in der XML Datei geändert werden. Ersetzen Sie einfach css (beim Typ und der Dateiendung) durch xsl.
Nun erstellen Sie eine xsl-Datei mit dem folgenden Aussehen
Eine Ansicht der XML Datei mit den hier aufgeführten XSL Anweisungen finden Sie hier.
Eine Befehlsreferenz zu XSL finden Sie auf der Webseite des W3C.
Zu Beginn muss die Zeile <?xml-stylesheet type="text/css" href="style.css"?> in der XML Datei geändert werden. Ersetzen Sie einfach css (beim Typ und der Dateiendung) durch xsl.
Nun erstellen Sie eine xsl-Datei mit dem folgenden Aussehen
<?xml version="1.0" encoding="iso8859-1"?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Mitarbeiter</title>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="1">
<tr>
<th>PersonalNr</th>
<th>Vorname</th>
<th>Nachname</th>
</tr>
<xsl:for-each select="mitarbeiter/eintrag">
<tr>
<td bgcolor="#cdcdcd">
<xsl:value-of select="personalnr" />
</td>
<td bgcolor="#dedede">
<xsl:value-of select="vorname" />
</td>
<td bgcolor="#dedede">
<xsl:value-of select="nachname" />
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:template match="/">
<html>
<head>
<title>Mitarbeiter</title>
</head>
<body>
<table border="1" cellpadding="2" cellspacing="1">
<tr>
<th>PersonalNr</th>
<th>Vorname</th>
<th>Nachname</th>
</tr>
<xsl:for-each select="mitarbeiter/eintrag">
<tr>
<td bgcolor="#cdcdcd">
<xsl:value-of select="personalnr" />
</td>
<td bgcolor="#dedede">
<xsl:value-of select="vorname" />
</td>
<td bgcolor="#dedede">
<xsl:value-of select="nachname" />
</td>
</tr>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Eine Ansicht der XML Datei mit den hier aufgeführten XSL Anweisungen finden Sie hier.
Eine Befehlsreferenz zu XSL finden Sie auf der Webseite des W3C.
Validation Info
Dieses Dokument entspricht den aktuellen HTML / CSS Standards.
