Unicode-Tabelle aus XML-Daten

Unicode-Tabelle aus XML-Daten

Zielgruppe sind StudentInnen und ambitionierte Informatik-Amateure

Man kann das Beispiel ohne Vorkenntnisse Live ausprobieren. Zum Verständnis der Programmierung sind jedoch Grundkenntnisse von HTML, XML und Javascript empfehlenswert.




Live Unicode-Tabelle


Unicode ist der universelle → Zeichensatz der modernen Informatik, d.h. eine Sammlung von Regeln zur Darstellung von fast beliebig vielen Zeichen (Buchstaben, Ziffern, Klammern, Sonderzeichen, ...) in Informatik-Produkten.

Derzeit sind im Unicode ca. 270000 verschiedene Zeichen definiert. Die Methode erlaubt jedoch 2^21 (ca. 2 Mio) Zeichen und ließe sich problemlos auf 2^32 (ca. 4 Mia) Zeichen erweitern.

Wegen der großen Anzahl der Unicode-Zeichen kann man sie nicht in einer einzigen Tabelle darstellen. Daher sind die Zeichen in (derzeit ca. 300) Bereiche gegliedert. Die rechts angezeigte Tabelle zeigt eine Liste dieser Unicode-Bereiche (Ranges).

Die Liste der Unicode-Bereiche dient hier als Beispiel zur Live-Herstellung intelligenter Produkte aus typischen Server-Daten.
Der Webserver hat an ihren Browser sowohl die rohen ↗ XML-Daten geliefert als auch das ↗ XSL-Programm.
Ihr Browser-Programm hat daraus die Liste hergestellt.

Die hier verwendete → XML+XSL-Methode lässt sich vorteilhaft auf die meisten Daten anwenden, die von einem Server (z.B. einer Datenbank) geliefert werden.

Anwendung


  Weiter unten in der Tabelle findet man Bereiche mit teilweise exotischen Namen, die beim Anklicken nur wenige oder gar keine Zeichen anzeigen. Das ist kein Programm-Fehler sondern bedeutet lediglich, dass die betreffenden Zeichen in der an ihrem Betriebssystem installierten → Schrift-Familie (Font) nicht enthalten sind.
In den wichtigsten Schriften aktueller Betriebssysteme sind immerhin einige tausend Zeichen enthalten, was man auch an der Datei-Größe (>500 kiB) merkt.
Die Dateien von typischen Schmuck-Schriften sind wesentlich kleiner und enthalten nur wenige Zeichen, oft nicht einmal die deutschen Sonderzeichen (→ Umlaute).

Mit Klick auf das PDF-Icon (rechts in jeder Zeile) wird das Original-Dokument des Unicode-Consortiums angezeigt.
Darin sind nicht nur die Namen aller Zeichen definiert, man findet auch Vorschläge (!) zur Gestaltung der Zeichen.
Die dargestellten Zeichen der PDF-Dokumente sind Bilder, d.h. man kann sie nicht in einem Text verwenden.

Bedeutung


XML+XSL

ist eine Methode der modernen Informatik, mit der man aus allgemein verwendbaren → Daten in XML-Format viele verschiedene Produkte herstellen kann, z.B. Webseiten oder Teile davon (hier eine ↑ Tabelle), Objekt-(Büro)-Grafik, Textverarbeitungs-Dokumente u.a.

Alle gängigen Betriebssysteme und die meisten modernen Programme enthalten Module zur Verarbeitung von → XML-Daten. Alle gängigen Browser-Programme bieten diese Möglichkeit schon seit vielen Jahren.
Viele wichtige Daten sind im XML-Format verfügbar. Die → XML-Familie hat zahlreiche Mitglieder und wächst rasch.

Server - insbesondere Datenbank-Server - können rasch und einfach Daten im XML-Format liefern. Der Aufwand dazu ist wesentlich geringer als zur Herstellung kompletter Produkte am Server. Das eigentliche Produkt wird erst am Arbeits-PC (Client) hergestellt. Der Server wird bei Anwendung der XML+XSL Technologie entlastet und daher für alle AnwenderInnen schneller - auch für jene, die keine XML-Daten anfordern.
Auf einer Seite dieses Webs wird gezeigt, wie man → XML-Daten mit Tabellen-Kalkulation selbst herstellen kann.

