Tim Tepaße: Ein Ad-Hoc Tutorial in Tabular Data Control Data Modell des IE

Beitrag lesen

Hallo,

zwei Vorbemerkungen:

Zum einen ist Dir hoffentlich bewußt, dass diese Technik (Tabular Data Control) nur in den Internet Explorern 4 bis 6 funktioniert. Sie ist in keinster Weise ein Webstandard, andere Browser haben sie deswegen auch nicht implementiert. Im tatsächlichen Wilden Web würde ich sie deswegen auf keinen Fall einsetzen. Wenn es dagegen nur um einen Einsatz auf dem eigenen Computer geht, dann sehe ich nichts, was dagegen spricht, ausser vielleicht der Nutzung des Internet Explorers als Browser. Ich will Dir damit raten, diese Technik auf keinen Fall im Web einzusetzen, Deine Seite funktioniert dann einfach nicht mehr in anderen Browsern. Im Jahr 2000 konnte man sich das noch leisten, inszwischen ist es nur noch peinlich. Und ja, das gilt immer, auch wenn diese Technik wohl recht praktisch ist. Inzwischen gibt es Methoden, das mit etwas mehr Code auch in Javascript zu lösen.

Zum anderen habe ich mich damit das letzte Mal im Jahr '99 beschäftigt, zudem habe ich als Mac-Nutzer keinen IE zum Testen. Das heisst, es kann gut sein, dass einiges, was ich Dir rate, auch nur auf genauem Lesen SELFHTMLs und der Spezifikationen basiert, nicht auf getesteten Ergebnissen. Ich hoffe aber, Du nimmst es Dir trotzdem zum Herzen.

die HTML-Datei sieht so aus:

Zuallererst räumen wir mal etwas Deinen HTML-Quellcode auf, Du hast da einige kritische Fehler und diverse Unschönheiten drin. Auch wenn es bei Microsofts nicht standardisierten Erweiterungen schon fast egal ist, ob man HTML Fehler begeht, sollte man sie trotzdem – schon aus Gründen einen späteren Wartbarkeit – nicht begehen.

Anhand Deines geposteten Quellcodes schließe ich, dass Deine HTML Datei derzeit wohl folgende Baumstruktur hat:

html
  head
    ...
  body
    ...
    table
      form         <- Fehler 1!
        ...
        body       <- Fehler 2!
        object     <- Eventuelle Fehlerquelle
          ...
        tr
          td
            table
              ...

Und so weiter.

Fehler 1: Das Element table darf kein form-Element beinhalten, siehe die Elementreferenz zu table.

Fehler 2: Das Element body darf nur als Kindelement des Elementes html auftauchen, sonst nirgendwo im Dokument, siehe Elementreferenz zu body

Eventuelle Fehlerquelle: Das object-Element enthält nur die Daten, soll aber selbst nicht dargestellt werden. Eventuell wird es aber doch nicht dargestellt. Da Du die Daten eh in der Zieltabelle referenzierst, können die wohl irgendwo im Dokument stehen. Am sinnigsten wäre es wohl, das Element in den head zu packen, dort wird nix vom Browser gerendert, die Daten sind aber trotzdem noch da.

Ich würde also den Quellcode erstmal grob so umstellen:

html
  head
    ...
    object
  body
    table
    ...

Du merkst, ich habe einiges an unnützen Krempel weggelassen. Wenn man so etwas entwickelt, ist es oft sinnvoll, erst mal nur mit nur dem nötigsten Quellcode zu starten, zum einen behält man so die Übersicht, zum anderen schließt man so einige Fehlerquellen aus. Ausserdem ist ein Großteil des von Dir geposteten Quellcodes unnötig, da der sich nur auf die Gestaltung bezieht, wie z.B. die umgebende Layouttabelle oder die font-Formatierung, die man eh besser mit CSS löst.

Das object-Element würde ich so wie von Dir erstellt beibehalten ...

<object id="data" classid="clsid:333C7BC4-460F-11D0-BC04-0080C7055A83">  
  <param name="DataURL" value="vari.txt">  
  <param name="UseHeader" value="true">  
  <param name="FieldDelim" value="|">  
