XML und XSLT

XML und XSL mit Webseiten verwenden

Extensible Markup Language (XML) ist eine Sprache, mit der du Informationen strukturieren kannst. Wie HTML ermöglicht XML dir, deine Informationen mithilfe von Tags zu strukturieren, aber XML-Tags sind nicht vordefiniert wie HTML-Tags. Stattdessen kannst du mit XML Tags erstellen, die deine Datenstruktur (Schema) am besten definieren. Tags sind in anderen verschachtelt, um ein Schema von übergeordneten und untergeordneten Tags zu erstellen. Wie die meisten HTML-Tags haben alle Tags in einem XML-Schema ein öffnendes und ein schließendes Tag.

Im folgenden Beispiel wird die allgemeine Struktur einer XML-Datei illustriert:

<?xml version="1.0">

<mybooks>

<book bookid="1">

<pubdate>03/01/2004</pubdate>

<title>Anzeigen von XML-Daten mit Adobe Dreamweaver</title>

<author>Charles Brown</author>

</book>

<book bookid="2">

<pubdate>04/08/2004</pubdate>

<title>XML verstehen</title>

<author>John Thompson</author>

</book>

</mybooks>

In diesem Beispiel enthält jedes übergeordnete <book>-Tag drei untergeordnete Tags: <pubdate>, <title> und <author>. Aber jedes <book>-Tag ist auch ein untergeordnetes Tag des <mybooks>-Tags, das eine Ebene höher im Schema steht. Du kannst XML-Tags beliebig benennen und strukturieren, vorausgesetzt, dass du Tags entsprechend in anderen verschachtelst und jedem öffnenden Tag ein entsprechendes schließendes Tag zuweist.

XML-Dokumente enthalten keine Formatierung—sie sind einfach Container für strukturierte Informationen. Sobald du ein XML-Schema hast, kannst du die Extensible Stylesheet Language (XSL) verwenden, um die Informationen anzuzeigen. So wie Cascading Style Sheets (CSS) dir ermöglichen, HTML zu formatieren, kannst du mit XSL XML-Daten formatieren. Du kannst Stile, Seitenelemente, Layout und so weiter in einer XSL-Datei definieren und sie an eine XML-Datei anhängen, sodass wenn ein Benutzer die XML-Daten in einem Browser anzeigt, die Daten entsprechend dem formatiert werden, was du in der XSL-Datei definiert hast. Der Inhalt (die XML-Daten) und die Darstellung (definiert durch die XSL-Datei) sind vollständig getrennt, was dir eine bessere Kontrolle darüber gibt, wie deine Informationen auf einer Web-Seite erscheinen.Im Wesentlichen\nist XSL eine Präsentationstechnologie für XML, bei der die primäre Ausgabe\neine HTML-Seite ist.

"Extensible\nStylesheet Language Transformations (XSLT) ist eine Teilmenge-Sprache\nvon XSL, die es dir tatsächlich ermöglicht, XML-Daten auf einer Web-Seite anzuzeigen und\nsie zusammen mit XSL-Stilen in lesbare, gestaltete Informationen\nin Form von HTML zu „transformieren".Du kannst Dreamweaver verwenden, um XSLT-Seiten zu erstellen, mit denen du XSL-Transformationen mithilfe eines Anwendungsservers oder eines Browsers durchführen kannst. Bei einer Server-seitigen XSL-Transformation erledigt der Server die Arbeit der XML- und XSL-Transformation und zeigt sie auf der Seite an. Bei einer Client-seitigen Transformation erledigt ein Browser (wie der Internet Explorer) die Arbeit.

