Learn Flex 3.0

While Flex components come with their pre-defined events, developers can create custom events
specific to their applications. Event-driven programming is a very important design concept because
it allows an application to react to user interaction without imposing a pre-defined “flow”
on the end user. It means that unlike back-end processes that tend to have a “single track of mind”
design, front-end applications have to react to what often seems like an unrelated sequence of enduser
actions. Fortunately, the event-driven model offers an excellent architecture for such interaction
based on loosely coupled components consuming and throwing the events.
This simply means a properly designed component knows how to perform some functionality and notifies
the outside world by broadcasting one or more custom events. We need to stress that such a component
doesn’t send these events to any other component(s). It just broadcasts its “exciting news” to
the event dispatcher. If any other component is interested in processing this event, it must register a listener
for this event. Unlike direct component-to-component calls via public interfaces, this approach
lets you add processing components and set up priorities without affecting the working components.
Before explaining how to create an event-driven component, we’ll state how to use them. This is a
typical scenario: MyApplication uses Component1 and Component2. The components don’t know
about each other. Any event-handling component has to define this event inside.
For example, Component1 dispatches this custom event and sends out an instance of the event
object, which may or may not carry some additional component-specific data. MyApplication
handles this custom event and, if needed, communicates with Component2 with or without feeding
it with data based on the results of the first component event.
We’ll create a new shopping cart application that will include a main file and two components: the
first, a large green button, and the second, a red TextArea field. We’ll create two separate directories,
“controls” and “cart,” respectively, where our components will live.
To create our first MXML component in Flex Builder, select the “controls” directory and click on
the menu File | New MXML Component. In the pop-up screen we’ll enter LargeGreenButton as a
component name and we’ll pick Button from a dropdown as a base class for our component.
Flex Builder will generate the following code:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Button xmlns:mx=”http://www.adobe.com/2006/mxml”>
</mx:Button>
Next, we’ll make this button large and green with rounded corners (just to give it a Web 2.0 look).
This component will dispatch an event named greenClickEvent. But when? You’ve got it: when
someone clicks on large and green.
CHAPTER 4
RIA WITH ADOBE FLEX AND JAVA 147
Custom events in MXML are annotated within the metadata tag to be visible to MXML. In Listing
4.41 we declared a custom event of the generic flash.events.Event type in the metadata tag. Since the
purpose of this component is to notify the sibling objects that someone has clicked the button, we’ll
define the greenClickEventHandler()event handler to create and dispatch our custom event.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Button xmlns:mx=”http://www.adobe.com/2006/mxml”
width=”104″ height=”28″ cornerRadius=”10″ fillColors=”[#00ff00, #00B000]”
label=”Add Item” fontSize=”12″ click=”greenClickEventHandler()”>
<mx:Metadata>
[Event(name=”addItemEvent”, type=”flash.events.Event”)]
</mx:Metadata>
<mx:Script>
<![CDATA[
private function greenClickEventHandler():void{
trace(”Ouch! I got clicked! Let me tell this to the world.”);
dispatchEvent(new Event(”addItemEvent”, true));// bubble to parent
}
]]>
</mx:Script>
</mx:Button>
Listing 4.41 LargeGreenButton.mxml
Please note that the LargeGreenButton component has no idea what will process its addItemEvent.
It’s none of its business - loose coupling in action!
In dynamic languages the following naming conventions are common practice: to add an “Event”
suffix to each of the custom events you declare, and a “Handler” suffix to each of the event-handler
functions.
Here’s the application that will use the LargeGreenButton component:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml”
xmlns:ctrl=”controls.*” layout=”absolute”>
<ctrl:LargeGreenButton greenClickEvent=”greenButtonHandler(event)”/>
<mx:Script>
<![CDATA[
private function greenButtonHandler(event:Event):void{
Learning Flex Through Applications
148 RIA WITH ADOBE FLEX AND JAVA
trace(”Someone clicked on the Large Green Button!”);
}
]]>
</mx:Script>
</mx:Application>
Listing 4.42 EventApplication.mxml
We have defined an extra namespace “ctrl” here to make the content of the “controls” directory visible
to this application. Run this application in debug mode, and it’ll display the window in Figure
4.17. When you click on the green button it will output the following on the console:
Ouch! I got clicked! Let me tell this to the world. Someone clicked on the Large Green Button.
While adding attributes to <ctrl:LargeGreenButton>, please note that code hints work and Flex
Builder properly displays the greenClickEvent in the list of available events under the new custom
component button.
Figure 4.17 The output of GreenApplication.xmxl
Our next component will be called BlindShoppingCart. This time we’ll create a component in the
“cart” directory based on the TextArea:
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:TextArea xmlns:mx=”http://www.adobe.com/2006/mxml”
backgroundColor=”#ff0000″ creationComplete=”init()”>
CHAPTER 4
RIA WITH ADOBE FLEX AND JAVA 149
<mx:Script>
<![CDATA[
private function init():void{
parent.addEventListener(”addItemEvent”,addItemToCartEventHandler);
}
private function addItemToCartEventHandler(event:Event){
this.text+=”Yes! Someone has put some item inside me, but I do not know what
it is. \n”;
}
]]>
</mx:Script>
</mx:TextArea>
Listing 4.43 BlindShoppingCart.mxml
Note that the BlindShoppingCart component doesn’t expose any public properties or methods to
the outside world. It’s a black box. The only way for other components to add something to the
cart is by dispatching the addItemEvent event. The next question is how to map this event to the
function that will process it. When someone instantiates the BlindShoppingCart, Flash Player will
dispatch the creationComplete event on the component and our code will call the init() private
method that adds the addItemEvent event listener mapping to the addItemToCartEventHandler
function. This function just appends the text “Yes! Someone has put…” to its red TextArea.
The RedAndGreenApplication application uses the LargeGreenButton and BlindShoppingCart
components.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”vertical”
xmlns:ctrl=”controls.*” xmlns:cart=”cart.*”>
<ctrl:LargeGreenButton addItemEvent=”greenButtonHandler(event)”/>
<cart:BlindShoppingCart width=”350″ height=”150″ fontSize=”14″/>
<mx:Script>
<![CDATA[
private function greenButtonHandler(event:Event):void{
trace(”Someone clicked on the Large Green Button!”);
}
]]>
</mx:Script>
</mx:Application>