Design patterns suggest approach to common problems that arise during software development regardless of what programming language. But implementation of these patterns is specific to the language. The main goal of this presentation is to highlight selected patterns as they may be implemented taking advantages of Flex framework. You'll see a not so obvious implementation of a Singleton, how a Proxy can dramatically change the behavior of an object, why a Mediator is a must-have in each Flex application. Do you know how to write Data Transfer Objects that are so important in Flex remoting? If time permits, we'll review the Class Factory pattern too.

1. Design Pa*erns, a Deep Dive
By Yakov Fain
Farata Systems
(c) Farata Systems

2. Farata Systems: What do we wo
Consulting and training ($$$$$$$$$$$$$$$$$$)
Software development (for free)
(open source project Clear Toolkit on Sourceforge.net)
Writing tech. books and articles on Java and Adobe Flex
(making from $0 to $1 per hour)
www.faratasystems.com 2

3. What is this about?
Design pa*erns suggest an approach to
common problems that arise during
soCware development regardless of
what programming language you use.
But the goal of this presentaGon is to
highlight selected pa*erns as you may
implement them taking advantage of
the Flex framework.
(c) Farata Systems

4. We’ll talk about these pa*erns
• Singleton
• Proxy
• Mediator
• Data Transfer Object
• Asynchronous Token
(c) Farata Systems

