XSL-Demo @ PS-Trainer

VGA-Farben: Erzeugung verschiedener Produkte mit XML+XSL

Die → VGA-Farben sind eine Liste (Palette) von 16 Farben, die in der IT-'Urzeit' für die ersten Farb-Monitore definiert wurden.

Aus den rohen (in einer ↓ XML-Datei enthaltenen) Daten der 16 VGA-Farben wurden hier mit XSL 5 verschiedene Produkte hergestellt:

● Ein Farben-Balken (oben)
● Eine Tabelle (rechts)
● Eine 4x4 Mini-Tabelle (unten)
● Ein interaktives Formular (unten)
● Eine interaktive Grafik (rechts unten)

Jedes der 5 Produkte wurde von ihrem Browser Live aus den gleichen XML-Daten hergestellt. Der einzige Unterschied ist die Angabe der für die Formatierung zu verwendenden XSL-Datei (↓ Quelltext).

Mit Rechtsklick in irgendeines der genannten Produkte wird der Quelltext angezeigt: In jedem Fall die rohen XML-Daten der → 16 VGA-Farben.

Dieses ↑ Formular und diese → Grafik demonstrieren, wie man auch dynamische und interaktive Elemente mit XSL programmieren kann:
Die XML-Daten werden in den beiden Beispielen an kleine → Javascript-Programme übergeben. Bei jeder Änderung des Auswahl-Elements werden die entsprechenden Daten mit → DOM-Methoden eingetragen und angezeigt.

Interaktive (→ SVG)-Grafik (wird nur mit modernen Browsern angezeigt): Klicken sie in eines der 16 Segmente.

Vorteile

Die vorgestellte Methode ist besonders gut geeignet, um (variable) Daten in einer bestimmten Form darzustellen. Der Webserver wird bedeutend entlastet, insbesondere bei Verwendung interaktiver Elemente. Die Herstellung der Produkte und die Ausführung der Programme erfolgt an den (sonst wenig ausgelasteten) Client-PC's. Bei forcierter Anwendung dieser Methoden wird die Gesamt-Leistung des Systems aus Server + Clients stark verbessert.

Nachteile

Das Layout ist nur so flexibel wie das XSL-Programm. Wenn man die gleichen Daten in unterschiedlicher Form darstellen will (in diesem Beispiel 5 verschiedene Produkte), dann muss man auch die XML-Daten jedesmal neu laden. Das ist ärgerlich, weil sie sich nur in einer einzigen Zeile (der angegebenen XSL-Datei) unterscheiden. In diesem Fall verwendet man besser die ↓ Ajax-Methode.

Methode

Bei allen Beispielen dieses Kapitels wurde von ihrem Browser aus XML+XSL je ein komplettes Dokument erzeugt. Mit RechtsKlick können sie jedes der Produkte in einem eigenen Browser-Tab oder -Fenster laden.
Die erzeugten HTML- und SVG-Dokumente werden jeweils in einen HTML→ InnenRahmen (<iframe>-Element) dieser Webseite eingebettet.

Im nächsten ↓ Kapitel werden die gleichen Produkte mit einer anderen Methode (Ajax) erzeugt: In diesem Fall werden lediglich einzelne HTML-Elemente (Snippets) hergestellt und direkt in den DOM-Objektbaum dieser Webseite eingefügt.

• Quelltext ↓ aller gezeigten Beispiele

