Flex Custom Events - Part I

This is one of those areas that a lot of Flex developers I've talked to tend to avoid. The idea behind a custom event is that you create them inside your components so that you can broadcast the event up to the main application file of your Flex app. Why? The main reason is so that you can de-couple your components by putting the event-handling logic somewhere outside of the component. This makes your component easier to test and more re-usable. Finally, it is one way to implement a Front Controller/Command pattern (more on that in a future post).

Creating a custom event and then broadcasting it requires several steps. Read more...

Step 1: In the component, declare the name (type) of the custom event:

Notice that you can call your event whatever you want, though you cannot override an event already defined in the Flex API. So instead of an event called "click", your application can respond to something more indicative like "addProduct" or "registerUser".

Step 2: In response to some user event, like a button click, call a function that creates the object and then dispatches it. Note that we're still inside the component at this point.

Step 3: In the parent of the component, add the event listener to the invocation of the custom component.

Step 4: Write the custom event handler in the parent component. In this case the handler would look something like this:

In a later post I'll describe a slightly more in-depth example, whereby you can add a data payload to the event before broadcasting it.