</object>

... ich habe nur die ID zu etwas geändert, das meinem gedanklichen Modell besser passt. Eventuell willst Du in Zukunft mehr Parameter der Tabular Data Control benutzen.

Nun zur Tabelle, in der die Daten angezeigt werden sollen. Du hast die dataIrgendwas-Attribute direkt an die umgebende Layouttabelle gepackt. ich würde die direkt an die Ausgabe-Tabelle packen. Weswegen ich hier auch nur eine Tabelle zeige, Du kannst ja später zur Layouttabelle zurück greifen, wenn Du mit CSS Layouts nicht zurecht kommst.

Du willst wohl letztendlich eine Darstellung haben, die ungefähr so strukturiert ist:

Benutzer   Passwort   Drucker

Amélie     nino       collignon

Die simpelste Form, das als HTML Tabelle zu basteln sieht so aus:

<table>  
  <tr>  
    <th>Benutzer</th><th>Passwort</th><th>Drucker</th>  
  </tr>  
  <tr>  
    <td>Amélie</td><td>nino</td><td>collignon</td>  
  </tr>  
</table>

Beachte nebenbei, dass ich für die Tabellenüberschriften die strukturell korrekteren th-Elemente genommen habe, anstatt mit font und b rumzupfuschen. Das erleichtert später eine Umformatierung mit CSS.

Nach all der Vorarbeit kommen wir jetzt zu dem wirklich wichtigen, der Anbindung der Tabelle an die Daten. Zuerst wird der Tabelle die Datenquelle gesagt, dies geschieht über das Attribut datasrc. Dort wird eine Referenz auf das oben eingebundene object-Element angegeben und zwar referenzieren wir dessen ID.

<table datasrc="#data">

Dann werden die Platzhalter von gerade („Amélie“) durch Datenfelder ersetzt. Aus

<td>Amélie</td>

wird dann

<td><span datafld="varUser</span></td>

Dummerweise muss man das beknackte span-Element benutzen, weil die Microsoftler wohl irgendwelche Drogen genommen haben und das Attribut datafld nicht gleich für alle sinnigen HTML-Elemente erlauben.

Dann kommt die Information, wieviele Datensätze wir gleichzeitig in der Tabelle anzeigen wollen, dazu dient das Attribut datapagesize. Dazu gleich mehr.

<table datasrc="#data" datapagesize="1">

Die „1“ sagt aus, wir wollen nur einen Datensatz gleichzeitig anzeigen.

So, nun will ich, dass er mir die 2.Textzeile(User|Password|Printer) anzeigt, dazu gebe ich bei datapagesize="2".

Denn da hast Du dieses Attribut falsch verstanden. Ich versuche es mal zu erklären. Du hast eine Menge von Datensätzen, ein Datensatz entspricht hier einer Zeile:

eins   | zwei | drei
vier   | fünf | sechs
sieben | acht | neun
zehn   | elf  | zwölf

Im Normalfall werden dann alle Datensätze angezeigt. Wenn man jedoch das Attribut datapagesize benutzt wird nur eine Auswahl („Page“) aus dieser Menge von Datensätzen angezeigt. Bei datapagesize="1" wird nur ein Datensatz angezeigt:

eins   | zwei | drei    <-
vier   | fünf | sechs
sieben | acht | neun
zehn   | elf  | zwölf

Bei datapagesize="2" werden dann zwei Datensätze angezeigt:

eins   | zwei | drei    <-
vier   | fünf | sechs   <-
sieben | acht | neun
zehn   | elf  | zwölf

Diese Auswahl an Datensätzen nennt sich hier „Page“. Um zwischen Pages zu wechseln, kannst Du nicht mit HTML operieren, dafür brauchst Du etwas dynamischeres, nämlich Javascript bzw. den MS-Dialekt JScript.

Dazu mehr im nächsten Posting, wenn ich richtig vermute, dass es für die Forumssoftware zu lang geworden ist.