Popa Mihai

This post is part of a series of articles in which I will try to explain in detail how events work in Flex, how you can handle Flex events, how you can create your custom Flex events and more.

In the previous article I talked about Flex custom events. We created a new custom event:

	var eventToBeDispatched:Event = new Event('yourCustomEvent');

Then we dispatched the event to the parent component.

	dispatchEvent(eventToBeDispatched);

The event was registered to the Flex Framework between metadata tags:

	<fx:metadata>
		[Event(name="yourCustomEvent", type="flash.events.Event")]
	</fx:metadata>

So we used mxml register the event handler to the custom event:

	<components:lowerhalf yourCustomEvent="lowerhalf1_yourCustomEventHandler(event)"></components:lowerhalf>

The handler function lowerhalf1_yourCustomEventHandler(event) just displayed a random number a label.

Although this approach allows for using a custom event type it has a major drawback: we can’t pass any custom data along with the event object. This is due to the fact that the flash.events.Event class doesn’t support additional properties.
Read the rest of this entry »

This post is part of a series of articles in which I will try to explain in detail how events work in Flex, how you can handle Flex events, how you can create your custom Flex events and more.

By now in this series of articles we’ve seen how you can handle system or user events. Now it’s time to learn how you can create custom events and how to dispatch them programatically.

To create a custom event you need to follow four steps:

1. you first define the name and the type of your custom event using the [Event] directive inside Metadata tags
2. you create a handler for the system or user event that will be used as a triggered for your custom event
3. you create a new Event variable and you instantiate this event with your custom event
4. and then you dispatch your custom event

Read the rest of this entry »

This post is part of a series of articles in which I will try to explain in detail how events work in Flex, how you can handle Flex events, how you can create your custom Flex events and more.

Besides registering event handlers directly with mxml tags, you can also use the addEventListener() method to register events. Sometimes your components are created at run time so the mxml tags are not available to register the event handlers. In this case you would need to use the addEventListener() method to register the events. Also, if you plan to add and then remove event listeners for your components dynamically you have to do that programmatically with the addEventListener() method and the removeEventListener() method.

The addEventListener() method receives two parameters and has this signature:

public function addEventListener(type:String, listener:Function);
Read the rest of this entry »

This post is part of a series of articles in which I will try to explain in detail how events work in Flex, how you can handle Flex events, how you can create your custom Flex events and more.

When you handle the event from a parent container, and not from the actual dispatching object you want to be able to make the difference between

1. the target object – the one that actually dispatched the event in the first place
2. the container that handles that event

The event object has two properties that can be used to determine the target object and the current target – the container that currently handles the event. These are target and currentTarget

In the previous post I talked about the event propagation phases in Flex and I said that events in Flex can be handled both on the target object – the dispatching object – or on any of it’s parent containers.

I will use the same example from the previous article with minor changes to the event handler function:
Read the rest of this entry »

This post is part of a series of articles in which I will try to explain in detail how events work in Flex, how you can handle Flex events, how you can create your custom Flex events and more.

There are 3 phases in Flex events propagation:

• First phase: capturing phase
• Second phase: targeting phase
• Third phase: bubbling phase

I will use the following example through out this post:
Read the rest of this entry »

This post is part of a series of articles in which I will try to explain in detail how events work in Flex, how you can handle Flex events, how you can create your custom Flex events and more.

In my last article I talked about handling Flex events inline and I said that event thought this is the fastest an easiest way to handle events it is not recommended to use that method.

A much better way to handle Flex events is by using ActionScript functions. Instead of writing your ActionScript commands inline you use a function for the job. With this method you ensure that you keep your code clean and with minor changes you can reuse the function to handle events coming from similar components.

This is how the application would change to use an ActionScript function instead on inline ActionScript:

First we use the buttonClicked(event) function as an event handler and then move everything Alert inside the body function. This will lead to exactly the functionality as the example in which inline ActionScript is used.

Read the rest of this entry »

This post is part of a series of articles in which I will try to explain in detail how events work in Flex, how you can handle Flex events, how you can create your custom Flex events and more.

The easiest way to handle events in Flex is to directly write ActionScript inline in the MXML tags. In the following example I am adding an inline event handler for the click event of a button. When the click event occurs the ActionScript that I associated with the event is executed: an alert with the text The button was clicked will be created.

click=”Alert.show(‘The button was clicked’)”

Read the rest of this entry »

This is the first article in a series of posts in which I will try to explain in detail how events work in Flex, how you can handle Flex events, how you can create your custom Flex events and more.

Flex is an event driven framework which means that pretty much everything that happens in the Flex framework is a consequence of an event being dispatched. Therefore understanding how Flex events work and how you can create your own custom Flex events is crucial. There are two types of Flex events:

• System events like the creationComplete event, or the initialize event, which are generated by the framework
• User initiated events like the click event or the rollOver event, which are fired as a consequence to user interaction with the application

These are the topics that I plan to cover in this series of articles about Flex events:

• Handling Flex Events Inline
• Handling Flex Events with ActionScript
• Event Propagation: Capturing Phase, Targeting Phase and Bubbling Phase
• Differences between the event.target and event.currentTarget
• Using the addEventListener() method to register events
• A step-by-step guide to creating your first custom Flex event
• Creating a Custom Flex Event by Extending the flash.events.Event Class

I will be using Flex 4 to the examples in the articles.