DHTML Behaviors: 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.

Erweiterung der CSS-Datei

Bisher haben wir das Verhalten eines Elements wie folgt in durch eine CSS-Datei eingebunden:

.beispiel
{
behavior:url(t.htc);
}

Die CSS-Datei muss nur geringfügig geändert werden, damit diese für den Einsatz einer HTC-Datei im Mozilla Firefox bereit ist. Es muss eine neue Zeile mit dem Mozilla Firefox-propritären CSS-Attribut -moz-binding eingefügt werden, in der auf die Datei bindings.xml mit dem Anhang #t.htc verwiesen wird.

.beispiel
{
behavior:url(t.htc);
-moz-binding:url(bindings.xml#t.htc);
}

Dies waren auch schon die Änderungen in der CSS-Datei um die HTC-Datei einzubinden. Wir benötigen nun noch die Datei bindings.xml, auf die wir in der CSS-Datei verweisen.

Aufbau der bindings.xml

Die Datei bindings.xml muss eine wohlgeformte XML-Datei sein und sieht für unser Beispiel so aus:

<?xml version="1.0" encoding="ISO-8859-1"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="behavior" extends="moz-behaviors.xml#behavior"/>
<binding id="t.htc" extends="#behavior"/>
</bindings>

Die Zeile <binding id="behavior" extends="moz-behaviors.xml#behavior"/> bindet die Datei moz-behaviors.xml ein, die das Framework für die Verwendung von HTC-Dateien im Mozilla Firefox darstellt und sollte demnach nicht verändert werden.

Die Zeile <binding id="t.htc" extends="#behavior"/> bindet die Datei t.htc ein und muss für jede verwendete HTC-Datei mit dem dementsprechenden Dateinamen wiederholt werden.

Einbinden mehrerer Verhalten für ein Objekt

Es ist möglich einem Objekt das Verhalten aus mehreren HTC-Dateien gleichzeitig zuzuweisen. Dafür müssen die CSS-Datei und die bindings.xml angepasst werden. Dies funktioniert wie folgt:

beispiel
{
  /* für den IE */
  behavior: url(t.htc) url(x.htc);
  /* und für Mozilla */
  -moz-binding: url(bindings.xml#t.htc|x.htc);
}

In der bindings.xml wird der Aufruf der zubenutzenden HTC-Dateien genauso wie in der CSS-Datei durch Pipe getrennt als Parameter nach der # angegeben.

Hinweise

Die Datei moz-behaviors.xml muss im selben Verzeichnis liegen, wie die Datei bindings.xml. Sie können die Datei hier herunter laden.
Bitte beachtet, dass sich die Referenz this im Mozilla Firefox im Gegensatz zum Internet Explorer auf das window-Objekt bezieht. In beiden Browsern bezieht sich die "Information" ohne Angabe einer Referenz auf das besagte Objekt.

Referenzen müssen komplett ausgeschrieben werden. Das bedeutet: Wer bisher document.getElementById("beispiel") geschrieben hat muss jetzt window.document.getElementById("beispiel") schreiben.

Der Parameter lightweight in dem Tag <PUBLIC:COMPONENT> in der HTC-Datei sollte auf true stehen:

<PUBLIC:COMPONENT lightweight="true">

Du arbeitest in einer Agentur oder als Freelancer?
Dann wirf doch mal einen Blick auf unsere Software FeatValue.

Über uns

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