AdvancED Flex 4

CHAPTER 2

68

Figure 2-8. Test results to check performance

Data Binding Between Client Side and Server Side

The core of data binding and maintaining client state is the data. When dealing with an application that

involves data transfer between a server and a client, it is highly recommended that you separate the data from

the UI and keep track of the state. Separation of the data model is common practice in MVC architecture and

used often in application development. The view gets updated automatically by binding a property in the view

to the model. Once you need to change the view, you change the model and the view gets updated

automatically.

Creating Class and Binding All Properties

To achieve separation, it is common practice to use a value object (VO), which contains all the properties of

the data. The VO was borrowed from J2EE, which uses an object called a data transfer object (DTO). You will

create a data object to store customers’ information. Let’s translate the object entity into a VO. See the

following class, which is a collection of properties that describes the customer:

package

{

[Bindable]

public class CustomerVO

{

public var customerID:int;

public var fname:String;

public var lname:String;

public var address:String;

public var city:String;

public var state:String;

public var zip:String;

public var phone:String;

public var email:Date;

public var updateDate:Date;

public function CustomerVO(customerID:int, fname:String, lname:String,

address:String,

city:String, state:String, zip:String, phone:String, email:Date, updateDate:Date)

{

this.customerID = customerID;

this.fname = fname;

this.lname = lname;

TURBO-CHARGING DATA BINDING

69

this.address = address;

this.city = city;

this.state = state;

this.zip = zip;

this.phone = phone;

this.email = email;

this.updateDate = updateDate;

}

}

}

Notice that you assigned a [Bindable] tag at the class declaration. The tag makes every property in the

customerVO class binding, so there is no need to add the [Bindable] tag to any other property.

Creating an MXML class you can achieve the same functionality and bind all the public properties by placing

the [Bindable] tag inside of a Metadata block.

<fx:Metadata>

[Bindable]

</fx:Metadata>

The following example binds all the public properties,. Once the application calls the creationComplete

event, the fname property is changed and you can see the results on the SimpleText Component.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="1024" minHeight="768"

creationComplete="creationCompleteHandler()">

<fx:Metadata>

[Bindable]

</fx:Metadata>

<fx:Script>

<![CDATA[

public var customerID:int;

public var fname:String;

public var lname:String;

public var address:String;

public var city:String;

public var state:String;

public var zip:String;

public var phone:String;

public var email:Date;

public var updateDate:Date;

protected function creationCompleteHandler():void

{

fname = "Tom";

}

CHAPTER 2

70

]]>

</fx:Script>

<s:Label text="First name: {fname}" />

</s:Application>

Binding Using ObjectProxy

As previously discussed, by using the [Binding] tag the object that you need to watch gets the additional

code (setter and getter) that is required, so it can be watched. If you need to bind properties during runtime,

then they have to include the IPropertyChangeNotifier interface, otherwise the object cannot be

Bindable. However, primitive variables do not implement that interface, so when you need to bind an object

during runtime you can use ObjectProxy class, which provides the ability to track changes to an item

managed by the proxy. This means objects in your application can "listen" for changes on this object. See

ASDOC for more info: http://www.adobe.com/livedocs/flex/3/langref/mx/utils/

ObjectProxy.html.

Here’s an example of using ObjectProxy. We create a new instance of the ObjectProxy and pass the object

you would like to watch, in your case CustomerVO. You can then add an event listener and track changes to

an item in CustomerVO.

<?xml version="1.0" encoding="utf-8"?>

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:mx="library://ns.adobe.com/flex/mx"

minWidth="1024" minHeight="768"

creationComplete="setWatcher();">

<fx:Script>

<![CDATA[

import mx.events.PropertyChangeEvent;

import mx.binding.Watcher;

import mx.utils.ObjectProxy;

public var customerVO:CustomerVO = new CustomerVO();

public var obProxy:ObjectProxy;

private function setWatcher():void

{

obProxy = new ObjectProxy(customerVO);

obProxy.addEventListener( PropertyChangeEvent.PROPERTY_CHANGE, onChange);

obProxy.fname = "elad";

}

private function onChange(event:*):void

{

trace("on change");

}

]]>