How to understand Control's definition
Control's definition (or just Definition) is a structured JavaScript object. Properties and values of this object describes how Control will be created.
Utilize Controls.js Form Editor to generate definitions.
Example
Button1: {
Type: 'weButton',
L: 20, T: 20,
Data: {
Text: 'Click me!'
},
Events: {
OnClick: function (e) {
alert('Clicked!');
}
},
}
Button1 - Reference name
Type - Type of Control
L, T - Control positioning
Data - Properties to be set
Events - Events to be registered
Top level definition properties, like Type or Positioning, are more connected with the Control creation (i.e. "how to" create the Control). In addition there are reserved property names, like Data or Events, applied after Control is created.
Type (string)
Defines what kind of Control will be created - button, edit, etc.
L eft, T op, R ight, B ottom, W idth, H eight (integer/string)
Position and size of Control, relative to its parent. Pixels or percents are accepted.
Data (object)
Contains properties to be set on newly created Control.
Events (object)
Contains events to be registered on newly created Control. New events will be added at the end of existing event chains.
OverrideEvents (object)
Contains events to be overrided on newly created Control. New events will replace existing ones.
BeforeEvents (object)
Contains events to be registered on newly created Control. New events will be added at the begining of existing event chains.
AfterEvents (object)
is alias for Events.
Methods* (object)
Contains method to be added to (replaced in) newly created Control.
Controls (object)
Child Controls definition.
ModifyControls (object)
Changes to definitions of child Controls. ModifyControls don't need to follow definition hierarchy.
ParentReferences (boolean)
If FALSE the references to child Controls are stored within newly created Control.
DataBind (string)
Defines ViewModel bindings.
DOMDataBind* (string)
Defines DOM element ViewModel bindings.
ViewModel (string/object)
Reference to ViewModel used in bindings. If not defined the parents or owners are searched for ViewModel.
ScrollBars (enum)
Control's DOM element scrollbars.
Possible values:
ssNone, ssDefault, ssAuto, ssBoth, ssHorizontal, ssVertical
Opacity (float)
Control's opacity in the range 0.0 to 1.0.
className (string)
CSS class applied to Control's DOM element.
style (object)
Defines CSS styles applied to Control's DOM element.
id (object)
Defines Control ID (autogenerated if not defined).
parent (string/object)
Usually created Controls follows the hierarchy of definition. With parent property it is posible to specify Control's parent. It can be other Control or DOM element.
Following strings are recognized*:
'__appelm' - application DOM element
'__apptopelm' - application top DOM element
'__docbody' - document.body
DOMTagName* (string)
Control's DOM element type (usually DIV).
innerHTML (string)
Control's DOM element initial HTML content (usually will be replaced on first Control update).
OnCreating function(def, ref, parent, options) { ... }
Event invoked before Control is about to be created.
OnCreated function(c, ref, options) { ... }
Event invoked after Control (and all it's child Controls!) was created.
OnCreateHTMLElement* function(def, ref, c) { ... }
Event invoked right before Control's DOM element is about to be created.
Note: Properties marked with star (*) are not available in Controls.js 5.0.0 release.