Sowohl XML-Daten als auch XSL-Programme sind allgemein formuliert und daher portabel und mehrfach verwendbar:
Man kann mehrmals hintereinander verschiedene XML-Daten anfordern und mit dem gleichen XSL-Programm verarbeiten.
Man kann die gleichen XML-Daten mit verschiedenen XSL-Programmen verarbeiten und damit unterschiedliche Produkte (z.B. Tabelle, Diagramm) herstellen.

Vereinfachte Lösung





Das XSL-Programm wird vom Browser am eigenen Arbeits-PC ausgeführt. Alle modernen Browser enthalten dazu ein eigenes Modul.

Das XSL-Programm liest den XML-Text als Eingangs-Daten.

Das XSL-Programm erzeugt je nach seinen Anweisungen ein Ausgabe-Produkt - in diesem Fall eine Mini-HTML-Webseite mit Tabelle. Ein anderes XSL-Programm könnte aus den gleichen Daten ein anderes Produkt erzeugen. Das gleiche Programm könnte aus anderen XML-Daten eine Tabelle erzeugen, die andere Daten enthält.

Das Produkt enthält konstante und variable Bestandteile: Die konstanten Teile sind als 'Daten' innerhalb eines <xsl:template>-Elements enthalten. Sie werden unverändert in die Ausgabe übernommen.
Die variablen Teile werden mit <xsl:value-of>-Elementen an der vom Programm vorgesehenen Stelle in die Ausgabe eingesetzt.


Minimal-XSL

▼  Mit diesem XSL-Programm wurde aus den rohen XML-Daten die stark vereinfachte Tabelle hergestellt:


Im Element <xsl:output> wird der MIME-Typ des erzeugten Produkts angegeben (hier: HTML).


Der gesamte Inhalt des <xsl:template>-Elements wird in die Ausgabe eingesetzt, wenn sein match-Attribut zutrifft. Der Wert "/" trifft immer zu (Joker), daher wird der Inhalt dieses Elements in jedem Fall in die Ausgabe übernommen.

Der konstante (HTML)-Text innerhalb des <xsl:template>-Elements besteht aus dem minimalen HTML-Text einer Webseite und dem Grundgerüst einer <table> → Tabelle.

Die Tabelle enthält nur eine <tr>-Zeile mit den Spalten-Überschriften. Danach folgt mit dem <xsl:for‑each>-Element eine Programm-Schleife. Der Programm-Teil innerhalb dieses Elements wird für jedes in den XML-Daten gefundene <range>-Element wiederholt.

Die wiederholten Daten bestehen aus je 1 HTML <tr>-Element (Tabellen-Zeile) und darin je 2 <td>-Elementen (Zellen, Spalten).

In die Zellen der Tabelle werden die Werte der XML-Daten mit <xsl:value‑of>-Elementen eingetragen.


Detail der mit XSL erzeugten HTML-(Ausgangs)-Daten

Aus den links gezeigten XML-Eingangs-Daten wurden diese HTML-Elemente erzeugt:
<tr>
<td>#0370 - #03FF</td>
<td>Greek and Coptic</td>
</tr>
Das Ergebnis dieser Transformation erscheint nicht gerade großartig. Wenn man jedoch versucht, diese Aufgabe selbst zu programmieren oder (besser) in einem logischen Ablauf-Diagramm darzustellen, dann ist der Aufwand unerwartet hoch.



Die Gebrauchs-Lösung enthält die PDF-Icons am rechten Rand der Zeilen als → Bilder. Um die Lösung zu portieren müsste man auch alle Verweise zur Grafik-Datei ändern und/oder auch die Grafik-Datei selbst portieren.
Als Alternative wurden alle Bilder → Inline eingebettet: Damit wird der Quelltext nur minimal vergrößert, denn die Grafik ist nur 1mal enthalten und wird als Objekt in die einzelnen Zeilen kopiert.
Damit sind alle verwendeten Resourcen in der Lösung enthalten und sie ist uneingeschränkt portabel.

Die Stärken von XSL zeigen sich vor allem bei einfachen Aufgaben wie der hier vorgestellten Minimal-Lösung. Für komplexe Anforderungen ist der Entwicklungs-Aufwand relativ hoch. Daher wurde die Technologie der Gebrauchs-Lösung modifiziert:
Die XML-Daten werden mit Hilfe einer XSL-Programm-Schleife in ein Javascript-Array übernommen. Alle weiteren anspruchsvollen Aufgaben werden von Javascript-Funktionen ausgeführt. Diese Aufteilung der Aufgaben nutzt die Stärken der beiden Programmiersprachen und vermeidet deren Schwächen.

