Javascript ist Toll!

Formobserver

Mein neustes Werk, ist ein FormObserver. Also ein Formularbeobachter. Das Ziel dabei ist es, die Elemente eines Formulares zu beobachten und Änderungen signalisieren.

In letzter Zeit war ich gezwungen, einige Artikel über Java bzw. Java-Frameworks wie z.b. struts, zu lesen. Dabei hakte es bei mir mit dem Verständnis, des eventorientierten Ansatz von Java. Nachdem in einem Forum eine Frage zum prüfen von Formulareingaben mit JS gestellt wurde, kam mir die Idee einen Formular Event Observer zu bauen.

Grob nach dem Schema von Java: Observable.

Vorspiel

Zunächst müssen die Formulare, um das Formular beobachtbar zu machen, mit den Methoden des Observable Objektes ausgestattet werden. Dies geschieht über die Funktionen formObserver(form) und bzw. formObserverAll(). Diese können entweder im onload der Seite aufgerufen werden, alternativ kann formObserver() auch im HTML Quelltext nach dem schliessendem Form-Tag aufgerufen werden.

Die Beobachtung findet dann mit einem zweiten selbstdefiniertem Objekt statt. Dieser Beobachter muss die Funktion bzw. Methode update() besitzen. Diese wird aufgerufen, wenn sich im Formular etwas ändert.

Observerable-Objekt

Das Formular bzw. die Formulare und die Elemente erhalten die folgende Funktionen:

.addObserver( object )

Ein Observer/Beobachter dem Formular hinzufügen

.setChanged( bool )

Die Methode ändert den Status der Element oder Formular.

.getChanged()

Die Methode gibt zurück wie oft das Element oder das Formular sich geändert hat.

.clearChanged()

Die Methode setzt die Anzahl der Änderungen wieder auf Null.

.getValue()

Ermitteln des Wertes eines Elementes.

.setValue(wert)

Einen Wert eines Elementes ändern.

Das Observer Objekt

Der Beobachter muss die Funktion update() besitzen, die mit zwei Parameter aufgerufen wird:

• Das Objekt das zuletzt geändert wurde
• Ein Event Objekt mit den Eigenschaften:
  .X/.Y .obj .type und zusätzlich die Funktionen top()/left().

Beispiel

Das nachfolgende Skript zeigt wie das Formular beobachtbar gemacht wird und die Werte dann Ausgegeben werden können.

// Das Beobachter Objekt
function watchForm()
{
    // Beobachtungsfunktion
    this.update = function(element, event)
    {
          var out = element.form.debug;
          out.value += element.name + '[' + element.type + ']' 
          + ' Wert: ' +  element.getValue() 
          +  ' Position: ' + event.top() + '/' + event.left()
          + 'n';
    };
}
 
var w = new watchForm();
 
// Das Formular beobachtbar machen (alternativ geht auch formObserverAll() ) 
formObserver( document.forms[0] );
 
// Den Beobachter registrieren
document.forms[0].addObserver( w );

Download

formobserver.js