darron schall :: application developer specializing in the flash platform

By now everyone should have at least heard of the "mx.utils.Delegate" class that was included in the Flash 7.2 updater. This post is not intended to explain the Delegate class, but rather, here's a simple little trick showing how to use Delegate to pass additional information to generic event handlers.

Here's the scenario: A user is presented with two buttons. Each button increments a value by a different amount (either 1 or 5) when the button is pressed.

Programming this interaction is easy enough - we simply create two functions, incrementBy1 and incrementBy5, and proxy the events to the appropriate function. Part of the code for that might look like this:

btn1.addEventListener("click", Delegate.create(this, onIncrement1));
btn2.addEventListener("click", Delegate.create(this, onIncrement2));

However, this solution isn't ideal. We've created two distinct increment functions that perform basically the exact same task. In this situation, what we really want to do is create a single increment function, and pass the amount to increment as a parameter.

We can mimic this behavior by proxying both of the events to the same onIncrement function, examine the event's target's name property to figure out which button was pressed, and then increment by the value associated with that button. The code for the new onIncrement might look like this:

function onIncrement(eventObj) {
 	var which:Number;
 	
 	which = parseInt(eventObj.target._name.substr(3));
 	switch(which) {
  		case 1: total += 1; break;
  		case 2: total += 5; break;
  	}
 	
 	trace(total);
}

However, the problem with that is we're back to the reason that we wanted to proxy events in the first place! We don't want a generic event handler to have to determine where the event came from. Instead, we want the event handler to just "do it's thing" without worrying about context.

We can accomplish this by leveraging Function objects in Flash. Whenever you call Delegate.create, a function is returned. We can stuff properties into that Function object, and then access those properties from within the event handler by using the arguments.caller scope.

You can see this technique in action in the following complete code sample:

// 1) create a blank fla, drag a v2 button to the
// stage then delete the button instance so that 
// the button only resides in the library.
// 2) paste this code on frame 1 and test movie

import mx.utils.Delegate;
import mx.controls.Button;

function init() {
 	// create and place our buttons
 	createClassObject(Button, "btn1", 1, {label:"plus 1"});
 	createClassObject(Button, "btn2", 2, {label:"plus 5", _y: btn1._y+btn1.height});
 
 	// both buttons use the same onIncrement event
 	// handler - but the handler behaves differently
 	// based on the step value set
 	var f = Delegate.create(this, onIncrement);
 	f.step = 1;  // btn1 steps up by 1
 	btn1.addEventListener("click", f);
 	f = Delegate.create(this, onIncrement);
 	f.step = 5;  // btn2 setps up by 5
 	btn2.addEventListener("click", f);
 	
 	// initialize our running total
 	total = 0;
}

// generic increment function used as
// event handler for the buttons
function onIncrement() {
 	// grab the step property from the 
 	// delegate function we created, and use
 	// that as the increment value
 	total += arguments.caller.step;
 	trace(total);
}

init();

By using a generic increment function and using what I'll call "pseudo-parameters" we can easily add new buttons with different increment (or decrement) values. This enables us to easily reuse the code we already have and make maintenance easier.

In summary, we can pass parameters to a generic event handler using Delegate.create by stuffing data into the Function object returned by the create call and then using the arguments.caller scope in the event handler body to access that data.

More information on the Delegate class can be found here: Proxying Events with the mx.utils.Delegate Class