1. Tom Link CTO, Universal Mind
Flex 2.0 Event Model – 202
Tom Link
CTO, Universal Mind
CFUNITED – The premier ColdFusion conference

2. About Me CTO, Universal Mind (UM) Lead UM’s Flex Consulting Practice
Certifications
Advanced CF
Flex Trainer
5 years at Adobe/Macromedia
Worldwide Professional Services
Flex Support / Enablement Services
June 28th – July 1st 2006

3. Objectives I. Why Events? II. Using Events in existing Flex components
III. About the Event object
IV. Using Events in your own custom Flex components
June 28th – July 1st 2006

4. I. Why Events. II. Using Events in existing Flex. components III
I. Why Events? II. Using Events in existing Flex components III. About the Event object IV. Using Events in your own custom Flex components
June 28th – July 1st 2006

5. What are Events?
Events are a mechanism or “hook” for letting a developer know that “something happened” in an application
For example
The user clicked the mouse
Data was returned from a CF request
The user added an item to their cart
June 28th – July 1st 2006

6. Where are Events in CF?
With “traditional” HTML applications, each page request equates to an event
<a href=“/addItem.cfm?id=3”>Add Item</a>
The app “responds to the event” by producing a new HTML page.
June 28th – July 1st 2006

7. Why Events in Flex A Flex application “lives” on the client
Many user interactions w/o server intervention
Richer client-side communication is required.
Since HTML based apps aren’t built in this fashion, the concept of Events are can be new (and conceptually a hurdle) for many CF developers.
June 28th – July 1st 2006

8. Quick aside: CF has Events too
CF has “grown up” to include events
Application events handled via Application.cfc
Application start/end, Session start/end
Event Gateways receive events from non-web based apps/devices
“I’ve received an SMS”
June 28th – July 1st 2006

9. I. Why Events. II. Using Events in existing Flex. components III
I. Why Events? II. Using Events in existing Flex components III. About the Event object IV. Using Events in your own custom Flex components
June 28th – July 1st 2006

10. Event terminology
Developers use event handlers to handle events that are dispatched by components.
June 28th – July 1st 2006

11. Using Events Using events is a 2-step process
Write a function (event handler) to respond to an Event
Register that function as a recipient of a particular Event
June 28th – July 1st 2006

12. Using Events – step 1
Write a function (event handler) to response to an Event
function onClick(e:Event):void {
Alert.show(“Button Clicked”); }
June 28th – July 1st 2006

13. Using Events – step 2
Register that function as a recipient of a particular Event
Option #1: MXML / inline
<mx:Button id=“myButton” click=“onClick(event)” />
Option #2: AS / addEventListener
myButton.addEventListener(MouseEvent.CLICK, onButtonClick);
June 28th – July 1st 2006

14. Demo: Handling an event (inline syntax)
<mx:Button id=“myButton” click=“onClick(event)” />
<mx:Script>
function onClick(e:Event):void {
Alert.show(“Button Clicked”); }
</mx:Script>
See code samples…
June 28th – July 1st 2006

15. Demo: Handling an event (addEventListener syntax)
<mx:Button id=“myButton”/>
<mx:Script>
public function onInitialize():void {
myButton.addEventListener(MouseEvent.CLICK, onButtonClick); }
function onClick(e:Event):void
Alert.show(“Button Clicked”);
</mx:Script>
See code samples…
June 28th – July 1st 2006

16. Why Use AddEventListener
In some cases, just personal preference
MVC: Separation of view from controller
Provides more advanced control of event handling
Event Propagation
Event Priority
June 28th – July 1st 2006

17. Event Propagation Who can listen for an Event?
The dispatcher
Any ancestor
When an event is dispatched, Flex has a process to find listeners and their order…
June 28th – July 1st 2006

18. Event Propagation Phases
Capturing: root ancestor to direct ancestor
Application -> VBox -> TitleWindow
Targeting: dispatcher
Button
Bubbling: direct ancestor to root ancestor
TitleWindow -> VBox -> Application
June 28th – July 1st 2006

19. Event Propagation Capture phase is “off” by default
Enabled as an arg to addEventListener
Any listener can stop propagation
To participate in capture and bubble phases, a component needs two separate event listeners
We won’t use propagation in our demo
June 28th – July 1st 2006

20. Events Documentation
Each event available for a component is documented in the Flex MXML API
June 28th – July 1st 2006

21. I. Why Events. II. Using Events in existing Flex. components III
I. Why Events? II. Using Events in existing Flex components III. About the Event object IV. Using Events in your own custom Flex components
June 28th – July 1st 2006

22. Events pass objects
When an Event is dispatched, an Event object is created
All Event objects contain properties:
type: the name of the event
target: a reference to the component that dispatched the event
Some Events pass additional properties related to a specific Event type
June 28th – July 1st 2006

23. Demo: Handling Event w/ Event Object
<mx:Button label=“red” click=“onClick(event)”/>
<mx:Button label=“green” click=“onClick(event)”/>
<mx:Script>
function onClick(e:Event):void {
Alert.show(e.target.label); }
</mx:Script>
See code samples…
June 28th – July 1st 2006

