info@a-coding-project.de

DHTML Behaviors – Tutorial, Tipps & Tricks

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.

Entstehung und Nutzen

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. Außerdem erfolgt mit ihnen eine Trennung von Script und Inhalt, was das Webdesign einfacher und übersichtlicher gestaltet.

Funktionsweise

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.

Einbinden

Das Einbinden der HTC-Dateien kann auf mehrere Wege geschehen: über normale CSS-Definitionen oder über die Definition per JavaScript.

Einbinden per CSS

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.

Einbinden per Script

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 = '';

Objekt Modell

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:

Eigenschaften

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 -->

Methoden

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()' -->

Ereignisse

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 -->

Default-Behaviors

Neben der Möglichkeit das Verhalten der Objekte selbst zu definieren, stellt der Internet Explorer eigene Verhaltens-Vorlagen, sogenannte Default-Behaviors, zur Verfügung. Diese werden durch die URL (wenn man es so nennen möchte) #default#name definiert, wobei name durch den Namen der Vorlage ersetzt wird. Hier eine Auswahl:

HTC-Komponenten

Eine HTC-Datei besteht im Grunde immer aus den gleichen Dingen. Ähnlich wie HTML besitzt sie ein root-Element (Elternelement), das sich hier public:component nennt. Innerhalb dieses Elementes werden alle anderen Elemente notiert. Außerdem wird auf jeden Fall ein script-Bereich benötigt in dem die verwendeten Funktionen Platz finden werden. Beispiel für eine minimale HTC-Datei:

HTC-Komponenten für den Mozilla Firefox

Mit der Erfindung von HTC-Dateien hat Microsoft für Entwickler einen großen Wurf gemacht. Allen Objekten, die der selben CSS-Klasse angehörten konnte plötzlich ein (JavaScript)-Verhalten zugeordnet werden. “Eine gute Idee – nur leider nicht praxistauglich”, dachte viele. Dean Edwards auch. Doch er bedauerte nicht nur die fehlende Implementierung in anderen Browsern, sondern handelte sogleich und schrieb ein kleines Framework, durch das es jetzt auch möglich wurde HTC-Dateien im Mozilla Firefox zu verwenden.

Beispiele

Hier einige praktische Beispiele für DHTML-Behaviors:

Über uns

Stefan Wienströer

Wir entwickeln Webanwendungen mit viel Leidenschaft. Unser Wissen geben wir dabei gerne weiter. Mehr über a coding project

Auch interessant