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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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