Advertisement
  1. Code
  2. HTML & CSS

Erste Schritte mit XSL(T)

Scroll to top
Read Time: 10 mins

German (Deutsch) translation by Federicco Ancie (you can also view the original English article)

In diesem Tutorial werden wir in die Welt von XSL(T) eintauchen und erklären, was es ist, wie Daten aus einem XML-Dokument abgerufen werden, grundlegende Iterationen und grundlegende Anmelde- und bedingte Anweisungen.

Tutorial Details

  • Programm: Beliebiger Texteditor
  • Version:1 von 1
  • Schwierigkeit: Mittel
  • Geschätzte Fertigstellungszeit: 25min

Überblick

Manchmal haben Sie große Datenmengen, die als XML analysiert werden und formatiert werden müssen, damit jemand, der nicht weiß, wie man XML liest, die Daten lesen kann. In diesem Tutorial werde ich Ihnen zeigen, wie dies mit der Leistung von XSL(T) gemacht wird.

Was ist XSL(T)?

XSL(T) ist Extendable Stylesheet Language(Transformation). Obwohl es sich um ein "Stylesheet" handelt, hat es ein anderes Ziel als CSS (Cascading Stylesheets). XSL(T) wird nicht für visuelle Effekte verwendet, sondern extrahiert (oder transformiert) Daten aus XML und verwendet die Kombination von HTML und CSS, um sie zu formatieren. XSL(T) verfügt auch über die dynamischen Eigenschaften in dem Sinne, dass Sie Iterationen und bedingte Anweisungen für eine statische XML-Datei ausführen können.

XSL(T) wird nicht für visuelle Effekte verwendet, sondern extrahiert (oder transformiert) Daten aus XML und verwendet die Kombination von HTML und CSS, um sie zu formatieren.

Warum XSL(T) verwenden?

XSL(T) kann zum Organisieren großer XML-Bäume verwendet werden, damit jeder es lesen kann. Beispielsweise stellt eine Google Search Appliance Abfragen als XML bereit. Damit dieses XML von einem allgemeinen Benutzer gelesen werden kann, muss eine Transformation stattfinden. Hier spielt XSL(T) eine entscheidende Rolle. Es kann auch zum Stylen einer RSS-Feed-Seite verwendet werden, da die Quelle vollständig in XML vorliegt. Es wird auch als Hauptvorlagensprache für Autonomys Teamsite(EMS) und Open-Source-CMS wie Symphony verwendet.

XSL(T) reduziert auch die Serverlast. Da XSLT die Transformation auf der Clientseite durchführen kann, muss Ihr Server weniger Arbeit leisten, da Sie keine Daten in der Datenbank abfragen. JavaScript- und serverseitige Funktionen können eingerichtet werden, um das Dokument anzuweisen, eine bestimmte XSL(T) -Vorlage zu verwenden, oder Sie können die Vorlage innerhalb der eigentlichen XML-Datei beziehen. In diesem Tutorial werden wir einfach die XSL(T) -Vorlage in der XML-Datei als Quelle verwenden.

Loslegen

Unser Ziel ist es, eine Liste der Ferien zu erstellen, die wir fortsetzen möchten, und eine Logik für die Daten durchzuführen, um uns mitzuteilen, welche Ziele außerhalb unserer Preisspanne liegen. In diesem Fall beträgt unser Budget 999 USD für unseren Urlaub und wir werden angeben, wann der Preis über unserem Budget liegt. Wir werden sie auch in absteigender Reihenfolge bestellen, damit wir sofort sehen können, welche Reisen nicht in unserem Budget enthalten sind.

Zunächst benötigen Sie eine XML-Datei. Öffnen Sie Ihren bevorzugten Texteditor, erstellen Sie eine neue Datei und nennen Sie sie trip.xml. Ich habe eine XML-Beispieldatei bereitgestellt, die Sie herunterladen und verwenden oder die Sie kopieren und in den folgenden Code einfügen können.

Das erste und einzige, was wir für dieses Dokument tun müssen, ist, einen Verweis darauf hinzuzufügen, wo sich unsere .xsl-Datei befindet. In diesem Fall erstellen wir ein Stylesheet mit dem Namen trip.xsl.

Beginn des erweiterbaren Stylesheets

Erstellen Sie zunächst ein neues Dokument in Ihrem bevorzugten Texteditor und speichern Sie es als trip.xsl. Als nächstes können wir das eigentliche Stylesheet starten. Zuerst müssen Sie die XML-Version und die Codierung für die Vorlage angeben. Wenn Sie mit XML vertraut sind, handelt es sich um dieselbe Version und Codierungssyntax

