Custom Events – Part II


In the first part of this series, I showed you how to create your own events and broadcast them. In many cases, however, events require some additional information. For example, if a user wants to add a product to a shopping cart, it would be necessary to know which product they selected. We know how to create an “addProduct” event. Let’s look at how we can attach some data to it…

You’ll recall that in the first article, we declared our custom event similarly to this:

<mx:Metadata>
[ Event( name=“addProduct”, type=“flash.events.Event”) ]
</mx:Metadata>

What I didn’t talk about at the time was that second parameter, the type. In this case, our custom event was simply an instance of the built-in Event class in Flex.

In order to attach additional properties to our event, we need to subclass Event, add the properties and dispatch an instance of our event just like we did the first time around. There are a couple of rules to remember about subclassing Event that we’ll look at.

Here’s what our final custom event class will look like. I’ll break it apart in a moment.

package events

{
import flash.events.Event;
public class AddProductEvent extends Event

{
public var productName:String;
public function AddProductEvent( type:String, productName:String ) {
super( type );
this.productName = productName;
}
override public function clone():Event

{
return new AddProductEvent( type, productName );
}
}
}

The class is located in a subdirectory named events, which we see in the package declaration.

Because we’re extending the Event class, we import it. Next we declare the class name and indicate the parent that it’s extending.

import flash.events.Event;
public class AddProductEvent extends Event {

We’ll just add a simple string property for this example, but you could use a more complex object if you wish.

public var productName:String;

In the constructor for our custom event class, we acccept two parameters. The first is the name we’ve chosen for the custom event, ie. “myCustomEvent”. The second parameter is the custom data we want to attach to the event when it gets broadcast.

public function CustomEventClass( type:String, productName:String ) {

We’re next going to call the constructor of the parent Event class. This Event class constructor takes the name of the event as its only argument. Once we’ve completed this required step, we can go ahead and set our custom property’s value.

super( type );
this.productName = productName;

The final bit of code in our class is an override of the Event class’s clone method. This is used in the event bubbling model. While you could get away without it, you’d run the risk of breaking the ability of the Flash player to bubble your events properly. My advice, just put it in there every time.

override public function clone():AddProductEvent
{
return new AddProductEvent( type, productName );
}

Back in the broadcasting component, we can make a few minor changes to attach data to our event.

First, we’ll change the class type of our custom event so that it points to events.AddProductEvent.

<mx:Metadata>
[ Event( name=“addProduct”, type=“events.AddProductEvent”) ]
</mx:Metadata>

In the local button click handler, we create our event object again, this time referring to our custom class and attaching the data. Notice that we had to import our new class as well.

import events.AddProductEvent;
private function onButtonClick():void
{
// create your new event object, the second parameter of the constructor is the data payload
var myEventObj:AddProductEvent = new AddProductEvent( “addProduct”, “Flex T-shirt” );
// broadcast the event, passing along the event object and its data
dispatchEvent( myEventObj );
}

In the main application file, we once again instatiate our custom component.

<comp:MyComponent id=“myComponent” addProduct=“onAddProduct( event );” />

And finally, write the handler. In this case we pull the data (event.productName) back out of the event object for display.

import events.AddProductEvent;
private function onAddProduct( event:AddProductEvent ):void
{
mx.controls.Alert.show(‘Attached data was’ + event.productName);
}

Once you’ve created a few of your own event objects you’ll see that it’s a valuable tool for moving data around, yet maintaining a clean separation between your components.

Advertisements

~ by mjcprasad2000 on July 11, 2009.

One Response to “Custom Events – Part II”

  1. hey there, cool summary – thanks for that! anyway you’ve mistyped once, the overwridden clone function has to be of type Event. means:

    override public function clone() : Event {
    return new ModelEvent(type, _data);
    }

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: