Fundamentals

Your JavaScript control must include a few fundamentals, as follows.

Control Name

Your control name should match that defined in your C++ component's WCCcontrol structure.


The Structure of a JavaScript Control

All JavaScript controls share an overall html structure. They comprise an outer frame element, and an inner client element.

Frame Element: 

  • Has no content, other than the client element.
  • Contains the Omnis properties which pertain to the container of the control, e.g. its border.

Client Element: 

  • Initially has its content set to that specified in the innerHTML() method of the C++ component.

  • Should contain the entire control structure.

You should only ever add child elements to the Client element (or its children), never to the Frame element.


JavaScript Control code structure

Most methods of a JavaScript control are added to the object's prototype. This helps reduce memory usage when lots of instances of the control are present (as may be the case with a re-useable component such as you are creating).

The standard way that we create a JS control is by creating a constructor function for the control (generally at the bottom of the file), and then create an Immediately Invoked Function Expression (IIFE) which creates the prototype for the control.

The prototype must inherit from the ctrl_base class (the base class for all JavaScript controls). This can be achieved by setting the prototype of your new control to be initially equal to a new instance of ctrl_base, then you can extend it.

The following gives a brief example of the structure:

ctrl_mycontrol.prototype = (function() {


	var ctrl = new ctrl_base(); // The object which will become the prototype - inherited from the base class.


	var myConst = 123; // A constant value


	ctrl.publicMethod1 = function(p1) {
		// public methods which are inherited from the base class, and called by the JS Client framework will have 'this' set to the control instance.
		this.instVar = p1;
		privateMethod1.call(this, "abc"); // Make sure to use call() to pass the appropriate value for 'this'.
	};


	function privateMethod1(p1) {
		// Private method code.
	}


	return ctrl; // Return the prototype object.
})();


/**
 * constructor for our control
 * @constructor
 */
function ctrl_mycontrol()
{
	this.init_class_inst(); // initialize our class
}


Control Methods

Your control must also implement the following methods:

You will probably want to implement more Control Methods than these, and there are several optional ones available.

The most-used of these are already provided as stubs in the generic.js file, included in the SDK, so this is always a good starting point from which you can extend the functionality of your own control.