Programmierung der Gebrauchs-Lösung


Vereinfachung

In diesem Kapitel werden die Original XML-Daten, das Original XSL-Programm und die Javascript-Programme der ganz oben gezeigten ↑ Gebrauchs-Lösung kurz kommentiert.
Das Verständnis der Details erfordert fortgeschrittene Kenntnisse mehrerer Web-Technologien.

Im vorigen Kapitel wird eine radikal ↑ vereinfachte Lösung der gleichen Aufgabe vorgestellt. Diese Minimal-Version ist für EntwicklerInnen optimiert und lässt die Details der XML+XSL-Technologie wesentlich besser erkennen.


XML-Daten

◀  Diese Daten hat ihr Browser vom Webserver erhalten:

Der Text ist lesbar und auch ohne Fachkenntnisse einigermaßen verständlich. Man erkennt viele verschiedene <range>-Elemente, in denen je 3 Unter-(Child)-Elemente enthalten sind. Es ist nicht allzu schwierig, die Daten zu interpretieren, z.B.:
Das erste <range>-Element mit dem Namen 'C0 Controls ... ASCII' reicht von der hexadezimalen Zahl (Adresse, Codepoint-Nummer) 0000 bis 007F

Die Namen der Elemente sind hier passend zum Thema frei gewählt. Man muss sie und ihre Bedeutung daher jedem verarbeitenden Programm mitteilen.
Für andere (häufig verwendete) Themen wurden die Namen standardisiert. Zur Verarbeitung solcher XML-Daten genügt daher ein Hinweis auf den verwendeten Standard.

Daten lassen sich an ihrer Quelle (typisch: Datenbank) rasch und einfach in einen Text aus XML-Daten umwandeln. Dabei braucht man keine Rücksicht auf die Verwendung zu nehmen. Die Erzeugung von XML-Daten kommt einem Server sehr entgegen und macht ihn angenehm schnell.

XML-Daten sind leicht zu verwalten: Sie lassen sich in einer einfachen Text-Datei speichern, in ein (ZIP)-Archiv komprimieren, über das Netzwerk oder Internet versenden usw.

Nicht nur Menschen können XML-Daten 'Lesen'. Auch für Programme ist es einfach, die wenigen XML-Regeln zu befolgen. Jede moderne Programmiersprache bietet dazu eigene Module, Klassen und Methoden.
↓ XSL ist nur eine von viele möglichen Programmiersprachen zur Verarbeitung von XML-Daten - allerdings eine sehr effiziente.

▶  Mit diesem Link werden die ↗ XML-Daten in einem eigenen Browser-Tab angezeigt.


XSL-Programm

◀  Auch diese Daten hat ihr Browser vom Webserver erhalten:

Man erkennt auf den ersten Blick die Verwandtschaft mit den XML-Daten. Das ist kein Wunder, denn auch XSL ist Mitglied der → XML-Familie. Allerdings sind die verwendeten Elemente nicht frei gewählt sondern standardisiert: Mit dem Element <xsl:stylesheet> wird der verwendete Standard (Namespace xmlns) bekannt gegeben.

Der Programm-Text scheint nicht nur <xsl:>-Elemente sondern hauptsächlich → HTML-Elemente zu enthalten. Das täuscht, denn der gesamte Text innerhalb der <xsl:>-Elemente wird als 'Daten' aufgefasst.
Beispiel: Der Text <html> gehört zu den Daten (!), die sich innerhalb des ca. 200 Zeilen umfassenden Elements <xsl:template></xsl:template> befinden. Das ist für wenig erfahrene EntwicklerInnen schwierig zu erkennen.
Tipp: Helfen sie sich in diesem Fall mit Farben, Einrückungen, etc.

Wenn man nur den Daten-Text innerhalb des ersten <xsl:template>-Elements betrachtet, dann ergibt sich zwanglos der Quelltext jener Mini-Webseite, die von diesem XSL-Programm erzeugt wird: Es ist besonders einfach, konstante HTML-Teile mit XSL zu programmieren.

Von der im ↑ End-Produkt sichtbaren Tabelle ist nur das Grund-Gerüst in den konstanten XSL-Daten enthalten, jedoch ohne die Zeilen mit den Unicode-Daten: Diese werden erst Live aus dem Inhalt der XML-Daten eingefügt. Die nächsten ↓ Absätze dieses Kapitels beschreiben einige Details der Programmierung.

