LoadBehaviour
The behavior functionality must be bound to the HTML object by calling onemethod only:
LoadBehaviour("TimerSample", TimerSampleBehaviour);
The “magic” work behind the LoadBehaviour() method is to loop though all
elements of the given JavaScript object and assigning each of them to the
HTML object.:
• Methods. Starting with "on" are assumed to be event handlers and are
attached using the browser specific methods for attaching events. Only
the bubbling phase of the event is used because it is implemented by both
browsers.
• Other methods are just bound to the HTML object as function objects.
• All the other objects are assigned if there is not already an assigned
property existing on the HTML object. These objects are shared for all
HTML objects that are bound to the same behavior.
Using complex properties in Behavior definition
When defining complex objects (arrays, structures) inside the JavaScript
prototype you have to pay attention to the fact that these objects are shared
among all HTML objects using this prototype. If individual complex
objects are needed it is better to create and assign them in the "init" method.
The jcl.CloneObject method is available and may help to get a real copy of
a complex object that is declared inside the JSON object that builds the
Behavior definition.
The init method
A method named "init" can be defined in the JavaScript prototypes to
implement special needs after the methods, event handlers and properties are
bound to the HTML object. This method is automatically called by the
LoadBehaviour method.
The "init" method is called when the onload event is raised for the window
object.
The term method
Another method named "term" can be defined in the JavaScript prototypes to
implement a method that is called just before a page unloads. There is a real
need for implementing code just before all HTML and JavaScript objects are
thrown away in Microsoft Internet Explorer, because there is a well known
problem with the memory management used by the HTML DOM and
JavaScript. Both object libraries do have their own garbage collector
implementation and in some cases circular references between objects of both
worlds are not properly detected and memory will not get freed and useless
memory consumption is the unwanted result.
The best solution against this “design weakness” is to set all references of
JavaScript variables to HTML elements to null in this method.
There is also a great tool and some more background information available
that helps to detect this kind of memory leak named Drip available at
http://outofhanwell.com/.
You can find a sample using Clone
Object inside the LookUp Behavior.
Here this method is used to get a copy
of an action definition that is declared
inside the Behavior definition. This
enables the usage of multiple instances
of the same behavior on a page.
Defining event handlers
All defined elements of the Behavior Definition object that start with the 2
chars “on” are treated as event handlers. This special naming convention is
needed because most event handlers need a reference to the event object
that contains most of the details on the current executed event.
These methods get passed the event object as a parameter and will be
executed in the context of the behavior.
To access the root object of your component you can use the this reference.
When you need to access the object that got the event you can find it by using
evt.srcElement. Here is a typical start sequence of an event handler:
onmouseover: function(evt) {
var obj = evt.srcElement;
...
Inheritance
A new behavior can inherit all details from an existing behavior. This
mechanism is useful for building several JavaScript Behaviors that all share
the same basic functionality. Here is a sample:
// this is a basic behavior definition for menubars
var EditMenubarBehavior = {
inheritFrom: MenubarBehavior,
init: function() {
MenubarBehavior.init.call(this);
},
...
}
By specifying the inheritFrom attribute the LoadBehaviour method will
copy all properties, methods and event handlers from the referenced behavior
to the specified html object before copying the new properties, methods and
event handlers.
In the init method you should call the init method of the referenced behavior
before continuing the initialization of the new features.
The common JavaScript include file
The AJAX Controls are using the JavaScript behaviors and therefore need all
the common include file "~/controls/jcl.js " that implements the loading
mechanism and most of them are implemented by using a specific include file
containing the specific JavaScript behavior prototype code of one behavior.
var isIE = (window.navigator.userAgent.indexOf("MSIE") > 0);
The variable isIE is defined globally and is set to true if an Internet Explorer is
the current browser so it is easy to detect the browser specific JavaScript
implementations that we have to make for IE.
var jcl = {...}
The variable jcl is used to hold all functions of the behavior loading
mechanism.
Because many controls need to share some local information to get
synchronized a mechanism called “Data connections” is also implemented in
this file and available through jcl.DataConnections.*.
Another reason for this include file is to implement a compatibility layer for
FireFox/Mozilla that emulates some useful IE methods and properties.
Don’t use names for your properties
that start with “on” to avoid conflicts
with the event attaching mechanism!
Tags:
JavaScript