Sunday, May 20, 2007

Another reason to use the AJAX Control Toolkit

Apart from the long list of great, free controls in the AJAX Control toolkit, there are numerous other reasons to use the toolkit. One of which is the great support functions that come with the toolkit.

One I had to use recently allowed me to figure out the width of an elements border and easily deduce the content size within the element for some tricky positioning. While not a big deal, these things are incredibly fiddly and not very straightforward in the wonderful world of browser "standards".

In the AJAX Control Toolkit project, there is a Common folder, which contains a "common.js" file with a large set of handy little script functions in there. Far too many to list here, but the ones I used on this occassion were:

var box = CommonToolkitScripts.getBorderBox(domElement);


var box = CommonToolkitScripts.getPaddingBox(domElement);

Each one returns a 'box' object that has the following properties:

.top : top most PaddingSize/BorderWidth
.bottom : bottom most PaddingSize/BorderWidth
.left : left side PaddingSize/BorderWidth
.right : right side PaddingSize/BorderWidth
.horizontal : total horizontal PaddingSize/BorderWidth
(right + left)
.vertical : total vertical PaddingSize/BorderWidth
(top + bottom)

And thats it. No worrying about different methods for different browsers.

Again, there are only two functions that exist in this library. There are many more. Additionally, there is also a script file called 'Blocking.js' in the 'Compat' directory which contains gems like:

Sys.UI.DomElement.setVisible(element, true/false);


var booleanFlag = Sys.UI.DomElement.getVisible(element);

which you may recall existed in the prior Atlas CTP builds, but have since been removed. The AJAX Control toolkit has retained this because they are quite handy to use.