Von hier aus können wir XSL schreiben. Um das Stylesheet zu starten, müssen wir zuerst den Browser darüber informieren, dass wir ein XSL-Stylesheet verwenden und welche Version. Dieses Element muss Ihre gesamte Markierung einschließen und sollte am Ende des Dokuments geschlossen werden, da sich das Dokument sonst nicht transformiert.

Wenn wir das XHTML in unserem Dokument anhand von W3C-Standards validieren möchten, müssen wir einen Doctype einfügen, der bei der Transformation und beim Rendern verwendet werden soll. Hier verwenden wir die XHTML Strict DTD. Dazu richten wir ein selbstschließendes Element namens xsl:output ein. Mit in diesem Element werden wir den Doctype nennen.

Als nächstes starten wir die eigentliche Vorlage. Zwischen dem Tag zum Öffnen und Schließen der Vorlage befinden sich alle XHTML-Dateien entlang aller anderen XSL(T) -Elemente. Es ist wichtig zu beachten, dass Sie eine Übereinstimmung für die Vorlage festgelegt haben. Dieses Attribut besagt im Grunde, dass Sie zum Stammverzeichnis des XML-Dokuments gehen.

Transformation

Als erstes müssen wir jetzt ein grundlegendes XHTML-Layout starten und dieses in unseren xsl:template-Tags verschachteln. Ich habe auch eine CSS-Datei mit einem Dokument verknüpft, um dem Dokument einen gewissen Stil zu verleihen, aber das Einrichten dieser Datei würde den Rahmen dieses Lernprogramms sprengen.

Unser erstes Ziel ist es also, das Titelelement aus dem XML-Dokument zu übernehmen und diese Daten in den Titel des HTML-Dokuments einzufügen.

XmlTitleXmlTitleXmlTitle

Bevor wir mit der XSL beginnen, ist es wichtig zu beachten, wo innerhalb des XML-Baums "title" vorhanden ist. In diesem Fall ist der Titel ein direkter Nachkomme des Grundelements Urlaub. Wir können jetzt anfangen, unsere XSL zu schreiben. Um dem Browser mitteilen zu können, wo ein übereinstimmendes Datenelement gespeichert werden soll, verwenden wir das Element xsl: value-of.

Wir befinden uns bereits über das xsl: template-Tag im Stammverzeichnis des Dokuments, müssen jedoch tiefer in den XML-Baum eintauchen, um die gewünschten Daten auszuwählen. In diesem Fall werden wir im Dokument nach einem Grundelement des Urlaubs mit dem Kind des Titels suchen.

Wenn wir unsere XML-Datei(trip.xml) im Browser öffnen, wird als Ergebnis das Titelelement in der Titelleiste des Browsers angezeigt, wo wir erwarten würden, dass es sich auf einer normalen XHMTL-basierten Site befindet. Beachten Sie auch, dass die XML-Baumstruktur nicht mehr angezeigt wird. Wenn wir jedoch die Quelle anzeigen, sehen wir, dass die Quelle des Dokuments XML ist.

BrowserTitleBrowserTitleBrowserTitle

Mit einem Tool wie FireBug oder Safari Inspector können wir noch einen Schritt weiter gehen, um zu beweisen, dass die Umwandlung von XML in XHTML im Browser erfolgt ist.

InspectorInspectorInspector

Um eine visuelle Organisation hinzuzufügen, werde ich ein Markup hinzufügen, damit unsere Daten etwas einfacher zu betrachten sind.

Wie Sie oben sehen können, habe ich das Titelelement noch einmal verwendet, diesmal jedoch im Hauptteil des Dokuments. Dies kann bei der Wiederverwendung und Wiederverwendung von Inhalten äußerst nützlich sein.

Als nächstes wollen wir unsere "Reisen" in XHTML umwandeln. Der gesunde Menschenverstand sagt, dass wir nur in der Lage sein sollten, ein anderes xsl:value-of aufzurufen, diesmal jedoch den untergeordneten Knoten von "trip" aufzurufen. Dies würde funktionieren, wenn wir nur eine Reise hätten. Da wir jedoch mehrere Reisen haben, müssen wir einige Iterationen oder Schleifen durch das XML-Dokument durchführen.

Iteration aka Looping

Wie in allen Programmiersprachen gibt es Iterationsanweisungen, die einen bestimmten Datensatz durchlaufen und einige Methoden für sie ausführen. XLS(T) bietet ähnliche Funktionen zum Extrahieren von Daten aus einem XML-Dokument.

Das obige Snippet macht so ziemlich das, was Sie erwarten würden. Es heißt Wählen Sie xsl:for-each Element alles aus, was auf dem Pfad Urlaub/Tipp vorhanden ist.

