Hinweis zur Verwendung

Die Klasse app ist nicht zur direkten Instanzierung gedacht, bringt auch nicht viel. Sinnvoller ist es eine Klasse zu schreiben die sich von app vererbt. Alle Methoden der Klasse app stehen dann in dieser Klasse zu Verfügung.

Beispiel einer Vererbung von app

Initialisiert das Objekt, weist ihm das Übergeben DOM-Objekt als Container zu. in dieses wird geschrieben z.B. importTemplate aufgerufen wird. Ist container ein String wird angenommen dass es sich um die id des gewünchten DOM-Objektes handelt.

var myApp = new app('target');

Sucht das DOM-Objekt mit der übergebenen id innerhalb sich selbst. Beachtet dabei dass jede id innerhalb sich selbst mit einem Prefix versehen wurde um die Eindeutigkeit der ids zu wahren.

// Diese beiden Zeilen führen zum gleichen Ziel.
var element = myApp.getObj('unter_element');
var element = document.getElementById(myApp.prefix + 'unter_element');
// Ausserdem gilt: element == myApp.getObj(element)

Setzt das Objekt in ein neues DOM-Element, so können die Objekte auf einer Webseite „herumgeschoben“ werden.

var element = myApp.setContainer(document.getElementById('target2'));

Liest das angegebene Template-File und fügt es in den Container (also das DOM-Element) des Objektes ein. Der vorherige Inhalt wird dabei ersetzt. Eventuelle id-Tags im Template-File werden mit dem Prefix versehen.

targetObj kann ein DOM-Objekt sein oder die id eines DOM-Objektes (id ohne Prefix)

Fügt den String txt in den Container (also das DOM-Element) des Objektes ein. Der vorherige Inhalt wird dabei ersetzt. Eventuelle id-Tags im Template-File werden mit dem Prefix versehen.

targetObj kann ein DOM-Objekt sein oder die id eines DOM-Objektes (id ohne Prefix)

Fügt den String txt in den Container (also das DOM-Element) des Objektes ein. Der vorherige Inhalt wird dabei ersetzt. Im Unterschied zu importTemplateString werden keine ids mit Prefixen vesehen. Diese Funktion wird v.a. intern verwendet um den Inhalt zu setzten wenn z.B. bei importTemplateString die Ids mit den Prefixen versehen wurden.

targetObj kann ein DOM-Objekt sein oder die id eines DOM-Objektes (id ohne Prefix)

Better use importTemplateString wherever it is possible!!

Alle Objekte die von app abgeleitet sind können aufeinander reagierten mit Hilfe des Listener-Konteptes. Siehe dazu auch Das Beobachter-Entwurfsmuster.

App-Objekte können als Beobachter (Observer) und als Subjekt(Observable) fungieren.

• Beobachter melden sich via addLEvent(beobachter, event_typ, funktion) an einem zu Überwachenden Objekt an
• Beobachtete Objekte feuern via notify(event) die Ereignisse.
• Stimmt event['type'] bei einem Ereignis mit event_typ eines angemeldeten Beobachters überein so wird die übergebene Methode des beobachters aufgerufen.

Ein Beobachter kann sich so bei einem zu beobachtenden Subjekt anmelden.

• beobachter, ein Objekt dessen Methode mit Namen funktion aufgerufen wird wenn ein passendes Ereignis auftritt. Notmalerweise ist das immer das this-Objekt.
• event_typ, String, der Typ des Events der den Beobachter interessiert
• funktion, String, name der aufzurufenden Funktion falls das gewünschte Ereignis eintritt.

Beispiel: Annahme: input sein ein Eingabeobjekt (z.B. Klasse input), es soll beobachtet werden ob sich der Inhalt des Eingabeobjektes ändert.

observer. prototype = new app();
 
function observer() {  
    ....
    function initObserver() {
        ....
        input.addLEvent(this, 'change', 'inputChanged');
    }
 
    function inputChanged(src, event) {
        // regiere auf die Änderung      
    }
}

Wenn immer das beobachtete input-Objekt die Methode notify(event) aufruft und event['type'] == „change“ ist wird die Methode inputChanged aufgerufen.

• src ist dabei eine Referenz auf das input-Objekt dass den Event ausgelöst hat
• event ist das event-Objekt dass von dem input Objekt an notify() übergeben wurde.

Enfernt den beobachter wieder, wenn keine weiteren Informationen über das beobachtete Subjekt erwünscht sind (wird in der Praxis sehr selten benötigt)

Eine Subklasse von app kann in bestimmten Situationen notify(event) aufrufen um anderen Objekten die Möglichkeit geben zu reagieren.

event soll eine Hashtabelle sein, mindestens das item type sollte dabei gesetzt werden. Es dient dazu um die verschiedenen events an die verschiedenen Listeners zu verteilen. Beispiel

....
// Hier würde z.B. ein bearbeiteter Datensatz gespeichert
...
var event = {'type':'record_saved', 'record_id':this.recId};
this.notify(event);

Leitet einen abgefangenen Event gleich weiter (an diejenigen die dieses Objekt beobachten)

function throwEvent(src, event) {
	this.notify(event);
}

Die Klasse app bietet auch Möglichkeiten um von DOM-Elementen geworfene Events abzufangen. Dies ist die typische Aufgabe von Steuerelementen die von app vererbt sind. Diese fangen typischerweise Events der tatsächlichen DOM-Elemnte ab und werfen dann diese Events per notify weiter, so dass Steuerelemnte-Verwender diese bequem mit addLEvent überwachen können.

Funktioniert ähnlich wie addLEvent, jedoch:

• element ist das DOM-Element von dem Sie Events abfangen möchten (oder die Id dieses Elements)
• event_typ ist der Typ des interessierenden Events intessierenden (also click, change, keypress, etc.)
• funktion der Name der Funktion die aufgerufen werden soll wenn das passende Ereignis eintritt.

observer.prototype = new app();
 
function observer(container) {  
       ...
    function initObserver(container) {
        this.initApp(container);

        this.importTemplateString("<button id='btn'>Testbutton</button>", this.container);
        this.addCEvent('btn', click', 'buttonClicked');
    }
 
    function buttonClicked(src, event) {
        // reagiere auf den Click
    }
}

Wenn immer ein Klick auf den Button stattfindet wird die Methode buttonClicked aufgerufen.

• src ist dabei eine Referenz auf das DOM-Objekt dass den Event ausgelöst hat
• event ist das event-Objekt