The following javascript functions provide the means to create custom behaviors and widgets.

The following function outlines the basic things that you will need to create a widget or behavior.

var isWidget = true;
 
App.UI.registerUIComponent(isWidget ? 'control' : 'behavior','customThing',
{
	create: function()
	{
		this.options = null; // object instance member containing initial options 
		this.id = null; // a retainer for the identity of the widget
 
		this.getVersion = function()
		{
			return '1.0';
		};
 
		this.getSpecVersion = function()
		{
			return 1.0;
		};
 
		this.getAttributes = function()
		{
			return [{name: "myProperty", 
						optional: true, 
						description: "This is my property",
						defaultValue: true
					},
					{name: "myOtherProperty", 
						optional: true, 
						description: "This is my other property",
						defaultValue: null
					}];
		};
 
		this.getControlJS = function()
		{
			return ['js/someFile.js', 
				'js/someOtherFile.js'];
		};
 
		this.getControlCSS = function()
		{
			return ['css/wildStyle.css'];
		};
 
		this.myAction = function(value)
		{
		};
 
		this.myOtherAction = function(value)
		{
		};
 
		this.getActions = function()
		{
			return ['myAction','myOtherAction'];
		};
 
		this.build = function(element,options)
		{
			this.options = options;
			this.id = element.id;
		};
	}
});

Implementers should leave this instance member as-is and only configure from the build.yml file; it will automatically get supplanted on build of your distro.

void getVersion()

Get the widget version…

this.getVersion = function()
{
	return '1.0';
}

The control spec version. This is used to maintain backwards compatability as the Widget API needs to change.

int getSpecVersion()

Get the spec version…

this.getSpecVersion = function()
{
	return 1.0;
}

Returns an array of objects which describe what options will be valid when instantiating the widget or behavior. If options are not explicitly by the developer. Also allows defaults to be specified.

array getAttributes()

Get attributes…

this.getAttributes = function()
{
	return [{name: "myProperty", 
			optional: true,
			description: "This is my property",
			defaultValue: true
		},
		{name: "myOtherProperty", 
			optional: true, 
			description: "This is my other property",
			defaultValue: null
		}];
}

Returns an array of javascript files that will be loaded before the build function executes. If your widget or behavior uses a third party framework, include the reference to the files here. If two widgets or behaviors include the same file, it will only be loaded once.

array getControlJS()

this.getControlJS = function()
{
	return ['jquery.js']
}

Returns an array of stylesheet files that will be loaded before the build function executes. If two widgets or behaviors include the same file, it will only be loaded once.

array getControlCSS()

this.getControlCSS = function()
{
	return ['wildstyle.css']
}

Not all instance members of this object should be accessible via Web Expression, this array determines which functions can be called.

array getActions()

Get actions…

this.getActions = function()
{
	return ['myAction','myOtherAction'];
}

This function is where you would define the logic for the widget or behavior that you're creating. this is an ideal place to fabricate trivial markup.

void build(element, options)

this.build = function(element, options)
{
	this.options = options;
	this.id = element.id;
 
       	// ...			
}