Um die Daten tatsächlich zu extrahieren, müssen wir jedoch etwas mehr Arbeit leisten. Da unser Budget für die Reisen 999 US-Dollar beträgt, müssen wir eine Logik für die Daten erstellen. Aber bevor wir das tun, können wir die Daten nach Preis in absteigender Reihenfolge sortieren.

Sortierung

Wie Sie oben sehen können, ist das Sortieren von Daten nach einem bestimmten Knoten ziemlich einfach. Da die Anweisung xsl:for-each den Auslöseknoten auswählt und den Bereich festlegt, können wir xsl:sort einfach anweisen, den Preisknoten auszuwählen und nach der data-type nummer zu suchen, und dann die Reihenfolge auf absteigend setzen. Es ist wichtig zu beachten, dass die Anweisung xsl:sort sich selbst schließt().

Vorschau

Nun, an diesem Punkt fragen Sie sich vielleicht, wie diese Urlaubsliste aussieht. Um eine Vorschau dessen anzuzeigen, was wir in Ihrem Browser geöffnet haben. Stellen Sie sicher, dass Sie die .xsl-Datei nicht anzeigen.

PreviewPreviewPreview

Sie kratzen sich wahrscheinlich am Kopf und fragen sich, warum wir keine Ergebnisse haben. Dies liegt daran, dass wir nicht angegeben haben, welche Daten angezeigt werden sollen. Die Anweisung xsl:sort bezieht keine Daten, sondern ist lediglich ein Filter, wenn Daten vorhanden sind.

Auswählen und Testen

Da wir einen Hinweis auf Preise geben möchten, die außerhalb unseres Budgets liegen, müssen wir einige Parameter testen. Wir tun dies mit der Kombination von xsl:choose, xsl:when test='' und xsl:otherwise. Wenn Sie Programmiererfahrung haben, sollten Sie dieses Konzept der Flusskontrolle von Bedingungen erkennen. Wenn nicht, ist es immer noch ziemlich einfach zu folgen.

Wir starten den Logikfluss mit xsl:choose, dies initialisiert die Anweisung ähnlich wie in Sprachen wie PHP. Direkt danach haben wir unseren ersten Test. Wir sagen XSL(T), dass, wenn der Preis größer als(>) 999 ist, BLAH, andernfalls BLIP.

Als nächstes müssen wir BLAH und BLIP durch Hooks für unser XML ersetzen.

Im obigen Snippet richten wir unser Listenelement mit der Klasse "zu viel" ein. Diese Klasse färbt die Reisen, die aus unserem Budget stammen, rot. Wir verwenden dann xsl:value-of, um den Preis, die Stadt, das Bundesland, das Land und das Datum zu ermitteln. Es ist wichtig zu beachten, dass das Datum von jedem "Reise" -Knoten aus mithilfe des @-Symbols abgerufen werden kann. Dieselbe Art von Aussagen wurde früher gesehen, als Sie den Titel für unsere Liste erhielten. Wir haben auch das Dollarsymbol ($) und das Komma () hinzugefügt, um die Daten korrekt zu formatieren.

Danach müssen wir angeben, was mit den anderen Artikeln geschehen soll, wenn sie unsere Beschränkung von unter 999 US-Dollar erfüllen. In diesem Fall drucken wir sie nur in einem Listenelement aus, an das keine spezielle Klasse angehängt ist. Wir gehen alle Knoten durch und wählen sie aus, wie wir es für die zu vielen Knoten getan haben (Preis, Stadt, Bundesland, Land und Datum).

Alles zusammenfügen

Zu diesem Zeitpunkt sollten wir tatsächlich etwas Nützliches im Browser haben.

Finished ListFinished ListFinished List

Öffnen Sie trips.xml wie zuvor. Wenn alles gut gegangen ist, sollten Sie etwas Ähnliches wie oben gezeigt haben. XSL(T) ist eine sehr leistungsfähige Sprache, mit der Sie die Darstellung von XML-Daten drastisch ändern können. Im Folgenden finden Sie einige Ressourcen, um mehr über XSL(T) zu erfahren.

Schreiben Sie ein Plus-Tutorial

Wussten Sie, dass Sie bis zu 600 US-Dollar verdienen können, wenn Sie ein PLUS-Tutorial und / oder einen Screencast für uns schreiben? Wir suchen ausführliche und gut geschriebene Tutorials zu HTML, CSS, PHP und JavaScript. Wenn Sie in der Lage sind, wenden Sie sich bitte an Jeffrey unter nettuts@tutsplus.com.

Bitte beachten Sie, dass die tatsächliche Vergütung von der Qualität des endgültigen Tutorials und des Screencasts abhängt.

Write a PLUS tutorial
  • Folgen Sie uns auf Twitter oder abonnieren Sie den Nettuts+ RSS-Feed, um die besten Webentwicklungs-Tutorials im Web zu erhalten.
Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.