This example shows a simple buttan and reacts on clicks on the button. The reaction consists of counting the clicks and showing the number of times the user clicked on the button. To store the number of clicks there is a class variable clickCount.

counter_button.prototype = new app();  // To inherit from app
 
/**   Constructor
*
*     @param container : DOM-Element where the instance should be drawn
*/
function counter_button(container) {
 
    this.initCounterButton = initCounterButton ;   // register the methods
    this.countClicks= countClicks;
 
    this.clickCount = 0;    // The state variable, initialize it with 0.
 
    if(arguments.length > 0) this.initCounterButton (container);   // Konstruktor aufrufen
 
    function initCounterButton (container) {
        this.initApp(container);      // Call the superconstructor, this is mandatory!
 
        // Insert the HTML-Code of the button into the container
        this.importTemplateString("A Button: <button id='btn'>Button</button><br>Click count : <span id='click_count'></span>");
        this.addCEvent('btn', 'click', 'countClicks');     // call countClicks whenever the button is clicked.
 
    }
 
    function countClicks(src, event)   {
        this.clickCount++;   
        // Show the number of clicks in the span with the id click_count
        this.setContent(this.clickCount, 'click_count');
    }
}

This example should implement a simple calculator. It uses two number_input controls where 2 numbers can be entered and a selector control to select the desired arithmetic operation. Whenever a number or the operation is changed, the result will be newly calculated and shown in the span with the id result. With the button “Calculate” the recalculation can be enforced.

Also the static content of this example will not be inserted via importTemplateString but by using importTemplate. So the HTML-Structur of this example can be saved in an external file.

First have a look at the template file modules/calculator/calculator.html

Enter calculation: <br>
<span id='left_value'></span> 
<span id='operator'></span> 
<span id='right_value'></span> 
=
<span id='result' style='font-weight:bolder'></span><br>
<button id='calculate'>Calculate</button>

And here the JavaScript-Class

calculator.prototype = new app();    // Create inheritation
 
function calculator(container) {
 
    this.initCalculator = initCalculator ;  // register methods
    this.calculate = calculate;
 
    this.operations = {'add':'+', 'subtract':'-', 'multiply':'*', 'divide':':'};  // The available arithmetic operations
 
    if(arguments.length > 0) this.initCalculator (container);   // calling the "Constructor"
 
    function initCalculator (container) {
        this.initApp(container);      // Call the superconstructor, this is mandatory!
 
        // Insertig HTML-Code into the element, after this you can "see" the calculator on the website.
        this.importTemplate("modules/calculator/calculator.html", this.container);
 
        // Initialize the number-input Fields and place them into the DOM-Elements right_value and left_value
        this.rightValue = new number_input(this.getObj('right_value'));
        this.leftValue = new number_input(this.getObj('left_value'));
 
        // Initialize the Operator-selector and place it on the DOM
        this.operator = new selector(this.getObj('operator'), this.operations);
 
        // register itself as observer of the input-controls to get a notification if anything changes 
        this.rightValue.addLEvent(this, 'change', 'calculate');
        this.leftValue.addLEvent(this, 'change', 'calculate');
        this.operator.addLEvent(this, 'change', 'calculate');
 
        this.addCEvent('calculate', 'click', 'calculate');     // call calculate if the button is clicked
    }
 
    function calculate(src, event)   {
        // read the entered values from the controls.
        var rValue = this.rightValue.getValue();
        var lValue = this.leftValue.getValue();
        var operator = this.operator.getValue();
 
        var result = 0;  
          // perform the calculation
        switch (operator) {
            case 'add':
                result = rValue + lValue;
                break;
            case 'subtract':
                result = rValue - lValue;
                break;
            case 'multiply':
                result = rValue * lValue;
                break;
            case 'divide':
                result = "Error";
                if (lValue != 0) result = rValue / lValue;
                break;
        }
        this.setContent(result, 'result');   // Show the result.
    }
}