SELFHTML/Navigationshilfen Dynamisches HTML DHTML-Modelle| SELFHTML/Navigationshilfen Dynamisches HTML DHTML-Modelle |
Allgemeines zur DatenanbindungDer MS Internet Explorer ab Version 4.x erlaubt es, in kontrollierter Form Daten aus einer externen Datenquelle zu holen und in HTML-Elementen dynamisch anzuzeigen. So ist beispielsweise eine Tabelle denkbar, in der sich der Anwender bei jedem Klick auf einen entsprechenden Button die Bundesliga-Endtabellen der Spielsaisons von 1960 bis heute anzeigen lassen kann. Bei jedem Klick werden aus einer externen Datei eine Reihe von Daten ausgelesen und dynamisch in die Anzeigetabelle übernommen.
Microsoft hat das Konzept der Datenanbindung sehr flexibel ausgelegt. Es gibt diverse Möglichkeiten, auf externe Datenquellen zuzugreifen. Der Zugriff auf eine einfache Textdatei ist nur eine davon. Es besteht ebenso die Möglichkeit, etwa über die Datenbankabfragesprache SQL auf eine Datenbank zuzugreifen, die SQL-Befehle verarbeiten kann. Für die verschiedenen Möglichkeiten der Datenanbingung gibt es verschiedene Datenmodelle. Für jedes der Datenmodelle gibt es ein bestimmtes ActiveX-Control oder ein Java-Applet, das Sie in Ihrer HTML-Datei ansprechen müssen, um die Datenanbindung damit zu realisieren. Die Datenmodelle und deren Einbindung in HTML werden auf dieser Seite vorgestellt.
Die Vorteile der Datenanbindung liegen auf der Hand: Daten können mit einer dafür geeigneten Anwendung gepflegt und gespeichert werden. Eine HTML-Datei kann auf immer aktuelle Daten zugreifen, ohne selbst geändert werden zu müssen. Für das "Holen" der Daten gibt es kein vorgeschriebenes Protokoll. Die Datenanbindung funktioniert also auf allen Umgebungen, ob auf einem WWW-Server, lokal auf einer PC-Festplatte oder auf einer CD-ROM (zumindest auf das einfachste Datenmodell trifft dies zu). Es ist kein zusätzliches CGI-Script erforderlich, dass als Vermittler zwischen HTML-Datei und Datenbestand für jede Interaktion zwischen Anwender und Datenbank immer wieder aufgerufen werden muss. Das Know How hat der Browser, und die Steuerung der Datenanbindung wird direkt in der HTML-Datei notiert. Durch dynamisches Austauschen der Inhalte von HTML-Elementen, in denen die Daten angezeigt werden, ist kein neuer Aufbau der WWW-Seite erforderlich.
Aus heutiger Sicht muss das Modell der client-seitigen Datenanbindung, das Microsoft mit dem Internet Explorer 4.0 eingeführt hat, jedoch kritisch betrachtet werden. Der Grund ist einerseits, dass es auf extrem proprietären Konzepten beruht, vor allem was die Einbindung der allgemein unbeliebten Active-X-Controls betrifft. Und andererseits haben sich Web-Server mittlerweile so stark durchgesetzt, dass es in in den meisten Fällen - auch lokal - sinnvoller ist, server-seitige 
CGI-Scripts zum Handling der Datenverarbeitung einzusetzen.
Die Erläuterungen zu den Datenmodellen weiter unten auf dieser Seite sind zum Teil sehr technisch. Das ist leider nicht zu ändern, da die Materie ziemlich komplex ist. Die Erläuterungen zu den Datenmodellen richten sich auch nur an Spezialisten, die wissen, was mit den entsprechenden Begriffen anzufangen ist.
  |
