XML ist für die Verwendung bei Websites gut geeignet, vor allem, wenn die XSL- Transformationen, das Scripting oder andere Formen der Programmierung auf dem Server, nicht auf dem Client durchgeführt werden. Sie werden heute viele der Technologien, die wir an den vorhergehenden Tagen besprochen haben, zusammenführen und eine kleine Webanwendung erzeugen. Sie lernen dabei:
Sie werden heute eine Anwendung für eine Website aufbauen, die es Weinliebhabern erlaubt, Notizen zu den Weinproben einzugeben, die Sie durchgeführt haben. Die gesammelten Daten werden den Namen des Weins einschließen, den Winzer, der ihn produziert, die Region, aus der er stammt, den Weintyp oder seine Fruchtnote sowie die Notizen zur Geschmacksprobe. Diese Aufzeichnungen können gespeichert und aus einer Datenbank extrahiert werden, ähnlich der Art, wie Sie am 19. Tag auf die Nachrichtenaufzeichnungen zugegriffen haben. Heute werden Sie jedoch natives XML zur Speicherung der Daten verwenden. Die Daten werden in einer XML-Datei abgelegt, die auf dem Server beherbergt ist und Sie werden ein XML-DOM-Objekt instanzieren, das neue Knoten für den gespeicherten Dokumentbaum erstellt. Sie werden serverseitige Scripts in Form von Active Server Pages verwenden, um für die Präsentation einer Tabelle zu allen Geschmacksnotizen eine XSL-Transformation des XML-Quelldokuments in HTML durchzuführen.
Die Anwendung wird aus einer Reihe verwandter Dokumente bestehen. In den folgenden Übungen erzeugen Sie all diese Dokumente und platzieren sie dann für die Ausführung auf einem Webserver. Damit Sie diese Anwendung in der angegebenen Weise aufbauen können, müssen Sie einige Tools von Microsoft verwenden. Sie können eine ähnliche Anwendung aber genauso gut mit anderen server- oder clientseitigen Applikationen aufbauen.
Die Struktur der Anwendung schließt eine Homepage (index.html) mit Links auf ein Formular für die Dateneingabe ein (wein_notiz.html) sowie ein serverseitiges Script (zeige_notiz.asp), das alle Aufzeichnungen im Datensatz (wein_notiz.xml) auflistet. Ein optionaler Cascading Style Sheet (wein_notiz.css) kann der gesamten Anwendung ein durchgängiges Aussehen geben, indem er alle HTML-Seiten auf ähnliche Art und Weise stilisiert. Wenn ein Anwender das Formular ausfüllt (wein_notiz.html), verarbeitet ein serverseitiges Script (proz_notiz.asp) die Einträge und fügt sie dem Dokument wein_notiz.xml hinzu. Ein zweites serverseitiges Script gestattet dem Anwender, sich das ganze Set der Bemerkungen zu den Weinproben anzusehen (zeige_notiz.asp). Abbildung 21.1 zeigt die beschriebene Architektur.
Abbildung 21.1: Die Architektur der Webanwendung zu den Notizen über Weinproben
Die Daten für diese Anwendung werden in einer XML-Datei mit dem Wurzelelement wein_notiz gespeichert. Jedes wein-Element ist wie ein Eintrag in eine hierarchische Datenbankstruktur. Ein wein-Element enthält die abgeleiteten Elemente winzer, region, typ, jahrgang und notiz. Das Element notiz wird als CDATA-Abschnitt programmiert, um sicherzustellen, dass alles, was der Anwender eingibt, aufgezeichnet, aber nicht vom XML- Prozessor geparst wird. Ein date-Attribut für das wein-Element enthält Datum und Zeitstempel, mit denen angezeigt wird, wann der jeweilige Eintrag dem Datensatz hinzugefügt wurde. Ein serverseitiges Script generiert Datum und Zeitstempel automatisch, wenn ein neuer Eintrag abgespeichert wird. Listing 21.1 zeigt eine beispielhafte wein_notiz.xml-Datei mit mehreren Einträgen. Sie müssen zumindest einen Eintrag manuell hinzufügen, wenn Sie dieses Dokument erstellen, damit für die Datei eine Struktur erzeugt wird. Erstellen Sie ein Dokument wie das gezeigte und speichern Sie es unter wein_notiz.xml.
Listing 21.1: Ein Datensatz mit Notizen über Weine - wein_notiz.xml
1: <?xml version="1.0"?>
2: <!-- Listing 21.1 - wein_notiz.xml -->
3:
4: <wein_notiz>
5: <wein date="6/9/2001 10:40:01">
6: <winzer>Chateau de La Chaize</winzer>
7: <region>Brouilly, France</region>
8: <typ>Beaujolais</typ>
9: <jahrgang>1998</jahrgang>
10: <notiz><![CDATA[Sehr fruchtig und stark genug, seinen Charakter zu behaupten
11: passt zu vielen Speisen, vor allem gut zu altem Hartkaese]]></notiz>
12: </wein>
13: <wein date="6/9/2001 11:20:08">
14: <winzer>Chateau d'Epire</winzer>
15: <region>Savennieres, France</region>
16: <typ>Cuvee Speciale</typ>
17: <jahrgang>1998</jahrgang>
18: <notiz><![CDATA[Kraeftig, leicht saeuerlich, erinnert mit seiner Saeure an das sanfte Prickeln einer Berlinerweisse]]></notiz>
20: </wein>
21: </wein_notiz>
Das Wurzelelement wein_notiz (Zeilen 4-20) enthält abgeleitete wein-Elemente mit date-Attributen (Zeilen 5 und 13). Jedes wein-Element enthält winzer, region, typ, jahrgang und notiz-Elemente. Das notiz-Element ist als CDATA-Abschnitt programmiert (Zeilen 10 und 18).
Die Datei wein_notiz.html ist eine HTML-Seite, die ein Formular für die Eingabe der Details zu einem bestimmten Wein darstellt. Das Formular, das Sie in dieser Übung aufbauen, stellt die Eingabefelder zur Verfügung, die in Tabelle 21.1 zusammengefasst sind. Die Felder für das Formular entsprechen direkt den Elementen in der XML-Datei (wein_notiz.xml).
Tabelle 21.1: Formularfelder und die entsprechenden XML-Elemente
Alle Felder außer dem Feld mit den Geschmacksnotizen werden mit dem in HTML standardmäßigen Element INPUT erzeugt, das vom Element FORM abgeleitet ist. Alle INPUT- Elemente verwenden die folgende Syntax:
<INPUT TYP=TEXT NAME="REFERENZ" MAXLENGTH="WERT">
Das formfreie Textfeld für die Geschmacksnotizen verwendet das Element TEXTAREA:
<TEXTAREA NAME="REFERENZ" COLS="WERT" ROWS="WERT">
Die meisten HTML-Seiten in dieser Anwendung nutzen ein externes Cascading Style Sheet, um eine beständige Präsentation für die gesamte Site zu gewährleisten. Die CSS- Datei heißt wein_notiz.css und wird mit einem LINK-Element der aktuellen Seite zugeordnet. Das sieht so aus:
<LINK rel = "stylesheet" type = "text/css"
href = "wein_notiz.css"/>
Das Formular, das auf dieser Seite erzeugt wird, verwendet die POST-Methode, um die vom Anwender gesammelten Informationen an das Script proz_notiz.asp weiterzugeben, das die Daten an das im vorhergehenden Schritt erzeugte Dokument wein_notiz.xml anfügt. Listing 21.2 zeigt die vollständige Seite. Erzeugen Sie dieses Dokument und speichern Sie es unter wein_notiz.html.
Listing 21.2: Ein HTML-Formular, das die Weinprobe-Notizen sammeln
soll - wein_notiz.html
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2: "http://www.w3.org/TR/Html4/loose.dtd">
3: <!-- Listing 21.2 - wein_notiz.html -->
4:
5: <HTML>
6: <HEAD><BR><BR>
7: <TITLE>Online-Notizen zu den Weinproben</TITLE>
8: <LINK rel = "stylesheet" type = "text/css"
9: href = "wein_notiz.css"/>
10: </HEAD>
11: <BODY>
12: <H1> Online-Notizen zu den Weinproben </H1>
13: <H3>Fuegen Sie Ihre Anmerkungen zur Weinprobe ein:</H3>
14: <FORM METHOD=POST ACTION="proz_notiz.asp">
15: <TABLE border ="1">
16: <TR>
17: <TD>
18: <TABLE cellspacing="3" cellpadding="3">
19: <TR>
20: <TD ALIGN="RIGHT">Winzer/Marke:</TD>
21: <TD ><INPUT SIZE="40" TYPE=TEXT NAME="WINZER" MAXLENGTH="60">
22: </TD>
23: </TD>
24: </TR>
25: <TR>
26: <TD ALIGN=RIGHT>Region/Ort:</TD>
27: <TD><INPUT SIZE="40" TYPE=TEXT NAME="REGION" MAXLENGTH="60">
28: </TD>
29: </TR>
30: <TR>
31: <TD ALIGN=RIGHT>Typ/Richtung:</TD>
32: <TD><INPUT SIZE="40" TYPE=TEXT NAME="TYP" MAXLENGTH="60">
33:
34: <INPUT TYPE="RESET" VALUE="Formular loeschen">
35: </TD>
36: </TR>
37: <TR>
38: <TD ALIGN=RIGHT>Jahrgang:</TD>
39: <TD><INPUT SIZE="40" TYPE=TEXT NAME="JAHRGANG" MAXLENGTH="20">
40:
41: <INPUT TYPE="SUBMIT" VALUE="Notizen hinzufuegen">
42: </TD>
43: </TR>
44: <TR>
45: <TD ALIGN=RIGHT VALIGN=TOP>Geschmacksnotiz:</TD>
46: <TD><TEXTAREA NAME="NOTIZ" COLS="60" ROWS="5"></TEXTAREA>
47: </TR>
48:
49: </TABLE>
50:
51: </TD>
52: </TR>
53: </TABLE>
54: <UL>
55: <LI><A HREF="index.html">Zurueck zur Homepage</A></LI>
56: </UL>
57: </FORM>
58:
59: </BODY>
60:
61: </HTML>
Die Zeilen 14-57 enthalten das Formular, das zur Aufnahme der Anwenderdaten erzeugt wird. winzer (Zeile 21), region (Zeile 27), typ (Zeile 32) und jahrgang (Zeile 39) werden dem Texteingabefeld zugewiesen. Die Textnotizen in freier Form werden mit dem TEXTAREA-Tag (Zeile 46) gesammelt. Die Zeilen 8 und 9 setzen einen LINK auf ein Cascading Style Sheet. In Zeile 34 wird eine Reset-Schaltfläche programmiert, mit der die Anwender die Feldeingaben im Formular löschen können (<INPUT TYPE="RESET" VALUE=" Formular loeschen" SIZE="40">). Die Schaltfläche zum Abschicken (<INPUT TYPE="SUBMIT" VALUE="Notizen hinzufuegen">) wird mit Zeile 41 programmiert, sodass die Anwender das Formular verarbeiten können. Die Verarbeitung geschieht mit der POST-Methode (<FORM METHOD=POST ACTION="proz_notiz.asp">), die die auf dem Formular gesammelten Daten an die Datei proz_notiz.asp weitergibt. Das <A>-Tag in Zeile 55 richtet einen Link auf die Homepage dieser Webanwendung ein.
Die Verwendung eines Cascading Style Sheets ist optional. Wenn Sie die CSS-Datei weglassen, können Sie sogar sicherstellen, dass Ihre Anwendung keine Browser ausschließt, die CSS nicht vollständig unterstützen. Wenn Sie die CSS-Datei aber weglassen, denken Sie auch daran, die <LINK>-Tags in dieser Anwendung aus den HTML-Seiten zu entfernen, auch wenn die meisten Browser, die kein CSS unterstützen, sie einfach ignorieren.
Der Vorteil einer CSS-Datei ist, dass man sie dazu verwenden kann, für alle Seiten der Anwendung ein einheitliches Aussehen zu gewährleisten. So wird sie auch in unserem Fall eingesetzt. Aus diesem Grund zeigen wir ein Modell für eine CSS-Datei, wenn Sie Styles für Ihre Anwendung eingeben möchten. Sie können Ihre eigenen Stileigenschaften auswählen oder die verwenden, die in Listing 21.3 angegeben werden.
Listing 21.3: Optionale Stileigenschaften, die auf die Applikation angewendet werden können - wein_notiz.css
1: <!-- Listing 21.3 - wein_notiz.css -->
2:
3: BODY { display:block; background-color:#999966;
4: background-image:URL(http://www.samspublishing.com/images/
5: samslogo.gif);
6: background-repeat:no-repeat}
7:
8: H1 { text-align:center;padding:6px;font-weight:bold;
9: color:#99cc99;font-style:bold;
10: font-family:verdana,arial,sans-serif;}
11:
12: H3 { padding:6px;font-size:12pt;
13: font-family:verdana,arial,sans-serif;}
14:
15: P { font-family:verdana,arial,sans-serif;}
16:
17: TD { font-family:verdana,arial,sans-serif;
18: background-color:#99cc99;}
19:
20: A:link { color:#99cc99;font-size:14pt;text-decoration:none;}
21:
22: A:visited { color:#99cc66;font-size:14pt;text-decoration:none;}
23:
24: A:hover { text-decoration:underline; color:red;font-weight:bold;}
25:
26: .head { background-color:99cc99;
27: font-family:verdana,arial,sans-serif;font-size:14pt;}
28:
29: SPAN { font-family:verdana,arial,sans-serif;font-size:12pt;}
30:
31: TR { font-family:verdana,arial,sans-serif;}
32:
33: LI { font-family:verdana,arial,sans-serif;}
Alle Markup-Elemente, für die eindeutige Stileigenschaften zugewiesen werden, sind in der CSS-Datei aufgelistet, zusammen mit den ausgewählten Styles. Die Zeilen 4 und 5 beziehen sich auf eine Grafik, die auf einem externen Webserver abgelegt ist. Sie können damit auch auf eine lokale Grafik zeigen, wenn Sie das wollen.
Erzeugen Sie für die Anwendung eine Homepage und nennen Sie sie index.html. Die Homepage erfordert nur zwei Links und ein wenig ausgezeichneten Text. Ein Link sollte auf die Seite wein_notiz.html eingerichtet werden, die Sie bereits erstellt haben. Ein weiterer Link ist für die Seite zeige_notiz.asp zu erstellen, die alle Notizen im Dokument wein_notiz.xml auflistet. Listing 21.4 zeigt eine Möglichkeit für die Seite index.html. Wenn Sie eine CSS-Datei eingefügt haben, können Sie diese mithilfe eines LINK-Tags mit dieser Seite verbinden.
Listing 21.4: Die Homepage für die Webanwendung zu den Weinprobenotizen
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2: "http://www.w3.org/TR/Html4/loose.dtd">
3: <!-- Listing 21.4 - index.html -->
4:
5: <HTML>
6: <HEAD>
7: <TITLE>Weinprobenotizen</TITLE>
8: <LINK rel = "stylesheet" type = "text/css" href = "wein_notiz.css2>
9: </HEAD>
10: <BODY>
11: <H1> Online-Notizen zu den Weinproben </H1>
12: <HR/>
13: <H3>Navigation</H3>
14: <H3>Bitte waehlen Sie eine der folgenden Moeglichkeiten:</H3>
15: <UL>
16: <LI><A HREF="zeige_notiz.asp">Alle Weinnotiz-Eintraege anzeigen</A></LI>
17: <LI><A HREF="wein_notiz.html">Eine neue Weinprobenotiz hinzufuegen</A></LI>
18: </UL>
19: </BODY>
20: </HTML>
Diese Homepage hat Links auf die Seite wein_notiz.html und auf die Seite zeige_notiz.asp (Zeile 17). Ein LINK, der den Style Sheet wein_notiz.css zuweist, ist in Zeile 8 angegeben.
Ein serverseitiges Active Server Pages (ASP)-Script wird verwendet, um die Notizen anzufügen, die die Anwender desDokuments wein_notiz.xml angeben. Um dies zu erreichen, werden Objekte aus dem Document Object Model instanziert, ähnlich denen, die am 12. Tag Verwendung fanden. Sie können damit beginnen Variablen einrichten, die die Werte enthalten, die vom Formular für alle Elementknoten im Datensatz weitergegeben werden. Die Elemente, die das betrifft, sind wWinzer, wRegion, wTyp, wJahrgang und wNotiz. Daher können die Variablen wie folgt eingerichtet werden:
Dim wWinzer
Dim wRegion
Dim wTyp
Dim wJahrgang
Dim wNotiz
Sie müssen außerdem Variablen einrichten, die den individuellen Inhalt aufnehmen, der über das DOM an die Knotentypen in der XML-Instanz weitergegeben wird. Sie erstellen eine Variable für den Dokumentknoten, den Wurzelknoten und die Knotenknoten. Sie brauchen auch einen Attributsknoten, der die Werte für die Zeit- und Datumsstempel aufnimmt. Diese können so eingerichtet werden:
Dim oWeinNotizDOM
Dim oWeinNotizRootNode
Dim oDateStamp
Dim oWeinNotizNodes
Da Sie die Daten direkt aus den HTML-Formularfeldern weitergeben, können Sie die HTTP-Werte direkt auffangen und namentlich eingeben, was so aussieht:
wWinzer=Request("WINZER")
wRegion=Request("REGION")
wTyp=Request("TYP")
wJahrgang=Request("JAHRGANG")
wNotiz=Request("NOTIZ")
Um das DOM-Objekt für die Weinnotizen zu instanzieren, können Sie die serverseitige Syntax zur Objekterzeugung verwenden, die Sie auch an früheren Tagen eingesetzt haben. In diesem Fall sieht die Syntax so aus:
Set oWeinNotizDOM = Server.CreateObject("Microsoft.XMLDOM")
oWeinNotizDOM.async = false
Das XML-Dokument kann mit folgendem Befehl in das DOM geladen werden:
oWeinNotizDOM.load server.mappath("wein_notiz.xml")
Sie müssen eventuelle Parser-Fehler auffangen, wie etwa nicht existierende XML- Dokumente oder alle I/O-Fehler, die diesen verwandt sind. Das machen Sie folgendermaßen:
If oWeinNotizDOM.parseError.ErrorCode <> 0 Then
Wenn ein Fehler auftritt, erzeugt das Script ein leeres XML-Dokument:
oWeinNotizDOM.loadXML "<wein_notiz/>"
End If
Das Script kann einen Zeit- und Datumsstempel ausgeben, wenn ein Eintrag gespeichert wird, indem es Code hinzufügt, der ein Datums-Attribut enthält und den Methodenaufruf now() einbindet:
Set oDateStamp = oWeinNotizDOM.documentElement.AppendChild
(oWeinNotizDOM.createElement("wein"))
oDateStamp.setAttribute "date", now()
Für jeden Elementknoten (ElementNameXML) im XML-Dokument geben Sie die Formulardaten an einen neu erstellten Elementknoten (oMeinObjektName) im resultierenden Baum weiter. Die Syntax sieht für diese Fälle so aus:
Set oMeinObjektName = oMyDateStampObjectName.appendChild
(oMeinObjektName.createElement("ElementNameXML"))
oMeinObjektName.Text = MyElementName
Sie müssen das Ganze für alle neu erzeugten Knoten wiederholen - in diesem Fall für winzer, region, typ, jahrgang und notiz. Beim notiz-Element fügen Sie dem notiz-Objekt die Methode createCDATASection() hinzu. Das vollständige Script sehen Sie in Listing 21.5.
Listing 21.5: Serverseitiges ASP-Script zum Hinzufügen von Aufzeichnungen - proz_notiz.asp
1: <HTML>
2: <link rel = "stylesheet" typ = "text/css"
3: href = "wein_notiz.css">
4: <%
5: ' Listing 21.5 - proz_notiz.asp
6:
7: Dim wWinzer
8: Dim wRegion
9: Dim wTyp
10: Dim wJahrgang
11: Dim wNotiz
12:
13: Dim oWeinNotizDOM
14: Dim oWeinNotizRootNode
15: Dim oDateStamp
16: Dim oWeinNotizNodes
17:
18: wWinzer=Request("WINZER")
19: wRegion=Request("REGION")
20: wTyp=Request("TYP")
21: wJahrgang=Request("JAHRGANG")
22: wNotiz=Request("NOTIZ")
23:
24: Set oWeinNotizDOM = Server.CreateObject("Microsoft.XMLDOM")
25: oWeinNotizDOM.async = false
26:
27: oWeinNotizDOM.load server.mappath("wein_notiz.xml")
28:
29: If oWeinNotizDOM.parseError.ErrorCode <> 0 Then
30:
31: oWeinNotizDOM.loadXML "<wein_notiz/>"
32: End If
33:
34: Set oDateStamp = oWeinNotizDOM.documentElement.appendChild (oWeinNotizDOM.createElement("wein"))
35: oDateStamp.setAttribute "date", now()
36:
37: ' Einen neuen 'winzer'-Elementknoten im wein_notiz.xml-Dokument aufbauen
38: Set oWeinNotizNodes = oDateStamp.appendChild (oWeinNotizDOM.createElement("winzer"))
39: oWeinNotizNodes.Text = wWinzer
41:
42: ' Einen neuen 'region'-Elementknoten im wein_notiz.xml-Dokument aufbauen
43: Set oWeinNotizNodes = oDateStamp.appendChild (oWeinNotizDOM.createElement("region"))
44: oWeinNotizNodes.Text = wRegion
45:
46: ' Einen neuen 'typ'-Elementknoten im wein_notiz.xml-Dokument aufbauen
47: Set oWeinNotizNodes = oDateStamp.appendChild (oWeinNotizDOM.createElement("typ"))
48: oWeinNotizNodes.Text = wTyp
49:
50: ' Einen neuen 'jahrgang'-Elementknoten im wein_notiz.xml-Dokument aufbauen
51: Set oWeinNotizNodes = oDateStamp.appendChild (oWeinNotizDOM.createElement("jahrgang"))
52: oWeinNotizNodes.Text = wJahrgang
53:
54: ' Ein neues 'notiz' wein_notiz.xml-Dokument aufbauen
55: ' Text mit CDATA-Auszeichnungen umgeben, um die Leerzeichen zu erhalten, die Anwender eingeben
56: Set oWeinNotizNodes = oDateStamp.appendChild (oWeinNotizDOM.createElement("notiz"))
57: oWeinNotizNodes.appendChild (oWeinNotizDOM.createCDATASection(wNotiz))
58:
59: ' Modifiziertes wein_notiz.xml-Dokument speichern
60: ' Ihr Schreibzugriff auf das Verzeichnis muss aktiviert sein!
61: oWeinNotizDOM.Save Server.MapPath("wein_notiz.xml")
62: %>
63: <BR/><BR/><BR/>
64: <H1>Danke</H1>
65:
66: <P>
67: <B>Ihre Weinnotizen ueber : <%= sWein %></B><BR/>
68: </P>
69: <PRE>
70: <%= wNotiz %>
71: </PRE>
72:
73: <P><B>Wurden eingegeben</P>
74:
75: <P>Klicken Sie <A href="zeige_notiz.asp">Hier</A> fuer die Anzeige der Weinnotizen</P>
76:
77: </HTML>
Die Zeilen 7-16 richten die Variablen ein, die für das restliche Script erforderlich sind. Die HTTP-Header-Variablen werden mit den Anweisungen in den Zeilen 18-22 weitergegeben. In Zeile 24 wird das DOM-Objekt (oWeinNotizDOM) erzeugt und das XML-Dokument (wein_notiz.xml) wird in Zeile 27 an dieses Objekt weitergegeben. Bei erfolgreicher Ausführung dieses Scripts werden Datums- und Zeitstempel eingerichtet. Der Stempel wird durch den Code in den Zeilen 34-35 als date-Attribut für das wein-Element programmiert. Zeilen 38, 43, 47, 51 und 56 beginnen jeweils, die neuen XML-Elementknoten (winzer, region, typ, jahrgang und notiz) einzurichten. Das notiz-Element wird mit der Methode createCDATASection(wNotiz) in Zeile 57 näher qualifiziert. Die save-Eigenschaft des DOM-Objekts wird in Zeile 61 ausgeführt, um das resultierende Dokument wein_notiz.xml zu speichern. Die Zeilen 63-77 stellen eine Minimalmeldung von HTML für die erfolgreiche Bildschirmübertragung zur Verfügung.
Um eine Auflistung aller Notizen, die in der wein_notiz.xml-Datei enthalten sind, zu bekommen, führt das Script eine serverseitige XSL-Transformation durch (wein_notiz.xsl). Sie können das erreichen, indem Sie zwei XML-DOM-Objekte instanzieren: eines für das XML-Dokument und eines für das XSL-Dokument. Dann schreiben Sie den aus der Transformation resultierenden Baum auf dem Bildschirm aus, mit folgendem Befehl:
Response.Write oMyXMLDOMObject.TransformNode(oMyXSLDOMObject)
Listing 21.6: Eine serverseitige XSLT durchführen - zeige_notiz.asp
1: <%
2: ' Listing 21.6 - zeige_notiz.asp
3:
4: Dim oWeinNotizXML ' XML document
5: Dim oWeinNotizXSL ' XSL document
6:
7: ' Das XML-DOM-Objekt für die Datei wein_notiz.xml instanzieren
8: Set oWeinNotizXML = Server.CreateObject("Microsoft.XMLDOM")
9: oWeinNotizXML.async = False
10:
11: ' Die Datei wein_notiz.xml in das DOM-Objekt laden
12: oWeinNotizXML.Load Server.MapPath("wein_notiz.xml")
13:
14: ' Das XML-DOM-Objekt für den wein_notiz.xsl-Stylesheet erzeugen
15: Set oWeinNotizXSL = Server.CreateObject("Microsoft.XMLDOM")
16: oWeinNotizXSL.async = False
17:
18: ' Die Datei wein_notiz.xsl in das DOM-Objekt Style laden
19: oWeinNotizXSL.load Server.MapPath("wein_notiz.xsl")
20:
21: ' Das umgewandelte Dokument an den Browser ausgeben
22: Response.Write oWeinNotizXML.TransformNode(oWeinNotizXSL)
23: %>
Die erforderlichen neuen Objektvariablen werden in den Zeilen 4 und 5 deklariert. Das erste DOM-Objekt auf dem Server wird in Zeile 8 für das oWeinNotiz XML-Objekt erzeugt. Dieses Objekt wird in Zeile 12 mit dem Inhalt von wein_notiz.xml geladen. Der Prozess wird in den Zeilen 15 und 19 für die XSL-Datei wiederholt. In Zeile 22 wird das Resultat dieser Transformation auf dem Bildschirm ausgedruckt.
Die Transformation, auf die sich die Besprechung für das Script wein_notiz.asp bezieht, wird im Dokument wein_notiz.xml definiert. Zum größten Teil platziert diese XSLT den Inhalt der XML-Elemente und -Attribute für die Browserausgabe in passende HTML- Auszeichnungen.
Wenn Sie sich dafür entschieden haben, eine CSS-Datei zu verwenden, können Sie dies hier mit einem LINK-Tag wieder tun:
<LINK rel = "stylesheet" typ = "text/css"
href = "wein_notiz.css"/>
Die XSLT verwendet eine einfache Schablonenanpassung für den Wurzelknoten des XML-Dokuments und platziert die passenden HTML-Tags auf dem Ausgabebaum. Die Anweisung zur Schablonenanpassung mit einem XPath-Ausdruck sieht so aus:
<xsl:template match="/">
Erzeugen Sie eine HTML-Tabelle mit einer Heading-Zeile, die eine einzelne Zelle (<TD>) enthält, die so breit ist wie die Tabelle.
Wenn Sie ein xsl:for-each-Element verwenden, um alle Containerelemente für wein in der XML-Instanz auszuwählen, wird damit die zweite Zeile der Tabelle erzeugt. Sie können auch ein order-by-Attribut einfügen, um die Aufzeichnungen zu sortieren. In diesem Fall sortieren Sie sie anhand der Datums- und Zeitstempel, die dem vorherigen Script zugeordnet wurden. Die Anweisung zur Auswahl sieht so aus:
<xsl:for-each select="wein_notiz/wein" order-by="-wein[@date]">
Listing 21.7 zeigt das vollständige XSLT-Dokument. Erzeugen Sie dieses Dokument und speichern Sie es unter wein_notiz.xsl.
Listing 21.7: Eine XSLT-Anwendung für die Weinnotizen - wein_notiz.xsl
1: <?xml version="1.0"?>
2:
3: <!-- Listing 21.7 - wein_notiz.xsl -->
4:
5: <xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl">
6:
7: <xsl:template match="/">
8:
9: <HTML>
10: <HEAD>
11: <TITLE>Online-Notizen zu den Weinproben</TITLE>
12: <LINK rel = "stylesheet" type = "text/css"
13: href = "wein_notiz.css"/>
14: </HEAD>
15: <BODY>
16: <H1>Online-Notizen zu den Weinproben</H1>
17: <TABLE border = "1" width="100%">
18: <TR class="head">
19: <TD class="head">Notizen zur Geschmacksprobe</TD>
20: </TR>
21: <TR>
22: <TD>
23: <TABLE width="100%">
24:
25: <xsl:for-each select="wein_notiz/wein" order-by="-wein[@date]">
26: <TR>
27: <TD width = "100%">
28: <B>Entered: </B> <xsl:value-of select="@date"/><BR/>
29: <B>Winzer: </B> <xsl:value-of select="winzer"/><BR/>
30: <B>Region: </B> <xsl:value-of select="region"/><BR/>
31: <B>Typ: </B> <xsl:value-of select="typ"/><BR/>
32: <B>Jahrgang: </B> <xsl:value-of select="jahrgang"/><BR/>
33: <B>Notiz: </B> <PRE><SPAN>
34: <xsl:value-of select="notiz"/></SPAN></PRE><BR/>
35: <HR/>
36: </TD>
37: </TR>
38: </xsl:for-each>
39:
40: </TABLE>
41: </TD>
42: </TR>
43: </TABLE>
44: </BODY>
45: </HTML>
46:
47: </xsl:template>
48:
49: </xsl:stylesheet>
Die Zeile 7 richtet eine Schablonenanpassung für den Wurzelknoten (<xsl:template match="/">) ein. Typischerweise werden die HTML-Anweisungen in den Zeilen 9-23 im Ausgabebaum platziert. Der CSS wird dem HTML-Code zugeordnet, der in den Zeilen 12 und 13 generiert wird. Es werden in Zeile 25 alle Aufzeichnungen ausgewählt und nach Datum und Zeit sortiert (<xsl:for-each select="wein_notiz/wein" order-by="wein[@date]">. Der Inhalt aller Attributs- und Elementknoten des Quellenbaums wird in den Zeilen 28-34 an den resultierenden Baum weitergegeben. Der Inhalt von notiz wird in vorformatierten HTML-Tags (<PRE>) platziert.
Wenn Sie alle dazugehörenden Dateien erzeugt haben, speichern Sie sie in einem Verzeichnis auf dem Webserver. Wenn Sie mit IIS arbeiten, können Sie ein virtuelles Web Share für das Verzeichnis erstellen, das die Dateien enthält, wie Sie das auch an den vorangegangenen Tagen getan haben. Führen Sie die Seite index.html auf dem Webserver aus. Mit IIS sieht der Befehl so aus:
http://localhost/meinVirtuellesVerzeichnis/index.html
Das Eingabeformular für die Daten in HTML sollte aussehen wie in Abbildung 21.2, die Liste aller Notizen wie in Abbildung 21.3.
Abbildung 21.2: Das Dateneingabeformular der Anwendung für die Online-Notizen zu den Weinproben
Abbildung 21.3: Eine Auflistung aller Notizen zu den Weinproben, die in einem XML-Datensatz gespeichert sind
Heute haben Sie eine ganze Anwendung von Anfang bis Ende erzeugt, die sich auf XML, XSLT, serverseitiges Scripting, CSS, das XML-DOM und verwandte Technologien stützt. Diese Anwendung stellt ein Formular bereit, das verwendet werden kann, um einem existierenden XML-Dokument Informationen hinzuzufügen. Damit wird die Integrationsfähigkeit verschiedener sich ergänzender Technologien vorgeführt.
Frage:
Was ist erforderlich, damit diese Anwendung zum Speichern und Ermitteln von
Weinnotizen vom Browser unabhängig wird?
Antwort:
Sie müssen das Cascading Style Sheet ändern und nur CSS-Styles verwenden, die
von solchen Browsern unterstützt werden, die auf die Site zugreifen. XML und
XSL funktionieren auf allen Browsern, die sie unterstützen, ohne
Einschränkungen.
Frage:
Welche anderen Anwendungstypen können mit einer ähnlichen Architektur aufgebaut
werden?
Antwort:
Eine Reihe von zusammengesetzten Anwendungen kann mit der Art von
Transformationen und Objekten, die in den heutigen Beispielen vorgeführt
wurden, aufgebaut werden. Sie können zum Beispiel eine zusammengesetzte
Forscher-Site erstellen, auf der Wissenschaftler ihre Entdeckungen vorstellen, um
sie mit anderen Forschern zu teilen.
Die Übung soll Ihre Kenntnis dessen, was Sie heute gelernt haben, überprüfen. Die Lösungen finden Sie in Anhang A.
Erweitern Sie die Wein-Anwendung, indem Sie mit JavaScript oder VBScript und einer XML-Dateninsel eine Suchfunktion einbauen. Durchsuchen Sie die Felder nach Winzern bzw. die Etikettnamen nach passenden Zeichenstrings und lassen Sie eine Meldung auf dem Bildschirm ausgeben, die die vollständige Aufzeichnung der gefundenen Einträge enthält.