VGA-Farben: Darstellung mit XML+XSL+Ajax
Auswahl Darstellung der VGA-Daten als ● Farben-Balken ● Tabelle ● Interaktives Formular ● Interaktive (SVG)-Grafik ● Löschen Mit Klick auf einen der 4 Links werden 2 Dateien vom Webserver geladen und von ihrem Browser zu einem Produkt (rechts) verarbeitet: Die XML-Daten und das zur Formatierung verwendete XSL-'Programm'. Zeit (zwischen Senden der Anforderung und Abschluss der Daten-Verarbeitung durch das Javascript Ajax-Programm):	Ergebnis ◄ Klicken sie die HyperLinks der linken Seite, um die angebotenen Objekte hier Live zu laden. • Alle statischen Produkte lassen sich mehrfach laden • Interaktive Produkte (Formular) dürfen nur einmal geladen werden (Erklärung unten). • Die interaktive Grafik lässt sich mit einem Trick (↓ SVG-Probleme) ebenfalls mehrfach laden. • Eine Synchronisation der interaktiven Funktionen wäre prinzipiell möglich, darauf wurde hier jedoch zur Vereinfachung verzichtet.
Javascript statt Browser Die Anforderung von XML-Daten und XSL-Programm erfolgt in diesem Fall nicht (wie beim Anklicken eines 'gewöhnlichen' Links) durch das Browser-Programm sondern durch ein → Javascript-(JS)-Programm, welches in diese Webseite eingebettet ist. Das JS-Programm kann mit mehr Flexibilität reagieren - hier z.B. durch Kombination einer (nur 1mal übertragenen) XML-Datei mit mehreren unterschiedlichen XSL-Programmen.	Das XML+XSL-Produkt ist in diesem Fall ein einzelnes (HTML)-Element, kein komplettes Dokument (wie im ↑ ersten Kapitel dieser Seite). Daher muss ein JS-Programm der Webseite die Verwendung des mit Ajax erhaltenen Objekts regeln - in diesem Fall durch Einfügen mit → DOM-Methoden an einer beliebigen Position der Webseite.
Vorteile • In diesem Fall sind die XML-Daten von ihrer Verarbeitung vollkommen entkoppelt: Die XML-Datei enthält keinen Bezug auf eine zur Verarbeitung dienende XSL-Datei. • Das eignet sich gut für Anwendungen, deren Daten auf unterschiedliche Weise - evtl. auch mehrfach - verarbeitet werden. Die Entscheidung, welche Form der Verarbeitung (= welches XSL-Programm) verwendet wird, liegt bei der/dem AnwenderIn. • Die Vorteile kommen besonders zur Geltung, wenn umfangreiche XML-Daten verwendet (und in diesem Fall nur 1mal übertragen) werden und wenn sie am Client-PC mehrfach und interaktiv angewendet werden.	Nachteile • Das Verfahren fügt eine zusätzliche Ebene zwischen Client (AnwenderIn) und Server ein. Das ergibt die Möglichkeit für viele neue Probleme, die man ohne Ajax nicht hat, mit Ajax jedoch aufwändig beobachten und allenfalls beseitigen muss. • Wenn nur wenige XML-Daten benötigt werden, oder wenn die XML-Daten immer in der gleichen Form (z.B. als Tabelle) verwendet werden, dann ist es einfacher und sicherer, die klassische ↑ XML+XSL-Technik anzuwenden, d.h. die zu verwendende XSL-Datei in einer Zeile der XML-Daten anzugeben.

