Solution Hacker

There are different kinds of events in the Flex world. An event can be generated from user gesture, return of requests and component lifecycle. Use event is a two step process, (1) You need to write the handler (2) You need to register the handler to the event hook. To register event, there are two different ways:

Inline MXML way:

<mx:Button id=”myButton” click=”myhandler(event)”/>

Actionscript way:

myButton.addEventListener(MouseEvent.CLICK, myhandler);

The code above does the same job.  However, addEventListener provides more advanced control like event propagation and event priority. Event in Flex can be dispatched implicitly (user clicks on a button, the event is dispatched by the system) and explicitly (you can programmatically trigger an event).

Event propagation is an important topic for Flex programming. So, I will try to talk about what I have known on this topic here. Feel free to correct me if I am wrong. As I know, event propagation has three phases. They are capturing, at target, and bubbling. If you have an Application A contains a VBox B that has a Button C. When an user clicks the Button C, it first goes through “capturing phase”. In this phase, the event propagation through the topmost parent of C (ie. stage) and continue walk down the display object hierarchy until it reaches the original target (ie. C). The path for capturing phase is stage -> root -> A -> B -> C. When the event reaches C, the “at target phase” will be started and it just involves one object (ie. C). After that, the event bubbles up following the reverse path of the capturing phase and walk its way back up to root (C -> B -> A -> root -> stage). This is called “bubbling phase”.

As the event makes its way though each phase and each object within those phases, it calls all of the listener functions that were added for that event. This means that clicking on the Button C doesn’t limit the event to C, A and B also receive the event. Actually, they receive the event twice, once in the capturing phase and once in the bubbling phase.

However, by default, listener cannot receive event in capturing phase because the capability is turned off. To enable it, we need to set “true” to the third parameter in “addEventListener”, the “useCapture” parameter. If you don’t do that, listener would just listen to event in the “at target” or “bubbling” phase. However, it is an exclusion setting. Once you set the “useCapture” to true, it will not receive event in other phases. To get around this, you need to use “addEventListener” twice, once with “useCapture” set to false (or omitted) and once with “useCapture” set to true.  On the other hand, any listener along the path can stop the event propagation.

In the Event object, the “target” attributed is the component where the event originated (ie. C in this example) whereas “currentTarget” attribute is the component that event currently reaches. So, this attribute’s value will be changed along the propagation path. Apart from these two properties, Event object also contains properties like type (String), eventPhase (int), bubbles (boolean), and cancelable (boolean).

Have you ever used [Bindable] in Flex? Do you know it is metatag? Apart from this, there are 12 more documented metatag in Flex framework. I will list them all out here for your reference:

ArrayElementType
Data type restriction like Java Generic

[ArrayElementType("String")]
public var arrayOfStrings:Array;

Bindable
Allows for easy data synchronization within the components. Bindable can be used to bind simple data, classes, complex data, functions and event. I will talk about this metatag in more detail later.

[Bindable]
[Bindable(event="eventname")]

DefaultProperty
The DefaultProperty metadata tag is used to set a single property as a default property of a class. The 3 label controls are equivalent with “text” defined as default property in the component, so you don’t need to put <text> tag around it.

<mx:label text=”Hello”></mx:label>
<mx:label>
<mx:text>Hello</mx:text>
</mx:label>
<mx:label>Hello</mx:label>

Embed
The Embed metadata tag is used to import images into your application. There are two ways to use Embed. You can either embed the image in ActionScript and assign it to a variable. Button 1 and 2 below do the same.

[Embed(source="myIcon.gif")]
[Bindable]
public var myIcon:Class;

<mx:Button label=”Icon Button 1″ icon=”{myIcon}”/>
<mx:Button label=”Icon Button 2″ icon=”@Embed(source=’myIcon.gif’)”/>

Event
The Event metadata tag is used to declare events that will be dispatched by your custom class. Adding this metadata tag to your class definition allows you to add an event handler function to the MXML tag used to instantiate your custom class. You insert the [Event] metadata tag before the class definition in an ActionScript file, or in the <mx:Metadata> block in an MXML file.

In Actionscript:
[Event(name="myClickEvent", type="flash.events.Event")]

In MXML:
<?xml version=”1.0″?>
<mx:TextArea xmlns:mx=”http://www.adobe.com/2006/mxml”>
<mx:Metadata>
[Event(name="myEnableEvent", type="flash.events.Event")]
</mx:Metadata>
….
</mx:TextArea>

Effect
The Effect metadata tag is used to define a custom effect that will be dispatched when an event occurs. An effect is paired with a trigger that invokes the effect. A trigger is an event, such as a mouse click on a component, a component getting focus, or a component becoming visible. An effect is a visible or audible change to the component that occurs over a period of time. You insert the [Effect] metadata tag before the class definition in an ActionScript file, or in the <mx:Metadata> block in an MXML file. Same as Event syntax above.

[Effect(name="darkenEffect", event="darken")]

IconFile
IconFile is used to identify the filename of a jpg, gif, or png file that will be used as the icon for your custom class. While the [Embed] meta tag can be used to embed images files, SWF files, music files, video files, etc, IconFile is only used to embed a file that will be used as the icon for the custom class.

[IconFile("icon.png")]
public class CustomButton extends Button
{}

Inspectable
The Inspectable metadata tag is used to define the attributes of your custom component that you would like to display in the code hints and property inspector of Flex Builder 2.

InstanceType
The [InstanceType] metadata tag specifies the allowed data type of a property. Example below shows that you can only assign instance data type “mx.controls.Label” to variable topRow of type IDeferredInstance.

[InstanceType("mx.controls.Label")]
public var topRow:IDeferredInstance;

NonCommittingChangeEvent
TBA

RemoteClass
TBA

Style
The Style metadata tag is used to define custom style properties for your components. Simply add the Style metadata tag or tags to your class definition and then use the getStyle method to retrieve its value. I will talk about this metatag in more detail later.