Der Ansatz, den du letztendlich wählst (Server-seitige Transformationen vs. Client-seitige Transformationen), hängt davon ab, was du als Endergebnis erreichen möchtest, welche Technologien dir zur Verfügung stehen, welchen Zugriff du auf XML-Quelldateien hast und anderen Faktoren. Beide Ansätze haben sowohl Vor- als auch Nachteile. Zum Beispiel funktionieren Server-seitige Transformationen in allen Browsern, während Client-seitige Transformationen nur auf moderne Browser beschränkt sind (Internet Explorer 6, Netscape 8, Mozilla 1.8 und Firefox 1.0.2). Server-seitige Transformationen ermöglichen es dir, XML-Daten dynamisch von deinem eigenen Server oder von überall sonst im Web anzuzeigen, während Client-seitige Transformationen XML-Daten verwenden müssen, die lokal auf deinem eigenen Webserver gehostet sind. Schließlich erfordern serverseitige Transformationen, dass du deine Seiten auf einem konfigurierten Anwendungs-Server bereitstellst, während clientseitige Transformationen nur Zugriff auf einen Webserver erfordern.

Ein Tutorial zu den Grundlagen von XML finden Sie unter www.adobe.com/go/vid0165.

Serverseitige XSL-Transformationen

Dreamweaver bietet Methoden zum Erstellen von XSLT-Seiten, mit denen du Server-seitige XSL-Transformationen durchführen kannst. Wenn ein Anwendungsserver die XSL-Transformation durchführt, kann die Datei mit den XML-Daten auf deinem eigenen Server oder überall sonst im Web liegen. Zusätzlich kann jeder Browser die transformierten Daten anzeigen. Das Bereitstellen von Seiten für Server-seitige Transformationen ist jedoch etwas komplex und erfordert, dass du Zugriff auf einen Anwendungs-Server hast.

Beim Arbeiten mit Server-seitigen XSL-Transformationen kannst du Dreamweaver verwenden, um XSLT-Seiten zu erstellen, die vollständige HTML-Dokumente generieren (ganze XSLT-Seiten), oder XSLT-Fragmente, die einen Teil eines HTML-Dokuments generieren. Eine ganze XSLT-Seite ist ähnlich wie eine normale HTML-Seite. Sie enthält einen <body>-Tag und einen <head>-Tag und ermöglicht es dir, eine Kombination aus HTML- und XML-Daten auf der Seite anzuzeigen. Ein XSLT-Fragment ist ein Code-Stück, das von einem separaten Dokument verwendet wird und formatierte XML-Daten anzeigt. Anders als eine ganze XSLT-Seite ist es eine unabhängige Datei, die keinen <body>- oder <head>-Tag enthält. Wenn du XML-Daten auf einer eigenen Seite anzeigen möchtest, würdest du eine ganze XSLT-Seite erstellen und deine XML-Daten damit verknüpfen. Wenn du andererseits XML-Daten in einem bestimmten Bereich einer vorhandenen dynamischen Seite anzeigen möchtest – zum Beispiel eine dynamische Homepage für einen Sportartikel-Webstore mit Sportergebnissen aus einem RSS-Feed, die auf einer Seite der Seite angezeigt werden – würdest du ein XSLT-Fragment erstellen und einen Verweis darauf in die dynamische Seite einfügen. Das Erstellen von XSLT-Fragmenten und deren Verwendung in Verbindung mit anderen dynamischen Seiten zur Anzeige von XML-Daten ist das häufigere Szenario.

Der erste Schritt beim Erstellen dieser Arten von Seiten ist die Erstellung des XSLT-Fragments.Es ist eine separate Datei, die das Layout, die Formatierung und so weiter der XML-Daten enthält, die du schließlich in der dynamischen Seite anzeigen möchtest. Sobald du das XSLT-Fragment erstellt hast, fügst du einen Verweis darauf in deine dynamische Seite ein (zum Beispiel eine PHP- oder ColdFusion- Seite). Die eingefügte Referenz auf das Fragment funktioniert ähnlich wie ein Server Side Include (SSI) — die formatierten XML-Daten (das Fragment) befinden sich in einer separaten Datei, während in der Entwurfsansicht ein Platzhalter für das Fragment auf der dynamischen Seite selbst erscheint. Wenn ein Browser die dynamische Seite mit der Referenz auf das Fragment anfordert, verarbeitet der Server die Include-Anweisung und erstellt ein neues dokument, in dem die formatierten Inhalte des Fragments anstelle des Platzhalters erscheinen.

