Jelo.moldtop #

To extend Jelo, simply pass Jelo.mold a name (String) and an object which contains the variables and methods you wish to share. You can use either an object literal or a Singleton:

// Syntax: Jelo.mold(name, object);
Jelo.mold('MyCounter', function() {
    var counter = 0;
    function reset() {
        counter = 0;
    }
    return {
        up: function() {
            counter++;
        },
        down: function() {
            counter--;
        },
        getValue: function() {
            return counter;
        }
    };
}());

// we can immediately start using our new module!
Jelo.MyCounter.up();
Jelo.MyCounter.up();
alert(Jelo.MyCounter.getValue()); // alerts "2"

The Next Step: Writing JavaScript Widgetstop #

"Widget" is a catch-all term to describe reusable UI components, such as a draggable window, special button type, data grid, etc. Creating a widget is different from extending Jelo as above, because we may need to instantiate more than one of the same widget on a page. This can be done by passing Jelo.mold a constructor function instead of an object literal or Singleton.

Jelo Widgets inherit a handful of default properties and methods, described here. Some behavior is built in, such as rendering your widget to the page (or a particular element). You can override any of these behaviors or add your own by modifying the prototype of your new widget.

Jelo.mold('MyDataGrid', function() {
    this.dom = Jelo.Dom.fromString('<table class="jelo-mydatagrid">' +
        '<tr><th>Example</th></tr>' +
        '</table>');
});
Jelo.MyDataGrid.prototype = new Jelo.Widget(); // inherit common behaviors

// optional: override default Widget behaviors
Jelo.MyDataGrid.prototype.destroy = function() {
    if (confirm('Are you sure you want to delete this grid?')) {
        this.dom.parentNode.removeChild(this.dom);
    }
};

// optional: add new behaviors ("sort" is just an example)
Jelo.MyDataGrid.prototype.sort = function() {
    // sort this grid's data
};

// instantiate our Widget using the "new" keyword
var grid = new Jelo.MyDataGrid();
grid.render(); // appends a new table to the document body