Real-World AJAX Book Preview: Instantiating the Bindings

By Kurt Cagle	Article Rating:
March 27, 2007 11:15 AM EDT	Reads:	5,566

Related
Print
Email
Feedback
Add This
Blog This

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs for the special pre-order price, click here for more information. Aimed at everyone from enterprise developers to self-taught scripters, Real-World AJAX: Secrets of the Masters is the perfect book for anyone who wants to start developing AJAX applications.

Instantiating the Bindings
In Mozilla, the XBL binding language (an XML language) is used to associate bindings with their respective elements, with these tied in via CSS. Unfortunately, there are no clean hooks for adding a binding in this way for Opera (and a different mechanism for handling it in Internet Explorer).

Because of this, the approach I took to binding here was somewhat different and involved two separate routines: applyBindings() and applyBinding(bindingName,node). The first routine will always be called (it's invoked in the windows.onload event) and its role is to retrieve each <binding> element from the Web page, retrieve from that binding both its name (from the target attribute) and the binding URL (as contained in the src attribute), and then to load the JavaScript code into an object.

Once that is done, the second function applyBinding() is invoked with one argument (the name of the binding). When invoked in this manner, the applyBinding() method will retrieve all elements with this name from the calling document (the original XHTML file), and will then directly apply the binding to each such element.

It is also possible to call applyBinding() with a second argument - a specific element object - in order to apply the binding to that object directly. In general this usage will be performed via some later script. For instance, you could modify the code in the XInclude binding to automatically check and bind newly introduced elements that have just been rendered.

In addition to these two functions, this script also defines the getXPath() function, which takes as arguments an XPath expression and the node on which to apply it, and returns a nodeList object containing zero or more nodes of those that satisfy the given XPath call. Note that this is a fairly bare-bones version and is designed to work with both Mozilla, which does have its own more sophisticated XPathEvaluator object, and Opera, which doesn't. The XPath in Opera is handled by using an inline XSLT transformation, which Opera 9.0 supports.

The Knee Bone Is Connected to ...
The JavaScript binding files generally follow the same general skeleton:

   var obj = {
   constructor:function(){
     // constructor code
     },
methods:{
methodA:function(){
         // code for method A
         }
     },
     methodB:function(arg1,arg2){
         // code for method B
         }
   },
events:{
   eventA:function(evt){
     // event handler for eventA
   },
   eventB:function(evt){
     // event handler for eventB
   }
   }
};
obj;

CIO, CTO & Developer Resources

These are actually attached to the target element directly, such that if you have a reference to element X, you can call methodA on X directly as X.methodA(). Note that this approach does tend to be fairly expensive when compared to attaching the code directly to a constructor prototype. But unfortunately all elements that are not explicitly defined in both the Mozilla and Opera DOMs are treated as a single anonymous element class and consequently such generalized bindings would cause a great deal of havoc.

Note that the skeleton currently doesn't recognize destructors though these are easy enough to add properties, the way XBL does. The latter lack of property support comes about because IE7 does not recognize setters or getters in JavaScript, along with the fact that you can always create setXXX and getXXX methods directly.

Finally, the event names should be given without the "on" prefix: "load" instead of "onload", "mousedown" vs. "onmousedown", and so forth. The code given here also doesn't differentiate bubbling phases, primarily again because of restrictions with Internet Explorer's event flow model.

The code for performing the specific XInclude binding is given as follows:

XIncludeBinding.js

This content is reprinted from Real-World AJAX: Secrets of the Masters published by SYS-CON Books. To order the entire book now along with companion DVDs, click here to order.

Related
Print
Email
Feedback
Add This
Blog This

Real-World AJAX Book Preview: Instantiating the Bindings

More Stories By Kurt Cagle

Cloud Expo