OOP - FAQs, Resources & Best Practices

[kortex]

Event Listeners:

Ok so most of you are probably familiar with doing some thing like:

on (release){
//do something
}

OR

myButton_btn.onRelease = function () {
//do something 
}

OR

function doSomething(){
// go ahead guess what goes here
}

myButton_btn.onRelease = doSomething;

All of the above are simple examples of using an event (in this case the on release event) to trigger some code. You can even get a bit more complex by doing the following:

var iHearYou:Object = new Object(); 

iHearYou.change = function (evtObj:Object){
//do something
}

myTextInput.addEventListener(“change”, iHearYou)

In the above example we actually created our own object and assigned a function named change. Then we added and event listener to a text input component that registers our object to listen for the change event. Hence every time the text is changed in our text input we have added the listener to, the change function in our object will be executed. This example illustrates several important things.

1. A listener is actually an object with specific functions that get executed when an event is broadcast. Generally the function name matches the event to be listed to.
2. The object that the listener is added to must dispatch the specified event. If it does not, the listener will never be triggered.




So what are the benefits of using event listeners as objects?

Event listeners provide a more flexible event handling model than change handlers in Flash MX. For example, a listener object can receive events from several components; likewise, a component can broadcast a single event to multiple listeners. For more information about handling component events, see About Component Events in the Using Components Guide.
(From: http://www.adobe.com/devnet/flash/ar...04_print.html)

So how does this work with classes? Well let's look as some examples. For this we will use two custom made classes (you can download these to play with them, just remember to set up you class path – see previous post for link to instructions for doing this):

class Ear
{
	//I am a bit nosy and like to listen in
	function onKeyDown ()
	{
		trace ("I hear you pressed key number " + Key.getAscii () + " pressed");
	}
	function change (evtObj : Object)
	{
		trace ("Lisenting to " + evtObj.target._name + " type." )
	}
	function focusOut(evtObj:Object){
		trace ( "I hear that " + evtObj.target._name + " says " + evtObj.target.text )
	}
}

class Mouth
{
	//I like to gossip.
	function onKeyDown()
	{
		trace ("Let's talk about key number " + Key.getAscii() );
	}
	function change (evtObj : Object)
	{
		trace ( evtObj.target._name + " is typing." )
	}
	function focusOut(evtObj:Object){
		trace ( evtObj.target._name + " says " + evtObj.target.text )
	}
}

Take notice of the following with the above two classes:
1. Both classes have exactly the same functions in terms of names, but trace different things. (i.e. in different listeners we can have the same function name, but do different things with them)
2. The function names must match the events they listen for. This will vary based on the object that you will register the listener to. In this case we will be using the Key object and TextInput components as examples.
3. Listener functions can receive the object that triggered them as a parameter, hence I can access the properties of the triggering object (see change and focusOut functions in example classes). Hence if I wanted to, I could vary my code based on the object that triggered it.

So now we have out classes: In Flash we can now:

var nosy:Ear = new Ear(); 
var chatty:Mouth = new Mouth(); 
Key.addListener(nosy);
Key.addListener(chatty);
bob.addEventListener("change", nosy); 
bob.addEventListener("focusOut", nosy); 
bob.addEventListener("change", chatty); 
bob.addEventListener("focusOut", chatty); 
jack.addEventListener("change", nosy); 
jack.addEventListener("focusOut", nosy); 
jack.addEventListener("change", chatty); 
jack.addEventListener("focusOut", chatty); 
jill.addEventListener("change", nosy); 
jill.addEventListener("focusOut", nosy); 
jill.addEventListener("change", chatty); 
jill.addEventListener("focusOut", chatty);

While the above could look a bit messy, what it is meant to illustrate is the following:
1. You can register multiple objects to the same listener.
2. You can register multiple listeners to the same object.

So basically I can trigger multiple functions in different objects all with the same event, or multiple objects can trigger the same function. I don’t have to rewrite it for each object.

Since this is getting a bit long, if you want to see how this works, download the attached files and play with it by commenting out some of the lines in the Flash code above to see how what gets traced out changes.

See also:
http://livedocs.macromedia.com/flash...=00001375.html