Du verwendest das XSL-Transformation-Serververhalten, um die Referenz auf ein XSLT-Fragment in eine dynamische Seite einzufügen.Wenn du die Referenz einfügst, generiert Dreamweaver einen includes/MM_XSLTransform/ Ordner im Stammordner der Bereich, der eine Laufzeitbibliothek- Datei enthält. Der Anwendungsserver verwendet die in dieser Datei definierten Funktionen beim Transformieren der angegebenen XML-Daten. Die Datei ist dafür verantwortlich, die XML-Daten und XSLT-Fragmente abzurufen, die XSL-Transformation durchzuführen und die Ergebnisse auf der Web-Seite auszugeben.

Die Datei mit dem XSLT-Fragment, die XML-Datei mit deinen Daten und die generierte Laufzeitbibliothek-Datei müssen sich alle auf dem Server befinden, damit deine Seite korrekt angezeigt wird. (Wenn du eine entfernte XML-Datei als deine Datenquelle auswählst — eine aus einem RSS-Feed zum Beispiel — muss sich diese Datei natürlich irgendwo anders im Internet befinden.)

Du kannst auch Dreamweaver verwenden, um vollständige XSLT-Seiten für die Verwendung mit serverseitigen Transformationen zu erstellen.Eine vollständige XSLT-Seite funktioniert genauso wie ein XSLT-Fragment, nur wenn du die Referenz auf die vollständige XSLT-Seite mit dem XSL Transformation Server-Verhalten einfügst, fügst du den vollständigen Inhalt einer HTML-Seite ein. Daher muss die dynamische Seite (die .cfm-, .php- oder .asp-Seite, die als Container-Seite fungiert) von allem HTML geleert werden, bevor du die Referenz einfügst.

Dreamweaver unterstützt XSL-Transformationen für ColdFusion-, ASP- und PHP-Seiten.

Clientseitige XSL-Transformationen

XSL-Transformationen können auch ohne Nutzung eines Anwendungsservers vom Client durchgeführt werden. Mit Dreamweaver können Sie eine ganze XSLT-Seite erstellen, die diese Transformation durchführt. Bei clientseitigen Transformationen muss jedoch die XML-Datei mit den anzuzeigenden Daten geändert werden. Zudem sind clientseitige Transformationen nur in modernen Browsern (Internet Explorer 6, Netscape 8, Mozilla 1.8 und Firefox 1.0.2) möglich. 

Als Erstes erstellen Sie eine ganze XSLT-Seite und hängen eine XML-Datenquelle an. (Dreamweaver fordert Sie beim Erstellen der neuen Seite auf, die Datenquelle anzuhängen.) Sie können eine XSLT-Seite von Grund auf neu erstellen oder eine vorhandene HTML-Seite in eine XSLT-Seite konvertieren. Wenn Sie sich für die zweite Methode entscheiden, müssen Sie mit dem Bedienfeld „Bindungen“ („Fenster“ > „Bindungen“) eine XML-Datenquelle anhängen.

Nachdem Sie die XSLT-Seite erstellt haben, müssen Sie sie mit der XML-Datei verknüpfen, die die XML-Daten enthält. Dazu müssen Sie einen Verweis auf die XSLT-Seite in die XML-Datei selbst einfügen (und dabei ähnlich vorgehen wie beim Einfügen eines Verweises auf ein externes CSS-Stylesheet in den <head>-Bereich einer HTML-Seite). Die Besucher der Website müssen die XML-Datei (und nicht die XSLT-Seite) in einem Browser anzeigen. Wenn Besucher die Seite anzeigen, führt der Browser die XLS-Transformation durch und zeigt die XML-Daten an, die von der verknüpften XSLT-Seite formatiert werden.

Die Beziehung zwischen den verknüpften XSLT- und XML-Seiten ist konzeptionell gesehen ähnlich, unterscheidet sich jedoch von dem Modell, bei dem externe CSS-Stylesheets auf HTML-Seiten verwendet werden. Wenn eine HTML-Seite vorliegt, die Inhalt (z. B. Text) enthält, wird dieser Inhalt mithilfe eines externen Stylesheets formatiert. Die HTML-Seite bestimmt den Inhalt und der externe CSS-Code, den der Benutzer nie zu Gesicht bekommt, bestimmt die Präsentation. Bei XSLT und XML ist es umgekehrt. Die XML-Datei (die der Benutzer nie in ihrer Grundform sieht) bestimmt den Inhalt, während die XSLT-Seite für die Präsentation verantwortlich ist. Die XSLT-Seite enthält die Tabellen, das Layout, die Grafiken usw., die die Standard-HTML-Daten normalerweise enthalten. Wenn ein Benutzer die XML-Datei in einem Browser anzeigt, wird der Inhalt von der XSLT-Seite formatiert.

Wenn du Dreamweaver verwendest, um eine XSLT- Seite mit einer XML-Seite zu verknüpfen, fügt Dreamweaver den entsprechenden Code für dich am Anfang der XML-Seite ein. Wenn du die XML-Seite besitzt, mit der du verknüpfst (das heißt, wenn sich die XML-Datei ausschließlich auf deinem Web-Server befindet), musst du nur Dreamweaver verwenden, um den entsprechenden Code einzufügen, der die beiden Seiten verknüpft. Wenn du die XML-Datei besitzt, sind die XSL-Transformationen, die vom Client durchgeführt werden, vollständig dynamisch. Das bedeutet, wann immer du die Daten in der XML-Datei aktualisierst, wird jede HTML-Ausgabe, die die verknüpfte XSLT-Seite verwendet, automatisch mit den neuen Informationen aktualisiert.

Wenn du die XML-Seite nicht besitzt, mit der du verknüpfst (zum Beispiel, wenn du XML-Daten aus einem RSS-Feed irgendwo im Web verwenden möchtest), ist der Workflow etwas komplizierter. Um Client-seitige Transformationen mit XML-Daten aus einer externen Quelle durchzuführen, musst du zuerst die XML-Quelldatei in dasselbe Verzeichnis herunterladen, in dem sich deine XSLT-Seite befindet. Wenn sich die XML-Seite in deinem lokalen Bereich befindet, kannst du Dreamweaver verwenden, um den entsprechenden Code hinzuzufügen, der sie mit der XSLT-Seite verknüpft, und beide Seiten (die heruntergeladene XML-Datei und die verknüpfte XSLT-Seite) auf deinen Web-Server hochladen. Wenn der Benutzer die XML-Seite in einem Browser anzeigt, formatiert die XSLT-Seite den Inhalt, genau wie im vorherigen Beispiel.

Der Nachteil bei der Durchführung Client-seitiger XSL-Transformationen\nbei XML-Daten, die aus einer externen Quelle stammen, besteht darin, dass die XML-Daten\nnur teilweise „dynamisch" sind. Die XML-Datei, die du herunterlädst und\nänderst, ist lediglich ein „Snapshot" der Datei, die anderswo im\nWeb liegt.Wenn sich die ursprüngliche XML-Datei im Web ändert, musst du\ndie Datei erneut herunterladen, sie mit der XSLT-Seite verknüpfen und die\nXML-Datei erneut auf deinen Webserver laden.Der Browser rendert nur die Daten, die\ner von der XML-Datei auf deinem Webserver erhält, nicht die Daten aus\nder ursprünglichen XML-Quelle.

XML-Daten und wiederholte Elemente

