Flex 3: Dispatch custom event

In this tutorial, I will walk through the Custom Even handling in Flex 3. Like Flex 3 inbuilt events, you can dispatch your custom event from the custom component. To do this we need to create an Custom Event class inherited from Flex based Event class. After this you can dispatch this custom event from your component or class using dispatch event function. Even you can add this event inline to your custom component tag in mxml file. To get the inline event property we need to set Metadata for the custom Event in component mxml.

In this tutorial, we will create an application which will have login form. And on login we will dispatch the custom LOGIN Event. To complete this application it will need to create following files.

• Login.mxml


• LoginEvent.as


• Main.mxml

To start with, we will create an flex application in Flex Builder. While creating the project give your main mxml application file name as Main.mxml

Next, we will create the Login component, which will have the simple login form. This form will have two elements as, User Id: and Password:. To create this mxml component first we will set the folder structure to allocate the respective files. We will keep Component within src.view.components folder, and custom events within src.event folder.

First create these folders in src folder as show in the below image.



Now we are ready with packages, Next we will create the MXML Component named Login.mxml within the src.view.components folder. This Login.mxml will be based on Panel with no default width and height.

Replace following code to complete the Login Form.

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" title="Login" width="302" height="152">
 <mx:Form width="100%">
         <mx:FormItem label="User ID">
            <mx:TextInput id="userid" />
         </mx:FormItem>
         <mx:FormItem label="Password">
            <mx:TextInput id="password" displayAsPassword="true" />
         </mx:FormItem>
         <mx:FormItem>
            <mx:Button id="btnLogin" label="Login"  click="loginHandler()"/>
         </mx:FormItem>
      </mx:Form>
</mx:Panel>

In above code snippet, we have created the simple login Form containing two input field, User Id and Password respectively and one Login button.

We need to dispatch custom Login Event on Login Button click, For this first we have to create LoginEvent class.
Create LoginEvent class within src.events package. Make sure you extend this class to flex inbuilt Event class. There are few things we need to follow to create custom event.

You are require to override the Event.clone() method. This method will return the clone reference of your custom event i.e. LoginEvent.
You can create your custom properties that are required by the custom event. In our example LoginEvent will need to have userId and passWord.

In LoginEvent class add following code snippet to complete the CustomEvent class.

package events
{
 import flash.events.Event;

 public class LoginEvent extends Event
 {
  public static const LOGIN:String = 'login';
  
  public var userId:String = '';
  public var password:String = '';
  
  public function LoginEvent(type:String, userId:String, password:String, bubbles:Boolean=false, cancelable:Boolean=false)
  {
   super(type, bubbles, cancelable);
   
   this.userId = userId;
   this.password = password;
  }
  
  override public function clone():Event {
            return new LoginEvent(type, userId, password);
        }  
 }
}

In the above code snippet, We have created the static const for event type, this we will use when we will dispatch or add event. Also we have created the two public properties userId and password, which we will send along with event when we dispatch this event.

Now we are ready with LoginEvent class, next we have to dispatch this event when user clicks on the Login button from the Login.mxml. Open Login.mxml file and add click handler function for Login button. In this function we will dispatch the LoginEvent along with userId and password property. Add this function in your Script tag within Login.mxml as shown below.

 <mx:Script>
  <![CDATA[
   import events.LoginEvent;
   private function loginHandler():void
   {
    this.dispatchEvent(new LoginEvent(LoginEvent.LOGIN),userid.text, password.text)
   }
  ]]>
 </mx:Script>
 

If you noticed in above code, we have dispatch the LoginEvent on loginHandler function. We are ready with custom login component which will dispatch the Login event. But to add this custom login Event inline to the Login tag we need to se the metadata in Login.mxml. To do this add following code just above the Script tag.

<mx:Metadata>
 [Event(name="login", type="events.LoginEvent")]
</mx:Metadata>

Remember you the name what we have mention in the name property above will be used in the Login tag as inline event property.

Now your complete Login.mxml will look like as below.

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" title="Login" width="302" height="152">
 <mx:Metadata>
  [Event(name="login", type="events.LoginEvent")]
 </mx:Metadata>
 <mx:Script>
  <![CDATA[
   import events.LoginEvent;
   private function loginHandler():void
   {
    this.dispatchEvent(new LoginEvent(LoginEvent.LOGIN),userid.text, password.text)
   }
  ]]>
 </mx:Script>
 <mx:Form width="100%">
         <mx:FormItem label="User ID">
            <mx:TextInput id="userid" />
         </mx:FormItem>
         <mx:FormItem label="Password">
            <mx:TextInput id="password" displayAsPassword="true" />
         </mx:FormItem>
         <mx:FormItem>
            <mx:Button id="btnLogin" label="Login"  click="loginHandler()"/>
         </mx:FormItem>
      </mx:Form>
</mx:Panel>

Now we will add this custom component in the Main.mxml file and we will check whether we are getting the LOGIN event from Login.mxml component. To do so add following code in your Main.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application layout="vertical" 
 xmlns:mx="http://www.adobe.com/2006/mxml"
 xmlns:components="view.components.*">
 <mx:Script>
  <![CDATA[
   import mx.controls.Alert;
   import events.LoginEvent;
   
   private function loginHandler(event:LoginEvent):void
   {
    Alert.show('Loign Event Handled Successfully for user id '+event.userId);
   }
  ]]>
 </mx:Script>
 <components:Login login="loginHandler(event)"/>
</mx:Application>

If you notice in above code, we have added custom Loign component. And if you see the namespace for Login tag is components. We have added metadata for login event in Login.mxml and that we have used inline to the <components:Login> tag.

This is how we can use the Custom component in Flex.

I hope this will help.

View Demo here.