Off and running

Quick announcement to make to all of you readers out there, and I mean all zero of you. I no longer am in the employ of Ultimate Software, South Florida's little tech darling. Great experience there, yes, but I have decided to leave to form my own software company with a business partner of upmost talent, brains, and financial discipline.

So today is the first day of full-time startup-ness, after months of working two jobs and staying up until 1,2,3 in the morning.

So far so good. Will keep you posted.

Power JavaScript : Closures, Objects, and "this"

For those of you who attended my Power JavaScript talk at CodeCamp '07 in Miramar, thank you so much for attending. You can download the PowerPoint and the code samples by clicking on this sentence. JavaScript is a rich topic, and we really need a whole day to go over some of the advanced topics. Closures, mentioned at the end, I will try to address here.

The simplest way to describe a closure is that it's an enclosing function that returns an inner function declared inside of it. To really understand them, I strongly suggest reading the following very accessible article, JavaScript Closures for Dummies. Other articles out there on the net are academic and very confusing. Beware.

Nonetheless, their true importance comes from managing the "this" pointer when you are using OO JavaScript and events. Consider the following button:

<input type="button" value=" Increment Age " id="ageIncButton" />

Now consider the following simple JavaScript class definition:

function Person(pName, pAge) {
this.name = pName;
this.age = pAge;
}

Person.prototype.toString = function() {
return this.name + ", " + this.age;
}

Person.prototype.incrementAge = function() {
this.age++;
alert(this.toString());
}

You might think that we might be able to create an object instance and easily attach it to the button's onclick event in the following simple manner:

var person = new Person("Liza", 60);
incButton = document.getElementById("ageIncButton");
incButton.onclick = person.incrementAge;

Try it...you will find the behavior not as expected. The "this" pointer, when accessed after the event firing in the incrementAge method, does not point to the Liza instance. In fact, it refers to the global object!

Instead, we have to take advantage of the closure's object scoping to get the intended "this" pointer - the one that should be pointing back to Liza all along. The invocation would look like this:

var person = new Person("Liza", 60);
incButton = document.getElementById("ageIncButton");
incButton.onclick = attachObserver(person, "incrementAge");

...where the attachObserver method is defined as follows...

function attachObserver(objectInstance, methodName) {
return function() { objectInstance[methodName](); }
}

The trick to understanding the syntax of this closure is the objectInstance[methodName] expression. Remember that in JavaScript, everything is an object, including functions themselves. And all objects can have their members referenced with dot or bracket notation.

Play with the sample code, read the aforementioned closures article, and drop me a line if you are having troubles with this.

And remember an important thing: unhook your DOM events from your JavaScript code! IE will start leaking memory. For a discussion of the leak topic, take a look at the IE Leak Patterns article.

AJAX and ATLAS Slides and Demos

Feel free to study/copy/use my code and slides from my Atlas talk. I only ask that if you present this code again that you give me some credit.

Download the code and powerpoint

The code will expand into two folders: AtlasDemo, which will run out of the box on ASP.Net 2.0, and LPortAtlasDemo, which is the code library where you can see the custom Extenders that implement IScriptControl.

Ajax and ATLAS Demo

Hello! Welcome to my blog. I put together a presentation for the Florida .Net User's Group about ATLAS, ASP.Net 2.0's Beta project which builds upon Ajax.

Stay tuned for a number of examples demonstrating the ease and power of this framework. I will post my source code and powerpoint and materials shortly.

Topics covered include:

• Writing a traditional Ajax request
• ATLAS client scripting
• ATLAS server controls
• Writing a custom ATLAS control extender