Javascript ist Toll!

20. December 2006 - 17:22

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:

Beispiel


Debugausgabe:



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

ähnliche Artikel

Comments (2)
427 mal gelesen.

2 Kommentare

Leave a comment »

Seiten:

1. Comment von: fester_franz
28. December 2006: 11:52

Hallo Struppi,

sehr schön, aber die Checkbox wirk IMO nicht korrekt überwacht, bzw. Ihr aktueller wert ist immer on (die get_value() gibt ja auch nur den value zurück). das ist mindestens etwas überraschend, evtl. sollte dort ein boolean zurückkommen, so a la:

return (this.type==’checkbox’) ? this.checked : this.value;

Grüße,
fester_franz

2. Comment von: Struppi
9. January 2007: 12:48

Im Prinzip richtig, aber letztlich bist du (bzw. der Observer) dafür verantwortlich was geschehen soll, d.h. die update() Funktion muss halt entsprechend das Element Überprüfen.

D.h. man wird, wenn man eine checkbox beobachtet eher die checked Eigenschaft prüfen und nicht den Wert.

Leave a comment

Name (required)
Mail (wird nicht angezeigt) (required)
Website

Folgende HTML Tags sind erlaubt: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>



Powered by WordPress Stop Spam Harvesters, Join Project Honey Pot kostenloser Counter Browser-Statistiken
rats-wonderful
rats-wonderful
rats-wonderful
rats-wonderful