Flex event handling
May 25, 2021 Flex
Table of contents
Flex uses event concepts to pass data from one object to another, depending on the state in the application or user interaction.
ActionScript has a generic Event class that defines most of the features required to handle events. /b10> Each time an event occurs in a Flex application, three types of objects from the Event class hierarchy are created.
Events have three key properties
| Property | Describe |
|---|---|
| type | Type state about what kind of event just happened. /b10> This may be click, initialization, mouse hover, change, etc. A ctual values will be represented by constants such as MouseEvent.CLICK. |
| target | Event's target property is an object reference to the component that generated the event. If you click Button with clickMeButton id, the target of the click event will be ClickMeButton |
| currentTarget | The currentTarget property changes the container hierarchy. /b10> It deals primarily with event flows. |
The event flow stage
Events go through three stages to find the event handler.
|
Property
|
Describe |
|---|---|
| Capture | During the capture phase, the program starts looking for an event handler from the external (or top) parent to the innerst. /b10> The capture phase stops at the parent of the object that triggered the event. |
| Target | During the target phase, the event handler of the component that triggered the event is checked. |
| Bubble | The bubble phase, as opposed to the capture phase, starts with the parent of the target component by structurally reversing. |
Consider the following application code
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%"
minWidth="500" minHeight="500" >
<s:Panel>
<s:Button id="clickMeButton" label="Click Me!" click="doAction( );"/>
</s:Panel>
</s:Application>
When the user clicks a button, he or she also clicks the panel and application. Events look for event handler assignments in three stages.
Let's test event handling in the Flex application by following these steps:
| Steps | Describe |
|---|---|
| 1 | As described in the Flex - Create Applications section, create a project called HelloWorld under package com.tutorialspoint.client. |
| 2 | Modify HelloWorld.mxml, as described below. /b10> Keep the rest of the file unchanged. |
| 3 | Compile and run the application to ensure that the business logic works as required. |
The following is the contents of the modified mxml file src / com.tutorialspoint / HelloWorld.mxml.
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
width="100%" height="100%" minWidth="500" minHeight="500"
>
<fx:Style source="/com/tutorialspoint/client/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 = "Bubbling";
}else if(eventPhaseInt == EventPhase.CAPTURING_PHASE){
eventPhase = "Capturing";
}
reports.text += " Target: " + target + "\n currentTarget: " +
currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
}
]]>
</fx:Script>
<s:BorderContainer width="630" height="480" id="mainContainer"
styleName="container">
<s:VGroup width="100%" height="100%" gap="10"
horizontalAlign="center" verticalAlign="middle">
<s:Label id="lblHeader" text="Event Handling Demonstration"
fontSize="40" color="0x777777" styleName="heading"/>
<s:Panel id="parentPanel" title="Main Parent"
click="reportEvent(event)" width="500"
height="100" includeInLayout="true" visible="true">
<s:layout>
<s:VerticalLayout gap="10"
verticalAlign="middle" horizontalAlign="center"/>
</s:layout>
<s:HGroup id="mainHGroup" click="reportEvent(event)">
<s:Button label="Click Me"
click="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:Application>
When all the changes are ready, let's compile and run the application in normal mode, as in the Flex - Create Application chapter. If all goes well with your application, this will result in the following results:
