Tim Adler

Wir alle wissen es und fühlen uns sogar ein wenig schuldig: Mit der zunehmenden Akzeptanz von XHTML/CSS sterben Tabellen und <font>-Tags. Um uns jedes Mal daran zu erinnern, dass wir früher immer ein bisschen böse waren, wenn wir unsere Seite mit blank-GIFs und cellpadding zusammengebaut haben.

Es gibt da aber noch ein kleines Völkchen, denen man mittlerweile abschwören sollte. EventHandler im Markup gehören aus der Stadt getrieben...

Nun das Prinzip, ist eigentlich äußerst simpel und der Anwendungsfall noch viel simpler. Man hat ein Element auf seiner Seite, welches man mit einem bestimmten Verhalten "behaviour" ausstatten möchte. Beispielsweise eine Sucheingabefeld, welches vorher das Wort "Ihr Suchbegriff" enthält und beim klick durch den User leer wird, so dass er seinen Begriff eingeben kann.

Dafür verwendet man im Normalfall JavaScript und versieht den das entsprechende Input-Textfeld mit einem onFocus und onBlur Eventhandler. Unschön allerdings, wenn man dafür so etwas schreibt:

<input type="text" value="Ihr Suchbegriff" 
onblur="if(this.value=='') this.value = this.defaultValue;" 
onfocus="if(this.value==this.defaultValue) this.value='';" />

Behaviour-StyleSheet

Viel schöner wäre es da, wenn man vielleicht einfach eine Verhalten mit geben könnte über ein Attribut am <input>-Element. Im Optimalfall ist diese Verhalten gleich an ein bestimmtes Aussehen gekoppelt, bzw. umgekehrt. Der gewiefte Leser merkt - genau, wir benutzen einfach das class-Attribut. Nach dem Eingriff sieht unser <input>-Element nun so aus:

<input type="text" class="clear" value="Ihr Suchbegriff" />
 

Dieser Klassenname, der genausogut für das Aussehen des Inputs verantwortlich sein kann, dient uns jetzt als Injektionspunkt für das entsprechende Verhalten. Es braucht als nur noch ein "StyleSheet" das dieses Verhalten injiziert.

Damit diese Behaviour-StyleSheet auch funktionieren kann, wie ein StyleSheet benutze ich moo.dom aus dem Hause mad4milk welches eine sehr einfache Möglichkeit bietet um auf das DOM zuzugreifen bietet.

Man legt sich nun also eine JavaScript-Datei an, welche man wie ein StyleSheet zusammen mit der Prototype-light-Variante und dem moo.dom-Script in jedes HTML-Dokument einbindet. Diese sieht in etwa wir folgt aus:

function init()
{
    $S('input.clear').action({
        onfocus: function () {
        if(this.value==this.defaultValue)
            this.value='';
            return false;},

        onblur: function () {
        if(this.value=='')
            this.value = this.defaultValue;
            return false;}
    });
}
window.onload = init;

So wird ab da jedes Input-Element, welchem man die Klasse "clear" verpasst die oben beschriebene Verhaltensweisen eines Suchfeldes haben. Natürlich ist auch jede andere Art von Verhalten denkbar. Folgende benutze ich noch sehr gerne:

//Fenster schließen
$S('a.close').action ({
    onclick: function () { self.close(); return false;},
    onmouseover: function () {window.status = ''}
});

// PopUp-Link
$S('a.popup').action ({
    onclick: function () {
    window.open(this.href, '' , 'width='+this.width
    +',height='+this.height+'toolbar=0');
    return false;}
});

//Gesicherte Mail-Adressen
$S('a.mail').action ({
   initialize: function () {
   this.innerHTML = this.innerHTML.replace(/%%%/,'@');
   this.href = 'mailto:'+this.innerHTML.replace(/%%%/,'@');
   }
});

Dem ganzen Prinzip gebe ich gerne den Namen "Behaviour Injection" angelehnt an die Terminologie, die das Spring-Framework für Java eingeführt hat. Sie nennen ihr Vorgehen "Dependency Injetion". Man markiert einfach nur die Stelle, wo etwas eingefügt werden soll. Erst danach legt man fest, was genau das ist. Das Verhalten bzw. die Abhängigkeit wird injiziert. Dabei ist es sogar denkbar, das man immer etwas anderes injiziert. Völlig frei und sehr einfach zu pflegen.