24. Event object datatype
Every event is an instance of the flash.event.Events class
Some events subclass the Events class to provide additional properties
MouseEvent
DragDropEvent
June 28th – July 1st 2006

25. Demo: Subclassed Event
import flash.events.MouseEvent;
onClick(event:MouseEvent):void {
Alert.show("localX: "+event.localX); }
MouseEvent class is a subclass of Event
localX is a property of the MouseEvent class
See code samples…
June 28th – July 1st 2006

26. DispatchEvent Developers can programmatically dispatch Events
Existing Flex UI components/Events
myButton.dispatchEvent
(new Event(MouseEvent.CLICK));
Developer custom components/Events
Well cover this shortly…
June 28th – July 1st 2006

27. Demo: DispatchEvent
<mx:Button id="myButton" click="onButtonClick(event)"/>
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import flash.events.MouseEvent;
public function onInitialize():void {
myButton.dispatchEvent(newMouseEvent(MouseEvent.CLICK)); }
public function onButtonClick(event:MouseEvent):void
mx.controls.Alert.show("Button Clicked");
]]>
</mx:Script>
See code samples…
June 28th – July 1st 2006

28. I. Why Events. II. Using Events in existing Flex. components III
I. Why Events? II. Using Events in existing Flex components III. About the Event object IV. Using Events in your own custom Flex components
June 28th – July 1st 2006

29. Why Custom Components Same reasons as CF Similar constructs to CF
Improved Reusability
Easier Maintenance
Ability to “black box” complexities
Similar constructs to CF
customtags, CFCs
June 28th – July 1st 2006

30. Demo: Custom Components
Solution in monolithic app
Solution broken into components
See code samples…
June 28th – July 1st 2006

31. Inter-component communication
When we organize our application into components…
How do we pass data between components or notify them that “something happened?”
June 28th – July 1st 2006

32. Method 1 Reference custom component and it’s children
myComponent.myDatagrid.selectedIndex
comp.compChild.firstName.text
June 28th – July 1st 2006

33. Method 1 (cont’d) What’s wrong with this? More tightly coupled
Less reusable
Too many inter-application dependencies
What happens if one component changes it’s internal components?
June 28th – July 1st 2006

34. Method 2 – Using Events Use Events All a developer needs to know:
Provides a “loosely coupled” solution
All a developer needs to know:
Properties can be used to pass data in/out
Events will exist to notify the outside world that “something has happened”
This is a cleaner API that doesn’t depend on the existence of particular UI elements
June 28th – July 1st 2006

35. Using Events for inter-component communication
Same process as Flex core components
2 steps:
Write event handler to handle Event
We’ve done this already
Add code for our custom component to dispatch an event
Define Event
Dispatch Event
June 28th – July 1st 2006

36. Step 1 – Handle Event
Same as handling event from a core Flex component
<mx:Button click=“onButtonClick(event)”/>
We use the same structure:
<comp:PitcherSelector id="pitcherSelector" pitchers="{pitchers}" pitcherSelected="selectedPitcher=event.pitcher"/>
June 28th – July 1st 2006

37. Step 2(a) – Define Event Object
Define the type of Event that our component will dispatch
Allows us to specify custom data that our Event will pass
Must extend flash.events.Event class
June 28th – July 1st 2006

38. Custom Event Object PitcherSelectedEvent.as: package events {
import flash.events.Event;
import model.PitcherVO;
public class PitcherSelectedEvent extends flash.events.Event {
public var pitcher:PitcherVO;
public function PitcherSelectedEvent(vo:PitcherVO) {
super("pitcherSelected");
this.pitcher = vo; } }}
See code samples…
June 28th – July 1st 2006

39. Step 2(b) – Dispatch Custom Event
In custom component
Declare the Event
Let the component know that it needs to be capable of dispatching this event
Dispatch the Event
Usually based on some sort of user interaction, so usually “piggybacking” a UI component event
June 28th – July 1st 2006

40. Declare Event Use mx:MetaData tag: <mx:Metadata>
[Event(name="pitcherSelected", type="events.PitcherSelectedEvent")]
</mx:Metadata>
June 28th – July 1st 2006

41. Use dispatchEvent method
import events.PitcherSelectedEvent;
private function onPitcherSelect(event:Event):void {
dispatchEvent(new PitcherSelectedEvent(event.target.selectedItem)); }
June 28th – July 1st 2006

42. Demo – Dispatching Custom Events
Let’s Review
Our Custom Event (events/PitcherSelectedEvent.as)
Defines the event our component will dispatch
Our Main Application (main.mxml)
Declares our component and handles the event
Our Custom Component (PitcherSelector.mxml)
Declares the custom PitcherSelectedEvent
Dispatches the Event based on user interaction
See code samples…
June 28th – July 1st 2006

43. Let’s Recap…
June 28th – July 1st 2006

44. Summary
Events are hooks to for a developer to execute code based on “something happening”
Flex UI components dispatch Events that developers can handle
Developers can build custom components that use the same Event infrastructure for robust application communication
June 28th – July 1st 2006

45. Tom Link tom@universalmind.com
Thank You!
Tom Link
CFUNITED – The premier ColdFusion conference