Tuesday, June 21, 2011

Events in Flex: User Events

In Flex - there are 2 types of Events - user events and system events. In this tutorial, we'll learn about handling the user events.

Before we start, I'll explain some of the keywords that are associated with events.

Event dispatcher - an object that send the event. For example, if a button sends an Event when it is clicked - the button will be a dispatcher of that event.

Event listener - an object that calls an event handler function once a certain event occurs.

Event handler - the function that is called by the event listener as a result of an event.

A user event is an event that occurs once the user performed an action, for example, clicked a button, or pressed a key on their keyboard. Let's create a simple Flex application with a button and a label. Once the button is clicked - the label's text value is changed, but we will do this in different ways.

The first way to do that is to add the listener and handler inline - as a value of the 'click' property. The code will look like this:

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

<s:VGroup>
<s:Button label="Send event" click="myLabel.text = 'Event handled!';" />
<s:Label id="myLabel" />
</s:VGroup>

</s:Application>

Once the button is pressed - the value of the label is changed. Everything - the event dispatcher, listener and handler - was written in one line.

The resulting swf (click the button):


Another way to handle events, is to tell the listener to call a function, which is defined using AS3 in the fx:Script tags.

<?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 onEvent():void{
myLabel.text = "Event handled!";
}
]]>
</fx:Script>

<s:VGroup>
<s:Button label="Send event" click="onEvent()" />
<s:Label id="myLabel" />
</s:VGroup>

</s:Application>


This way, we can also pass parameters to the function. Look:

<?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 onEvent(txt:String):void{
myLabel.text = "Event handled: " + txt;
}
]]>
</fx:Script>

<s:VGroup>
<s:Button label="Button 1" click="onEvent('Button 1 was pressed')" />
<s:Button label="Button 2" click="onEvent('Button 2 was pressed')" />
<s:Label id="myLabel" />
</s:VGroup>

</s:Application>

This code will result in:


Now, we can send an Event object as a parameter. We can later read properties of this Event object, such as target and type. We will need to import the MouseEvent class, because the event we're using is a MouseEvent 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"
   width="100" height="85">

<fx:Script>
<![CDATA[
import flash.events.MouseEvent;

private function onEvent(event:MouseEvent):void{
myLabel.text = "Event type: " + event.type;
}
]]>
</fx:Script>

<s:VGroup>
<s:Button label="Press me" click="onEvent(event)" />
<s:Label id="myLabel" />
</s:VGroup>

</s:Application>

This will result in:


That's all for today's tutorial.

Thanks for reading!

Related:

Events in Flex: System Events
Events in Flex: addEventListener() in Flex

No comments:

Post a Comment