Beispiel: Datei dynamisch in Tabelle einbindenDie hier beschriebene Vorgehensweise erläutert, wie Sie in einer Tabelle einzelne Datensätze aus einer externen Textdatei anzeigen können. Dabei wird das Datenmodell: Tabular Data Control (TDC) verwendet. Mit Hilfe von Buttons kann der Anwender den nächsten oder vorhergehenden Datensatz in die Tabelle laden.
Name|Vorname|Strasse|PLZ|Ort|Tel|EMail Berger|Hans|Pfisterstr.11|38487|Grubenhausen|04987-4445631|berger@kabumm.de Heidenfroh|Martina|Mittelweg 123|43985|Hatzenau|04583-2398474|mh@heidenfroh.com Rauhbein|Eberhard|Traumstr.13|56097|Höllenbachhausen|068347-582374|- Truthahn|Gerlinde|Aufplatz 1|93722|Sündenstadt|032987-385750|gerlinde@metawelt.net |
Die externe Datei ist in diesem Beispiel eine einfache Textdatei, z.B. eine Datei mit dem Namen adressen.txt. Die Datei ist so aufgebaut, dass jede Zeile einen Datensatz darstellt. Die einzelnen Felder eines Datensatzes werden in diesem Beispiel durch das Zeichen "|" getrennt. Es könnte auch ein anderes Zeichen sein. Das Zeichen "|" wurde hier gewählt, weil es sehr selten ist und in den Daten selbst nicht vorkommt. In der ersten Zeile der Datei stehen keine Daten, sondern Feldnamen. Der dritte Feldname lautet beispielsweise Strasse. In den eigentlichen Datenzeilen darunter stehen dann in entsprechender Reihenfolge die Daten. So hat das dritte Feld der ersten Datenzeile den Wert Pfisterstr.11. Dies ist also ein Wert für den in der ersten Zeile an dritter Stelle vergebenen Feldnamen Strasse.
Textdateien dieser Art sind nicht besonders komfortabel, wenn man sie selbst in einem Texteditor bearbeiten will. Doch solche Textdateien lassen sich mit fast allen Tabellenkalkulations- und Datenbankprogrammen erzeugen. Meist ist dafür der Datentyp "kommabegrenzt" ("comma delimited") mit der Standard-Dateiendung .csv vorgesehen. Bessere Programme erlauben es dabei auch, ein selbst definierbares Feldbegrenzerzeichen zu vergeben.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title></head> <body> <object id="Adressen" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name="DataURL" value="adressen.txt"> <param name="UseHeader" value="true"> <param name="FieldDelim" value="|"> </object> <form action=""> <table id="Anzeigetabelle" datasrc="#Adressen" datapagesize="1" width="100%" border="1"> <colgroup><col width="200"><col></colgroup> <tr> <td bgcolor="#EEEEEE"><b>Adressen</b></td> <td bgcolor="#EEEEEE" align="right"> <input type="button" value=" < " onclick="document.all.Anzeigetabelle.previousPage();"> <input type="button" value=" > " onclick="document.all.Anzeigetabelle.nextPage();"> </td> </tr><tr> <td bgcolor="#EEEEEE" valign="top"><b>Name:</b></td> <td bgcolor="#FFFFE0" valign="top"><span datafld="Name"></span></td> </tr><tr> <td bgcolor="#EEEEEE" valign="top"><b>Vorname:</b></td> <td bgcolor="#FFFFE0" valign="top"><span datafld="Vorname"></span></td> </tr><tr> <td bgcolor="#EEEEEE" valign="top"><b>Straße:</b></td> <td bgcolor="#FFFFE0" valign="top"><span datafld="Strasse"></span></td> </tr><tr> <td bgcolor="#EEEEEE" valign="top"><b>Postleitzahl:</b></td> <td bgcolor="#FFFFE0" valign="top"><span datafld="PLZ"></span></td> </tr><tr> <td bgcolor="#EEEEEE" valign="top"><b>Wohnort:</b></td> <td bgcolor="#FFFFE0" valign="top"><span datafld="Ort"></span></td> </tr><tr> <td bgcolor="#EEEEEE" valign="top"><b>Telefon:</b></td> <td bgcolor="#FFFFE0" valign="top"><span datafld="Tel"></span></td> </tr><tr> <td bgcolor="#EEEEEE" valign="top"><b>E-Mail:</b></td> <td bgcolor="#FFFFE0" valign="top"><span datafld="EMail"></span></td> </tr></table></form> </body> </html> |
Um eine externe Datenquelle in einer HTML-Datei nutzen zu können, müssen Sie zunächst die Quelle und diverse Angaben zu deren Aufbau notieren. Dazu brauchen Sie das <object>-Tag. In dem einleitenden <object>-Tag sind zwei Attribute erforderlich: Mit der Angabe id= vergeben Sie einen Namen, unter dem Sie später auf die Daten zugreifen können. Der Name sollte passend sein, im obigen Beispiel etwa "Adressen". Als zweiten Parameter müssen Sie das ActiveX-Control referenzieren, dass den gesamten Zugriff auf die externe Datei abwickelt. Bei einfachen Textdateien mit zeilenweisen Datensätzen müssen Sie dabei immer die Angabe classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83" notieren. Das ActiveX-Control mit dieser Identifikationsnummer ist im Lieferumfang des MS Internet Explorers ab Version 4.x enthalten - Sie brauchen sich um nichts weiter zu kümmern. Genau dabei liegt allerdings der Knackpunkt des gesamten Konzepts: ohne solche ActiveX-Controls läuft nichts.
Innerhalb des <object>-Tags notieren Sie Angaben zu Ort und Beschaffenheit der externen Datei.
Mit <param name="DataURL" können Sie die gewünschte Datei ansprechen. Hinter value= notieren Sie den Dateinamen. Wenn sich die Datei im gleichen Verzeichnis befindet, genügt der einfache Dateiname. Ansonsten gelten die gleichen Regeln wie bei Verweisen in HTML.
Mit <param name="UseHeader" value="true"> weisen Sie den Browser an, die erste Zeile der externen Datei nicht als Datenzeile zu interpretieren, sondern als Zeile für die Definition der Feldnamen.
Mit <param name="FieldDelim" geben Sie an, welches das Feldtrennzeichen sein soll. Im Beispiel ist dies das Zeichen "|".
Damit sind alle Voraussetzungen geschaffen, um die Daten aus der externen Datei dynamisch in HTML anzuzeigen. Die Anzeige der Daten erfolgt in einer Tabelle. Das einleitende <table>-Tag schafft die nötigen Voraussetzungen, um die Daten in kontrollierter Form anzuzeigen. Zunächst wird in der Tabelle mit id= ein Name vergeben (im Beispiel: Anzeigetabelle). Dieser Name wird bei den Buttons benötigt, die innerhalb der Tabelle das Blättern innerhalb der Datensätze ermöglichen.
Die nächste Angabe im <table>-Tag ist datasrc= (data source, Datenquelle). Damit nehmen Sie Bezug auf die externe Datendatei. An dieser Stelle dürfen Sie jedoch nicht die Datendatei selbst angeben, sondern Sie müssen denjenigen Namen angeben, den Sie zuvor im <object>-Tag bei id= vergeben haben. Und zwar mit einem vorangestellten Gatterzeichen #. Dadurch stellen Sie den Bezug zwischen Tabelle und Datenquelle her. Es werden dann alle Parameter berücksichtigt, die Sie innerhalb des <object>-Tags angegeben haben.
Ebenfalls wichtig ist die Angabe datapagesize= (Datenseitengröße) im <table>-Tag. Damit geben Sie an, wie viele Datensätze aus der externen Datei gleichzeitig angezeigt werden sollen. Wenn Sie diese Angabe weglassen, macht der MS Internet Explorer die Tabelle automatisch so lang, dass alle Datensätze auf einmal darin dargestellt werden. Im obigen Beispiel wird datapagesize="1" angegeben. Dadurch wird immer genau ein Datensatz angezeigt.
Innerhalb der Tabelle können Sie erkennen, wie ein Datensatz aus der externen Datenquelle darin angezeigt wird. Die Tabelle selbst können Sie nach Ihren Wünschen frei gestalten. Wichtig ist nur zu wissen, wie der Bezug zu einem Datensatz der externen Datei hergestellt wird. Im obigen Beispiel geschieht dies innerhalb entsprechender Tabellenzellen mit Hilfe des <span>-Tags. Mit einem, Befehl wie <span datafld="PLZ"></span> weisen Sie den Browser an, in der betreffenden Tabellenzelle den aktuellen Inhalt des Feldes "PLZ" aus der externen Datenquelle anzuzeigen (datafld = data field = Datenfeld). Dabei muss der Wert, den Sie hinter der Angabe datafld= notieren, mit dem Feldnamen übereinstimmen, den Sie in der ersten Zeile der externen Datendatei vergeben haben. Beachten Sie dabei auch die exakte Schreibweise.
Neben der Angabe datafld= können Sie in so einem Datenanzeigebereich auch noch die Angabe dataformatas= (formatiere Daten als) notieren. Im obigen Beispiel wird davon kein Gebrauch gemacht. Benutzen Sie dataformatas=, Wenn die Daten in der externen Datei selbst HTML-Tags enthalten. Mit dataformatas="html" erzwingen Sie dann, dass die Tags aus der externen Datei als HTML-Tags interpretiert werden.
Da im obigen Beispiel mit datapagesize="1" festgelegt wurde, dass immer nur ein Datensatz angezeigt wird, erscheint in der Tabelle zunächst der Inhalt der ersten Datenzeile der externen Datei. Natürlich soll der Anwender nun in den Datensätzen blättern können. Dazu werden Buttons zum Vor- und Zurückblättern definiert. Im Beispiel befinden sich diese Buttons in der ersten Tabellenzeile. Sie könnten aber auch an einer anderen Stelle stehen.
Mit <input type=button value=" < "
onclick="document.all.Anzeigetabelle.previousPage();"> wird ein Button definiert, bei dessen Anklicken der vorhergehende Datensatz aufgerufen wird. Mit document.all.Anzeigetabelle greifen Sie dabei auf die Tabelle zu, in der die Daten angezeigt werden (Anzeigetabelle ist dabei der Name, der in der Tabelle mit id= vergeben wurde). Mit <input type=button value=" > "
onclick="document.all.Anzeigetabelle.nextPage();"> wird der Button definiert, der zum nächsten Datensatz springt. Beachten Sie, dass Sie nicht kontrollieren müssen, ob der Anwender gerade den ersten oder letzten Datensatz anzeigt. Es gibt keine Fehlermeldungen, wenn der Anwender versucht, einen nicht vorhandenen Datensatz aufzurufen. Der Button hat dann einfach keine Wirkung.
|
|
Beispiel: Daten durchsuchbar machenIn diesem Beispiel wird gezeigt, wie Sie dem Anwender ermöglichen können, mit Hilfe eines Suchbegriffes nur diejenigen Datensätze anzuzeigen, in denen der gesuchte Begriff vorkommt. Das Beispiel zeigt auch, wie Sie mit Hilfe von Scripts auf die HTML-Elemente zur Datenanbindung zugreifen können.
Anzeigebeispiel: So sieht's aus (62 KByte)
Deutsch;Englisch;Franzoesisch;Italienisch;Spanisch Rechner;computer;ordinateur;computer, calcolatore;ordenador Maschine;machine (s);machine;macchina;máquina Personalcomputer;personal computer;ordinateur personnel (m);computer personale;ordenador personal arbeitender Rechner;active computer;ordinateur active;computer attivo;ordenador activado ... usw. ... |
Die Datendatei dieses Beispiels zeigt ein mehrsprachiges Fachwörterbuch. In der ersten Zeile werden die Sprachen definiert. Unterhalb davon stehen die Wörter in den jeweiligen Sprachen. Die Einträge zu den Sprachen sind durch Semikola (;) getrennt. Wenn in einer Sprache mehrere Wörter in Frage kommen, werden diese durch Kommata getrennt, so wie in der zweiten Zeile beim italienischen Wort für Rechner: computer, calcolatore.
Anzeigebeispiel: So sieht's aus
<html><head><title>Test</title>
<script language="JScript" type="text/jscript">
<!--
function Suchen() {
var Datensaetze = 1000;
document.all.Anzeigetabelle.style.display = "none";
var Suchausdruck = "";
var Suchbegriffe = 0;
if(document.Eingabe.SuchDeu.value != "") {
Suchausdruck = Suchausdruck + "Deutsch = " + document.Eingabe.SuchDeu.value;
Suchbegriffe++;
}
if(document.Eingabe.SuchEng.value != "") {
if(Suchbegriffe > 0)
Suchausdruck = Suchausdruck + " & Englisch = " + document.Eingabe.SuchEng.value;
else
Suchausdruck = Suchausdruck + "Englisch = " + document.Eingabe.SuchEng.value;
Suchbegriffe++;
}
if(document.Eingabe.SuchFra.value != "") {
if(Suchbegriffe > 0)
Suchausdruck = Suchausdruck + " & Franzoesisch = " + document.Eingabe.SuchFra.value;
else
Suchausdruck = Suchausdruck + "Franzoesisch = " + document.Eingabe.SuchFra.value;
Suchbegriffe++;
}
if(document.Eingabe.SuchIta.value != "") {
if(Suchbegriffe > 0)
Suchausdruck = Suchausdruck + " & Italienisch = " + document.Eingabe.SuchIta.value;
else
Suchausdruck = Suchausdruck + "Italienisch = " + document.Eingabe.SuchIta.value;
Suchbegriffe++;
}
if(document.Eingabe.SuchSpa.value != "") {
if(Suchbegriffe > 0)
Suchausdruck = Suchausdruck + " & Spanisch = " + document.Eingabe.SuchSpa.value;
else
Suchausdruck = Suchausdruck + "Spanisch = " + document.Eingabe.SuchSpa.value;
Suchbegriffe++;
}
document.all.Begriffe.object.Filter = Suchausdruck;
document.all.Begriffe.Reset();
document.all.Anzeigetabelle.dataSrc = "#Begriffe";
if(document.all.Begriffe.recordset.recordCount < Datensaetze) {
document.all.Anzeigetabelle.dataPageSize = Begriffe.recordset.recordCount;
document.all.Treffer.innerText = Begriffe.recordset.recordCount + " Suchtreffer!";
document.all.Anzeigetabelle.style.display = "block";
}
else
document.all.Treffer.innerText = "0 Suchtreffer!";
}
//-->
</script>
</head>
<body>
<object id="Begriffe" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="woerterbuch.txt">
<param name="UseHeader" value="true">
<param name="Filter" value="">
<param name="FieldDelim" value=";">
</object>
<p>Die durchsuchbare Datenbank enthält 1000 Einträge. Suchen Sie nach
Begriffen in einer oder mehreren Sprachen. Bei der Suche in mehreren Sprachen
werden die Eingaben logisch durch UND verknüpft. Sie dürfen auch das
Wildcardzeichen <b>*</b> für Teilausdrücke verwenden. Suchen Sie z.B. mal im Feld
(Deutsch) nach <b>Arbeits*</b> oder im Feld (Italienisch) nach
<b>*ore</b> oder im Feld (Englisch) nach <b>*computer</b>.</p>
<form name="Eingabe" action="">
Suche nach:<br>
<input name="SuchDeu" type="text" width="40"> (Deutsch)<br>
<input name="SuchEng" type="text" width="40"> (Englisch)<br>
<input name="SuchFra" type="text" width="40"> (Franzoesisch)<br>
<input name="SuchIta" type="text" width="40"> (Italienisch)<br>
<input name="SuchSpa" type="text" width="40"> (Spanisch)<br>
<input type="button" style="width:150px; height:25px;" value="Suche starten" onClick="Suchen()">
</form>
<table border="1" cellpadding="1" cellspacing="0"><tr><td>
<table width="100%">
<tr>
<td valign="top" colspan="5">
<span id="Treffer" style="color:#0000CC; font-weight:bold;"> </span>
</td>
</tr>
<tr>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Deutsch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Englisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Französisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Italienisch:</b></td>
<td bgcolor="#EEEEEE" valign="top" width="20%"><b>Spanisch:</b></td>
</tr>
</table>
<table id="Anzeigetabelle" style="display:none" width="100%">
<tr>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Deutsch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Englisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Franzoesisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Italienisch"></span></td>
<td bgcolor="#FFFFE0" valign="top" width="20%"><span datafld="Spanisch"></span></td>
</tr>
</table>
</td></tr></table>
</body>
</html>
|
Das Beispiel zeigt die vollständige HTML-Datei zur Realisierung einer durchsuchbaren Datenbank. Innerhalb der HTML-Datei wird wie im Beispiel: Datei dynamisch in Tabelle einbinden wieder das <object>-Tag notiert, um die Verbindung zu der externen Datendatei herzustellen. Es wird jedoch ein neuer Parameter angegeben:
<param name="Filter" value="">
Mit dem Parameter Filter können Sie die Datensätze, die aus der Datendatei "geholt" werden, begrenzen. Dazu können Sie bei value= Einschränkungskriterien angeben. Bei der Objektdefinition im obigen Beispiel wird value="" notiert. Das bedeutet, es gibt keine Einschränkungen. Alle Datensätze werden gefunden.
In dem längeren Script, das im Kopf der HTML-Datei steht, wird der Wert für Filter dynamisch verändert. Dadurch wird die Anzeige auf bestimmte Datensätze eingeschränkt, nämlich solche, die den Filterkriterien entsprechen.
Die Kriterien für den Filter soll der Anwender durch seine Suchanfrage selbst bestimmen können. Im obigen Beispiel wird dazu unterhalb des <object>-Tags ein Formular definiert (<form name="Eingabe" action="">). Das Formular hat fünf Eingabefelder, eines für jede der fünf Sprachen des mehrsprachigen Wörterbuchs. Mit einem anklickbaren Button kann der Anwender die Suche abschicken. Beim Anklicken des Buttons wird die Funktion Suchen() aufgerufen, die in dem JScript-Bereich im Dateikopf definiert ist (onClick="Suchen()").
Innerhalb der Funktion Suchen() wird zunächst eine Variable Datensaetze mit einem Wert vorbelegt (1000). Das empfiehlt sich bei größeren Datenbeständen. Denn per Voreinstellung liefert der MS Internet Explorer, wenn er keine Datensätze findet, die dem Suchkriterium entsprechen, alle Datensätze zurück. Angenommen, Sie haben 5000 Datensätze. Dann würde eine Tabelle mit 5000 Zeilen angezeigt. Da dies im Aufbau ziemlich lange dauert, ist eine Begrenzung sinnvoll.
Die Variable Suchausdruck soll die Anwenderkriterien zum Durchsuchen des Datenbestandes aufnehmen. Dabei ist es erforderlich, die Angaben aus den Formularfeldern in eine Zeichenkette zu konvertieren, die den Regeln für den Parameter Filter entsprechen.
Folgende wichtige Regeln gelten für Werte, die bei Filter erlaubt sind (diese Regeln gelten sowohl bei Wertzuweisungen innerhalb des <object>-Tags als auch bei dynamischen Wertzuweisungen innerhalb von Scripts):
Mit Feldname = Wert werden nur Datensätze gefunden, bei denen das Feld Feldname exakt den Wert Wert enthält und nicht mehr und nicht weniger. Bei Name = Meyer werden also nur Meyer's gefunden, keine Meyerbohm's.
Mit Feldname <> Wert werden Datensätze gefunden, bei denen der Wert Wert im Feld Feldname vorkommt - er kann auch exakt damit übereinstimmen. Bei Name <> Meyer werden also Meyer's und Meyerbohm's gefunden.
Mit Feldname > Wert werden Datensätze gefunden, bei denen der Wert von Feldname größer ist als Wert. Bei Name > Y werden also nur Namen gefunden, die mit Z anfangen.
Mit Feldname >= Wert werden Datensätze gefunden, bei denen der Wert von Feldname größer oder gleich ist im Vergleich zu Wert. Bei Name >= Y werden also nur Namen gefunden, die mit Y oder Z anfangen.
Mit Feldname < Wert werden Datensätze gefunden, bei denen der Wert von Feldname kleiner ist als Wert. Bei Name < D werden also nur Namen gefunden, die mit A,B oder C anfangen.
Mit Feldname <= Wert werden Datensätze gefunden, bei denen der Wert von Feldname kleiner oder gleich ist im Vergleich zu Wert. Bei Name <= D werden also Namen gefunden, die mit A,B,C oder D anfangen.
An jeder Stelle ist ein Platzhalterzeichen erlaubt. Dies ist ein Sternzeichen (*). Es steht für kein, eines oder beliebig viele Zeichen.
Sie können auch zwei oder mehrere solcher einfachen Ausdrücke mit den Zeichen & (für UND) oder | (für inklusives ODER) logisch verknüpfen. Wenn Sie mehrere Ausdrücke verknüpfen und dabei sowohl UND also auch ODER verwenden, müssen Sie Klammern verwenden, um eine eindeutige Bewertung des gesamten Kriteriums sicherzustellen. Ein komplexer Ausdruck dieser Art ist etwa Name > M & PLZ = 8*.
Im obigen Script wird mit diversen if-Abfragen aus den Eingabefeldern des Formulars ein gültiger Zuweisungswert für Filter konstruiert. Dabei wird nur die einfachste Bedingung mit dem Istgleichzeiten eingesetzt. Da der Anwender auch selbst das Sternzeichen als Platzhalterzeichen in einem Eingabefeld eingeben kann, genügt diese einfache Suche für viele Fälle. Wenn Sie dem Anwender komplexere Suchabfragen ermöglichen wollen, müssen Sie diesen Teil des Scripts entsprechend aufwendiger gestalten.
Im unteren Teil der Funktion Suchen() steht dann der Befehl:
document.all.Begriffe.object.Filter = Suchausdruck;
Damit wird dem Parameter Filter des <object>-Tags der Suchausdruck zugewiesen, der zuvor ermittelt und in der Variablen Suchausdruck gespeichert wurde.
Der nächste Befehl ist ebenfalls von entscheidender Bedeutung:
document.all.Begriffe.Reset();
Damit veranlassen Sie den Browser, die Anzahl der anzuzeigenden Datensätze neu zu ermitteln. Da mittlerweile ein Filter bestimmt wurde, findet der Browser nun nur noch Datensätze, die den Bedingungen des Filters entsprechen.
Auf die übrigen Anweisungen des Scripts und die Elemente in der HTML-Datei wird hier nicht näher eingegangen. Es handelt sich dabei um einfaches dynamisches HTML nach den Regeln des MS Internet Explorers 4.x.
|
|
HTML-Elemente für die Anzeige von externen DatenIm Beispiel: Datei dynamisch in Tabelle einbinden werden die externen Daten jeweils in einem span-Element angezeigt. Es gibt eine Reihe weiterer HTML-Elemente, in denen Sie Daten aus Datenfeldern externer Datenquellen anzeigen können. In anderen als diesen Elementen ist die Anzeige externer Daten nicht möglich. Folgende HTML-Elemente sind erlaubt:
<a>...</a>:Angenommen, Sie haben eine externe Textdatei verweis.txt mit folgenden Zeilen:
URL,Verweistext
http://www.yahoo.de/,Yahoo Suchdienst
Diese Datei können Sie mit dem object-Element in HTML wie folgt einbinden:
<object id="Verweis" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="verweis.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>
Danach können Sie folgenden Verweis konstruieren:
<a datasrc="#Verweis" datafld="URL"><span datafld="Verweistext" datasrc="#Verweis"></span></a>
Indem Sie <a datafld=> notieren, wird der Inhalt, den das Datenfeld liefert, als Angabe für href= bewertet (im Beispiel liefert das Feld "URL" diese Angaben). Innerhalb des Verweises wird dann mit Hilfe des span-Elements das andere Feld "geholt", nämlich der Verweistext. Solche Verweise machen beispielsweise Sinn, wenn Sie den gleichen Verweis an vielen verschiedenen Stellen auf Ihren Web-Seiten nutzen. Verweisziel und Verweistext sind dann zentral gespeichert und brauchen bei Änderungen nur in der kleinen Textdatei einmal geändert werden. Alle entsprechenden HTML-Verweise sind damit automatisch aktualisiert.
<button>...</button>:Angenommen, Sie haben eine externe Textdatei daten.txt mit folgendem Aufbau und Beispieleinträgen:
Zeile,Text
1,Das ist ein Test
2,mit einem Button
3,spannend - was?
Diese Datei können Sie mit dem object-Element in HTML wie folgt einbinden:
<object id="Daten" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="daten.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>
Danach können Sie beispielsweise folgende Tabelle konstruieren:
<table "id=Anzeige" datasrc="#Daten" datapagesize="1"><tr><td>
<form action=""><button datafld="Text" onClick="document.all.Anzeige.nextPage()"></button></form>
</td></tr></table>
Damit springt der Anwender bei jedem Klick auf den Button einen Datensatz weiter, und die Buttonbeschriftung nimmt den aktuellen Wert des Datenfeldes Text an.
<div>...</div>:Mit diesem HTML-Tag können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben, genau so wie es im Beispiel: Datei dynamisch in Tabelle einbinden mit dem span-Element gemacht wird. Der Unterschied zwischen <div>...</div> und <span>...</span> ist, dass das div-Element einen eigenen Anzeigeblock erzeugt, das span-Element dagegen nicht.
<img>:Angenommen, Sie wollen eine kleine Diashow programmieren. Dazu können Sie eine Textdatei daten.txt anlegen, die etwa folgenden Aufbau hat:
Nummer,Bild
1,meinhaus.gif
2,meinboot.gif
3,meinauto.gif
4,undich.gif
Diese Datei können Sie mit dem object-Element in HTML wie folgt einbinden:
<object id="Daten" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="daten.txt">
<param name="UseHeader" value="true">
<param name="FieldDelim" value=",">
</object>
Danach können Sie beispielsweise folgende Tabelle konstruieren:
<table "id=Anzeige" datasrc="#Daten" datapagesize="1"><tr>
<td>
Bild <span datafld="Nummer"></span><br>
<input type=button value=" < "
onclick="document.all.Anzeige.previousPage();">
<input type=button value=" > "
onclick="document.all.Anzeige.nextPage();">
</td><td>
<img datafld="Bild">
</td></tr></table>
Damit kann der Anwender mit den Blätterbuttons die Bilder durchblättern.
<frame>:Angenommen, Sie haben eine externe Textdatei besteseite.txt mit folgenden Zeilen:
BesteSeite
http://selfhtml.teamone.de/
Nun können Sie folgende HTML-Datei mit einem Frameset konstruieren:
<html><head>
<object id="UrlDerWoche" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">
<param name="DataURL" value="besteseite.txt">
<param name="UseHeader" value="true">
</object></head>
<frameset rows="100,*">
<frame src="meine.htm">
<frame datasrc="#UrlDerWoche" datafld="BesteSeite">
</frameset>
</html>
Auf diese Weise können Sie in einem Frame-Fenster eine Seite anzeigen, deren Zieladresse Sie in der separaten Textdatei pflegen. Wichtig ist, dass Sie das object-Element genau an der Stelle platzieren wie im Beispiel.
<iframe>:Siehe das Beispiel bei Frames. Der Unterschied ist, dass Sie das object-Element in einer normalen HTML-Datei platzieren. Mit einem Befehl wie:
<iframe datasrc="#UrlDerWoche" datafld="BesteSeite"></iframe>
können Sie dann in der gleichen HTML-Datei in einer eingebetteten Fensterbox den Inhalt der Seite anzeigen, die in der Textdatei angegeben ist.
<label>...</label>:Das label-Element, das neu ist in HTML 4.0, erlaubt die Beschriftung eines Formularfeldes. Im Rahmen der Datenanbindung können Sie dieses HTML-Tag benutzen, wenn Sie die externen Daten in Formularfeldern ausgeben. Sie können dann dem label-Element, das Sie etwa einem Eingabefeld zuordnen, dynamisch den Feldnamen zuweisen, der in der externen Datendatei für dieses Feld definiert ist. Wenn sich der Feldname in der Datendatei dann ändert, wird er bei der Anzeige in der HTML-Datei automatisch aktualisiert. Beispiel:
<label for="Vorname" datafld="prename"></label>
Dadurch wird dem Inhalt des label-Elements eines Formularfeldes der Feldname prename zugewiesen, der in der Datenbank definiert ist.
<marquee>...</marquee>:Mit diesem HTML-Element, das mittlerweile allerdings als Musterbeispiel proprietärer HTML-Erweiterungen verschrieen ist, können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben, genau so wie es im Beispiel: Datei dynamisch in Tabelle einbinden mit dem span-Element gemacht wird. Der Unterschied zwischen <marquee>...</marquee> und <span>...</span> ist, dass das marquee-Element einen Lauftext erzeugt, das span-Element dagegen nicht.
<span>...</span>:Mit diesem HTML-Tag können Sie beispielsweise innerhalb einer Tabelle externe Daten ausgeben, genau so wie es im Beispiel: Datei dynamisch in Tabelle einbinden.
<input>:Mit diesem HTML-Element können Sie beispielsweise innerhalb einer Tabelle externe Daten in editierbaren Formularfeldern ausgeben. Das ist besonders dann interessant, wenn geänderte Daten auch tatsächlich in die Datenquelle zurückgeschrieben werden können. Bei einfachen Textdateien ist das derzeit nicht möglich, wohl aber beim Datenmodell: Remote Data Service (RDS) und beim
Datenmodell: JDBC DataSource Applet.
Die Einbindung in HTML erfolgt ähnlich wie im Beispiel: Datei dynamisch in Tabelle einbinden, mit dem Unterschied, dass Sie die Regeln zum Einbinden des gewünschten Datenmodells beachten müssen. Notieren Sie im einleitenden <table>-Tag der Tabelle, in der Sie die Datensätze anzeigen, möglichst die Angabe datapagesize="1". Innerhalb der Tabellenzelle, in der Sie externe Daten auf diese Weise anzeigen wollen, können Sie dann notieren (angenommene Beispiele):
<input type="text" datafld="Vorname">
oder:
<input type="radio" name="Kunde" value="Bereits Kunde" datafld="BereitsKunde">
oder:
<input type="checkbox" name="Zahlweise" value="Mastercard" datafld="Zahlungsweise">
Datenfelder, die in Eingabefeldern vom Typ <input type="text"> angezeigt werden, können normale Texte sein, wie etwa ein Name. Radiobuttons und Checkboxen stellen dagegen andere Anforderungen. Ein Radiobutton wird bei der Anzeige dann aktiviert, wenn der aktuelle Feldinhalt in der Datenbank mit dem Wert übereinstimmt, der hinter der Angabe value= steht. Eine Checkbox wird dann markiert, wenn der betreffende Feldinhalt in der Datenbank 1, true oder einen beliebigen Inhalt mit mehr als einem Zeichen enthält. Wenn der Inhalt 0, false oder leer ist, wird die Checkbox nicht markiert.
<select>:Dabei gelten die gleichen Bedingungen wie bei Formularfeldern vom Typ input. Wenn der Wert eines aktuellen Eintrags in der Datenbank mit einem der Werte übereinstimmt, die in der value-Angabe bei einem option-Element innerhalb der Auswahlliste definiert sind, ist diese Auswahl selektiert. Interessant ist diese Ausgabemöglichkeit von externen Daten wie bei anderen Formularfeldern nur, wenn auch ein Zurückschreiben geänderter Daten möglich ist. Bei Auswahllisten etwa kann ein neuer ausgewählter Wert als neuer Feldinhalt gespeichert werden. Der MS Internet Explorer unterstützt dabei nur die einfache Auswahl, Mehrfachauswahl nicht.
<object>...</object>:Mit dem object-Element können Sie genau so arbeiten wie mit dem img-Element. Der Unterschied ist, dass Sie beim img-Element auf Grafiken beschränkt sind, während Sie mit dem object-Element beliebige Multimedia-Dateien oder ActiveX-Controls einbinden können. So können Sie, analog zu dem Beispiel beim img-Element, anstelle einer "Dia-Show" eine "Musik-Show" programmieren, die zum Beispiel aus MIDI-Dateien besteht.
In der externen Textdatei notieren Sie die gewünschten MIDI-Dateien, und bei der Einbindung in HTML können Sie dann anstelle der Datenanbindung mit img so etwas notieren wie:
<object datafld="Musik" width="0" height="0"></object>
(wobei "Musik" in der Textdatei mit den Daten als Feldüberschrift notiert sein muss).
<applet>...</applet>:Sie können das Feature der Datenanbindung nutzen, um einen Parameter eines Java-Applets aus einer externen Datenquelle zu versorgen. Beispiel:
<applet code="verzerr.class">
<param name="bild" datasrc="#aktuell" datafld="b_gates_bild">
</applet>
|
|
Datenmodell: Tabular Data Control (TDC)Dies ist das Datenmodell, wenn die externe Datenquelle eine einfache Textdatei ist, die in jeder Zeile einen Datensatz enthält, und bei der die einzelnen Datenfelder der Datensätze durch ein Begrenzerzeichen, zum Beispiel ein Komma, markiert sind. Geeignet ist dieses Datenmodell für kleinere Datenbestände mit bis zu ein paar tausend Datensätzen. Ein vollständiges Beispiel dafür finden Sie weiter oben im Abschnitt Beispiel: Datei dynamisch in Tabelle einbinden. Um eine solche Datenquelle an eine HTML-Datei anzubinden, müssen Sie folgendes Objekt in der HTML-Datei notieren:
<object id="Objektname" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83"> <param name= value=> <!-- usw. weitere Parameter --> </object> |
Um solche Daten einzubinden, verwenden Sie das im Internet Explorer 4.x eingebaute ActiveX-Control mit der ID 333C7BC4-460F-11D0-BC04-0080C7055A83. Innerhalb des <object>-Tags notieren Sie verschiedene Parameter, die für die Datenpräsentation wichtig sind. Folgende Parameter sind erlaubt:
|
|
|
Datenmodell: Remote Data Service (RDS)Über das Datenmodell Remote Data Service (RDS) können Sie die Anbindung einer HTML-Datei an Daten aus einer Datenbank realisieren. Geeignet ist dieses Modell für Datenbanken, die über die Datenbank-Schnittstellen OLE-DB oder ODBC (DBMS) verfügen. Das sind beispielsweise MS Access, Oracle oder SQL-Server wie msql. Über die entsprechenden Produkte und den Aufbau von Datenbanken damit informieren Sie sich bitte bei den betreffenden Herstellern. Um eine solche Datenanbindung im WWW zu realisieren, muss die Datenbankanwendung auf dem Server-Rechner installiert sein. Fragen Sie dazu gegebenenfalls Ihren Provider.
Um eine solche Datenquelle an eine HTML-Datei anzubinden, müssen Sie folgendes Objekt in der HTML-Datei notieren:
<object id="Objektname" classid="clsid:BD96C556-65A3-11D0-983A-00C04FC29E33"> <param name= value=> <!-- usw. weitere Parameter --> </object> |
Um solche Daten einzubinden, verwenden Sie das im Internet Explorer 4.x eingebaute ActiveX-Control mit der ID BD96C556-65A3-11D0-983A-00C04FC29E33. Innerhalb des <object>-Tags notieren Sie verschiedene Parameter, die für die Datenpräsentation wichtig sind. folgende Parameter sind möglich:
|
Solche Datenanbindungen sind nur sinnvoll, wenn Sie dem Anwender ein HTML-Formular zur Verfügung stellen, in dem er seine Angaben zum Durchsuchen der Datenbank machen kann. Mit Hilfe eines JavaScripts können Sie dann die Anwendereingaben in einen gültigen SQL-Befehl umwandeln, den Sie im Script dem Parameter SQL des object-Tags zuweisen. So können Sie beispielsweise mit der JavaScript-Anweisung:
document.all.Datenbank.SQL = Abfrage;
eine SQL-Abfrage zuordnen. In diesem Beispiel ist "Datenbank" der Name, der beim object-Tag als id= vergeben wird, und Abfrage ist eine Variable, die zuvor aus Formulareingaben des Anwenders einen SQL-Befehl kreiert hat. Bei solchen Datenbanken ist es auch möglich, SQL-Befehle zum Schreiben von geänderten Datensätzen in die Datenbank zurückzuschreiben. Voraussetzung ist, dass die Daten in der HTML-Datei in editierbaren HTML-Eingabefeldern (z.B. <input...>) angezeigt werden.
Ausführliche Informationen zum Einrichten und Realisieren einer Datenbank mit Scripts finden Sie auf den 
Entwicklerseiten von Microsoft. Suchen Sie dort nach Microsoft Internet Client SDK.
|
|
Datenmodell: JDBC DataSource AppletDas Datenmodell JDBC DataSource Applet greift ebenso wie das Datenmodell Datenmodell: Remote Data Service (RDS) auf Datenbanken zu, die über die Datenbank-Schnittstellen OLE-DB oder ODBC (DBMS) verfügen, zum Beispiel MS Access, Oracle oder SQL-Server wie msql. Der Unterschied zwischen dem JDBC DataSource Applet und dem Remote Data Service (RDS) ist, dass letzterer in der HTML-Datei als ActiveX-Control eingebunden wird, während das JDBC DataSource Applet ein Java-Applet ist. Damit will Microsoft seine Datenanbindungs-Technologie anderen Browsern zur Verfügung stellen, die kein ActiveX unterstützen, wohl aber Java. Das tun zwar Netscape und einige andere Browser, doch solange diese das Konzept der Datenanbindung mit Dynamischem HTML nicht unterstützen, macht das Ganze eigentlich wenig Sinn.
Das Java-Applet, das diese Form der Datenanbindung steuert, gehört nicht zum Lieferumfang des MS Internet Explorers. Auf den Web-Seiten von Microsoft können Sie das JDBC DataSource Applet downloaden. Suchen Sie dort auf den Seiten nach JDBC DataSource Applet.
Um eine solche Datenanbindung im WWW zu realisieren, muss die Datenbankanwendung auf dem Server-Rechner installiert sein. Fragen Sie dazu gegebenenfalls Ihren Provider.
Um eine solche Datenquelle an eine HTML-Datei anzubinden, müssen Sie das JDBC DataSource Java-Applet in der HTML-Datei notieren.
<applet code="JDC.class" name="DSA1" id="DSA1" width="0" height="0"> <param name= value=> <!-- usw. weitere Parameter --> </applet> |
Das Java-Applet wird wie in HTML üblich mit dem <applet>-Tag eingebunden. Mit dem Attribut code= geben Sie die ausführbare Java-Datei an. Dies ist die Datei JDC.class, die Sie mit dem Download des JDBC DataSource Java-Applets erhalten. Innerhalb des Applets notieren Sie verschiedene Parameter, die das Applet benötigt, um korrekt zu arbeiten. Weiterführende Infos zu den Parametern entnehmen Sie der Original-Dokumentation zu dem Applet. Folgende Parameter erwartet das Applet:
|
Beim Datenmodell JDBC DataSource Applet gelten die Anmerkungen zum Datenmodell Remote Data Service (RDS).
|
|
Datenmodell: XML Data SourceDas Datenmodell XML Data Source könnte in Zukunft sehr interessant werden, da es die vom W3-Konsortium standardisierte Sprache XML zur Definition von Daten benutzt. Bei diesem Datenmodell werden die Daten in einer XML-Datei gespeichert. Für Datensätze und Datenfelder können Sie innerhalb der XML-Datei eigene Tags und deren Verschachtelung erfinden. Ein denkbares Schema für eine Adressendatei wäre etwa:
<adresse>
<name>Meyer</name>
<vorname>Hubert</vorname>
<ort>Hamburg</ort>
<telefon>040-598487374</telefon>
</adresse>
Die Datei muss den Konventionen zum Aufbau einer XML-Datei entsprechen. Lesen Sie dazu das Kapitel über XML/DTDs.
Im Lieferumfang des MS Internet Explorers 4.x ist ein Java-Applet enthalten, das solche Tag-Strukturen aus XML-Dateien interpretiert und die Datenstruktur daraus ermittelt.
Um diese Art von Datenquelle an eine HTML-Datei anzubinden, müssen Sie das zugehörige Java-Applet in der HTML-Datei notieren.
<applet class=com.ms.xml.dso.xmldso.class id="xmldso" width="0" height="0" mayscript=true> <param name="url" value=> </applet> |
Das Java-Applet wird wie in HTML üblich mit dem <applet>-Tag eingebunden. Notieren Sie das einleitende <applet>-Tag genau so wie im obigen Schema. Der Grund für die etwas ungewöhnliche Angabe bei class= ist, dass dieses Java-Applet eine interne Ressource des MS Internet Explorers ist und keine separat vorliegende Datei.
Das Applet erwartet genau einen Parameter:
Mit <param name="url" value=> geben Sie bei value= den Dateinamen der XML-Datei an. Dabei sind natürlich auch relative Pfadangaben oder absolute Adressen erlaubt.
|
|
Datenmodell: MSHTML Data SourceWas Sie mit XML besonders elegant lösen können, geht etwas weniger elegant auch mit HTML selbst: hinter dem Datenmodell MSHTML Data Source verbirgt sich nichts anderes als eine Konvention, nach der die Daten in einer HTML-Datei gehalten werden - diese HTML-Datei dient dann als externe Quelle für eine andere HTML-Datei, in der die Daten angezeigt werden. Ein Schema für den Datensatz einer Adressendatei wäre etwa:
<div id="Adresse">
<span id="Name">Meyer</span><br>
<span id="Vorname">Hubert</span><br>
<span id="Ort">Hamburg</span><br>
<span id="Telefon">040-598487374</span><br>
</div>
Um diese Art von Datenquelle an eine HTML-Datei anzubinden, müssen Sie ein einfaches Objekt dafür notieren.
<object id="Daten" data="daten.htm" width="0" height="0"> </object> |
Innerhalb des <object>-Tags vergeben Sie mit id= wie üblich einen Namen, unter dem Sie das Objekt ansprechen und die Daten aus der anderen Datei in einer Tabelle dynamisch anzeigen können. Das Zugreifen auf die Datensätze funktioniert dabei genau so wie im Beispiel: Datei dynamisch in Tabelle einbinden. Bei datafld= geben Sie den Namen an, den Sie in der externen HTML-Datei bei id= für jedes gleiche Feld eines Datensatzes vergeben haben, z.B. "Vorname".
|
| |
 |
 Dynamische Filter (nur Microsoft)
|
 |
Das ältere DHTML-Modell von Netscape
|
| SELFHTML/Navigationshilfen Dynamisches HTML DHTML-Modelle |
© 2001 
selfhtml@teamone.de