VGA-Chooser: Interaktives XML+XSL+Ajax-Snippet
Klicken sie auf diesen Link, um das Ajax-Element zu laden: ● Farb-Auswahl Element (VGA-Chooser) • Das Element ladet an einer fixen Position dieser Seite. • Mit Klick auf eine VGA-Farbe wird ein (anderes) Element dieser Webseite geändert. • Klick auf das X (rechts oben) schließt den VGA-Chooser.	Dieses Element wird mit dem VGA-Chooser verändert: Schrift in schwarz Schrift in blau Schrift in rot Schrift in grün Schrift in gelb Schrift in weiss
Funktion Dieses Beispiel demonstriert eine interaktive Anwendung von Ajax+XML+XSL Das angeforderte Objekt wird als Werkzeug verwendet und anschließend wieder gelöscht. Diese Art der Funktionalität kommt der typischen Anwendung von Ajax schon recht nahe. • Mit Klick auf den Link werden 2 Ajax-Anforderungen an den Webserver gesendet. • Die erste angeforderte Datei ist die gleiche XML-Datei color_names.xml wie für alle Ajax-Beispiele dieser Seite: Sie enthält lediglich die Daten der VGA-Farben, jedoch keine Anweisungen zur Formatierung (↓ Quelltext). • Die zweite angeforderte Datei ist die XSL-Datei vga_color_snippet.xsl Sie enthält die Angaben zur Herstellung des VGA-Chooser Elements aus den XML-Daten (↓ Quelltext). • Nur eine Instanz des Elements ist erlaubt. Wenn man versucht, ein weiteres (gleiches) Element zu laden, dann löscht sich dieses sofort selbst.	• Das vom Browser mit XML+XSL hergestellte Produkt ist ein kleines HTML <div>-Element, welches man in jede Webseite einfügen kann. • Die fixe Position wird durch → CSS-Anweisungen erreicht. Damit wird demonstriert, dass man mit Ajax Elemente an jede beliebige Stelle einer Webseite einfügen kann. Man könnte auch eine mit der Maus verschiebbare Version des Elements erzeugen. • Die 16 Farb-Felder enthalten je ein onclick-Attribut. Das mit Klick gestartete Javascript-Programm ändert die Hintergrund-Farbe eines (anderen) Elements der Webseite. • Klick auf das X startet ein kleines Javascript-Programm, mit dem sich der VGA-Chooser selbst löscht.
Anwendung: ● Mit dieser Technik kann man Werkzeug-Elemente in jede beliebige Webseite laden. ● Die Ajax-Elemente sind nicht statisch in den jeweiligen Webseiten enthalten, sondern werden (nur) bei Bedarf geladen. ● Je nach Programmierung kann man von einem Element nur eine Instanz zulassen, oder das Element mehrfach einfügen. ● Man kann den Lade-Vorgang beliebig steuern, z.B. automatisch beim Laden der Webseite (onload), auf Anforderung der AnwenderInnen (onclick), Zeit-gesteuert (setTimeout), ...	● Daten und Verarbeitung sind sauber voneinander getrennt: • Aus den gleichen XML-Daten kann jeder Browser durch Auswahl unterschiedlicher XSL-Dateien ebenso viele verschiedene Produkte erzeugen. • Die gleiche XSL-Datei lässt sich auf beliebig viele Daten anwenden. Die AnwenderInnen können dann z.B. mit der gleichen (!) Webseite beliebig viele Datenbank-Anfragen stellen und deren Ergebnisse anzeigen, z.B. als Tabellen und Diagramme.
Webserver • Jedes ähnlich programmierte Ajax-Werkzeug kann man auf allen Webseiten des gleichen (eigenen) Webservers verwenden. • Eine Ajax-Anforderung von einem beliebigen (fremden) Webseiten wäre technisch kein Problem, ist jedoch bei allen gängigen Browsern aus Sicherheits-Gründen verboten. • Wenn sie das ausprobieren wollen, dann können sie die Objekte dieser Seite auch auf einer eigenen Webseite verwenden. • Sie müssen dazu am Browser eine Ausnahme für diesen Server eintragen - Das erfolgt in den Sicherheits-Einstellungen des Browsers und ist je nach Programm und Version unterschiedlich auszuführen.	Den Javascript-Quelltext zum Laden von Ajax-XML-Objekten finden sie auf der Ajax-Seite dieses Webs. Die Internet-(URL)-Pfade zu dem VGA Color-Chooser Dateien entnehmen sie den direkten Links (die unformatierte XML-Dateien anzeigen !) color_names.xml vga_chooser_snippet.xsl Das mit dem Werkzeug veränderte Ziel-Element ihrer Webseite sollte das Attribut id="chooser_target" tragen, z.B. <div id="chooser_target">...</div>

