DHTML Behaviors: Einführung
von Jan Winkler
Eine der zahlreichen neuen von Microsoft geschaffenen Technologienen ist die der DHTML Behaviors. Damit soll es möglich werden das Verhalten (behavior) von DHTML Komponenten allgemein und zentral fest zu legen. Wie das funktioniert, erfahren Sie hier.
Seit dem Internet Explorer der Version 5.0 unterstützt dieser - neben zahlreichen weiteren - ein neues Feature das sich DHTML Behaviors nennt. DHTML Behaviors definieren Objekte bzw. vielmehr das Verhalten dieser und können diese Definitionen auf Websiten anwenden. Ihr nutzen besteht in mehreren Dingen: Sie bieten externe Funktionalität und sind dadurch wiederverwendbar - d.h. ohne Probleme auf mehrere Dokumente anwendbar. Ausserdem erfolgt mit ihnen eine Trennung von Script und Inhalt, was das Webdesign einfacher und übersichtlicher gestaltet.
Die Funktionsweise ist recht einfach erklärt: Man definiert bestimmte Eigenschaften bzw. ein bestimmtes Verhalten für ein Objekt mit Hilfe eines externen Scriptes oder 'Verhaltens-Vorlagen' (default-behaviors). Das Objekt nimmt nun innerhalb einer Website dieses Verhalten an und reagiert somit auf entsprechende Ereignisse nach der vorgeschriebenen Form.
Das Ganze geschieht dabei über eine weitere Erneuerung aus dem Hause Microsoft die sich HTC- oder HTMLComponent (HTML Komponente) - nennt. Diese Komonenten sind einzelne, XML-artig aufgebaute Dateien in denen unter anderem das betreffende Objekt, dessen Eigenschaften und Methoden sowie die Ereignisse beschrieben werden. Des Weiteren befindet sich darin auch - das warum es eigentlich geht - der Script-Teil mit den jeweiligen Funktionen die das Verhalten des Objekte beschreiben. Diese Dateien werden mit der Endung (Suffix) .htc gespeichert und in das jeweilige Dokument eingebunden.
Das Einbinden der HTC-Dateien kann auf mehrere Wege geschehen: über normale CSS-Definitionen oder über die Definition per ( Java )Script.
Das Einbinden einer HTC-Datei per CSS Definition erfolgt über die behavior-Eigenschaft (ebenfalls von Microsoft erschaffen). Als Wert wird entweder die Code-URL der Vorlage (Default-Behavior) oder die URL der Datei übergeben. Beispiel:
P.behave1 { behavior: url('#default#savefavorite'); }
P.behave2 { behavior: url('meineDatei.htc'); }
Mehrere Dateien bzw. Vorlagen können durch Leerzeichen getrennt hintereinander definiert werden.
Das Einbinden einer HTC-Datei per Script kann auf zwei unterschiedliche Arten erfolgen. Zum Einen kann die addBehavior()-Methode verwendet werden. Zum Anderen kann dazu die Definition über die Style-Angabe des Objektes (style.behavior) erfolgen. Diese Angaben können ebenso durch removeBehavior() bzw. das neu-Definieren der Style-Anagebe entfernt weren. Beispiel:
document.all.Objekt1.addBehavior('#default#savefavorite');
document.all.Objekt2.style.behavior = 'meineDatei.htc';
document.all.Objekt1.removeBehavior('#default#savefavorite');
document.all.Objekt2.style.behavior = '';
Das Objekt Modell von HTC's ist in etwa vergleichbar mit dem von HTML oder XML . Allerdings bestehen einige kleine Unterschiede, die es HTC's erlauben besser mit dem betreffenden Inhalt klar zu kommen. Im Verlauf des Workshops werden wir näher darauf eingehen Eigenschaften, Methoden und Ereignisse zu definieren. Hier sei zunächst die Verwendung kurz beschrieben:
Innerhalb von HTC-Dateien können die Eigenschaften des betreffenden Objektes weiter verwendet und geändert werden. Dabei ist es ebenso möglich, dass Eigenschaften die die HTC-Datei betreffen direkt innerhalb des Dokumentes, die diese Datei verwendet, definiert werden. Als Beispiel können dazu z.B. die Farben für einen Farbwechsel oder die URL's für einen Bilderwechsel definiert werden. Beispiel:
<style>
.HTC1 { behavior:url('bildwechsel.htc');}
.HTC2 { behavior:url('ausklappmenu.htc');}
</style>
<img class="HTC1" src="..." vorher="bild1.gif" nachher="bild2.gif">
<!-- benutzt vorher- und nachher-Werte zum Bildertausch -->
<li class="HTC2" menu="#kapitel1" >Kapitel 1</li>
<ul id="kapitel1"> ... </ul>
<!-- benutzt menu-Wert als das ein- bzw. auszuklappende Objekt -->
Ebenso wie Eigenschaften können auch Methoden eine Rückbeziehung aufbauen. D.h. die in einer HTC-Datei definierten Funktionen können innerhalb des Dokumentes verwendet werden. So ist es möglich das Verhalten des Objektes auch vom Dokument selbst aus zu leiten und zu steuern. Beispiel:
<img id="meinbild" onclick="meinbild.HTCMethode();">
<!-- benutzt innerhalb der HTC definierte Methode 'HTCMethode()' -->
Auch die ausgelösten Ereignisse können innerhalb des Dokumentes - ganz normal - behandelt werden. Ein in einer HTC-Datei definiertes Ereignis wird dazu ebenso wie 'normale' Ereignisse anfgenommen. Beispiel:
<p onMeinEreignis="machwas();" > ... </p>
<!-- reagiert auf das HTC-Ereignis onMeinEreignis -->