5. Singleton
You can create only one instance of such a class
There’s no private constructors in AcGonScript
Consider a sample file MySingleton.as
package somePackage{
public class MySingleton {
private staGc const _instance: MySingleton = new MySingleton (Lock );
public staGc funcGon get instance():MySingleton {
return _instance;
}
public funcGon MySingleton( lock:Class ) {
if ( lock != Lock ) {
throw new Error( quot;Illegal instanGaGon.quot; );
}
}
}
// End of package
class Lock {
}
(c) Farata Systems

6. Have you ever seen this?
var model: AppModelLocator =
AppModelLocator.getInstance();
and this?
service =
ServiceLocator.getInstance().getHTTPService(
'loadEmployeesService');
(c) Farata Systems

7. Enhancing the ApplicaGon object
public dynamic class DynamicApplica5on extends Applica5on
implements IApplicaGonFacade{
public funcGon DynamicApplicaGon(){
super();
}
public staGc var services:DicGonary = new DicGonary();
public funcGon getService(name:String) : Object {
return services[name];
}
public funcGon addService(name:String,value: Object): void {
services[name] = value;
}
public funcGon removeService(name:String) : void {
delete services[name];
}
public funcGon getServices() : DicGonary { The IApplicaGonFacade just declares these
return services; four methods to enable Flex Builder’s
} intellisense help when casGng.
} var myApp:IApplicationFacade = …
(c) Farata Systems

8. Adding any properGes to myModel
(c) Farata Systems

9. Sample dynamic applicaGon (beginning)
<?xml version=quot;1.0quot; encoding=quot;uc‐8quot;?>
<fx:DynamicApplicaGon xmlns:mx=quot;h*p://www.adobe.com/2006/mxmlquot; layout=quot;absolutequot;
xmlns:fx=quot;h*p://www.faratasystems.com/2009/componentsquot;
creaGonComplete=quot;addAllServices();quot;>
<mx:Script>
<![CDATA[
import com.farata.core.DynamicApplicaGon;
import mx.core.ApplicaGon;
// Add required services to the Applica3on object, i.e. myModel and myServices
private func5on addAllServices() :void {
DynamicApplicaGon.services[quot;myModelquot;]= new Object();
DynamicApplicaGon.services[quot;myServicesquot;] = new Object();
}
private func5on getData(serviceName:String, key:Object):Object{
return DynamicApplicaGon.services[serviceName][key];
}
private func5on setData(serviceName:String, key:Object, value:String):void{
DynamicApplicaGon.services[serviceName][key]= new String(value);
}
]]>
</mx:Script> (c) Farata Systems

10. Sample dynamic applicaGon (ending)
<!‐‐Adding values to myModel ‐‐>
<mx:Bu*on label=quot;Add to myModelquot; x=quot;193quot; y=quot;59”
click=quot;setData('myModel',key.text, value.text)quot;/>
<mx:Label x=quot;14quot; y=quot;42quot; text=quot;Keyquot; fontWeight=quot;boldquot;/>
<mx:Label x=quot;14quot; y=quot;14quot; fontWeight=quot;boldquot; fontSize=quot;14quot;>
<mx:text>Add one or more key/value pairs to the object MyModel</mx:text>
<mx:Label x=quot;91quot; y=quot;42quot; text=quot;Valuequot; fontWeight=quot;boldquot;/>
<mx:TextInput x=quot;8quot; y=quot;59quot; id=quot;keyquot; width=quot;75quot;/>
<mx:TextInput x=quot;89quot; y=quot;59quot; id=quot;valuequot; width=quot;96quot;/>
<!‐‐Retrieving the value from a Singleton. ‐‐>
<mx:Bu*on label=quot;Show the valuequot; x=quot;8quot; y=quot;122quot;
click=quot;retrievedValue.text=getData('myModel', key.text) as Stringquot;/>
<mx:Label x=quot;135quot; y=quot;121quot; width=quot;95quot; id=quot;retrievedValuequot; fontWeight=quot;boldquot; fontSize=quot;15quot;/>
<mx:Label x=quot;10quot; y=quot;94quot; fontWeight=quot;boldquot; fontSize=quot;14quot;>
<mx:text>Retrieve and display the value from MyModel bykey</mx:text>
</fx:DynamicApplicaGon>
(c) Farata Systems

11. Proxy
A proxy is an object that represents another
object and controls access to it.
Think of a secretary that receives a package for
her boss.
In AcGonScript you can wrap the class XYZ in
mx.uGl.ObjectProxy, which will be a proxy that
controls access to the XYZ’s properGes.
(c) Farata Systems

12. How [Bindable] works?
[Bindable]
var lastName:String;
Flex compiler generates a wrapper class with a se*er
that dispatches propertyChange event on each
modificaGon of lastName
You can do it on your own by using the class
mx.uGls.ObjectProxy
(c) Farata Systems

13. Wrapping Person in ObjectProxy
package com.farata{
public dynamic class Person {
public var lastName:String=quot;Johnsonquot;;
public var salary:Number=50000;
}
}
(c) Farata Systems

14. Running the Person proxy
(c) Farata Systems

15. Extending Object Proxy
Add some applicaGon logic to it. If the salary of a person increases over $55K,
she becomes enGtled for the pension in the amount of 2% of the salary.
You want to add this funcGonality without touching the code of the class Person.
In a subclass of ObjectProxy, you can
override getProperty() and setProperty()
from the namespace flash_proxy.
If you’ll write
MyPersonProxy.lastName=”McCartney”,
this object will call its own method
setProperty(“lastName”, “McCartney”).
Intercept this call and add some
processing to to the
overridden method setProperty().
(c) Farata Systems

16. TesGng
MyPersonProxy
ACer 3 clicks adding pension property
(c) Farata Systems

17. Mediator
Any complex screen, more or less, of a business applicaGon
consists of a number of containers and components.
We want to create loosely‐coupled custom components
that are self contained, do not know about existence
of each other and can communicate with the “outside
world” by sending and receiving events.
(c) Farata Systems

18. Wall Street: Stock Trading ApplicaGon
Before the trader clicked on the Price Panel
PricePanel component has three
variables: symbol, bid and ask
PricePanel dispatches the OrderEvent
dispatchEvent(new OrderEvent(
OrderEvent.PREPARE_ORDER_EVENT
, symbol, bid,ask,buy));
OrderPanel listens to OrderEvent ACer the trader clicked on the Price Panel
addEventListener(
OrderEvent.PLACE_ORDER_EVENT,
orderEventHandler)
func5on orderEventHandler(evt:OrderEvent){
sym.text=evt.symbol;
operaGon.text=evt.buy?quot;Buyquot;:quot;Sellquot;;
price.text=(oper.text==quot;Buyquot;?
evt.bid:evt.ask); (c) Farata Systems
}

19. PricePanel Component. Take 1
OrderEvent carries 4 variables
(c) Farata Systems

20. Custom Event OrderEvent
Too many user variables.
It would be a good idea to
encapsulate them in one DTO –
Data Transfer Object a.k.a. Value Object
The Mediator receives this event from PricePanel
and dispatches it to OrderPanel
(c) Farata Systems

21. The Mediator applicaGon
Listen to the OrderEvent
from PricingPanel
…and send it to
OrderPanel
(c) Farata Systems

22. Data Transfer Object
Data Transfer Objects (DTO) a.k.a. Value Objects (VO) are used
for data exchange between various applicaGon components,
which can be either co‐located in the same process or
on remote computers.
These DTO’s can even be wri*en in different programming
languages, for example Java and AcGonScript.
(c) Farata Systems

23. Introducing DTO in Stock Trading App.
Instead of passing several variables between pricing and order
panels, we’ll encapsulate order details in the OrderDTO class
and send it inside the event object to the mediator.
(c) Farata Systems

24. PricePanel Component. Take 2
UI components are bound to
DTO properGes
startDataFeed()
emulates external data feed
Packaging a DTO inside the
event OrderEvent2
(c) Farata Systems

25. Now PricePanel Dispatches OrderEvent2
The applica5on (mediator) will get this event and dispatvh it to the OrderPanel:
var orderEvt: OrderEvent2= new
OrderEvent2(OrderEvent2.PLACE_ORDER_EVENT,evt.orderInfo);
ordPanel.dispatchEvent(orderEvt);
(c) Farata Systems

26. OrderPanel receives the event…
…extracts the DTO
from the event
…and populates
UI components of
OrderPanel
(c) Farata Systems

27. Advanced DTOs
If you envision dynamic updates to the data on the client, declare these classes as [Bindable].
Use an ArrayCollecGon of such bindable DTO’s as a dataProvider in your DataGrid,
List, and similar components.
Make sure that both server‐side and client‐side DTOs provide unique property uuid.
Flex uses this property to uniquely idenGfy the data elements of the List‐based controls.
Consider replacing each public properGes with the ge*er and se*er to have more control
over the modificaGons of these properGes.
You can and add the code to these se*ers/ge*ers that will intercept the acGon of data
modificaGon and perform addiGonal processing based on what’s being changed.
Then, the se*er can dispatch the event PropertyChange event as shown on the next slide
(c) Farata Systems

28. Sample DTO with bid property
Farata Systems has created DTO generator for Java programmers called Dto2Fx
that creates AcGonScript DTOs from their Java counterparts.
It’s a freeware, and you can get it at h*p://flexblog.faratasystems.com/?p=357
(c) Farata Systems

29. Asynchronous Token
The user makes several RemoteObject requests and results
come back asynchronously in arbitrary order.
Each request calls a result handler funcGon providing
the result event.
How the applicaGon code can map arriving result objects
back to the iniGal requestors?
(c) Farata Systems

30. AsyncToken Class
The goal of the Asynchronous Token pa*ern is to properly route
the processing on the client in response to the data arriving
asynchronously form the server
AsyncToken is a dynamic class, you can add any properGes to this
class during runGme
<mx:RemoteObject id=”ord” desGnaGon=”Orders” />
…
private funcGon sendOrder(/*arguments go here*/):void{
var token: AsyncToken = ord.placeOrder({item:”Sony TV”});
token.orderNumber=”12345”;
token.responder = new Responder(processOrderPlaced, processOrderFault);
token.addResponder(new Responder(createShipment,processOrderFault));
}
(c) Farata Systems

31. When the result comes back
AsyncToken is a local object. It is idenGfied by a messageId that is passed with
the request to server.
When the server responds, it includes a correlationId property in the message
header, and Flex automaGcally calls the appropriate AsyncToken responders in the order
they were defined.
private funcGon processOrderPlaced(event:ResultEvent):void {
myOrderNumber:Object = event.token.orderNumber;
// if myOrderNumber is 12345, process it accordingly
}
(c) Farata Systems

32. Contact Info & Links
Email: yfain@faratasystems.com
Web site: h*p://www.faratasystems.com
Clear Toolkit: h*p://sourceforge.net/projects/cleartoolkit/
O’Reilly Book “Enterprise Development with Flex” :
h*p://my.safaribooksonline.com/9780596801465
(c) Farata Systems