Mithilfe der Techniken zur Datenbindung können Sie XML-Daten in HTML-Seiten aufnehmen, um eine flexible Anzeige der Daten zu ermöglichen. Durch die Einrichtung dieser Dateninseln mithilfe von HTML-Elementen, die zu XML-Elementen gebunden sind, können Sie die unterschiedlichsten Ansätze realisieren. Heute lernen Sie die folgenden Dinge kennen:
Das Binden von Daten erfolgt auf die unterschiedlichsten Arten. Zum Teil handelt es sich dabei um eine komplexe Abbildung eines Datenmodells auf ein datenspezifisches Objektmodell in einem Computerprogramm. Auf diese Weise ist es beispielsweise möglich, XML-Daten an Objekte zu binden, die in Java oder anderen Sprachen erzeugt wurden. Einige Formen der Datenbindung können allgemeine Strukturen effektiv in spezielle Strukturen umwandeln, sodass sie durch andere Applikationen weiterverarbeitet werden können, die stärker strukturierte Daten benötigen. In ihrer einfachsten Form beinhaltet die Datenbindung, was XML betrifft, die Extrahierung von Zeichendaten aus Elementen unter selektiver Programmsteuerung, um diese Daten anderen Elementen in anderen Markup-Sprachen zuzuweisen. Heute werden Sie eine einfache Datenbindung verwenden, um Verknüpfungen zwischen in XML gespeicherten Daten und HTML-Tags, mit denen sie dargestellt werden können, zu erzeugen. Auf diese Weise können Sie die intelligente Datenspeicherung von XML und gleichzeitig die effizienten Darstellungsmöglichkeiten von HTML nutzen.
Mithilfe einer einfachen Datenbindung können Sie XML-Dokumente verarbeiten, um XML-Daten direkt auf einer herkömmlichen HTML-Seite anzeigen. Auch wenn es sich dabei in gewisser Weise um eine Datenumwandlung handelt, werden Sie feststellen, dass die einfache Datenbindung mehr Einschränkungen aufweist als die Sprache XSLT, die Sie in Kapitel 16 kennen gelernt haben. Außerdem werden Sie erfahren, dass viele der heute vorgestellten Techniken nur im Microsoft Internet Explorer Version 4 und höher funktionieren. Nichtsdestotrotz ermöglicht Ihnen das Anlegen einfacher Dateninseln, insbesondere in Kombination mit clientseitigem Scripting, schnell und effizient spezialisierte Werkzeuge für die Auswertung von XML-Daten, die Fehlersuche oder die schnelle Überprüfung symmetrischer XML-Datensätze zu erzeugen. Mit der Beherrschung dieser Techniken sparen Sie viel Zeit und Arbeit, wenn Sie komplexe XML- Datenauflistungen weiterverarbeiten oder verwalten wollen.
Heute werden Sie einen XML-Datensatz anlegen, die als Datenquelle dient. Sie werden den Datensatz mit einer HTML-Seite verknüpfen und die HTML-Elemente dann mit den Feldern des Datensatzes verbinden, beispielsweise Elemente im XML-Dokument. Sie werden die DSO-Programmierung (Data Source Object) kennen lernen, indem Sie unterschiedliche Technologien ausprobieren, wie beispielsweise direktes DSO-Laden sowie XMLDSO-Java-Applets. Anschließend werden Sie die Datenbindung mit dem Scripting kombinieren, um den Fluss der XML-Daten auf der HTML-Seite zu steuern. Diese Ansätze verwenden in ihrer heutigen Form Microsoft-Softwaretechniken, die von keinem anderen Hersteller unterstützt werden. Weil die Werkzeuge jedoch kostenlos zur Verfügung gestellt werden und es sie für die unterschiedlichsten Plattformen gibt, stellen sie eine gute Gelegenheit dar, sich mit der Datenbindung vertraut zu machen.
Damit Sie die einfachen Beispiele für die Datenbindung nachvollziehen können, die Sie in diesem Kapitel kennen lernen werden, können Sie eines der XML-Dokumente aus früheren Kapiteln neu anlegen oder ablegen. Verwenden Sie ein Dokument, das symmetrisch strukturiert ist, um den Datenfluss auf die HTML-Seite zu steuern. Eine symmetrische Dokumentstruktur ist charakteristisch für eine flache Datenbank, in der Datensätze mit vordefinierten Feldern in statischer Reihenfolge abgelegt sind. Wenn wir die Metapher des Nachrichtensystems verwenden, das in den letzten Kapiteln entwickelt wurde, stellt jede eindeutige nchr einen Datensatz dar. Das Wurzelelement notiz kann eine beliebige Anzahl dieser Datensätze enthalten wie beispielsweise untergeordnete Elemente. Jedes nchr-Element enthält untergeordnete quelle-, von- und nachricht- Elemente - das sind die Felder der Datensätze -, die wiederum Zeichendaten enthalten.
Abbildung 17.1: Struktur des XML-Nachrichten-Quelldokuments
Sie sehen, dass sich das Muster auf vorhersehbare Weise wiederholt und dass das Wurzelelement eine beliebige Anzahl von nchr-Elementen enthält, die alle dieselbe untergeordnete Elementstruktur enthalten. Unter Verwendung dieser Struktur und der Voraussetzung, dass alle Elementtypen in Ihrem Dokument exakt wie in der Abbildung bezeichnet sind, legen Sie ein XML-Instanzdokument an und speichern es als nachricht01_17.xml. Wenn Sie die hier vorgestellten Beispiele nachvollziehen, werden Sie dieses Dokument mehrfach brauchen. Es ist sinnvoll, wenn Sie mehrere Einträge in Ihrem Datensatz anlegen; legen Sie also entweder neue Einträge an oder erstellen Sie sie durch Kopieren und Einfügen, sodass Sie mindestens sechs untergeordnete nchr-Elemente haben, die alle weitere untergeordnete quelle-, von- und nachricht-Elemente enthalten. Listing 17.1 zeigt ein Beispiel für den benötigten XML-Datensatz. Sie verwenden möglicherweise andere Zeichendaten, aber stellen Sie unbedingt sicher, dass Sie identische Elementnamen verwenden, auch in Hinblick auf die Groß-/Kleinschreibung.
Listing 17.1: Ein hierarchischer XML-Datensatz - nachricht01_17.xml
1: <?xml version="1.0"?>
2: <!-- Listing 17.1 - nachricht01_17.xml -->
3:
4: <notiz>
5: <nchr>
6: <quelle>Telefon</quelle>
7: <von>Kathy Shepherd</von>
8: <nachricht>Denke daran, auf dem Nachhauseweg von der Arbeit Milch zu kaufen</nachricht>
9: </nchr>
10:
11: <nchr>
12: <quelle>E-Mail</quelle>
13: <von>Greg Shepherd</von>
14: <nachricht>Ich brauche ein wenig Hilfe bei den Hausaufgaben</nachricht>
15: </nchr>
16:
17: <nchr>
18: <quelle>E-Mail</quelle>
19: <von>Kristen Shepherd</von>
20: <nachricht>Bitte spiele heute Abend Scribble mit mir </nachricht>
21: </nchr>
22:
23: <nchr>
24: <quelle>Pager</quelle>
25: <von>Kathy Shepherd</von>
26: <nachricht>Kauf eine Flasche Wein, die wir heute Abend zu der Party mitbringen koennen!</nachricht>
27: </nchr>
28:
29: <nchr>
30: <quelle>Telefon</quelle>
31: <von>Kristen Shepherd</von>
32: <nachricht>Kannst du mich zu meiner Freundin bringen?</nachricht>
33: </nchr>
34:
35: <nchr>
36: <quelle>E-Mail</quelle>
37: <von>Greg Shepherd</von>
38: <nachricht>Wir treffen uns in der Bibliothek!</nachricht>
39: </nchr>
40:
41: <nchr>
42: <quelle>E-Mail</quelle>
43: <von>Kathy Shepherd</von>
44: <nachricht>Bob hat zurueckgerufen.</nachricht>
45: </nchr>
46:
47: <nchr>
48: <quelle>Pager</quelle>
49: <von>Kathy Shepherd</von>
50: <nachricht>Hol Deine Hemden aus der Reinigung!</nachricht>
51: </nchr>
52:
53: </notiz>
Das Wurzelelement notiz enthält untergeordnete nchr-Elemente, die nur über Elementinhalt verfügen. Jedes nchr-Element enthält je ein untergeordnetes quelle-, von- und nachricht-Element. Die Elemente quelle, von und nachricht enthalten Zeichendaten.
Sie sehen, dass im Dokument nachricht01_17.xml die nchr-Elemente mit Datensätzen oder Zeilen einer konventionellen Datenbank verglichen werden können und dass die untergeordneten Elemente quelle, von und nachricht den Feldern oder Spalten dieser Datensätze entsprechen. Im nächsten Abschnitt werden Sie dieses Dokument mit einer HTML-Seite verknüpfen und dann Standard-HTML-Elemente zu den Feldern des Datensatzes binden. Als Nächstes werden Sie die Verknüpfung einrichten.
Damit einer HTML-Seite ein XML-Dokument zugeordnet werden kann, muss eine Verknüpfung eingerichtet werden. Dazu verwenden Sie ein spezielles HTML-Element, <XML>. Bei diesem Element, das im Microsoft Internet Explorer 4.0 und höher unterstützt wird, handelt es sich um ein HTML-Element, nicht um ein XML-Element. <XML> kann verschiedene Attribute verarbeiten, aber normalerweise verwenden Sie zwei, die für die Datenbindung benötigt werden. Das quelle-Attribut (src) stellt einen gültigen URI bereit, unter dem die zu verknüpfende XML-Datenquelle zu finden ist. Ein id-Attribut stellt eine Namensreferenz dar, auf die überall auf der HTML-Seite verwiesen werden kann, sodass Sie die Daten aus dem XML-Dokument in die Programmierung aufnehmen können. Die Syntax für das HTML-Element <XML> sieht folgendermaßen aus:
<XML src="[URI]" id="[Name]"/>
Interessanterweise unterstützen einige Versionen des Microsoft Internet Explorers (IE) dieses Tag nicht in der gezeigten Form. Frühe Builds des IE unterstützen HTML Version 4.01 nicht oder XHTML 1.0 akzeptiert die Kurzformversion dieses leeren Elements nicht. Wenn Sie feststellen, dass Sie eines der Beispiele aus den nachfolgenden Übungen nicht wie vorgesehen nachvollziehen können, muss möglicherweise Ihre Browser-Version aktualisiert werden. Als Kompromiss zum Upgrade sollte es jedoch möglich sein, die Langform des HTML-Elements zu verwenden:
<XML src="[URI]" id="[Name]"></XML>
Beachten Sie, dass ein abschließendes Tag verwendet wird, obwohl es sich hier um ein leeres Element handelt. Einige Versionen des IE unterstützen das selbstterminierende leere HTML-Tag nicht. Das gilt insbesondere für Builds von Version 5.0 des IE auf einigen Plattformen, sowie für den aktuellen IE 6.0. Darüber hinaus kann es wie bei jeder anderen Software vorkommen, dass die älteren Builds Fehler und Sicherheitslücken enthalten, die in neueren Versionen korrigiert wurden.
Die Verwendung des <XML>-Tags erzeugt eine Verknüpfung, die auch als Dateninsel bezeichnet wird. Eine Dateninsel ist ein in eine HTML-Seite eingebettetes XML- Dokument. Das XML-Dokument könnte im virtuellen Sinne eingebettet sein, nämlich durch die Verwendung des <XML>-Tags mit einem src-Attribut, das einen URI für ein externes XML-Dokument anbietet, oder es könnte eingebettet werden, indem das XML- Dokument in den Code für die HTML-Seite einkopiert wird. Im letzteren Fall, der einen weniger praktischen Ansatz darstellt, wird das XML-Dokument in <XML>-Tags eingeschlossen.
Obwohl ein XML-Dokument direkt in den HTML-Code eingebettet werden kann, ist das nicht besonders praktisch und widerspricht den Grundsätzen der guten XML-Programmierung, die versucht, Inhalt und Stil voneinander zu trennen. Der gesamte Code, den Sie heute verwenden, benutzt externe XML-Datenquellendokumente.
Bei Verwendung einer externen Verknüpfung zum Dokument nachricht01_17.xml, das Sie in diesem Kapitel bereits angelegt haben, kann die Verknüpfung etwa wie folgt aussehen:
<XML id="meineNchr" src="nachricht01_17.xml"/>
Der Wert des id-Attributs ("meineNchr") stellt einen eindeutigen Namen dar, den Sie zugewiesen haben und auf den überall im HTML über das Doppelkreuz (#) verwiesen werden kann. Mit anderen Worten, es wird ein Verweis auf diese Dateninsel als #meineNchr für jedes beliebige Element kodiert, das diese Zuordnung benötigt.
Falls es erforderlich ist, kann das src-Attribut auch einen vollständig qualifizierten URI als Wert enthalten. Die Datenquelle kann sich also an beliebiger Stelle im Internet befinden oder lokal innerhalb derselben Domain oder auf demselben Host sein, wie auch in diesem Beispiel.
Nachdem Sie die Syntax für die Verknüpfung einer XML-Dateninsel kennen, legen Sie eine HTML-Seite an, die das Tag beinhaltet. Für die heutige Übung wird vorausgesetzt, dass Sie bereits wissen, wie man HTML-Seiten schreibt. Sie verwenden dazu die typischen HTML-Elemente wie beispielsweise HTML, HEAD, BODY usw. und platzieren das neue <XML>- Tag mit den entsprechenden Attributen im Rumpfabschnitt Ihrer HTML-Seite. Listing 17.2 zeigt eine mögliche HTML-Seite mit der neuen Dateninsel. Legen Sie eine ähnliche Seite an und speichern Sie sie unter dem Namen insel01.html ab.
Listing 17.2: Eine HTML-Seite mit einer XML-Dateninsel - insel01.html
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2: "http://www.w3.org/TR/html4/loose.dtd">
3: <!-- Listing 17.2 insel01.html -->
4:
5: <HTML>
6: <HEAD>
7: <TITLE>XML-Dateninsel</TITLE>
8: </HEAD>
9:
10: <BODY>
11: <XML id="meineNchr" src="nachricht01_17.xml"/>
12:
13: </BODY>
14: </HTML>
Die Zeilen 1 und 2 enthalten die DOCTYPE-Deklaration für ein HTML-Dokument Version 4.01, das der Transitional-DTD für HTML entspricht. Zeile 11 ist das Element (<XML id="meineNchr" src="nachricht01_17.xml"/>), das die Datenquelle nachricht01_17.xml, die über die Referenz meineNchr angesprochen wird, mit dem HTML-Dokument verknüpft.
Nachdem Sie insel01.html erstellt haben, laden Sie es in den IE und sehen sich die Ergebnisse an. Warum glauben Sie, passiert in dieser Phase scheinbar nicht besonders viel?
Sie haben eine Dateninsel angelegt, die das Dokument nachricht01_17.xml mit der Seite insel01.html verknüpft, aber Sie haben die Daten aus dem XML-Dokument noch nicht zu den Elementen im HTML gebunden, die es anzeigen können. Es wird also auch noch nichts angezeigt. Sie müssen die HTML-Datenelemente binden, um die XML- Dokumentdaten auf einer HTML-Seite zu platzieren.
Es ist für jede beliebige Darstellungsform erforderlich, dass Sie HTML-Elemente an bestimmte XML-Elemente des XML-Datensatzes binden. Im Folgenden sind einige der HTML-Elemente aufgelistet, für die eine Datenbindung möglich ist:
Heute werden Sie hauptsächlich DIV und SPAN als Container für XML-Daten verwenden, die innerhalb anderer HTML-Elemente platziert werden können, um die Anzeige von Daten im Browser zu steuern. Wenn Sie ein HTML-Element zu einem XML-Element binden, zeigt der Browser den Zeichendateninhalt des XML-Elements an. Die Syntax der DIV- und SPAN-Elemente sieht für diese Bindung so aus:
<DIV datasrc="#[Referenz] datafld="[XML-Elementtyp]"></DIV>
<SPAN datasrc="#[Referenz] datafld="[XML-Elementtyp]"></SPAN>
Das datasrc-Attribut stellt die Quelle der Daten bereit, die zu dem Element gebunden wird. Das datafld-Attribut gibt das Komponenten-Quellfeld an, das gebunden wird und das aus der datasrc erhalten wird. Um ein HTML-SPAN-Element zu einem von-Element im nachricht01_17.xml-Dokument zu binden, können Sie das SPAN-Element wie folgt kodieren:
<SPAN datasrc="#meineNchr" datafld="von"></SPAN>
Damit werden Sie SPAN zu dem von-Element im benannten (#meineNchr) Data Source Object (nachricht01_17.xml) binden, auf das verwiesen wird.
Obwohl es sich sowohl bei DIV als auch bei SPAN um Container-Elemente handelt, die Daten, Stile oder andere HTML-Elemente für die Verwendung auf einer HTML-Seite enthalten können, verhalten sie sich unterschiedlich. Das DIV-Element ist ein Blockelement, das erzwingt, dass der Inhalt unterscheidbar von anderen Elementen angezeigt wird, indem Zeilenumbrüche vor und nach seinem Inhalt hinzugefügt werden. Das SPAN-Element ist ein Inline-Container-Element, das häufig verwendet wird, um einem existierenden Element Stil hinzuzufügen. SPAN erzeugt keine Zeilenumbrüche vor und nach seinem Inhalt, sondern integriert den Inhalt innerhalb der es umschließenden Elemente. Normalerweise verwenden Sie das SPAN-Element, wenn Sie Daten von einem XML-Dokument in existierende HTML-Strukturen aufnehmen wollen.
Angenommen, Sie wollen Daten aus nachricht01_17.xml in einer Tabelle oder auf einer HTML-Seite anzeigen. Sie können SPAN innerhalb der TD-Zellen-Elemente der Tabelle verwenden. Das ist erforderlich, weil das TD-Element keines der HTML-Elemente ist, für die eine Bindung möglich ist. Nichtsdestotrotz ist die Erstellung einer Tabelle gebundener Elemente mithilfe von SPAN eine der einfachsten Methoden, XML-Daten auf einer HTML-Seite anzuzeigen, weil das HTML-Element TABLE während der dynamischen Darstellung der Daten rekursiv verwendet werden kann. Mit anderen Worten, Sie können eine vollständige Tabelle mit XML-Daten auf einer HTML-Seite mit einer Zeile für jeden Eintrag des Datensatzes erstellen, indem Sie nur eine Zeile HTML-Tabellencode schreiben. Die Tabelle erzeugt dynamisch ausreichend viele Zeilen, um die Daten anzuzeigen, die bei der Verarbeitung der verknüpften Datenquelle übergeben werden. Die Syntax für das HTML-Tabellenelement sieht folgendermaßen aus:
<TABLE datasrc="#[Referenz]">
<TR>
<TD><SPAN datafld="[Elementname]"></SPAN></TD>
[... ein weiteres <TD> für jedes zusätzliche Feld]
</TR>
</TABLE>
Falls das SPAN-Element in einem anderen HTML-Element enthalten ist, können Sie die Kurzform für ein leeres Element verwenden:
<TD><SPAN datafld="[Elementname]"/></TD>
Auf Grund der unterschiedlichen Unterstützung durch verschiedene Browser-Versionen müssen Sie jedoch möglicherweise bei der Langversion bleiben.
Für das Dokument nachricht01_17.xml kann das TABLE-Element wie folgt aussehen:
<TABLE datasrc="#meineNchr">
<TR>
<TD><SPAN datafld="quelle"></SPAN></TD>
<TD><SPAN datafld="von"></SPAN></TD>
<TD><SPAN datafld="nachricht"></SPAN></TD>
</TR>
</TABLE>
Fügen Sie ein paar typische Tabellen-Attribute ein, um Ihre eigene Tabelle ein wenig zu verschönern, und fügen Sie eine Überschriftzeile ein, um die Spalten Ihrer Tabelle zu beschriften. Listing 17.3 zeigt einen möglichen Ansatz. Legen Sie ein ähnliches HTML- Dokument an und speichern Sie es unter dem Namen insel02.html.
Listing 17.3: HTML-Tabellenzellen, die zu einer XML-Datenquelle gebunden sind - insel02.html
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2: "http://www.w3.org/TR/html4/loose.dtd">
3: <!-- Listing 17.3 insel02.html -->
4:
5: <HTML>
6: <HEAD>
7: <TITLE>XML-Dateninsel</TITLE>
8: </HEAD>
9:
10: <BODY>
11: <XML id="meineNchr" src="nachricht01_17.xml"/>
12: <H1>Meine Nachrichten</H1>
13: <TABLE id="table" border="6" width="100%"
14: datasrc="#meineNchr" summary="Nachrichten">
15: <THEAD style="background-color: aqua">
16: <TH>Quelle</TH>
17: <TH>Von</TH>
18: <TH>Nachricht</TH>
19: </THEAD>
20: <TR valign="top" align="center">
21: <TD><SPAN datafld="quelle"/></TD>#
22: <TD><SPAN datafld="von"/></TD>
23: <TD><SPAN datafld="nachricht"/></TD>
24: </TR>
25: </TABLE>
26: </BODY>
27: </HTML>
Die Zeile 11 richtet die Dateninsel mit dem XML-Element ein. Das Attribut id="meineNchr" stellt eine Referenz (meineNchr) zur Verfügung, die in Zeile 14 verwendet wird, um die Datenquelle für die Tabelle anzugeben. Das gebundene XML-Dokument wird durch den Wert des Attributs src angegeben. Das Start-Tag für die Tabelle (Zeilen 13-14) enthält das datasrc-Attribut, das die benannte Referenz (#meineNchr) der Dateninsel angibt. Das Start-Tag für die Tabelle enthält auch noch andere Attribute, die für die Identifizierung - id und summary - oder die Formatierung - border und width - der Tabellenausgabe verwendet werden. Ein Tabellen-head-Abschnitt wird angelegt (Zeilen 15-19), um eine Überschriftzeile zur Beschriftung der Tabellenspalten anzubieten. Der einzige TR wird in den Zeilen 20-24 kodiert. Die Zeilen 21-23 binden die XML-Elemente quelle, von und nachricht unter Verwendung von SPAN-Elementen.
Wenn Sie dieses Dokument in den Microsoft Internet Explorer Version 5.0 oder höher laden, erhalten Sie eine Ausgabe wie in Abbildung 17.2 gezeigt.
Abbildung 17.2: XML-Daten in einer HTML-Tabelle
Wie Sie aus diesem Beispiel erkennen, wird die Tabelle dynamisch erstellt, bis alle XML- Daten dargestellt sind, obwohl auf der HTML-Seite nur eine einzige Datenzeile kodiert wurde. Damit haben Sie eine einfache, effiziente und praktische Technik an der Hand, mit der Sie XML-Daten auf eine HTML-Seite laden können.
Wenn Sie diese Techniken nutzen, um große XML-Datensätze anzuzeigen, wollen Sie den Datenfluss möglicherweise in einzelnen Seitenabschnitten steuern. Um diese Art der Steuerung zu demonstrieren, setzen Sie das datapagesize-Attribut des TABLE-Elements auf den Wert 3. Sie können jeden beliebigen Wert einsetzen, um die maximale Anzahl der Datenzeilen anzugeben, die jeweils angezeigt werden sollen. Im Fall Ihrer Seite insel02.html führt die Angabe des neuen Attributs zu einem Start-Tag für die Tabelle, das wie folgt aussieht:
<TABLE id="table" border="6" width="100%"
datasrc="#meineNchr" summary="Nachrichten"
datapagesize="3">
JavaScript stellt eine Möglichkeit dar, sich durch mehrseitige Dokumente auf einer Webseite zu bewegen. Dazu werden Methoden auf einige Objekte angewendet. Um sich in diesem Fall durch alle Datensätze zu bewegen, können Sie die Standard-Methoden aufrufen, die JavaScript für das Paging anbietet, beispielsweise firstPage(), lastPage(), nextPage() und previousPage() für das Data Source Object. Sie fügen die Paging- Methoden einfach an den Wert des id-Attributs für das Start-Tag von TABLE an, um vollständig qualifizierte Methodenaufrufe zu erzeugen. Um beispielsweise die erste Seite der Datenquelle #meineNchr anzuzeigen, verwenden Sie die Methode firstPage():
table.firstPage()
Der Wert des id-Attributs für das TABLE-Element ist table. Die vollständig qualifizierte Methode zum Laden der ersten Seite ist also table.firstPage(). Andere Paging-Methoden von JavaScript sind unter anderem previousPage(), nextPage() und lastPage().
Eine der einfachsten Möglichkeiten, eine dieser Methoden aufzurufen, ist es, den Methodenaufruf dem onClick-Attribut eines HTML-BUTTON-Elements zuzuweisen. Beispielsweise können Sie die folgenden Zeilen nutzen, um vier Schaltflächen anzulegen:
<BUTTON onClick="table.firstPage()"><<
</BUTTON>
<BUTTON onClick="table.previousPage()"><
</BUTTON>
<BUTTON onClick="table.nextPage()">>
</BUTTON>
<BUTTON onClick="table.lastPage()">>>
</BUTTON>
Ändern Sie Ihre HTML-Seite ab, indem Sie dem TABLE-Element das datapagesize-Attribut hinzufügen und die BUTTON-Aufrufe aufnehmen. Speichern Sie die geänderte Seite unter dem Namen insel03.html. Listing 17.4 zeigt die vollständige HTML-Seite mit den erforderlichen Änderungen.
Listing 17.4: Paging-Steuerelemente von JavaScript in einer HTML-Tabelle, die gebundene XML-Daten enthält - insel03.html
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2: "http://www.w3.org/TR/html4/loose.dtd">
3: <!-- Listing 17.4 insel03.html -->
4:
5: <HTML>
6: <HEAD>
7: <TITLE>XML-Dateninsel</TITLE>
8: </HEAD>
9:
10: <BODY>
11: <XML id="meineNchr" src="nachricht01_17.xml"/>
12: <H1>Meine Nachrichten</H1>
13: <TABLE id="table" border="6" width="100%"
14: datasrc="#meineNchr" summary="nachrichten"
15: datapagesize="3">
16: <THEAD style="background-color: aqua">
17: <TH>Quelle</TH>
18: <TH>Von</TH>
19: <TH>Nachricht</TH>
20: </THEAD>
21: <TR valign="top" align="center">
22: <TD><SPAN datafld="quelle"/></TD>
23: <TD><SPAN datafld="von"/></TD>
24: <TD><SPAN datafld="nachricht"/></TD>
25: </TR>
26: </TABLE>
27: <BR/>
28: <BUTTON onClick="table.firstPage()"><<
29: </BUTTON>
30:
31: <BUTTON onClick="table.previousPage()"><
32: </BUTTON>
33:
34: <BUTTON onClick="table.nextPage()">>
35: </BUTTON>
36:
37: <BUTTON onClick="table.lastPage()">>>
38: </BUTTON>
39:
40: </BODY>
41: </HTML>
Das Start-Tag des TABLE-Elements (Zeilen 13-15) enthält ein datapagesize-Attribut, das auf drei Datenzeilen gesetzt ist. Die Schaltflächen für die Paging-Aufrufe sind in den Zeilen 28-38 kodiert. Die in den Zeilen 28-29 erstellte Schaltfläche lädt die erste Seite der Daten, wenn der Benutzer darauf klickt. Der Text auf der Schaltfläche besteht aus zwei Kleiner-Zeichen (<<), die entsprechend als Entities (< bzw. >) kodiert sind, um Probleme beim Parsing von Markup-Zeichen zu vermeiden; sie symbolisieren einen Sprung zum ersten Eintrag des Datensatzes.
Die in den Zeilen 31 und 32 erstellte Schaltfläche lädt die vorherige Datenseite, wenn der Benutzer sie anklickt. Zeigt die Tabelle bereits die erste Datenseite an, wird das Anklicken dieser Schaltfläche ignoriert. Die in den Zeilen 34-35 erstellte Schaltfläche lädt die nächste Datenseite, wenn der Benutzer sie anklickt. Zeigt die Tabelle bereits die letzte Datenseite an, wird das Anklicken dieser Schaltfläche ignoriert. Die in den Zeilen 37-38 erzeugte Schaltfläche lädt die letzte Datenseite, wenn der Benutzer sie anklickt.
Nachdem Sie Ihre neue HTML-Seite erstellt und gespeichert haben, laden Sie sie in den Internet Explorer. Ihre Anzeige soll wie in Abbildung 17.3 gezeigt aussehen.
Abbildung 17.3: XML-Daten in einer HTML-Tabelle mit JavaScript-Paging-Steuerelementen
Angenommen, Sie wollen jeweils einen einzigen Eintrag aus dem XML-Datensatz anzeigen. Sie können die Felder einfach auflisten, ohne sie zu einer Tabelle zu binden, und sich dann mithilfe der JavaScript-Steuerelemente vorwärts und rückwärts durch die Daten bewegen. Die XML-Daten bestehen aus mehreren Datensätzen, wie Sie heute bereits erfahren haben. Diese Datensätzen können einzeln angesprochen werden, indem das DSO-recordset-Objekt verwendet wird. Das DSO (Data Source Object) ist Teil der Standard-Zugriffstechnologie, die Microsoft als ADO (ActiveX Data Objects) bezeichnet. Es gibt ADOs für die unterschiedlichsten Datenformate wie unter anderem Datenbanken, einfacher Text oder XML, aber Sie werden hier die DSO-Methoden verwenden, die zur XMLDSO-Technologie (XML Data Source Object) gehören.
Legen Sie zunächst eine Liste der Felder an. Dazu verwenden Sie eine einfache SPAN- Kombination anstelle der in der letzten Übung erstellten TABLE. Sie kann beispielsweise so aussehen:
<BODY>
<XML id="meineNchr" src="nachricht01_17.xml"/>
<H1>Meine Nachrichten</H1>
<SPAN datasrc="#meineNchr" datafld="quelle"></SPAN><BR/>
<SPAN datasrc="#meineNchr" datafld="von"></SPAN/><BR/>
<SPAN datasrc="#meineNchr" datafld="nachricht"></SPAN/><BR/>
</BODY>
Anschließend fügen Sie die HTML-Schaltflächen für die Steuerung der DSO- Datensatzmethoden ein. Tabelle 17.1 zeigt einen Überblick über die verfügbaren Methoden.
Den angegebenen Eintrag im Datensatz über seinen Ordinal-wert (#) | ||
Tabelle 17.1: DSO-Datensatzmethoden
Um beispielsweise zum letzten Eintrag im Datensatz zu gehen, schreiben Sie folgendes Script für die Schaltfläche:
<BUTTON onClick="meineNchr.recordset.movelast()">
>>
</BUTTON>
Wenn der Benutzer diese Schaltfläche anklickt, ruft sie die DSO-Datensatzmethode auf, um den letzten Eintrag im Datensatz, auf den über meineNchr verwiesen wird, anzuzeigen. Die JavaScript-Methoden, die Sie zuvor aufgerufen haben, schützen gegen die Fehler, dass über das Dateiende bzw. den Dateianfang hinausgelesen wird, indem Aufrufe ignoriert werden, die nicht im Gültigkeitsbereich des Dokuments liegen. Die DSO-Methoden sehen keinen solchen Schutz vor, deshalb müssen Sie die möglicherweise auftretenden Fehler im Script auffangen - falls Sie sich am ersten oder letzten Eintrag befinden und versuchen, auf einen nicht existenten vorherigen oder nächsten Eintrag zuzugreifen. Das Datensatzobjekt hat eine BOF- (Beginning of File) und eine EOF (End of File)- Eigenschaft, die Ihnen dabei helfen kann. Sie testen im Schaltflächen-Script innerhalb einer if-Anweisung einfach auf die Werte EOF und BOF. Die Schaltfläche movePrevious beispielsweise prüft, ob sich der Datensatz am Dateianfang (BOF) befindet. Ist dies der Fall, ruft das Script eine moveNext()-Methode statt einer movePrevious()-Methode auf. Das Script sieht wie folgt aus:
<BUTTON onClick="meineNchr.recordset.moveprevious();
if (meineNchr.recordset.BOF)
meineNchr.recordset.movenext()">
Bei Verwendung dieser Techniken kann der vollständige Codeausschnitt für die Schaltflächen folgendermaßen aussehen:
<BUTTON onClick="meineNchr.recordset.movefirst()">
<<
</BUTTON>
<BUTTON onClick="meineNchr.recordset.moveprevious();
if (meineNchr.recordset.BOF)
meineNchr.recordset.movenext()">
<
</BUTTON>
<BUTTON onClick="meineNchr.recordset.movenext();
if (meineNchr.recordset.EOF)
meineNchr.recordset.moveprevious()">
>
</BUTTON>
<BUTTON onClick="meineNchr.recordset.movelast()">
>>
</BUTTON>
Wenn Sie all dies kombinieren und eine wie in Listing 17.5 gezeigte HTML-Seite erstellen, können Sie die einzelnen Einträge des XML-gebundenen Datensatzes durchlaufen.
Die Website des Microsoft Developers Network enthält unter
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/xmlsdk30/htm/xmconadditionaldatabindingandxmlrequelles.asp
weitere Informationen über XML Data Source Object-Methoden, Datenbindungs-Architekturen sowie Ereignismodell-Unterstützung für die Datenbindung.
Listing 17.5: Anzeige einzelner Dateneinträge - insel04.html
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2: "http://www.w3.org/TR/html4/loose.dtd">
3: <!-- Listing 17.5 insel04.html -->
4:
5: <HTML>
6: <HEAD>
7: <TITLE>XML-Dateninsel</TITLE>
8: </HEAD>
9:
10: <BODY>
11: <XML id="meineNchr" src="nachricht01_17.xml"/>
12: <H1>Meine Nachrichten</H1>
13: <SPAN datasrc="#meineNchr" datafld="quelle"></SPAN><BR/>
14: <SPAN datasrc="#meineNchr" datafld="von"></SPAN/><BR/>
15: <SPAN datasrc="#meineNchr" datafld="nachricht"></SPAN/><BR/>
16:
17: <BR/>
18:
19: <BUTTON onClick="meineNchr.recordset.movefirst()">
20: <<
21: </BUTTON>
22: <BUTTON onClick="meineNchr.recordset.moveprevious();
23: if (meineNchr.recordset.BOF)
24: meineNchr.recordset.movenext()">
25: <
26: </BUTTON>
27: <BUTTON onClick="meineNchr.recordset.movenext();
28: if (meineNchr.recordset.EOF)
29: meineNchr.recordset.moveprevious()">
30: >
31: </BUTTON>
32: <BUTTON onClick="meineNchr.recordset.movelast()">
33: >>
34: </BUTTON>
35:
36: </BODY>
37: </HTML>
Die Zeile 11 richtet die Dateninsel unter Verwendung des HTML-Elements XML ein. Die Zeilen 13-15 zeigen einen einzelnen Dateneintrag unter Verwendung von SPAN-Elementen an, um die Elemente quelle, von und nachricht zu binden. Die Scripts für die Schaltflächen, die die zuvor beschriebenen DSO-Datensatzmethoden aufrufen, befinden sich in den Zeilen 19-34.
Wenn Sie den Internet Explorer auf Ihrem Computer installieren, ist das allgemeine Java- Bibliothekspaket com.ms.xml.dso in der Distribution enthalten. Dieses Paket enthält ein Applet namens XMLDSO, das benutzt werden kann, um XML-Daten auf einer HTML- Seite anzubieten - in Kombination mit den Datenbindungstechniken, die Sie in diesem Kapitel bereits kennen gelernt haben. In der nächsten Übung werden Sie dieses Applet aufrufen, um einen Pfad für die Daten einzurichten, die zu den XML-Elementen in einer HTML-Tabelle gebunden sind.
Die DSO-Applets wurden ursprünglich als Teil einer allgemeinen Strategie erstellt, um auf HTML-Seiten strukturierte Informationen über Objekte aufzuzeigen. Die ersten dieser Objekte wurden angelegt, um die Datensätze relationaler Datenbanken auf HTML-Seiten zur Verfügung zu haben. Später wurde ein XML DSO erzeugt, um XML-Datenquellen zu HTML-Elementen zu binden.
Die Syntax für den Aufruf einer XMLDSO-Applets auf einer HTML-Seite sieht wie folgt aus:
<APPLET code="com.ms.xml.dso.XMLDSO.class"
width="100%" height="50" id="[Referenz]">
<PARAM NAME="url" VALUE="[URI]">
</APPLET>
Das Start-Tag APPLET beinhaltet ein code-Attribut. Der Wert des code-Attributs ist der vollständig qualifizierte Klassenname und die Paket-ID für das XML DSO. Die Attribute width und height stellen ein Berichtsfenster der gewünschten Größe dar, in dem Fehlermeldungen oder Erfolgsmeldungen für Ladevorgänge angezeigt werden. Das id- Attribut bietet eine Referenz an, die an anderer Stelle auf der HTML-Seite für die Datenbindung verwendet werden kann. Das APPLET-Element enthält ein zwingend erforderliches untergeordnetes Element (PARAM), das den URL für die XML-Dokument- Instanz angibt, die als Datensatz dient.
Verwenden Sie in der nächsten Übung das APPLET-Element anstelle des <XML>-Elements, um HTML-TD-Elemente zu den Elementen im XML-Dokument nachricht01_17.xml zu binden. Ändern Sie dazu Ihre HTML-Seite wie in Listing 17.6 gezeigt ab. Nachdem Sie die erforderlichen Änderungen vorgenommen haben, speichern Sie Ihre Seite unter dem Namen insel05.html und zeigen das Ergebnis an.
Listing 17.6: XML-Dateninsel, die mit einem Java XMLDSO-Applet erzeugt wurde - insel05.html
1: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
2: "http://www.w3.org/TR/html4/loose.dtd">
3: <!-- Listing 17. insel05.html -->
4:
5: <HTML>
6: <HEAD>
7: <TITLE>XML-Dateninsel</TITLE>
8: </HEAD>
9:
10: <BODY>
11: <applet code="com.ms.xml.dso.XMLDSO.class"
12: width="100%" height="50" id="meineNchr">
13: <PARAM NAME="url" VALUE="nachricht01_17.xml">
14: </applet>
15: <H1>Meine Nachrichten</H1>
16: <TABLE id="table" border="6" width="100%"
17: datasrc="#meineNchr" summary="nachrichts">
18: <THEAD style="background-color: aqua">
19: <TH>Quelle</TH>
20: <TH>Von</TH>
21: <TH>Nachricht</TH>
22: </THEAD>
23: <TR valign="top" align="center">
24: <TD><SPAN datafld="quelle"/></TD>
25: <TD><SPAN datafld="von"/></TD>
26: <TD><SPAN datafld="nachricht"/></TD>
27: </TR>
28: </TABLE>
29: </BODY>
30: </HTML>
Die Zeilen 11-14 beinhalten das Applet, das das XMLDSO instanziert. Das erzeugte Objekt wird als meineNchr (Zeile 12) angesprochen. Die Quelle der XML-Dokument-Instanz befindet sich in nachricht01_17.xml (Zeile 13). Die TABLE (Zeilen 16-28) wurde unverändert aus den vorhergehenden Übungen übernommen.
Abbildung 17.4: Eine XML-Dateninsel wurde mithilfe des Java-XML DSO-Applets auf einer HTML-Seite erzeugt.
In dem Berichtsfenster, das Sie angelegt haben, indem Sie dem XML DSO-Start-Tag APPLET eine Höhe und eine Breite übergeben haben, werden Meldungen vom Applet zurückgegeben. Wenn Sie das obige Beispiel genau nachvollzogen haben, haben Sie ein kleines grünes Fenster gesehen, das angezeigt hat, dass das XML DSO erfolgreich geladen wurde. Um sich mit dem Fehlerbericht vertraut zu machen, ändern Sie den URI im PARAM- Element so ab, dass er auf eine nicht existente Datei verweist und laden die HTML-Seite. Auf rotem Hintergrund wird eine XML DSO Parse Exception angezeigt. Diese Fehlermeldungen helfen Ihnen häufig, ganz allgemeine Probleme zu beheben. Weil XML DSO einen XML-Parser verwendet, können Sie in bestimmten Fehlerszenarien auch Parser-Fehler erwarten. Die häufigsten Fehler sind einfache Parser-Fehler sowie Dateiausnahmefehler. Mit anderen Worten, wenn das XML-Dokument, das Sie binden wollen, nicht korrekt formatiert ist, funktioniert die Bindung nicht. Und auch wenn es sich nicht unter dem angegebenen URL befindet, wird ein Fehler zurückgemeldet. Die Fehler, die vom XMLDSO-Applet gemeldet werden, beinhalten auch diejenigen, die bei Verwendung des MSXML-Parsers auftreten. Einen Überblick über die XMLDSO- Fehlerbehandlung finden Sie unter http://msdn. microsoft.com/library/ default.asp?url=/library/en-us/xmlsdk30/htm/xmconusingxmldataquelleobject.asp.
Heute haben Sie verschiedene Ansätze kennen gelernt, XML-Dateninseln auf HTML- Seiten anzulegen. Damit können Sie das intelligente Datenspeichern von XML mit den Darstellungsmöglichkeiten von HTML kombinieren. Sie haben mehrere Techniken kennen gelernt, wie man HTML-Elemente zu bestimmten XML-Elementen bindet. Sie haben Javascript-Steuerelemente angelegt, um den Datenfluss der XML-Quelldatenmenge als einzelne Seiten oder als einzelne Datensätze zu steuern. Schließlich haben Sie noch ein XML DSO Java-Applet verwendet, um Daten aus einer XML-Dokument-Instanz für die Verwendung in HTML zur Verfügung zu haben. Diese Techniken können relativ effizient genutzt werden, um Werkzeuge für die Wartung und Abfrage symmetrisch strukturierter XML-Dokument-Instanzen anzulegen.
Die heute vorgestellten Ansätze für die Datenbindung sind interessant und einfach zu implementieren, leider aber auch auf eine kleine Untermenge verfügbarer Microsoft- Technologien begrenzt. Weil die Werkzeuge kostenlos sind, können Sie jedoch riskieren, sie auszuprobieren, wenn Sie nach einer einfachen Methode suchen, symmetrische XML- Daten zu manipulieren. Die Anforderung, dass die Daten symmetrisch sein müssen, ist jedoch eine weitere Einschränkung dieses Ansatzes. Nichtsdestotrotz stattet die Verwendung der Datenbindung, wie sie heute beschrieben wurde, Sie mit zusätzlichen Werkzeugen für Ihr XML-Repertoire aus.
Frage:
Inwiefern verhält sich XML einer Datenbank vergleichbar, wenn eine einfache
Datenbindung angewendet wird?
Antwort:
XML-Dokument-Instanzen können sich wie flache Datenbanken verhalten, wenn
sie symmetrisch strukturiert sind. Die unmittelbaren untergeordneten Elemente
des Wurzelelements entsprechen den Datensätzen in einer Datenbank und die
untergeordneten Elemente der Datensätze entsprechen den Feldern einer
Datenbank.
Frage:
Wie unterscheiden sich DIV und SPAN in Hinblick auf die Datenbindung?
Antwort:
Sowohl DIV als auch SPAN sind Container für Stile oder Daten. SPAN arbeitet
inline mit anderen Elementen, während DIV bei der Anzeige einen
Zeilenumbruch vor und nach seinem Inhalt einfügt.
Frage:
Was passiert, wenn jemand versucht, eine auf diese Weise angelegte XML-Dateninsel mit
dem Netscape Navigator anzuzeigen?
Antwort:
Weil Netscape-Browser die Microsoft Data Source Objects nicht unterstützen,
werden keine Daten angezeigt. Beachten Sie, dass die heute vorgestellten
Übungen nur für die angegebenen Microsoft-Werkzeuge relevant sind.
Anhand der Übung können Sie überprüfen, was Sie heute gelernt haben. Die Antwort finden Sie in Anhang A.
Verwenden Sie eine Methode Ihrer Wahl, um eine gebundene HTML-Tabelle zu erstellen, die Daten aus Ihrem CD XML-Datensatz enthält.
