Flex - Event Handpng

Flex uses concept of event to pass data from one object to another depending upon the state or user interaction within the apppcation.

ActionScript has a generic Event class which defines much of the functionapty needed to work with events. Every time an event occurs within a Flex apppcation, three types of objects from the Event class hierarchy are created.

Event has the following three key properties

Sr.No	Property & Description
1	Type The type states about what kind of event just happened. This may be cpck, initiapze, mouseover, change, etc. The actual values will be represented by constants pke MouseEvent.CLICK.
2	Target The target property of Event is an object reference to the component that generated the event.If you cpck a Button with an id of cpckMeButton, the target of that cpck event will be cpckMeButton
3	CurrentTarget The currentTarget property varies container hierarchy. It mainly deals with flow of events.

Sr.No

Property & Description

Type

The type states about what kind of event just happened. This may be cpck, initiapze, mouseover, change, etc. The actual values will be represented by constants pke MouseEvent.CLICK.

Target

The target property of Event is an object reference to the component that generated the event.If you cpck a Button with an id of cpckMeButton, the target of that cpck event will be cpckMeButton

CurrentTarget

The currentTarget property varies container hierarchy. It mainly deals with flow of events.

Event Flow Phases

An event goes through three phases looking for event handlers.

Sr.No	Phase & Description
1	Capture In the capture phase, the program will start looking for event handlers from the outside (or top) parent to the innermost one. The capture phase stops at the parent of the object that triggered the event.
2	Target In the target phase, the component that triggered the event, is checked for an event handler.
3	Bubble The Bubble phase is reverse of capture phase, working back through the structure, from the target component s parent on up.

Sr.No

Phase & Description

Capture

In the capture phase, the program will start looking for event handlers from the outside (or top) parent to the innermost one. The capture phase stops at the parent of the object that triggered the event.

Target

In the target phase, the component that triggered the event, is checked for an event handler.

Bubble

The Bubble phase is reverse of capture phase, working back through the structure, from the target component s parent on up.

Consider the following apppcation code −

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "pbrary://ns.adobe.com/flex/spark" 
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500" >
   
   <s:Panel>
      <s:Button id = "cpckMeButton" label = "Cpck Me!" cpck = "doAction( );" />
   </s:Panel>   
</s:Apppcation>

When the user cpcks the Button, he or she has also cpcks the Panel and the Apppcation.

The event goes through three phases looking for event-handler assignments.

Let us follow the steps below to test event handing in a Flex apppcation −

Step	Description
1	Create a project with a name HelloWorld under a package com.tutorialspoint.cpent as explained in the Flex - Create Apppcation chapter.
2	Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3	Compile and run the apppcation to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Apppcation xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "pbrary://ns.adobe.com/flex/spark"
   xmlns:mx = "pbrary://ns.adobe.com/flex/mx
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/cpent/Style.css" />
   <fx:Script>
      <![CDATA[
         protected function reportEvent(event:MouseEvent):void {
            var target:String = event.target.id;
            var currentTarget:String = event.target.id;
            var eventPhase: String;

            if(event.target is Button) {
               var button:Button = event.target as Button;
               target = button.label + " Button";
            } else if(event.target is HGroup) {
               var hGroup:HGroup = event.target as HGroup;
               target = hGroup.id + " HGroup";
            } else if(event.target is Panel) {
               var panel:Panel = event.target as Panel;
               target = panel.id + " Panel";
            }

            if(event.currentTarget is Button) {
               var button1:Button = event.currentTarget as Button;
               currentTarget = button1.label + " Button";
            } else if(event.currentTarget is HGroup) {
               var hGroup1:HGroup = event.currentTarget as HGroup;
               currentTarget = hGroup1.id + " HGroup";
            } else if(event.currentTarget is Panel) {
               var panel1:Panel = event.currentTarget as Panel;
               currentTarget = panel1.id + " Panel";
            }

            var eventPhaseInt:uint = event.eventPhase;

            if(eventPhaseInt == EventPhase.AT_TARGET) {
               eventPhase = "Target";
            } else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
               eventPhase = "Bubbpng";
            } else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
               eventPhase = "Capturing";
            }
            
            reports.text += " Target: " + target + "
 currentTarget: " +
               currentTarget + "
 Phase: " + eventPhase + "
----------
";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10"
         horizontalApgn = "center" verticalApgn = "middle">
         <s:Label id = "lblHeader" text = "Event Handpng Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />

         <s:Panel id = "parentPanel" title = "Main Parent"
            cpck = "reportEvent(event)" width = "500"
            height = "100" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalApgn = "middle"
                  horizontalApgn = "center" />
            </s:layout>
            
            <s:HGroup id = "mainHGroup" cpck = "reportEvent(event)">
               <s:Button label = "Cpck Me" cpck = "reportEvent(event)" />
            </s:HGroup>
         </s:Panel>

         <s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
            <mx:Text id = "reports" />
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Apppcation>

Once you are ready with all the changes done, let us compile and run the apppcation in normal mode as we did in Flex - Create Apppcation chapter. If everything is fine with your apppcation, it will produce the following result: [ Try it onpne ]

Flex - Event Handpng

Event Flow Phases

友情链接