AS3: Creating and dispatching Custom Events

Hi,

In this tutorial I will show you how you can create Custom Events and dispatch them when needed. In addition, you will see how useful is this feature in the software building process.

In this example, I have created two classes - Contact and ContactEvent. The description for each one follows below:

• Contact: Describes contact informations and default operations (methods);
• ContactEvent: This class will contain the types and other definitions of each contact event dispatched by the app;

Ok! That's wonderful!
The idea here is only dispatch an event when a contact is added or removed.
So, let's take a look at the ContactEvent class code:

package
{
     import flash.events.Event;
     public class ContactEvent extends Event
     {
          //the event type ON_ADD_CONTACT is used when a contact is added to our list
          public static const ON_ADD_CONTACT:String = "onAddContact";
          /* the event type ON_REMOVE_CONTACT is used when, surely, a contact is deleted */
          public static const ON_REMOVE_CONTACT:String = "onRemoveContact";
          /*customMessage is the property will contain the message for each event type dispatched */
          public var customMessage:String = "";

          public function ContactEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false):void
          {
               //we call the super class Event
               super(type, bubbles, cancelable);
          }
     }
}

So, now we will create the Contact class:

package
{
     import flash.display.Sprite;
     public class Contact extends Sprite
     {
          private var cEvt:ContactEvent;
          public function Contact():void {}
         
          public function doAdd():void
          {
               //we set the type of the event we want to dispatch
               cEvt = new ContactEvent( "onAddContact" );
               //We set the customMessage for display
               cEvt.customMessage = "Contact added successfully!";
               //Finally we dispatch to notice the app one contact was added
               dispatchEvent(cEvt);
          }

          public function doRemove():void
          {
               //we set the type of the event we want to dispatch.
               cEvt = new ContactEvent( "onRemoveContact" );
               //We set the customMessage for display
               cEvt.customMessage = "Contact removed successfully!";
               //Finally we dispatch to notice the app one contact was removed
               dispatchEvent(cEvt);
          }

     }
}

Ok, our Custom Classes are ready! In this tutorial, I will use them in Flash CS4 Professional, but you can test them in Flex Builder 3 or Flash Builder as well.
Place two buttons on the stage and set the following Properties:

First button:
Label: Add Contact;
Instance Name: btnAdd.

Second button:
Label: Remove Contact;
Instance Name: btnRemove.

Save the .fla file in the same folder where our Custom Classes reside. Open the Actions Frame panel and write the following code:

var contact:Contact = new Contact();
contact.addEventListener( ContactEvent.ON_ADD_CONTACT, contact_EventHandler );
contact.addEventListener( ContactEvent.ON_REMOVE_CONTACT, contact_EventHandler );

btnAdd.addEventListener( MouseEvent.CLICK, clickEventHandler );
btnRemove.addEventListener( MouseEvent.CLICK, clickEventHandler );

function clickEventHandler( event:MouseEvent ):void
{
     if( event.target.label == "Add Contact" ) {
          contact.doAdd();
     } else {
          contact.doRemove();
     }
}

function contact_EventHandler( event:ContactEvent ):void
{
     trace( event.customMessage );
}

When you run the application and click on the buttons, a specific message is displayed in the output panel depending on the operation dispatched (add or remove).

As you could see working with Custom Events is really easy and fun!

I hope you enjoy this tutorial and it had also been useful, helpful and well-done.

I apologize if I made any mistake in this post. I'm not fluent in English, and it was a good opportunity for practicing my English!

Thanks guys, see you next time!