Das\nRepeating Region XSLT-Objekt ermöglicht es dir, wiederholende Elemente\naus einer XML-Datei innerhalb einer Seite anzuzeigen.Jede Region, die einen XML-Daten-Platzhalter enthält, kann in eine wiederholende Region umgewandelt werden.Die häufigsten\nRegionen sind jedoch eine Tabelle, eine Tabellenzeile oder eine Reihe von Tabellenzeilen.

Das folgende Beispiel zeigt, wie das Wiederholungsbereich-XSLT-Objekt auf eine Tabellenzeile angewendet wird, die Menü-Informationen für ein Restaurant anzeigt.Die erste Zeile zeigt drei verschiedene Elemente aus dem XML-Schema: item, description und price. Wenn das Repeating Region XSLT-Objekt auf die Tabellenzeile angewendet wird und die Seite von einer Anwendung oder einem Browser verarbeitet wird, wird die Tabelle mit eindeutigen Daten wiederholt, die in jede neue Tabellenzeile eingefügt werden.

Wenn du ein sich wiederholendes Region-XSLT-Objekt auf ein Element im Dokumentfenster anwendest, erscheint eine dünne, mit Registerkarten versehene, graue Kontur um die sich wiederholende Region.Wenn du deine Arbeit in einem Browser testest (Datei > Vorschau im Browser), verschwindet die graue Kontur und die Auswahl erweitert sich, um die angegebenen sich wiederholenden Elemente in der XML-Datei anzuzeigen, wie in der vorherigen Illustration.

Wenn du das sich wiederholende Region-XSLT-Objekt zur Seite hinzufügst, wird die Länge des XML-Daten-Platzhalters im Dokumentfenster abgeschnitten.Das liegt daran, dass Dreamweaver den XPath (XML Path Language)-Ausdruck für den XML-Datenplatzhalter aktualisiert, sodass er relativ zum Pfad des sich wiederholenden Elements ist.

Der folgende Code ist beispielsweise für eine Tabelle, die zwei dynamische Platzhalter enthält, ohne dass ein Repeating Region XSLT-Objekt auf die Tabelle angewendet wurde:

<table width="500" border="1">

    <tr> 

<td><xsl:value-of select="rss/channel/item/title"/></td>

    </tr> 

    <tr> 

<td><xsl:value-of select="rss/channel/item/description"/></td>

    </tr> 

</table>

Der folgende Code ist für dieselbe Tabelle mit dem angewendeten Repeating Region XSLT-Objekt:

<xsl:for-each select="rss/channel/item">

<table width="500" border="1">

        <tr> 

<td><xsl:value-of select="title"/></td>

        </tr> 

        <tr> 

<td><xsl:value-of select="description"/></td>

        </tr> 

    </table> 

</xsl:for-each>

Im vorherigen Beispiel hat Dreamweaver den XPath für die Elemente, die in die Repeating Region fallen (title & description), aktualisiert, um relativ zum XPath in den umschließenden <xsl:for-each>-Tags zu sein, anstatt zum vollständigen dokument.

Dreamweaver generiert kontextrelative XPath-Ausdrücke auch in anderen Fällen.Wenn du beispielsweise einen XML-Datenplatzhalter auf eine Tabelle ziehst, auf die bereits ein Wiederholungsbereich-XSLT-Objekt angewendet wurde, zeigt Dreamweaver automatisch den XPath relativ zum vorhandenen XPath in den umgebenden <xsl:for-each>-Tags an.

Vorschau der XML-Daten anzeigen

Wenn du Vorschau im Browser (Datei > Vorschau im Browser) verwendest, um XML-Daten anzuzeigen, die du in ein XSLT-Fragment oder eine vollständige XSLT-Seite eingefügt hast, unterscheidet sich die Engine, die die XSL-Transformation durchführt, je nach Situation.Bei dynamischen Seiten mit XSLT-Fragmenten führt der Anwendungsserver immer die Transformation durch.Zu anderen Zeiten führen möglicherweise Dreamweaver oder der Browser die Transformation durch.

Die folgende Tabelle fasst die Situationen bei der Verwendung von Vorschau im Browser und die Engines zusammen, die die jeweiligen Transformationen durchführen:

Die folgenden Themen bieten Richtlinien, die dir dabei helfen, die geeigneten Vorschaumethoden basierend auf deinen Anforderungen zu bestimmen.

Vorschau von Seiten für serverseitige Transformationen anzeigen

Bei Server-seitigen Transformationen wird der Inhalt, den der Site-Besucher letztendlich sieht, von deinem Anwendungsserver transformiert.Beim Aufbau von XSLT- und dynamischen Seiten für die Verwendung mit Server-seitigen Transformationen ist es immer vorzuziehen, eine Vorschau der dynamischen Seite anzuzeigen, die das XSLT-Fragment enthält, anstatt des XSLT-Fragments selbst.Im ersten Szenario nutzt du den Anwendungsserver, wodurch sichergestellt wird, dass deine Vorschau mit dem übereinstimmt, was deine Site-Besucher sehen werden, wenn sie deine Seite besuchen.Im letzteren Szenario führt Dreamweaver die Transformation durch und könnte leicht uneinheitliche Ergebnisse liefern.Du kannst Dreamweaver verwenden, um eine Vorschau deines XSLT-Fragments während der Erstellung anzuzeigen, aber du wirst die genauesten Ergebnisse des Daten-Renderns sehen, wenn du den Anwendungsserver verwendest, um eine Vorschau deiner dynamischen Seite anzuzeigen, nachdem du das XSLT-Fragment eingefügt hast.

Vorschau von Seiten für clientseitige Transformationen anzeigen

Bei Client-seitigen Transformationen wird der Inhalt, den der Site-Besucher letztendlich sieht, von einem Browser transformiert.Du erreichst dies, indem du einen Link von der XML-Datei zur XSLT-Seite hinzufügst.Wenn du die XML-Datei in Dreamweaver öffnest und eine Vorschau in einem Browser anzeigst, zwingst du den Browser, die XML-Datei zu laden und die Transformation durchzuführen.Dies bietet dir dasselbe Erlebnis wie das deiner Site-Besucher.

Die Verwendung dieses Ansatzes macht es jedoch schwieriger, deine Seite zu debuggen, da der Browser das XML transformiert und das HTML intern generiert.Wenn du die Option Quelle anzeigen des Browsers auswählst, um das generierte HTML zu debuggen, siehst du nur das ursprüngliche XML, das der Browser erhalten hat, nicht das vollständige HTML (Tags, Stile und so weiter), das für das Rendern der Seite verantwortlich ist.Um das vollständige HTML beim Anzeigen des Quellcodes zu sehen, musst du stattdessen eine Vorschau der XSLT-Seite in einem Browser anzeigen.

Vorschau der XSLT-Seiten und -Fragmente anzeigen

Beim Erstellen vollständiger XSLT-Seiten und XSLT-Fragmente möchtest du eine Vorschau deiner Arbeit anzeigen, um sicherzustellen, dass deine Daten korrekt angezeigt werden.Wenn du Vorschau im Browser verwendest, um eine vollständige XSLT-Seite oder ein XSLT-Fragment anzuzeigen, führt Dreamweaver die Transformation mithilfe einer integrierten Transformations-Engine durch.Diese Methode liefert dir schnelle Ergebnisse und macht es einfacher für dich, deine Seite schrittweise aufzubauen und zu debuggen.Sie bietet auch eine Möglichkeit für dich, das vollständige HTML (Tags, Stile und so weiter) anzuzeigen, indem du die Option Quelle anzeigen im Browser auswählst.

Ähnliche Themen

• XML-Tutorial
• XSL-Transformation auf dem Server durchführen
• XSL-Transformation auf dem Client durchführen
• Wiederholte XML-Elemente anzeigen