Wednesday, June 22, 2011

Events in Flex: System Events

In this tutorial we'll learn about system events in Flex.

Last time we've learned about user events, that are dispatched because of an user's action (for example, button click). System events are dispatched by the Flex framework in response for changes in the application, that weren't called by the user. Pretty much every event can be listened to. For example, we can listen to the creation completion of a Group container's content.

The event I described above is called creationComplete, its one of the many events dispatched by Flex components. It is dispatched when a component has been created in the application and both its size and position are known. You should know that containers dispatch this event only after all of their children have done that. This means that if you have a container full of buttons, all the buttons will dispatch creationComplete event one by one, and when that is done, the container itself will dispatch creationComplete.

Let's prove this with a real example.

We will create a text field that will serve us as an output field, and we will be notified of all the creationComplete events using this text field. We will make a function that updates the text field, and call this function every time when a component dispatches a creationComplete event.

<?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">

<fx:Script>
<![CDATA[
private function addText(txt:String):void{
myField.text += txt + "\n"
}
]]>
</fx:Script>

<s:TextArea height="100" id="myField" />

<s:VGroup y="120" creationComplete="addText('VGroup created')">
<s:Button label="Button" creationComplete="addText('Button created')" />
<s:Label text="Label" creationComplete="addText('Label created')"/>
</s:VGroup>

</s:Application>

If you test the code above, the output text field will report you the following texts in this sequence:

Button created
Label created
VGroup created

As you can see, even though we declare the VGroup before Button and Label, it only dispatches creationComplete event once all its children have done that.

CreationComplete is one of the most common system events that is used in Flex, but there are others. In general, system events are mostly used to tell when a component is created, removed, resized, etc.

That's all for today's tutorial.

Thanks for reading!

Related:

Events in Flex: User Events
Events in Flex: addEventListener() in Flex

No comments:

Post a Comment