Ajax-Probleme und Lösungen
Ajax: Synchron oder Asynchron ? Die Anforderung der beiden (XML+XSL) Dateien erfolgt in diesem Fall durch ein Javascript (JS) Programm der Webseite. ● Bei synchroner Arbeitsweise wartet das JS-Programm, bis die angeforderten XML-Daten und danach das XSL-Programm vom Server eingetroffen sind. Wenn ein Problem auftritt (Fehler, Unterbrechung...), dann muss man die Timeout-Zeit des Browser-Programms abwarten, bevor man weiter arbeiten kann. • Vorteil: Die Erstellung synchroner Ajax-Programme ist sehr einfach. • Die Anwendung ist nur für Server sinnvoll, die rasch und zuverlässig zu erreichen sind, d.h. im Intranet (LAN).	● Bei asynchroner Arbeitsweise reagiert das JS-Programm auf → Ereignisse (Events), d.h. nur dann, wenn tatsächlich Daten vom Server eintreffen. In der Zwischenzeit kann man normal weiter arbeiten. Das JS-Programm kann einen eigenen unabhängigen → Timeout definieren und flexibel auf alle denkbaren Fälle reagieren. • Das ist wesentlich AnwenderInnen-freundlicher, aber aufwändiger zu programmieren. • Allgemeine und professionelle Anwendungen bevorzugen die asynchrone Arbeitsweise, weil sie auf Fehler des komplexen Systems besser reagieren kann.
Webserver-Problem: Manche Webserver interpretieren XSL-Dateien nicht als XML-Dateien sondern als einfache Text-Dateien. Javascript-Programme erhalten dann bei Anforderung einer XSL-Datei als XML-Objekt responseXML keine Antwort (null) und erzeugen allenfalls unverständliche Fehlermeldungen. Das Problem scheint bei Apache-Webservern auf neueren SuSE Linux Distributionen aufzutreten. Die Anforderung von XSL-Dateien als Text responseText funktioniert zwar immer, macht aber eine zeitraubende und unnötige Umwandlung in ein Objekt notwendig	Lösung: ► Öffnen sie die Datei /etc/mime.types mit einem Editor und ergänzen sie diese Zeile (am besten an der alphabetisch korrekten Position): application/xml xsl ► Ergänzen sie die Konfiguration des → Apache Webservers - entweder mit einer eigenen Datei (z.B. ajax.conf) oder mit einer zusätzlichen Zeile in einer bestehenden Konfigurations-Datei: AddType application/xml .xsl Änderungen der Apache-Konfiguration werden erst nach Neustart des Servers wirksam: # /etc/init.d/apache2 restart
CSS-Problem Jedes mit Ajax eingefügte Element wird ein Teil des Dokuments (der Webseite). Es ist zwar möglich, darin ein <style>-Element zu verwenden, in diesem darf man jedoch keine Regeln eintragen, welche die Formatierung von Standard HTML-Elementen regeln, z.B. body {...} Damit würde das neue Element entweder die Formatierung des gesamten Dokuments ändern, oder der Browser würde widersprüchliche Anweisungen erhalten. Das Ergebnis wäre stark von den Umständen abhängig und nicht sicher vorhersagbar.	Lösung Es gibt mehrere Möglichkeiten, um die Wirksamkeit von CSS-Regeln auf das mit Ajax eingefügte Element zu begrenzen: • Die zu formatierenden Elemente erhalten id-Attribute und die CSS-Regeln werden daran gebundeen, z.B.> #id01 div {...} Das ist problematisch, denn id-Attribute müssen eindeutig sein, und das kann man bei Anwendung auf unbekannte Webseiten nicht garantieren. • Jedes zu formatierende Element erhält ein style-Attribut mit den CSS-Anweisungen. Das ist mühsam, aber absolut zuverlässig. (Diese Variante wird in den vorgestellten Beispielen verwendet).
DOM-Problem Alle id-Attribute eines Dokuments müssen eindeutig sein. Mit Ajax eingefügte Elemente müssen daher andere id-Attribute verwenden als bereits im Dokument vorhanden sind. Für interaktive Funktionen braucht man diese Attribute. Die entsprechenden Javascript-Programme laufen nur dann korrekt, wenn die Attribute eindeutig sind. • Wenn id-Attribute nicht unbedingt nötig sind, verzichtet man in Ajax-Elementen besser darauf. Diese Variante wird in den vorgestellten statischen Beispielen verwendet - sie lassen sich daher mehrfach laden. Prinzipiell kann man jedes Ajax-Element beliebig oft in ein Dokument einfügen: Wenn das Element allerdings id-Attribute enthält, dann erzeugt man damit unzulässige (und nicht funktionierende) Duplikate.	Lösung • In einfachen Fällen hilft man sich mit langen ungewöhnlichen id-Attributen. Mit etwas Glück werden sie im Dokument noch nicht verwendet und sind daher eindeutig. ► Wenn Duplikate von Ajax-Elementen nicht vorgesehen sind, muss man ihre Erzeugung verhindern: • Es ist relativ einfach, das mehrfache Laden des gleichen Ajax-Elements in der Javascript-Anforderung des 'gastgebenden' Dokuments' zu sperren. Das ist jedoch problematisch, weil man diese Maßnahme in jeder einzelnen Webseite treffen muss, welche das Ajax-Element verwendet. • Man kann in das Ajax-Element selbst ein Javascript-Programm einfügen, welches das Dokument kontrolliert und allenfalls vorhandene Duplikate löscht. Das ist zuverlässig, aber relativ aufwändig. Diese Variante wird in allen hier vorgestellten interaktiven Beispielen verwendet. • Wenn man Duplikate zulassen will, dann muss man entweder auf id-Attribute verzichten, oder das XSL-Programm muss in jede einzelne Kopie andere id-Attribute eintragen (aufwändig).
SVG Problem SVG ist Mitglied der → XML-Familie und daher mit allen anderen XML-Mitgliedern kompatibel: Man kann SVG Objekt-Grafik direkt (Inline) in den Quelltext von XHTML-Webseiten einbetten und man kann daher SVG-Elemente auch mit Ajax problemlos laden. Das Problem wird lediglich durch den M$IE Browser verursacht, der als einziger auch nach vielen Jahren noch immer keine SVG Grafik anzeigen kann. Der rechts vorgestellte Kompromiss wird in diesem Web so lange verwendet, bis der M$IE Browser entweder modernisiert wird, oder sein Marktanteil vernachlässigbar ist. ♣ Nur in diesem Fall sehen sie mit Rechtsklick (in die Grafik) deren Quelltext. Bei jedem anderen mit Ajax geladenen Element sehen sie den Quelltext der gastgebenden Webseite.	Kompromiss Man erzeugt mit XSL ein HTML-Element zur Einbettung, am besten einen <iframe>-Innenrahmen: <iframe src="demo.xml"></iframe> Auch diese Variante ermöglicht Standard M$IE-AnwenderInnen lediglich die Ansicht der Webseite ohne SVG-Grafik. • Wenn man den M$IE-Browser mit einem Zusatz-Programm (Adobe SVG Viewer) ausrüstet, dann werden zumindest die statischen SVG-Elemente angezeigt. • Die interaktiven Elemente der Grafik bleiben für M$IE-AnwenderInnen unerreichbar, da im SVG-Viewer die (ursprünglich hervorragende) Javascript-Funktionalität abgeschaltet wurde. Eine echte Lösung ist daher nur der Umstieg auf einen modernen Browser... • Dieser Trick bringt auch einen kleinen Vorteil: Man kann interaktive Grafik-Elemente beliebig oft mit Ajax einbetten, da sie als eigenständige Dokumente nicht Teil des Webseiten-Dokuments sind.

