Note about the usage

The class app is not intended to instantiate directly, which brings anyway very little benefit. The intention is to write a subclass of app. In this subclass you will have access to all methods defined in app.

Example of a subclass of app

Initializes the object, sets the passed container as “its” container. This will be the DOM-Object where the module or control is shown in. If container is a string it will be tried to find a DOM-Object with this id.

var myApp = new app('target');

Looks for the DOM-Object with the given id into itself. “into itself” is realized by replacing all ids within the container by a prefix plus the actual id, actually the prefix is just a static counter that will be incremented always an new app-Object is instantiated. This is done to ensure unique ids on the whole website.

// These two lines lead to the same result, but the usage of the upper one is strongly recommended!
// If private properties were available in JavaScript, "prefix" would be private.
var element = myApp.getObj('sub_element');
var element = document.getElementById(myApp.prefix + 'sub_element');

Sets a new DOM-Objects as container for this module / control. This is used to “move around” controls on the website. (e.g. the edit_table uses this to move the table-cell-editors to the actually editing cell)

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

reads the file found at the given url and inserts the content into this module's container. Any existing content of the container will be overwritten. Id-Attributes will be prefixed by the prefix of this module to ensure unique ids.

targetObj can be a DOM-Object or the id of DOM-Object (the id without the Prefix)

Inserts the string txt into the targetObj (a DOM-Element or the id of a DOM-Element within the modules container). Any existing content will be replaced. Id-Attributes in the string txt will be prefixed.

Inserts the string txt into the targetObj (a DOM-element or an id of a DOM-Element within the modules container). Any existing content will be replaced. Different to importTemplateString no prefixws will be set to Id-Attributed in the string txt. This function is internally called by importTemplateString and importTemplate after all id-Attributes are prefixed. You can use this function if:

• You do the prefixing of the id_attributs on yourself
• You know that the content-String does not contain any id-Attributes (i.e. its a plain-text value)

Better use importTemplateString wherever it is possible!!

All objects inheriting from app may react on each other using the listener-concept The Objserver Pattern.

App-Objects may take the role of an observer and/or observable.

• Observers register themselves via the addLEvent(observer, event_type, function) at the interesting module.
• Observed Objects fire via notify(event) the Events.
• If the event['type'] matches with the event_type of a registered observer the passed method (of the observer) will be invoked.

This registers an observer by an observable subject

• observer , an Object whose method with the given name (parameter method) will be called if the a matching event is fired by the subject. typically the this pointer.
• event_type, String, the type of event you are interested in (e.g. 'change', 'focus', …)
• method, String, the name of the method which should be called if the event is fired.

Example: Assumption: input should be a input-Object (e.g. Class input), it shall be observed if its content changes.

observer.prototype = new app();
 
function observer() {  
    ....
    function initObserver() {
        ....
        input.addLEvent(this, 'change', 'inputChanged');
    }
 
    function inputChanged(src, event) {
        // react on the changes
    }
}

whenever the observed input-Object calls notify(event) and event['type'] is change the method inputChanged will be called. Its arguments src and event will be set:

• src will be a reference to the input object that fired the event.
• event event is the Object, that the event-firing input object passed to the notify function.

Removes an Observer if no more information about the observed subject is needed.

Every subclass of app may call notify(event) in certain situations (i.e. if something happened that could be interesting for other components). So it gives all other modules the possibility to react.

event should be a hashtable that has at least the item type. It should be a string and indicate what happened (e.g. 'change', 'saved', 'aborted', …).

Example:

....
// Say here an edited recordset has been saved into a database
...
var event = {'type':'record_saved', 'record_id':this.recId};
this.notify(event);

Passes through an event to those that observe this object. Note that a module may act as observer and as observed subject at the same time.

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

The class app provides also the possibility to handle events fired by DOM-Elements. This is a typical task of controls inherited from app. These typically handle the events fired by the “real” DOM-Elements (e.g. the text input box) and the fire their own events by calling notify. So the users (the modules containing controls) can easily observe the controls by adding themselves by addLEvent as Observer to the controls.

Works similar to addLEvent, but:

• element is the DOM-Element you want to observe (or its Id)
• event_type is the Type or the interesting event ('click', 'change', 'keypress', etc.)
• method is the name of the function that should be called if the event occurs.

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) {
        // react to the click
    }
}

Whenever a click on the button occurs, the method buttonClicked will be called.

• src will be a referenc to the DOM-Object that fired the event.
• event is the (DOM-)event