Learn Flex 3.0

When the green button is clicked, the greenButtonHandler is called and it creates and dispatches
the addItemEvent event back to itself. The event bubbles to the parent container(s), notifying all
listening parties of the event. The BlindShoppingCart listens for such an event and responds by
adding text. Run this application, click on the button, and the window should look like this:
Figure 4.18 The output of RedAndGreenApplication.mxml
Now one more time: the green button component shoots the event to the outside world without
knowing anything about it. That is very different from the case when we would write “glue” code
like cart.addEventListener(”click”, applicationResponseMethodDoingSomethingInsideTheCart).
Sending Data Using Custom Events
To make our blind shopping cart more useful, we have to be able not only to fire a custom event,
but have this event deliver a description of the item that was passed to shopping cart. To do this,
we’ll have to create a custom event class with an attribute that will store application-specific data.
This class has to extend flash.events.Event; override its method clone to support event bubbling;
and call the constructor of the super-class, passing the type of the event as a parameter. The AS3
class below defines a itemDescription property that will store the application-specific data.
package cart {
import flash.events.Event;
public class ItemAddedEvent extends Event {
var itemDescription:String; //an item to be added to the cart
public static const ITEMADDEDEVENT:String =”ItemAddedEvent”;
public function ItemAddedEvent(description:String )
{
super(ITEMADDEDEVENT,true, true); //bubble by default
CHAPTER 4
RIA WITH ADOBE FLEX AND JAVA 151
itemDescription=description;
}
override public function clone():Event{
return new ItemAddedEvent(itemDescription); // bubbling support inside
}
}
}
Listing 4.45 The custom event ItemAddedEvent
The new version of the shopping cart component is called ShoppingCart and its event handler
extracts the itemDescription from the received event and adds it to the text area.
<?xml version=”1.0″ encoding=”utf-8″?>
<mx:TextArea xmlns:mx=”http://www.adobe.com/2006/mxml”
backgroundColor=”#ff0000″ creationComplete=”init()”>
<mx:Script>
<![CDATA[
private function init():void{
parent.addEventListener(ItemAddedEvent.ITEMADDEDEVENT,addItemToCartEventHandler);
}
private function addItemToCartEventHandler(event:ItemAddedEvent){
text+=”Yes! Someone has put ” + event.itemDescription + “\n”;
}
]]>
</mx:Script>
</mx:TextArea>
Listing 4.46 ShoppingCart.mxml
There’s a design pattern called Inversion of Control or Dependency Injection, which means that an
object doesn’t ask other objects for required values, but assumes that someone will provide the required
values from outside. This is also known as the Hollywood principle or “Don’t call me, I’ll call
you.” Our ShoppingCart does exactly this - it waits until some unknown object triggers an event
it listens to that carries an item description. Our component knows what to do with it, i.e., display
in the red text area, validate it against the inventory, send it over to the shipping department, and
so on.
Next, we’ll completely rework our LargeGreenButton class into a NewItem component to include a
label and a text field to enter some item description and the same old green button:
<?xml version=”1.0″ encoding=”utf-8″?>
Learning Flex Through Applications
152 RIA WITH ADOBE FLEX AND JAVA
<mx:HBox xmlns:mx=”http://www.adobe.com/2006/mxml” >
<mx:Metadata>
[Event(name=”addItemEvent”, type=”flash.events.Event”)]
</mx:Metadata>
<mx:Label text=”Item name:”/>
<mx:TextInput id=”enteredItem” width=”300″/>
<mx:Button
width=”104″ height=”28″ cornerRadius=”10″ fillColors=”[#00ff00, #00B000]”
label=”Add Item” fontSize=”12″ click=”greenClickEventHandler()”/>
<mx:Script>
<![CDATA[
import cart.ItemAddedEvent;
private function greenClickEventHandler():void{
trace(”Ouch! I got clicked! Let me tell this to the world.”);
dispatchEvent(new ItemAddedEvent(enteredItem.text));
}
]]>
</mx:Script>
</mx:HBox>
When we look at our new application with its new ShoppingCart and NewItem components, it’s
almost indistinguishable from the original one. If we kept the old class names, we could have used
the old application.
<?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:NewItem />
<cart:ShoppingCart width=”350″ height=”150″ fontSize=”14″/>
</mx:Application>
Listing 4.47 RedAndGreenApplication2.mxml
When the user enters the item description and clicks the green one, the application creates a new
instance of the ItemAddedEvent, passing the entered item to its constructor, and the ShoppingCart
properly displays the selected “New Item to Add” on the red carpet (see Figure 4.19).
CHAPTER 4
RIA WITH ADOBE FLEX AND JAVA 153
Figure 4.19 The output of RedAndGreenApplication.mxml
Making components loosely bound simplifies development and distribution but comes at a higher
cost in testing and maintenance. Depending on the delivery timeline, size, and lifespan of your application,
you’d have to make a choice between loosely coupled or strongly typed components.
One last note. The itemDescription in Listing 4.45 doesn’t have an access-level qualifier. It’s socalled
package-level protection. The ShoppingCart can access itemDescription directly, but the
classes outside the “cart” package can’t.