The Manipulator framework is designed for node extension using Initializer Objects. Initializers are JavaScript objects which are mapped to HTML nodes using specific classnames in the HTML document, to provide seamless cross device UI variations without any changes to the backend generated HTML or creating cross device dependencies.

Initializers are stored in Util.Modules, also avaliable as u.o.

This is what an initializer looks like:

Util.Modules["initializerExample"] = new function() { this.init = function(node) { // your code here } }

An initalizer object is mapped to an HTML node like this:

<div class="i:initializerExample"></div>

The combination of the above, will result in the div being passed to the u.m.initializerExample.init function as node.

An initializer can contain any code you want to execute, and are most commonly used to manipulate the node HTML and add event handlers.

A full example could look like this:

Util.Modules["clickme"] = new function() { this.init = function(node) { Util.clickableElement(node); node.clicked = function() { Util.toggleClass(this, "c1", "c2"); } } } <div class="i:clickme">Click me</div>

In effect this looks like this (with a bit of CSS added):

Click me

Scene initializers