This is a continuation of: Color-chooser, part II. Three pieces of the Puzzle.
First of all: Sciter executes scripts after completion of document tree parsing. This is major difference from how conventional browser deals with scripts. So script execution in Sciter is deterministic – code in script files executed when DOM is loaded and in the order of how script files are included in the master HTML document.
Next phase after DOM and scripts are getting loaded is a binding of behaviors: Sciter scans DOM tree for elements having prototype attribute defined in CSS and assigns script classes of behaviors to correspondent DOM elements. Thus, if you have following CSS declaration:
input[type="color-chooser"]
{
background: …. ; /* and other rendering styles */
prototype: ColorChooser /* behavioral style definition */
}
and existing variable ColorChooser of type Behavior somewhere in your scripts, that DOM element is said to be of class of ColorChooser.
Each object (DOM elements are also first class script objects) in the script is a collection of properties – pairs of a key and a value. That value can be a function.
Each object has special prototype field. That prototype field establishes instance/class relationship- links objects and their classes.
Method invocation like obj.foo() simply means following instruction: try to find property foo in obj collection of properties and if it is is not found then try to find it in object referred by prototype variable, etc. If such foo value is found in the chain and it is a function – call it with this environment variable set to the obj.
"Class" object can also have prototype field set – it is said that one class is derived from another.
Here is what happens when DOM element has prototype defined in CSS:
As you may see Sciter in this case simply changes value of prototype field of the DOM object from reference to Element (class) object to the reference of your custom Behavior class-object.
The last phase of behavior assignment: after changing prototype field of the DOM object Sciter tries to call method attached() if it is defined in the behavior. Method attached() by its concept is close to a constructor method. Variable this inside method code points to the DOM element this behavior has been assigned to. The only difference between attached and constructor is that at the moment of invocation of the attached() DOM element already exists and is a "citizen" of the DOM.
NB: the prototype attribute in Sciter is read/write entity thus you can change behavior of the element in your code at any time. You may need this if, say, some element has clearly two or more states in which it should behave significantly differently.