▶  Mit diesem Link wird das ↗ XSL-Programm in einem eigenen Browser-Tab angezeigt.


Man muss daher besondere Maßnahmen treffen, um mit XSL nicht die vereinbarten Objekte sondern Quelltext zu erzeugen. Das betrifft u.a. den CSS-Quelltext innerhalb von HTML <style>-Elementen und den Javascript-Quelltext innerhalb von <script>-Elementen.


Variabler Javascript-Code

Wenn man ein dynamisches XSL-Element in den Javascript-Quelltext einsetzen will, dann muss man den XML-Daten-Block davor beenden und danach wieder öffnen:
// ]]>
<xsl:apply-templates select="//range" mode="mode_js"/>
// <![CDATA[
Das <xsl:apply-template>-Element setzt an der betreffenden Stelle jenen Text an, der vom jeweiligen Template erzeugt wurde.

Das angegebene XSL-Template ist ein XSL-Programm-Teil, welcher sich an einer beliebigen anderen Stelle des XSL-Quelltextes befinden kann - in diesem Fall an seinem Ende:
<xsl:template match="range" mode="mode_js">
Das match-Attribut bewirkt die wiederholte Ausführung für jedes <range>-Element der XML-Daten.
Das mode-Attribut bewirkt die Ausgabe als Javascript-Quelltext und nicht als HTML-Objekte.
Mit diesem Template werden die Daten aller XML <range>-Elemente in das Javascript-Array uca[ ] eingetragen.



Sämtliche Daten (der Unicode-Bereiche) befinden sich bei Beginn der Javascript-Funktionen bereits im globalen Array uca[ ], in welches sie mit einem ↑ XSL-Template eingesetzt wurden. Für jedes <range>-Element der XML-Daten wurde ein Element des Javascript-Arrays uca[ ] erzeugt.

Die umfangreiche Funktion table_create() erzeugt den gesamten Inhalt der anzuzeigenden Tabelle:

In einer Schleife wird der Daten-Teil der Tabelle erzeugt. Für jedes Element des Arrays uca[ ] wird eine Zeile angelegt, darin je 3 Spalten. In die Zellen der Tabelle werden die jeweiligen Daten als DOM Text-Knoten eingetragen.

Jede Zeile enthält 1 PDF-Icon als Bild. Dazu wird ein <img>-Element erzeugt. Das src-Attribut wird von einem bereits (statisch) vorhandenen, jedoch nicht angezeigten Bild kopiert, welches → Inline (mit Base64-Daten) eingebettet ist. Die Web-App ist daher portabel, weil keine externen Resourcen verwendet werden.

Jede reguläre Zeile enthält 2 HyperLinks. Diese werden als <a>-Elemente erzeugt. Das jeweilige href-Attribut wird (mit Javascript wesentlich eleganter als mit XSL) berechnet und mit der Methode setAttribute() eingesetzt.



 Für EntwicklerInnen ist die allgemeine Kenntnis moderner Methoden wesentlich wichtiger als die praktische Erfahrung im Detail: Man kann jede Informatik-Technologie in relativ kurzer Zeit erlernen, wenn Grundkenntnisse (z.B. einer modernen Programmiersprache) vorhanden sind.
Mögliche Aufgaben für EntwicklerInnen sind daher:

Zählen sie auf, welche Informatik-Methoden für das hier vorgestellte ↑ Minimal-Beispiel verwendet wurden.
Zählen sie auf, welche Methoden für das hier vorgestellte ↑ Gebrauchs-Beispiel verwendet wurden.

Geben sie an, welche Teil-Aufgaben von der jeweiligen Methode ausgeführt werden. Gibt es Alternativen, und wenn ja - welche Auswirkung hätte ihre Verwendung ?

Geben sie die Schnittstellen an, welche die Zusammenarbeit der verschiedenen Methoden regeln.

Geben sie eine zeitliche Reihenfolge des Ablaufs an. Beginnen sie mit der HTTP-GET-Anforderung der App (der Unicode-Tabelle) durch einen Client. Beschreiben sie den weiteren automatischen Ablauf bis zur Anzeige des Produkts im Browser.

Die Details der Programmierung werden hier nicht kommentiert: Man kann sie aus dem Original Quelltext entnehmen, der vollständig einsehbar ist. Sie sind - im Gegensatz zu den Methoden - nur für spezialisierte EntwicklerInnen interessant.