Quelltext der Beispiele

XML-Daten

• Der XML-Quelltext (unten) wird auch mit in jedes der einfachen XML-Produkte (↑ XML+XSL) angezeigt.

• Die mit ↑ Ajax geladenen Elemente (Snippets) werden direkt in die Webseite eingebettet: Mit dem Quelltext zeigt man daher lediglich den HTML-Quelltext der Original-Webseite an, nicht den XML-Text.
Nur mit DOM-Werkzeugen wie FireBug kann man auch die Struktur der Live mit Ajax geladenen Snippets anzeigen.

XSL-'Programm'

Der XSL-Quelltext enthält Anweisungen, mit denen aus den XML-Daten ein bestimmtes Produkt hergestellt wird. Der Text wird zwar vom Browser geladen, jedoch normalerweise nicht angezeigt.

XML erzeugt in den ↑ einfachen XML+XSL-Produkten normalerweise ein komplettes eigenes Dokument, das man z.B. mit <iframe> in eine Webseite einbetten oder auch alleinstehend anzeigen kann.

Mit ↑ Ajax erzeugt XSL normalerweise lediglich ein Snippet, d.h. ein einzelnes DOM-Element (hier immer ein <div>), welches in das vorhandene Dokument (= in die Webseite) eingefügt wird.

Anwendung

Die hier Live demonstrierten Beispiele sind relativ einfach auf eigene Webseiten übertragbar:

► Kopieren sie den Text der XML-Daten (oben) in eine Datei, z.B. color_names.xml

► Wählen sie die XSL-Datei für eines der 4 Produkte (rechts oben) und kopieren sie den Text in eine Datei, z.B. den Text der XSL-Datei für den Farbbalken in eine Datei vga_hbar.xsl

► Öffnen sie die XML-Datei color_names.xml mit einem Text-Editor und fügen sie unmittelbar nach dem anfänglichen Kommentar eine Zeile zur Anforderung der XSL-Datei ein, z.B.

<?xml version="1.0" encoding="utf-8" ?>

<!--

vga_hbar.xml
made by pstrainer@gmx.net

-->

<?xml-stylesheet href="vga_hbar.xsl" type="text/xsl" ?>

<color_names>

...

</color_names>

Der angegebene Datei-Name (hier vga_hbar.xsl) muss genau mit dem Namen der XSL-Datei übereinstimmen.

► Kopieren oder verschieben sie die beiden Dateien (XML und XSL) in ein Verzeichnis ihres Webservers - am besten in das gleiche Verzeichnis (Ordner), wo sich auch jene Webseiten-Datei (*.html) befindet, in welche das Produkt aus XML+XSL eigebettet werden soll.

► Fügen sie diesen Text in die Webseiten-Datei *.html ein:

Passen sie den Text an ihre Bedingungen an, z.B. andere Datei-Namen, Pfade, Höhe...
Mit dem <iframe>-Element (HTML → Innenrahmen) wird die XML-Datei in die Webseite eingebettet, die darin angegebene XSL-Datei wird zur Formatierung verwendet.

► Die Beispiele sind nicht besonders elegant, aber einfach und robust programmiert. Sie lassen sich daher mit wenig Aufwand auch für andere (XML)-Daten und ähnliche Produkte adaptieren.

► XML-Dateien ähnlich den hier verwendeten kann man mit relativ einfachen Programmen aller gängigen Programmiersprachen auch Live erzeugen (→ CGI-Programme), z.B. mit C/C++, Java, Perl, PHP, Python, ...

XSL	Extended Stylesheet Language
XML + XSL	5 verschiedene Produkte aus den gleichen XML-Daten
XML + XSL + Ajax	Interaktive Auswahl aus mehreren XML+XSL-Produkten
XML + XSL + Ajax	Beispiel für ein interaktives Werkzeug
Probleme	Ajax-Probleme und Lösungen: Webserver, CSS, SVG, ...
Quelltext	der für die Beispiele verwendeten XML- und XSL-Dateien
Verwandte Themen	XML-Daten, Ajax, DOM, CSS, VGA-Farben

XML+XSL - Demo

Herstellung einiger Produkte mit XML+XSL (+Ajax)

VGA-Farben: Erzeugung verschiedener Produkte mit XML+XSL

Vorteile

Nachteile

Methode

VGA-Farben: Darstellung mit XML+XSL+Ajax

Auswahl

Ergebnis

Javascript statt Browser

Vorteile

Nachteile

VGA-Chooser: Interaktives XML+XSL+Ajax-Snippet

Funktion

Anwendung:

Webserver

Ajax-Probleme und Lösungen

Ajax: Synchron oder Asynchron ?

Webserver-Problem:

Lösung:

CSS-Problem

Lösung

DOM-Problem

Lösung

SVG Problem

Kompromiss

Quelltext der Beispiele

XML-Daten

XSL-'Programm'

Methode

Produkt

Anwendung