AS3 Event Handling- part 4

Posted on April 8, 2009


In the previous part we discussed about the event propagation. In this part we will look for creating a custom event class. 

The need of creating a custom event class comes when you have to put your event system more systematic and comprehensive. Let me give one example where you might need to have your won event class where you can define your event names, customize it to get values of the event related objects and use it with simplicity similar to inbuilt event classes. We are going to build a confirmation control box where we will have three buttons with labels ‘”Yes” , “No”, “Cancel”.  We might have other type of utility boxes that have either of these three kind of controls or combination of two or a single control( alert windows). 

For the above example let’s create a small project with flex builder and create a small custom component called ConfirmationBox. Put three buttons labeled as per required. And here is the similar code. that you may write for your self.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="100">
  3.         <mx:Button x="175" y="68" label="Yes" click="yes()"/>
  4.         <mx:Button x="248" y="68" label="No" click="no()"/>
  5.         <mx:Button x="321" y="68" label="Cancel" click="cancel()"/>
  6.         <mx:HRule x="10" y="54" width="380" height="1"/>
  7.         <mx:Text x="31" y="10" text="Are you sure you want to quit?" width="359" height="41" fontSize="17" fontFamily="Arial" fontWeight="bold"/>
  8.         <mx:Script>
  9.                 <![CDATA[
  10.                        
  11.                         private function cancel():void{
  12.                                 //TODO
  13.                         }
  14.                         private function no():void{
  15.                                 //TODO
  16.                         }
  17.                         private function yes():void{
  18.                                 //TODO
  19.                         }
  20.                                                
  21.                 ]]>
  22.         </mx:Script>
  23. </mx:Canvas>

Each button has separate click handlers and we shall write some code so that our component can dispatch some custom event that we are soon going to create. Generally we subclass the already existing flash.events.Event class to readily avail all the basic methods and properties of an event class. Now we shall create a event class called “WindowControlEvent” which will extends Event class of flash.events package. Add three string constants to denote the event names before the constructor. And your class will look like below.

  1. package
  2. {
  3.         import flash.events.Event;
  4.  
  5.         public class WindowControlEvent extends Event
  6.         {
  7.                 public static const YES:String="yes";
  8.                 public static const NO:String="no";
  9.                 public static const CANCEL:String="cancel";
  10.  
  11.                 public function WindowControlEvent(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
  12.                 {
  13.                         //TODO: implement function
  14.                         super(type, bubbles, cancelable);
  15.                 }
  16.  
  17.         }
  18. }

Declaring the constants with uppercase makes it clearer to avoid typing error. We can now attach this event class to some object with addEventListener method. Ex: objectName.addEventListener(WindowControlEvent.YES, eventHandler).That’s it for a very basic custom event class. Now let’s use it.

In the small application that we wrote before lets dispatch the events in the three event handlers.We have to dispatch a new WindowControlEvent and pass the event name (”cancel”, “no” or “yes”) by the constants defined for them.

  1. <mx:Script>
  2.         <![CDATA[
  3.                 public function cancel():void{
  4.                         dispatchEvent(new WindowControlEvent(WindowControlEvent.CANCEL));
  5.                 }
  6.                 public function no():void{
  7.                         dispatchEvent(new WindowControlEvent(WindowControlEvent.NO));
  8.                 }
  9.                 public function yes():void{
  10.                         dispatchEvent(new WindowControlEvent(WindowControlEvent.YES));
  11.                 }
  12.         ]]>
  13. </mx:Script>

Now let’s use this in our application and capture the events.

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*" applicationComplete="init()">
  3.         <local:ConfirmationBox id="confBox">
  4.                
  5.         </local:ConfirmationBox>
  6.         <mx:Script>
  7.                 <![CDATA[
  8.                         import mx.controls.Alert;
  9.                         private function init():void{
  10.                                 confBox.addEventListener(WindowControlEvent.YES, saveAndExit);
  11.                                 confBox.addEventListener(WindowControlEvent.NO, dontSaveAndExit);
  12.                                 confBox.addEventListener(WindowControlEvent.CANCEL, stayBack);
  13.                         }
  14.                        
  15.                         private function stayBack(evt:WindowControlEvent):void{
  16.                                 Alert.show("stayback");
  17.                         }
  18.                        
  19.                         private function dontSaveAndExit(evt:WindowControlEvent):void{
  20.                                 Alert.show("dontSaveAndExit");
  21.                         }
  22.                        
  23.                         private function saveAndExit(evt:WindowControlEvent):void{
  24.                                 Alert.show("saveAndExit");
  25.                         }
  26.                        
  27.                 ]]>
  28.         </mx:Script>
  29. </mx:WindowedApplication>
  30.  

Posted Under AS3, Flex 3.0 »


Comments

One Response to “AS3 Event Handling- part 4”

  1. kulankar on January 21st, 2010 5:38 pm

    its great and simple easy to understand..

    thanks a lot

Leave a Reply