Join David Gassner for an in-depth discussion in this video Handling dispatched events, part of Flash Builder 4 and Flex 4 Essential Training.
The Flex 4 development environment is event-oriented; that is, you typically execute ActionScript code in reaction to events that are dispatched by the application platform and your specific application code. For all the demonstrations in this chapter where I will talk about the event architecture in Flex, I'll use a project that's included with the Exercise Files. If you have access to the Exercise Files, import the project now. Choose File > Import Flex Project from the menu. Click the Browse button next to File and navigate to the Exercise Files folder 06_Events, begin.
From there, select and import the file Events.fxp. Then open the Project, open its src folder, open the (default package) and open the application file EventLogger.mxml. This is a completed application that presents a Text control and a couple of buttons. The first button is going to be used to demonstrate different kinds of events that are dispatched by Flex controls. As each event is dispatched, the application handles the event and logs it by registering it in this TextArea control.
When the user clicks the second button, labeled Clear Event Log, the TextArea control is cleared, so you can wipe out your event log and start over. Now, I am not going to talk too much right now about how this application is built. I'll show you how to build the sort of application in other videos of the chapter. I'll just go ahead and run the application. As the application starts up, the Button control dispatches three events. Every Visual control in the Flex SDK dispatches these events during its construction cycle. These are sometimes called life cycle events, and they happen with every control in the SDK.
As a Visual Control is constructed, upon application startup or when it's first used in an application, it dispatches these three events: preinitialize, initialize and CreationComplete. They tell you, the developer, the stage of construction that that control is at. The preinitialized event tells you that the control has been read and constructed in memory, but is not at a state where you could present it on the screen. The initialize event tells you that the control not only has been read into memory, but also all of its properties and styles have been read into place.
Finally, the CreationComplete event tells you that the control is completely ready for use in the application. These events always occur in the same order, and again, they're called life cycle events. Every component in your application dispatches these events, including the application itself. One useful thing to know about the application's events is that events always happen after the nested components events. So, for example, if you have a button inside a container, which is inside an application, The button's CreationComplete event would happen first, then the containers, and finally, the application's.
So, when you get an application CreationComplete event, that means that the entire application is ready for use. Now here is some other events that I am listening for and handling on this Event Dispatcher button. I am going to move the cursor over the button, and you'll see in the EventLogger that two events occur called rollOver and mouseOver. The mouseOver event is called a raw mouse event. It tells you the physical aspect of what happened, that the user move the cursor over an object. The rollOver event is more of a logical event.
It doesn't happen on all of the Visual controls in the Flex library, although it happens on most. Typically, if you want to react to the mouse moving over an object, you use the rollOver event. When I move the cursor off of that button, I get mouseOut and a rollOut event. Now I'm going to clear the event log and start over. I'll move the cursor over the Event Dispatcher button again. I'll click down with the mouse button, and you'll see two events occur, mouseDown and buttonDown. Now, keeping the mouse button pressed, I'll move the cursor off the button, and you'll see events named mouseOut and rollOut.
Now I'll clear the event log again and show you another sequence. I'll move the cursor over the button, click down. Once again, I get mouseDown and a buttonDown. And then I will release the mouse button without moving the cursor off the object, and I get a mouseUp and a click event. The click event is one of the most commonly used events for Button controls. It tells you that the user clicked down on the button and released the button while keeping the cursor over the Button object. There are many other events that happened during the sequence, but you don't have to react to all of them.
So, how do you find out which event a particular object dispatches? As with all such code, you start with the documentation. I'll look at the application in Source mode and show you how the events are being handled. Each of the events that I am handling is represented by an attribute in the Button tag, so there's preinitialize, initialize, CreationComplete and so on. In Flex, there is isn't a single universal event handler. You have to listen for each event you're interested in individually. But for each of those events, I am calling a single global function, called eventHandler.
This function is defined up here, at lines 8 to 11. It has a single line of code, which is writing information about the event to the TextArea, which has an ID of Event Log. I am capturing the name of the event, which is expressed with this syntax event.type and then appending a line feed to the end of the line with the syntax \n. I'll talk about each element of this syntax in other videos, but for now, I just want to show you how to find out which events a particular component can dispatch.
I'll go to the Button tag. This is the button that was dispatching all of those events that I was handling and logging. I'll press Shift+F2 to go to the documentation. When the Adobe Help application opens and shows me the API Documentation for the button class, I first maximize it so I can see it in fullscreen mode. Then in the list of the links, I'll click on Events. In the Events section, you'll see a link labeled Show Inherited Events. The Spark Button component, which is the component I'm looking at here, doesn't have any of its own events.
Instead, it inherits them from all its superclasses. Here, for example, is the click event, which is defined in an object called InteractiveObject. To find out more about the click event, click into the link, and you'll see all sorts of information about the nature of that event. To go back to the original documentation for the Button, click the back button. So, these are all the events that the button control is capable of dispatching. Wherever you see an event name that is shown with the Adobe AIR Icon, such as contextmenu, that means that this is an event that can only occur in a native desktop application that's deployed with Adobe AIR.
But otherwise, all of these events can be dispatched by the Button control, and you can listen for them in a variety of ways. So in other videos in this chapter, I'll show you a variety of approaches for listening to and handling these events using both MXML and ActionScript code.
- Understanding the history of Adobe Flex
- Installing the Flash Builder components
- Using Eclipse views and editors
- Programming with MXML and integrating MXML and ActionScript
- Debugging Flex applications
- Adding visual controls to a Flex application interface
- Displaying images and dynamic data
- Formatting with CSS
- Skinning Spark components with MXML graphics
- Creating data entry form components
- Integrating with Apache, PHP and MySQL
Skill Level Beginner
Q: After importing the Debugging.fxp file following the steps outlined in the “Importing and exporting projects as FXP files” video, several of the applications will not run.
When I attempt to debug or run the Variables.mxml or Watchpoints.mxml applications, I am unsuccessful. Pressing F11 to debug causes Flex to look for an application it CAN run, and runs that one. If I Right-Click one of the aforementioned applications and then click Run Application, an error appears that says “This file cannot be launched.”
What is causing this problem?
A: This is a common issue with Flash Builder. Before pressing F11 (or right-clicking and choosing Run Application), set the current MXML application file as the "default" by right-clicking it and choosing "Set as default application".
This should ensure that the application you want to preview opens in the browser when you press F11.
Q: When trying to specify the fontStyle as italic in both ways described in the first and second videos of the “Using Cascading Style Sheets (CSS)” chapter, only the literal string "italic" seems to work. If I use the constant for the same value like this:
I get a warning that reads:
"Design mode: Error during component layout. Choose Design > Refresh to refresh design mode."
Even if I try to refresh, design mode will not work until I change it back to the literal string. I made sure the import for this namespace was there by pressing Ctrl+spacebar, refreshed design mode several times, and even restarted Flash Builder. However, the only solution seems to be to use the literal. Is there a fix for this?
A: The use of constants and bindings in MXML style attributes results in unpredictable results in Design View, as evidenced by this error. Unfortunately, the best you can expect is that design view will render the presentation, but won't show the results of the style setting, because Design View isn't capable of evaluating MXML bindings without the benefit of Flash Player's runtime capabilities.
Q: Is Flash Builder compatible with Mac OS X 10.7 (Lion)?