DevTrain - XML Behavior - DHTML zentralisieren

Mit der Browserversion IE 5.0 hat MS sich wieder was einfallen lassen. Eine Möglichkeit, DHTML zentralisieren zu können. DHTML zentralisieren? Warum oder wieso wird sich mancher jetzt die Frage stellen. Klare antwort meinerseits. Ich liebe es Skripte, Funktionen etc. an einem Fleck zu haben. Nicht bloss für mich wird es leichter meine Sites zu pflegen. Denken wir doch mal an unsere Stylesheet (CSS). Was wäre, wenn ich sie nicht in externen Datei ablegen würde, sondern zu jedem HTML Tag den Style jedes Mal neu eingebe? Ausserdem kann ich HTML Sites erzeugen ohne Scriptinhalte.

Nun, auf die gleiche Weise funktioniert das mit DHTML. Was bedeutet, dass Skript und Style für ein bestimmtes Objekt in jeweils einer Datei gespeichert wird. So hat man sozusagen eine Vorlage für bestimmte Objekte, die immer wieder benutzbar sind. Hört sich fast so wie eine Kopmonente an. Sie werden staunen. Diese Datei mit Skript und Stylesheet bekommt die Endung .htc, das für HTML Komponente steht. Aha eine HTML Komponente. Naja... aber der sinngemäß ist das richtig. Wobei eine .htc sich auf ein HTML Element beziehen kann, sowie aber auch ein eigenes Objekt darstellen kann.
Die Verwendungen sind dafür vielfältig. Sei es dass man zentral Listen, oder Links behandelt oder sich Ticker etc. zusemmenbaut.

So wie funktioniert tatsächlich und was hat das mit XML zu tun?

Zunächst mal ein Beispiel einer htc-Datei. Ich nenn mal maus.htc.

<component>
<attach for="element" event="onmouseover"
handler="hig_lite" />
<attach for="element" event="onmouseout"
handler="low_lite" />
<script type="text/javascript">
    function hig_lite()
    {
    element.style.color=255
    }
    function low_lite()
    {
    element.style.color=0
    }
</script>
</component>

Das Gerüst der .htc Datei besteht aus <component>, dem root-Element und einem <script> Element, was aber sozusagen auch ein "must" ist. Also ganz XML-like. Allerdings werden wir in der htc unser Script nicht in eine CDATA Section einbauen.

Mit dem Element <attach> ist es möglich an ein Ereignis eine Funktion zu binden. Also hier onmouseover="mausdrauf()" oder im ganzen:

Das Element <attach> bedarf aber noch einiger Erklärungen. Das Attribut event beschreibt das auslösende Ereignis. Über das Attribut handler wird letztendlich die Funktion ausgelöst. Optional gibt es noch das Attribute for, das die Quelle des Ereignisses identifiziert wie "element", "windows" oder "document". Möglich wäre auch noch das Attribut id (eindeutiges identifieren) möglich.

So wie bindet man die xy.htc ein?

Entweder per CSS oder Script. Hier zwei Beipiele, die für sich selber sprechen.

Einbinden per CSS

element {behavior: url(datei)} bspw. h1 {behavior: url(maus.htc)}

Einbinden per Script

document.all.myobject.style.behavior='meinedatei.htc';

Der Ergänzung halber sei noch darauf hingewiesen, dass man die behavior wieder entfernen kann.

document.all.myobject.removeBehavior('#default#savefavorite');
document.all.Objekt2.style.behavior = '';

Hier noch der HTML Code zum Testen für obiges HTC.

<html> <head> <style> h1 { behavior: url(maus.htc) } </style> </head> <body> <h1>Maus mich mal....</h1> </body> </html>

Das ist aber bei weitem noch nicht alles, was man mit HTCs machen kann. Es ist ebenso möglich eigene Objekte zu erstellen mit Eigenschaften und Methoden, wie einen Newsletter etwa. Dies stellt letztendlich tatsächlich eine Komponente dar. Aber dies wird auf Grund des Umfangs erst im nächsten Artikel etwas ausführlicher beschrieben.

Also viel Spass beim Testen.