Projektarbeit Sommersemester 2003 Fachhochschule Ravensburg- Weingarten Studiengang: Angewandte Informatik Schwerpunkt: Multimedia Engineering Name: Andreas Brillisauer Matrikel-Nr.: 13 376 Betreuerin: Frau Prof. Silvia Keller
Inhaltsverzeichnis 1 Projektmitglieder und ihre Aufgaben... 3 2 Projektziele... 4 3 Entwicklung der Schema-Datei... 6 4 Entwicklung der XML-Datei... 9 5 Entwicklung der XSL-Datei... 10 6 Stylesheets in XML... 18 7 Arbeiten mit dem XML-Spy... 19 8 Anhang Quellcode... 20 8.1 Die XSD-Datei... 20 8.2 Die XML-Datei... 22 8.3 Die XSL-Datei... 24 Sommersemester 2003 Seite 2 von 28
1 Projektmitglieder und ihre Aufgaben Das Projekt wurde von den folgenden Projektmitgliedern bearbeitet: Matrikel-Nr. 13 376 Andreas Brillisauer Matrikel-Nr. 13 260 Inga Wolf Die Aufgabenverteilung wurde wie folgt festgelegt: Die Entwicklung aller XML-Dateien (XML, XML-Schema, XSL) sowie die Transformation (XSLT) in das HTML-Format übernahm Herr Brillisauer. Die Erarbeitung des Inhalts und die nötige Einarbeitung in die Thematik XML zur Verwendung als Tutorial übernahm Frau Wolf. Sommersemester 2003 Seite 3 von 28
2 Projektziele Für unsere Projektarbeit haben wir uns für den Themenbereich XML entschieden. Ziel war, ein XML-Tutorial zu erstellen, um Anfängern einen Einstieg in die neue, schnell an Bedeutung gewinnende Technologie XML zu erleichtern. Das Tutorial sollte mit einem Browser betrachtet werden können. Da aktuelle Browser noch keine Seiten in XML darstellen können, mussten wir für die Transformation von XML nach HTML ein Transformationstool verwenden. Hier eignete sich vorab der XML-Spy, in den wir zur Erweiterung unserer Möglichkeiten den externen XSLT-Prozessor Saxon eingebunden haben. Die Zielgruppe umfasst hauptsächlich die Studenten der Fachhochschule Ravensburg-Weingarten, vor allem die Studierenden des Studienganges Angewandte Informatik mit Schwerpunkt Multimedia-Engineering, die sich im 5. Semester in der Vorlesung Multimedia-Technik mit dem Thema XML auseinander setzen dürfen. Die Seite sollte mit einem Frame getrennt werden. Auf der linken Seite war eine Navigationsleiste vorgesehen, die den rechten größeren Teil der Seite regeln sollte. Die Navigationsleiste sollte aus einem XML-Tutorial-Logo bestehen sowie Links zu den verschiedenen Themenbereichen des Tutorials enthalten. Zur Vereinfachung der Handhabung soll auf der rechten Seite, in dem das Thema steht, ein Vor- und Zurückbutton angeboten werden. Sommersemester 2003 Seite 4 von 28
Layout des XML-Tutorials Sommersemester 2003 Seite 5 von 28
3 Entwicklung der Schema-Datei Das Hauptproblem zu Beginn war, sich eine Struktur für das XML-Dokument zu überlegen, die die Problematik sinnvoll erfasst und gleichzeitig möglichst einfach gehalten werden sollte. Nachdem das Rootelement (hier Tutorial) definiert wurde, konnte danach mit der eigentlichen Struktur begonnen werden. Nach dem Wurzelelement ist es nötig mit dem logo -Tag eine Bildreferenz einzubinden, welches dann als Logo in der Navigationsleiste erscheint. In der gleichen Ebene ist es außerdem notwendig, die ausgewählten Themen anhand des thema -Tags anzugeben. Da unsere Themenstruktur in Hauptund Unterthemen gegliedert ist, wurde als Kindelement zusätzlich das Tag unterthema definiert. Somit kann jedes Thema mehrere Unterthemen beinhalten. Sowohl das Tag thema wie auch unterthema besitzen mehrere Attribute, die z. B. für das Verlinken der Seiten notwendig ist. Jedes (Unter-)Thema enthält einen artikel -Tag, der die Art des Inhalts (Text und Bild) der Seite enthält. Die bisher erwähnten Tags wurden jeweils mit einer sequence verknüpft. Somit muss die vorgegebene Reihenfolge eingehalten werden. Das folgende Bild zeigt die Editoransicht einer xsd-datei im XML-Spy im Schema/WSDL Design View. Hier ist es möglich, bequem eine xsd-datei über eine grafische Oberfläche zusammenzustellen. Grobstruktur des Tutorials Sommersemester 2003 Seite 6 von 28
Direkte Unterelemente vom Tag artikel sind die Tags text, bild und ueberschrift. Da diese in keiner bestimmten Reihenfolge auftauchen, wurde zur Verbindung die Methode choice gewählt. Mit dem Tag ueberschrift ist es möglich an beliebigen Stellen im Text eine Überschrift einzufügen. Da natürlich auch Bilder eingebunden werden müssen, wurde das bild -Tag definert mit dem dies durch Angabe eines Pfades und der Bildgröße möglich ist. Gleichberechtigt hierzu ist das text -Tag, welches als Unterelemente die nötigen Formatierungstags bietet. Aufgrund der höheren Komplexität musste beim Definieren einer Liste mit einzelnen Punkten ein weiterer Tag knoedel extra definiert werden. Da innerhalb einer Liste auch formatiert werden kann, sind die aus dem text - Tag bekannten Tags url, code und wagenruecklauf global definiert worden. Struktur des artikel -Tags Da wir in unser Tutorial auch stellenweise Quellcode einbinden möchten, der mit einer speziellen Schriftart (Courier-Schrift mit fester Breite) dargestellt werden soll, wurde das Tag code definiert um diese Stellen zu kennzeichen. Sommersemester 2003 Seite 7 von 28
Innerhalb dieses Tags soll zusätzlich noch ein Wagenrücklauf möglich sein. Um den Quellcode zur besseren Übersicht entsprechend einrücken zu können, gibt es noch das Tag tab welches ein Attribut zur Festlegung der Einrücktiefe enthält. Das Tag code Sommersemester 2003 Seite 8 von 28
4 Entwicklung der XML-Datei Durch die oben definierte xsd-datei ist die Voraussetzung für die eigentliche xml-datei gegeben. Die xml-datei ist eine Datei, die sich stark an die Struktur einer HTML-Datei anlehnt, jedoch die eigenen Tags verwendet und sich unbedingt an die o.g. Struktur halten muss. Hier kann nun der Inhalt des Tutorials eingefügt werden. Bei unserem Tutorial wurde nur eine einzige XML-Datei verwendet um den gesamten Inhalt des Tutorials unterzubringen. Der XSLT-Prozessor (Saxon) erzeugt aus dieser einen XML-Datei alle einzelnen HMTL-Dateien, die für die Themen notwendig sind. Dieses Vorgehen ist jedoch erst ab der XSLT Version 2.0 möglich. Da der XML-Spy jedoch nur die XSLT Version 1.0 implementiert, wurde zur Transformation der externe XSLT-Prozessor Saxon (Version 7.4) eingebunden. Ein Ausschnitt aus der XML-Datei ist im Anhang zu finden. Sommersemester 2003 Seite 9 von 28
5 Entwicklung der XSL-Datei Um die XML-Datei in das gewünschte Ausgabeformat HTML zu transformieren, ist nun eine XSL-Datei nötig, welche die für den XSLT- Prozessor nötigen Anweisungen zur Transformation enthält. Hier folgt nun ein erster Code-Ausschnitt aus der endgültigen XSL-Datei aus unserem Projekt: <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns="http://www.w3.org/tr/rec-html40"> <xsl:output method="html"/> <xsl:template match="/"> <xsl:call-template name="index"/> <xsl:call-template name="start"/> <xsl:result-document href="tutorial/navigation.html"> <html> <head> <title>xml-tutorial Navigation</title> <script language="javascript"> <![CDATA[<!--]]> buttons_n = new Array(); buttons_h = new Array(); <xsl:for-each select="//thema //unterthema"> buttons_n[<xsl:value-of select="position()"/>] = new Image(); buttons_n[<xsl:value-of select="position()"/>].src = "<xsl:value-of select="concat('../bilder/buttons/', substring-before(@link, '.html'), '_n.png')"/>"; buttons_h[<xsl:value-of select="position()"/>] = new Image(); buttons_h[<xsl:value-of select="position()"/>].src = "<xsl:value-of select="concat('../bilder/buttons/', substring-before(@link, '.html'), '_h.png')"/>"; </xsl:for-each> function mouseover(nr) { window.document.images[nr].src = buttons_h[nr].src; } function mouseout(nr) { window.document.images[nr].src = buttons_n[nr].src; } <![CDATA[//-->]]> </script> </head> <body background="../bilder/bg.png" style="scrollbar-base-color:#003366; scrollbar- 3dlight-color:#003366; scrollbar-arrow-color:#ffffff; scrollbar-darkshadowcolor:#003366; scrollbar-face-color:#003366; scrollbar-highlight-color:#4471a8; scrollbarshadow-color:#12457d; scrollbar-track-color:#4471a8;"> <xsl:apply-templates select="//logo"/> <xsl:for-each select="//thema //unterthema"> <a href="{@link}" onmouseover="mouseover({position()})" onmouseout= "mouseout({position()})" target="rechts"> <img src="../bilder/buttons/{concat(substring-before(@link, '.html'), '_n.png')}" alt="{@name}" border="0" style="margin-left:0px;"/></a> <br/> </xsl:for-each> </body> </html> </xsl:result-document> Sommersemester 2003 Seite 10 von 28
Als output-format wird mit der dritten Anweisung HTML gewählt. Sobald der XSLT-Prozessor auf das Root-Element trifft, werden nacheinander die beiden Templates index und start aufgerufen. Diese werden später näher beschrieben. Sie erzeugen die HTML-Dateien index.html und start.html. Mit der nächsten Anweisung (result-document) wird dem XSLT-Prozessor mitgeteilt, dass alle Ausgaben innerhalb dieses Tags in die Datei navigation.html, welche die Navigationsleiste enthalten soll, geschrieben werden. Als nächstes werden die typischen Tags einer HTML-Datei angelegt. Danach folgt ein JavaScript-Code zur Realisierung des MouseOver-Effektes in der Navigationsleiste. Dazu werden zwei Arrays angelegt, eines für die Buttons ohne Effekt und eines für die Buttons mit Effekt. Danach werden die jeweiligen Bilder den Arrays zugewiesen. Für den Effekt wird jeweils eine Funktion angelegt (mouseover und mouseout), welche aufgerufen werden, sobald die Maus über den Button bewegt wird oder diesen wieder verlässt. Hierzu werden jeweils die beiden zueinander gehörenden Buttons ausgetauscht. Mit <apply-templates select= //logo /> wird an dieser Stelle der nötige HTML- Code zum Einfügen des Logos eingebunden. Mit der folgenden foreach-schleife wird nun jedes Thema- und Unterthema- Tag durchlaufen und für jedes der zugehörige Button in die Navigationsleiste eingefügt und mit der entsprechenden Seite verlinkt. Hier folgt nun das vorher erwähnte Code-Stück zum Einfügen des Logos: <xsl:template match="logo"> <a href="start.html" target="rechts"><img src="../{@pfad}" border="0"/></a> <br/> Sommersemester 2003 Seite 11 von 28
Sobald der XSLT-Prozessor auf das Tag <text> stößt wird eine neue Tabellenzeile eingefügt. Es wird innnerhalb dieser Tabellenzeile der Text zwischen den <text>-tags eingefügt. <xsl:template match="text"> <tr> <td> <p> </p> </td> </tr> Im u.a. Code wird jetzt für jedes Thema und Unterthema eine Seite generiert. Hierbei kommt wieder das <result-document>-tag zum Einsatz. Zur Benennung dieser HTML-Seiten wird das jeweilige Attribut link verwendet. Danach werden wieder die typischen Tags zum Erstellen einer HTML-Seite ausgegeben. Um die Seite zu strukturieren, wird eine Tabelle angelegt. Die erste Tabellenzeile wird jeweils mit dem aktuellen Thema- / Unterthema-Namen belegt. Durch das <xsl:apply-template> wird an dieser Stelle der für das Thema geschriebene Text, der wie schon vorher erwähnt, zwischen text -Tags steht, eingefügt. In die letzte Tabellenzeile wird durch die Aufrufe <xsl:call-template> jeweils ein Button, der mit der vorigen bzw. nächsten Seite verlinkt ist, eingefügt. Die aufgerufenen Templates vz_thema und vz_unterthema werden im weiteren Code näher beschrieben. <xsl:template match="thema unterthema"> <xsl:variable name="file" select="@link"/> <!-- Datei für Hauptthema anlegen --> <xsl:result-document href="tutorial/{$file}"> <html> <head> <title><xsl:value-of select="@name"/></title> <link rel="stylesheet" type="text/css" href="../tutorial.css"/> </head> <body> <table width="70%" align="center" border="0"> <tr> <td><h1><xsl:value-of select="@name"/></h1></td> </tr> <tr> <td> <br/><br/> <table width="100%" border="0" bgcolor="#eeeeee"> Sommersemester 2003 Seite 12 von 28
<xsl:if test="@art='thema'"> <xsl:call-template name="vz_thema"/> </xsl:if> <xsl:if test="@art='unterthema'"> <xsl:call-template name="vz_unterthema"/> </xsl:if> </table> </td> </tr> </table> </body> </html> </xsl:result-document> Mit dem Tag <code> wird die Schriftart auf eine typische Maschinenschrift (Courier) umgestellt. <xsl:template match="code"> <span style="font-family:courier;"> </span> Um eine HTML-Aufzählungsliste einzuleiten, wird der Tag <liste> verwendent, der dem HTML-Tag <ul> entspricht. Die eigentlichen Aufzählungspunkte werden durch das <xsl:apply-templates>-tag zwischen den <ul>-tags platziert. Sie entsprechen den <li>-tags in HTML und heißen in unserem Beispiel <knoedel>. <xsl:template match="liste"> <ul> </ul> <xsl:template match="knoedel"> <li> <br/><br/> </li> Sommersemester 2003 Seite 13 von 28
Um in den eigentlichen Text Überschriften einbauen zu können, wurde der Tag <ueberschrift> definiert. Dieser wird mit der Schriftgröße <h2> festgelegt. <xsl:template match="ueberschrift"> <tr> <td> <h2> </h2> </td> </tr> Um die Einrückungen bei Quellcode-Ausschnitten zu gewährleisten, wurde der <tab>-tag definiert. Mit dem Attribut ebene kann die Einrücktiefe festgelegt werden. Dabei wird die Zeile pro Ebene immer um 10 Pixel eingerückt. <xsl:template match="tab"> <xsl:variable name="einrueck" select="@ebene * 10"/> <div style="margin-left:{$einrueck}px;"> </div> Ein Text, der durch den unteren Tag eingeschlossen ist, wird durch einen HTML-Link ersetzt. Durch das Attribut ziel wird festgelegt, ob die verlinkte Seite im rechten Frame geöffnet wird oder ein neues Browser-Fenster gewählt wird. <xsl:template match="//url"> <xsl:if test="@ziel='blank'"> <a href="{@link}" target="_blank"></a> </xsl:if> <xsl:if test="@ziel='rechts'"> <a href="{@link}" target="rechts"></a> </xsl:if> Mit dem <bild>-tag ist es möglich, ein Bild einzubinden. Es wird immer in die Tabellenmitte gesetzt, die Größe muss angegeben werden und durch das Attribut legende ist es möglich, eine Bildunterschrift anzubringen. <xsl:template match="bild"> <tr><td> <div style="text-align:center;"> <img src="../{@quelle}" width="{@breite}" height="{@hoehe}"/><br/><br/> <i><p style="margin-bottom:30px;"><xsl:value-of select="@legende"/></p></i> </div> </td></tr> Sommersemester 2003 Seite 14 von 28
Der Tag <wagenruecklauf> fügt einen Zeilenumbruch ein. <xsl:template match="//wagenruecklauf"> <br/> Das oben erwähnte Template index legt die Datei index.html an. Sie erzeugt den Frameset für das gesamte Tutorial. <xsl:template name="index"> <html> <head> <title>xml-tutorial</title> <link rel="stylesheet" type="text/css" href="tutorial.css"/> </head> <frameset cols="237,*" border="0"> <frame src="tutorial/navigation.html" name="links" noresize="noresize" marginwidth="0" marginheight="0"/> <frame src="tutorial/start.html" name="rechts"/> <noframes>ihr Browser unterstützt keine Frames!</noframes> </frameset> </html> Das ebenfalls oben erwähnte Template start legt die Datei start.html an. Diese beinhaltet die Startseite, die Sie beim Aufrufen der Datei index.html auf der rechten Frameseite unseres Tutorials sehen können. <xsl:template name="start"> <xsl:result-document href="tutorial/start.html"> <html> <head> <title>xml-tutorial Startseite</title> <link rel="stylesheet" type="text/css" href="../tutorial.css"/> </head> <body> <table width="70%" align="center" border="0"> <tr> <td align="center"> <img src="../bilder/logo2.gif" alt="logo" style="margin-top:50px;marginbottom:70px"/> </td> </tr> <tr> <td align="center"> <h1>xml-tutorial</h1><br/><p> Von Andreas Brillisauer und Inga Wolf<br/> im Sommersemester 2003<br/> an der Fachhochschule Ravensburg-Weingarten<br/> Betreuerin: Frau Prof. Silvia Keller<br/></p> </td> </tr> </table> </body> </html> </xsl:result-document> Sommersemester 2003 Seite 15 von 28
Als nächstes folgt die Beschreibung der Templates, welche die Navigationselemente zum Vor- bzw. Zurückspringen zwischen den einzelnen Themen am unteren Rand jeder Seite, erzeugen. Der folgende Codeausschnitt tut genau dies für alle Hauptthemen. Mit der ersten if-abfrage wird getestet, ob das aktuelle Thema nicht das erste Thema ist. Nun muss durch <xsl:choose> entschieden werden, ob das vorherige Thema kein Unterthema hat. In diesem Fall wird der Zurück-Button mit dem letzten Hauptthema verlinkt. Im anderen Fall wird er mit dem letzte Unterthema verlinkt. Mit der nächsten if-abfrage wird getestet, ob das aktuelle Thema nicht das letzte Thema ist. Nun muss durch <xsl:choose> entschieden werden, ob das aktuelle Thema Unterthemen besitzt. Falls dies nicht der Fall ist, muss der Vor-Button mit dem nächsten Hauptthema verlinkt sein. <xsl:template name="vz_thema"> <tr><td> <!-- Link zurück, nur wenn aktuelles Thema nicht erstes Thema ist --> <xsl:if test="current()!=//thema[1]"> <xsl:choose> <!-- Falls vorheriges Thema keine Unterthemen hat, zurück zum letzten Hauptthema --> <xsl:when test="count(preceding-sibling::thema[1]/unterthema)=0"> <p style="text-align:left;"><a href="{preceding-sibling::thema[1]/@link}" target="rechts"><img src="../bilder/pfeil_l.png" alt="zurück" border="0" align="middle" style="margin-right:10px;"/><xsl:value-of select="precedingsibling::thema[1]/@name"/></a></p> </xsl:when> <!-- Falls vorheriges Thema Unterthemen hat, zurück zum letzten Unterthema --> <xsl:otherwise> <p style="text-align:left;"><a href="{precedingsibling::thema[1]/unterthema[last()]/@link}" target="rechts"> <img src="../bilder/pfeil_l.png" alt="zurück" border="0" align="middle" style="margin-right:10px;"/><xsl:value-of select="precedingsibling::thema[1]/unterthema[last()]/@name"/></a></p> </xsl:otherwise> </xsl:choose> </xsl:if> </td><td> <!-- Link vorwärts, nur wenn aktuelles Thema nicht letztes Thema ist --> <xsl:if test="current()!=//thema[count(//thema)]"> <xsl:choose> <!--Falls aktuelles Thema keine Unterthemen hat, vorwärts zum nächsten Hauptthema--> <xsl:when test="count(unterthema)=0"> <p style="text-align:right;"><a href="{following-sibling::thema[1]/@link}" target="rechts"><xsl:value-of select="following-sibling::thema[1]/@name"/> <img src="../bilder/pfeil_r.png" alt="vor" border="0" align="middle" style="marginleft:10px;"/></a></p> </xsl:when> <!-- Falls aktuelles Thema Unterthemen hat, vorwärts zum ersten Unterthema --> <xsl:otherwise> <p style="text-align:right;"><a href="{unterthema[1]/@link}" target="rechts"><xsl:value-of select="unterthema[1]/@name"/> <img src="../bilder/pfeil_r.png" alt="vor" border="0" align="middle" style="margin-left:10px;"/></a></p> </xsl:otherwise> </xsl:choose> </xsl:if> </td></tr> Sommersemester 2003 Seite 16 von 28
Der nächste Codeausschnitt erzegt wiederum die oben erwähnten Navigationselemente, jedoch diesmal für alle Unterthemen. Als erstes muss durch <xsl:choose> entschieden werden, ob das aktuelle Unterthema das erste Unterthema eines Hauptthemas ist. Falls ja, muss der Zurück-Button mit dem Hauptthema verlinkt werden. Ansonsten muss es mit dem vorherigen Unterthema verlinkt werden. Die nächste <xsl:choose>-anweisung prüft, ob das aktuelle Unterthema das letzte Unterthema ist und ein weiteres Hauptthema folgt. Wenn dies der Fall ist, wird er zu diesem Hauptthema verlinkt. Falls aber das aktuelle Unterthema nicht das letzte Unterthema ist, wird es mit dem nächsten Unterthema verlinkt. <xsl:template name="vz_unterthema"> <tr><td> <xsl:choose> <!-- Falls aktuelles Unterthema das erste Unterthema ist, zurück zum letzten Hauptthema --> <xsl:when test="position()=2 or position()=4"> <p style="text-align:left;"><a href="{parent::thema/@link}" target="rechts"> <img src="../bilder/pfeil_l.png" alt="zurück" border="0" align="middle" style="marginright:10px;"/><xsl:value-of select="parent::thema/@name"/></a></p> </xsl:when> <!--Falls akt. Unterthema nicht das erste Unterthema ist, zurück zum letzten Unterthema--> <xsl:otherwise> <p style="text-align:left;"><a href="{preceding-sibling::unterthema[1]/@link}" target="rechts"><img src="../bilder/pfeil_l.png" alt="zurück" border="0" align="middle" style="margin-right:10px;"/><xsl:value-of select="precedingsibling::unterthema[1]/@name"/></a></p> </xsl:otherwise> </xsl:choose> </td> <td> <xsl:choose> <!--Falls akt. Unterthema das letzte Unterthema ist & falls ein weiteres Hauptthema folgt --> <xsl:when test="(count(parent::thema/following-sibling::thema)!=0) and (count(followingsibling::unterthema)=0)"> <p style="text-align:right;"><a href="{parent::thema/following-sibling::thema[1]/@link}" target="rechts"><xsl:value-of select="parent::thema/followingsibling::thema[1]/@name"/><img src="../bilder/pfeil_r.png" alt="vor" border="0" align="middle" style="margin-left:10px;"/></a></p> </xsl:when> <!--Falls akt. Unterthema nicht letztes Unterthema ist, vorwärts zum nächsten Unterthema--> <xsl:otherwise> <p style="text-align:right;"><a href="{following-sibling::unterthema[1]/@link}" target="rechts"><xsl:value-of select="following-sibling::unterthema[1]/@name"/> <img src="../bilder/pfeil_r.png" alt="vor" border="0" align="middle" style="marginleft:10px;"/></a></p> </xsl:otherwise> </xsl:choose> </td></tr> Sommersemester 2003 Seite 17 von 28
6 Stylesheets in XML Für die Formatierung des Textes stand mir die Auswahl zwischen CSS uns XSL-FO zur Verfügung. Da die Entwicklung von XSL-FO zur Zeit noch in den Kinderschuhen steckt und somit nur sehr wenig Literatur über dieses Thema vorhanden ist, war es mir nicht möglich diesen Teil der XML-Familie in einem Projekt unseres Umfangs zu implementieren. Daher habe ich mich für die herkömmlichen CSS-Stylesheets entschieden. Diese werden fast immer zur Formatierung von HTML-Dokumenten verwendet. Da ich die XML-Datei in das HTML-Format transformiere, haben sich CSS-Stylesheets angeboten. Z. B. wird nach öffnendem p -Tag die unten angegebene Schriftformatierung eingeleitet und bleibt bis auf Widerruf erhalten. p { } font-color: #ffffff; font-family: Arial; font-size: 14px; Das Stylesheet wird in einer separaten CSS-Datei abgespeichert. Der XSLT- Prozessor bindet die CSS-Datei bei jeder erzeugten HTML-Datei ein um somit eine einheitliche Formatierung zu erreichen. Sommersemester 2003 Seite 18 von 28
7 Arbeiten mit dem XML-Spy Für die Durchführung des Projekts habe ich den XML-Spy verwendet. Dieser eignet meiner Meinung nach besonders gut zur bequemen Erstellung von XSD-Dateien, da einem die grafische Bedienoberfläche sehr nützlich ist. Es ist zwar zu Beginn eine Einarbeitungszeit nötig, die sich aber sehr schnell bezahlt macht. Für die XSL-Dateien bietet der XML-Spy keine grafischen Hilfsmittel, wobei dies bei einer Sprache wie XSLT kaum sinnvoll wäre. Besonders hilfreich ist auch, dass bei jedem Speichern die Datei sofort auf die Wohlgeformtheit und Gültigkeit des Dokuments geprüft wird. Somit sind Fehler bei der Transformation ausgeschlossen. Kleine Fehler sind mir jedoch auch aufgefallen. Das Programm hat leider leichte Einbußen in der Stabilität, die bestimmt mit der nächsten Version behoben sein werden. Sommersemester 2003 Seite 19 von 28
8 Anhang Quellcode 8.1 Die XSD-Datei <?xml version="1.0" encoding="utf-8"?> <!-- edited with XMLSPY v5 rel. 4 U (http://www.xmlspy.com) by Registred (Registred) --> <xs:schema xmlns:xs="http://www.w3.org/2001/xmlschema" elementformdefault="qualified" attributeformdefault="unqualified"> <xs:element name="tutorial"> <xs:annotation> <xs:documentation>comment describing your root element</xs:documentation> </xs:annotation> <xs:complextype> <xs:sequence> <xs:element name="logo"> <xs:complextype> <xs:attribute name="pfad" type="xs:string" use="required"/> </xs:complextype> </xs:element> <xs:element name="thema" maxoccurs="unbounded"> <xs:complextype> <xs:sequence> <xs:element name="artikel" type="artikeltype" minoccurs="0"/> <xs:element name="unterthema" minoccurs="0" maxoccurs="unbounded"> <xs:complextype> <xs:sequence> <xs:element name="artikel" type="artikeltype" minoccurs="0"/> </xs:sequence> <xs:attribute name="name" type="xs:string" use="required"/> <xs:attribute name="link" type="xs:string" use="required"/> <xs:attribute name="art" type="xs:string" use="required"/> </xs:complextype> </xs:element> </xs:sequence> <xs:attribute name="name" type="xs:string" use="required"/> <xs:attribute name="link" type="xs:string" use="required"/> <xs:attribute name="art" type="xs:string" use="required"/> </xs:complextype> </xs:element> </xs:sequence> </xs:complextype> </xs:element> <xs:complextype name="artikeltype"> <xs:choice minoccurs="0" maxoccurs="unbounded"> <xs:element name="text" minoccurs="0" maxoccurs="unbounded"> <xs:complextype mixed="true"> <xs:choice minoccurs="0" maxoccurs="unbounded"> <xs:element name="url" minoccurs="0" maxoccurs="unbounded"> <xs:complextype> <xs:simplecontent> <xs:extension base="xs:string"> <xs:attribute name="link" type="xs:string" use="required"/> <xs:attribute name="ziel" type="xs:string" use="required"/> </xs:extension> </xs:simplecontent> </xs:complextype> </xs:element> <xs:element name="code" type="codetype" minoccurs="0" maxoccurs="unbounded"/> <xs:element ref="wagenruecklauf" minoccurs="0" maxoccurs="unbounded"/> Sommersemester 2003 Seite 20 von 28
<xs:element name="liste" minoccurs="0" maxoccurs="unbounded"> <xs:complextype> <xs:sequence> <xs:element name="knoedel" maxoccurs="unbounded"> <xs:complextype mixed="true"> <xs:choice minoccurs="0" maxoccurs="unbounded"> <xs:element name="code" type="codetype" minoccurs="0" maxoccurs="unbounded"/> <xs:element ref="wagenruecklauf" minoccurs="0" maxoccurs="unbounded"/> <xs:element name="url" minoccurs="0" maxoccurs="unbounded"> <xs:complextype> <xs:simplecontent> <xs:extension base="xs:string"> <xs:attribute name="link" type="xs:string" use="required"/> <xs:attribute name="ziel" type="xs:string" use="required"/> </xs:extension> </xs:simplecontent> </xs:complextype> </xs:element> </xs:choice> </xs:complextype> </xs:element> </xs:sequence> </xs:complextype> </xs:element> </xs:choice> </xs:complextype> </xs:element> <xs:element name="bild" minoccurs="0" maxoccurs="unbounded"> <xs:complextype> <xs:attribute name="quelle" type="xs:string" use="required"/> <xs:attribute name="hoehe" type="xs:string" use="required"/> <xs:attribute name="breite" type="xs:string" use="required"/> <xs:attribute name="legende" type="xs:string" use="optional"/> </xs:complextype> </xs:element> <xs:element name="ueberschrift" type="xs:string" minoccurs="0" maxoccurs="unbounded"/> </xs:choice> </xs:complextype> <xs:element name="wagenruecklauf"/> <xs:complextype name="codetype" mixed="true"> <xs:sequence minoccurs="0" maxoccurs="unbounded"> <xs:element ref="wagenruecklauf" minoccurs="0" maxoccurs="unbounded"/> <xs:element name="tab" minoccurs="0" maxoccurs="unbounded"> <xs:complextype> <xs:simplecontent> <xs:extension base="xs:string"> <xs:attribute name="ebene" type="xs:unsignedint" use="required"/> </xs:extension> </xs:simplecontent> </xs:complextype> </xs:element> </xs:sequence> </xs:complextype> </xs:schema> Sommersemester 2003 Seite 21 von 28
8.2 Die XML-Datei Hier steht aus Platzgründen nur ein Teilausschnitt aus der XML-Datei. Der vollständige Quellcode ist auf der CD enthalten. <?xml version="1.0" encoding="utf-8"?> <!-- edited with XMLSPY v5 rel. 4 U (http://www.xmlspy.com) by Registred (Registred) --> <tutorial xmlns:xsi="http://www.w3.org/2001/xmlschema-instance" xsi:nonamespaceschemalocation="c:\documents and Settings\Wolfi\My Documents\Inga\Semester7\XML\Tutorial\Projektarbeit_final\tutorial.xsd" xmlns:html="http://www.w3.org/tr/rec-html40"> <logo pfad="bilder/logo.png"/> <thema name="vorwort" link="vorwort.html" art="thema"> <artikel> <text> Wir studieren im 7. Fachsemester <url link="http://www.fhweingarten.de/home/studiengaenge/ai/de/homeai/index.html" ziel="blank">angewandte Informatik</url> mit dem Schwerpunkt Multimedia-Engineering an der <url link="http://www.fh-weingarten.de" ziel="blank">fachhochschule Ravensburg- Weingarten</url>. Als Projektarbeit haben wir das Thema XML gewählt, da dies heute einen sehr großen Bereich in der IT-Branche einnimmt und seine Bedeutung in naher Zukunft weiter zunehmen wird. Dieses Tutorial wurde im Rahmen der Projektarbeit des Studienganges <url link="http://www.fh-weingarten.de/home/studiengaenge/ai/de/homeai/index.html" ziel="blank">angewandte Informatik</url> in XML mit dem XML-Spy erstellt. Im Laufe der Projektarbeit haben wir Einblick in die extensible Markup Language (XML) und die hierzu angebotenen Tools erhalten können. Wir danken <url link="http://www.fh-weingarten.de/~keller" ziel="blank">frau Prof. Keller </url> für eine lehrreiche Projektarbeit. Inga Wolf und Andreas Brillisauer </text> </artikel> </thema> <thema name="überblick über XML" link="ueber.html" art="thema"> <artikel> <bild quelle="bilder/logo3.gif" hoehe="70" breite="124"/> <text> Unter dem Thema "Überblick über XML" soll das grundlegende Verständnis für die extensible Markup Language vermittelt werden. Dabei werden Vorteile und Verwendungszweck der Sprache nähergebracht. Die Themen wurden von uns so gewählt, wie wir sie für wichtig erachtet haben, um einen möglichst schnellen Einstieg in XML zu ermöglichen. Es handelt sich hauptsächlich um die Entwicklung, den Aufbau und den Hintergrund von XML. Der Aufbau der verschiedenen Dokumente hoffen wir anschaulich und verständlich zeigen zu können. </text> </artikel> <unterthema name="warum XML?" link="warum.html" art="unterthema"> <artikel> <text> HTML ist mittlerweile eine relativ komplizierte Sprache geworden, die jedoch bereits an Grenzen stößt. Da ist zum einen der eingeschränkte Vorrat an Elementtypen, zum anderen besteht die Gefahr, dass der Standard allmählich auseinander driftet. Dem Sommersemester 2003 Seite 22 von 28
setzt sich XML entgegen. XML ist nicht als Ersatz für HTML gedacht. Es ist mehr als HTML, weil es erlaubt etwas zu tun, das man bislang im Web nicht tun konnte: beliebige Tags verwenden. XML hat sich zum Standard für den Austausch von Daten zwischen unterschiedlichen Systemen entwickelt. Es löst die Kompatibilitätsprobleme zwischen unterschiedlichen Plattformen und vereinfacht damit viele Unternehmenstransaktionen sowie den Austausch von Daten ähnlich wie RTF für Texte - aber in einem einheitlichen, allgemein verwendbaren, herstellerunabhängigen Format. Mit XML kann man die logische Bedeutung von Daten, Informationen und Texten definieren - ähnlich wie die Tabellen- und Spaltenbezeichnungen in Datenbanken und Tabellenkalkulationen. Die Elemente dienen dazu, dem Dokument eine logische, inhaltlich begründete Struktur zu geben. Dennoch bewirkt das XML-Format von Dokumenten alleine noch nicht viel. Es sind eher die anwendungsorienterten Formate, die in XML notiert sind, die wirklichen Gewinn aus diesem Format ziehen können. Ein anschauliches Beispiel hierfür ist das Grafikformat <url link="http://www.w3.org/graphics/svg" ziel="blank">scalable Vector Graphics (SVG)</url>. Ein Textelement, das als grafisch anspruchsvolles Objekt als Banner einer Web-Seite dienen soll, bietet die Vorteile beider Welten. Es ist gleichzeitig Grafik und Text. Der Textteil ist nicht binär abgelegt, sondern bleibt als Text inhaltlich recherchierbar. Der grundlegende Mechanismus bei allen XML-basierten Formaten ist der, daß eine Quellinformation umgewandelt wird in eine anwendungsorientierte Form wie beispielsweise Grafik, HTML, PDF oder andere Formate, die zukünftig noch entwickelt werden könnten. </text> <bild quelle="bilder/xml-familie.gif" breite="458" hoehe="522" legende="übersicht über die XML-Familie"/> </artikel> </unterthema> </thema> </tutorial> Sommersemester 2003 Seite 23 von 28
8.3 Die XSL-Datei <?xml version="1.0" encoding="utf-8"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/xsl/transform" xmlns="http://www.w3.org/tr/rec-html40"> <xsl:output method="html"/> <xsl:template match="/"> <xsl:call-template name="index"/> <xsl:call-template name="start"/> <xsl:result-document href="tutorial/navigation.html"> <html> <head> <title>xml-tutorial Navigation</title> <script language="javascript"> <![CDATA[<!--]]> buttons_n = new Array(); buttons_h = new Array(); <xsl:for-each select="//thema //unterthema"> buttons_n[<xsl:value-of select="position()"/>] = new Image(); buttons_n[<xsl:value-of select="position()"/>].src = "<xsl:value-of select="concat('../bilder/buttons/', substring-before(@link, '.html'), '_n.png')"/>"; buttons_h[<xsl:value-of select="position()"/>] = new Image(); buttons_h[<xsl:value-of select="position()"/>].src = "<xsl:value-of select="concat('../bilder/buttons/', substring-before(@link, '.html'), '_h.png')"/>"; </xsl:for-each> function mouseover(nr) { window.document.images[nr].src = buttons_h[nr].src; } function mouseout(nr) { window.document.images[nr].src = buttons_n[nr].src; } <![CDATA[//-->]]> </script> </head> <body background="../bilder/bg.png" style="scrollbar-base-color:#003366; scrollbar- 3dlight-color:#003366; scrollbar-arrow-color:#ffffff; scrollbar-darkshadowcolor:#003366; scrollbar-face-color:#003366; scrollbar-highlight-color:#4471a8; scrollbarshadow-color:#12457d; scrollbar-track-color:#4471a8;"> <xsl:apply-templates select="//logo"/> <xsl:for-each select="//thema //unterthema"> <a href="{@link}" onmouseover="mouseover({position()})" onmouseout="mouseout({position()})" target="rechts"> <img src="../bilder/buttons/{concat(substring-before(@link, '.html'), '_n.png')}" alt="{@name}" border="0" style="margin-left:0px;"/></a> <br/> </xsl:for-each> </body> </html> </xsl:result-document> <xsl:template match="logo"> <a href="start.html" target="rechts"><img src="../{@pfad}" border="0"/></a> <br/> Sommersemester 2003 Seite 24 von 28
<xsl:template match="text"> <tr> <td> <p> </p> </td> </tr> <xsl:template match="thema unterthema"> <xsl:variable name="file" select="@link"/> <!-- Datei für Hauptthema anlegen --> <xsl:result-document href="tutorial/{$file}"> <html> <head> <title><xsl:value-of select="@name"/></title> <link rel="stylesheet" type="text/css" href="../tutorial.css"/> </head> <body> <table width="70%" align="center" border="0"> <tr> <td><h1><xsl:value-of select="@name"/></h1></td> </tr> <tr> <td> <br/><br/> <table width="100%" border="0" bgcolor="#eeeeee"> <xsl:if test="@art='thema'"> <xsl:call-template name="vz_thema"/> </xsl:if> <xsl:if test="@art='unterthema'"> <xsl:call-template name="vz_unterthema"/> </xsl:if> </table> </td> </tr> </table> </body> </html> </xsl:result-document> <xsl:template match="code"> <span style="font-family:courier;"> </span> <xsl:template match="liste"> <ul> </ul> <xsl:template match="knoedel"> <li> <br/><br/> </li> Sommersemester 2003 Seite 25 von 28
<xsl:template match="ueberschrift"> <tr> <td> <h2> </h2> </td> </tr> <xsl:template match="tab"> <xsl:variable name="einrueck" select="@ebene * 10"/> <div style="margin-left:{$einrueck}px;"> </div> <xsl:template match="//url"> <xsl:if test="@ziel='blank'"> <a href="{@link}" target="_blank"></a> </xsl:if> <xsl:if test="@ziel='rechts'"> <a href="{@link}" target="rechts"></a> </xsl:if> <xsl:template match="bild"> <tr><td> <div style="text-align:center;"> <img src="../{@quelle}" width="{@breite}" height="{@hoehe}"/><br/><br/> <i><p style="margin-bottom:30px;"><xsl:value-of select="@legende"/></p></i> </div> </td></tr> <xsl:template match="//wagenruecklauf"> <br/> <xsl:template name="index"> <html> <head> <title>xml-tutorial</title> <link rel="stylesheet" type="text/css" href="tutorial.css"/> </head> <frameset cols="237,*" border="0"> <frame src="tutorial/navigation.html" name="links" noresize="noresize" marginwidth="0" marginheight="0"/> <frame src="tutorial/start.html" name="rechts"/> <noframes>ihr Browser unterstützt keine Frames!</noframes> </frameset> </html> <xsl:template name="start"> <xsl:result-document href="tutorial/start.html"> <html> <head> <title>xml-tutorial Startseite</title> <link rel="stylesheet" type="text/css" href="../tutorial.css"/> </head> <body> <table width="70%" align="center" border="0"> <tr> <td align="center"> Sommersemester 2003 Seite 26 von 28
<img src="../bilder/logo2.gif" alt="logo" style="margin-top:50px;marginbottom:70px"/> </td> </tr> <tr> <td align="center"> <h1>xml-tutorial</h1><br/><p> Von Andreas Brillisauer und Inga Wolf<br/> im Sommersemester 2003<br/> an der Fachhochschule Ravensburg-Weingarten<br/> Betreuerin: Frau Prof. Silvia Keller<br/></p> </td> </tr> </table> </body> </html> </xsl:result-document> <xsl:template name="vz_thema"> <tr><td> <!-- Link zurück, nur wenn aktuelles Thema nicht erstes Thema ist --> <xsl:if test="current()!=//thema[1]"> <xsl:choose> <!-- Falls vorheriges Thema keine Unterthemen hat, zurück zum letzten Hauptthema --> <xsl:when test="count(preceding-sibling::thema[1]/unterthema)=0"> <p style="text-align:left;"><a href="{preceding-sibling::thema[1]/@link}" target="rechts"><img src="../bilder/pfeil_l.png" alt="zurück" border="0" align="middle" style="margin-right:10px;"/><xsl:value-of select="precedingsibling::thema[1]/@name"/></a></p> </xsl:when> <!-- Falls vorheriges Thema Unterthemen hat, zurück zum letzten Unterthema --> <xsl:otherwise> <p style="text-align:left;"><a href="{precedingsibling::thema[1]/unterthema[last()]/@link}" target="rechts"> <img src="../bilder/pfeil_l.png" alt="zurück" border="0" align="middle" style="margin-right:10px;"/><xsl:value-of select="precedingsibling::thema[1]/unterthema[last()]/@name"/></a></p> </xsl:otherwise> </xsl:choose> </xsl:if> </td> <td> <!-- Link vorwärts, nur wenn aktuelles Thema nicht letztes Thema ist --> <xsl:if test="current()!=//thema[count(//thema)]"> <xsl:choose> <!--Falls aktuelles Thema keine Unterthemen hat, vorwärts zum nächsten Hauptthema--> <xsl:when test="count(unterthema)=0"> <p style="text-align:right;"><a href="{following-sibling::thema[1]/@link}" target="rechts"><xsl:value-of select="following-sibling::thema[1]/@name"/> <img src="../bilder/pfeil_r.png" alt="vor" border="0" align="middle" style="marginleft:10px;"/></a></p> </xsl:when> <!-- Falls aktuelles Thema Unterthemen hat, vorwärts zum ersten Unterthema --> <xsl:otherwise> <p style="text-align:right;"><a href="{unterthema[1]/@link}" target="rechts"><xsl:value-of select="unterthema[1]/@name"/> <img src="../bilder/pfeil_r.png" alt="vor" border="0" align="middle" style="margin-left:10px;"/></a></p> </xsl:otherwise> </xsl:choose> </xsl:if> </td></tr> Sommersemester 2003 Seite 27 von 28
<xsl:template name="vz_unterthema"> <tr><td> <xsl:choose> <!-- Falls aktuelles Unterthema das erste Unterthema ist, zurück zum letzten Hauptthema --> <xsl:when test="position()=2 or position()=4"> <p style="text-align:left;"><a href="{parent::thema/@link}" target="rechts"> <img src="../bilder/pfeil_l.png" alt="zurück" border="0" align="middle" style="marginright:10px;"/><xsl:value-of select="parent::thema/@name"/></a></p> </xsl:when> <!-- Falls akt. Unterthema nicht das erste Untertema ist, zurück zum letzten Unterthema --> <xsl:otherwise> <p style="text-align:left;"><a href="{preceding-sibling::unterthema[1]/@link}" target="rechts"><img src="../bilder/pfeil_l.png" alt="zurück" border="0" align="middle" style="margin-right:10px;"/><xsl:value-of select="precedingsibling::unterthema[1]/@name"/></a></p> </xsl:otherwise> </xsl:choose> </td> <td> <xsl:choose> <!-- Falls akt. Unterthema das letzte Unterthema ist & falls ein weiteres Hauptthema folgt--> <xsl:when test="(count(parent::thema/following-sibling::thema)!=0) and (count(followingsibling::unterthema)=0)"> <p style="text-align:right;"><a href="{parent::thema/following-sibling::thema[1]/@link}" target="rechts"><xsl:value-of select="parent::thema/followingsibling::thema[1]/@name"/><img src="../bilder/pfeil_r.png" alt="vor" border="0" align="middle" style="margin-left:10px;"/></a></p> </xsl:when> <!--Falls aktuelles Unterthemen nicht letztes Unterthema ist, vorwärts zum nächsten Unterthema --> <xsl:otherwise> <p style="text-align:right;"><a href="{following-sibling::unterthema[1]/@link}" target="rechts"><xsl:value-of select="following-sibling::unterthema[1]/@name"/> <img src="../bilder/pfeil_r.png" alt="vor" border="0" align="middle" style="marginleft:10px;"/></a></p> </xsl:otherwise> </xsl:choose> </td></tr> </xsl:stylesheet> Sommersemester 2003 Seite 28 von 28