Home > Uncategorized > Two way binding with Flex

Two way binding with Flex

Having a good api for binding ui components to the data model has became a must have feature. Since I’m playing with Flex lately I’ve quickly test how to use its binding feature.

Let say you have a VO object like this one :


package org.test.vo {

    [Bindable]
    public class PersonVO  {

        public var age:int;
        public var firstName:String;
        public var lastName:String;
    }
}

Notice the [Bindable] annotation added before the class definition, this is telling the compiler that all the public attribut inside the class should be able to dispatch an event when their value are changed so that they can be used as the source of data binding.

Solution 1 :

The following Flex code can be used to display the PersonVO data :


    <mx:Form>
        <mx:FormItem label="First Name">
            <mx:TextInput id="firstNameId"/>
        </mx:FormItem>       
        <mx:FormItem label="Last Name">
            <mx:TextInput id="lastNameId"/>
        </mx:FormItem>
        <mx:FormItem label="Age">
            <mx:TextInput id="ageId"/>
        </mx:FormItem>
    </mx:Form>

If you want a “two way” binding between the UI and the model you need to write the following


    <mx:Binding source="personVO.firstName" destination="firstNameId.text" />
    <mx:Binding source="firstNameId.text" destination="personVO.firstName" />

    <mx:Binding source="personVO.lastName" destination="lastNameId.text" />
    <mx:Binding source="lastNameId.text" destination="personVO.lastName" />

    <mx:Binding source="personVO.age.toString()" destination="ageId.text" />
    <mx:Binding source="int(ageId.text)" destination="personVO.age" />

Note : since age is an int type we need to write some extra code to tell flex how to cast from String to int and vice versa.

Solution 2 :

The binding can also be described the following way :


<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" xmlns:local="*">

    <mx:Script>
        <!&#91;CDATA&#91;
            import mx.controls.Alert;
            private function showPersonValue():void {
                Alert.show(    "firstName = " + aPerson.firstName + "\n" +
                             "lastName = " + aPerson.lastName + "\n"+
                             "age = " + aPerson.age , "Info");
            }
        &#93;&#93;>
    </mx:Script>

    <local:PersonVO id="aPerson">
        <local:firstName>{firstNameId.text}</local:firstName>
        <local:lastName>{lastNameId.text}</local:lastName>
        <local:age>{int(ageId.text)}</local:age>
    </local:PersonVO>

    <mx:Form>
        <mx:FormItem label="First Name">
            <mx:TextInput id="firstNameId" text="{aPerson.firstName}"/>
        </mx:FormItem>
        <mx:FormItem label="Last Name">
            <mx:TextInput id="lastNameId" text="{aPerson.lastName}"/>
        </mx:FormItem>
        <mx:FormItem label="Age">
            <mx:TextInput id="ageId" text="{aPerson.age}"/>
        </mx:FormItem>
    </mx:Form>

    <mx:Button label="Show Person Value" click="showPersonValue()"/>

</mx:Application>

twowaysmappingsolution2

Another solution for creating a two way binding using a “in-house utility api” found here

This solution gives the following to describe the two way binding :

...
<mx:Script>
	<!&#91;CDATA&#91;
		public var userModel : UserModel;
	&#93;&#93;>
</mx:Script>
<mx:Form>
	<mx:FormItem label="First Name">
		<mx:TextInput id="txtFirstName"/>
	</mx:FormItem>
</mx:Form>
<ModelBinding model="{userModel}" field="firstName" target="{txtFirstName}"/>
...

In my opinion the main drawback for this solution is that we are losing the error warning during compilation time : if you change field name from “firstname” to “fname” for example you won’t be informed of this error.
Finally
I would like to point out this feature request posted at adobe asking for indicating two way binding in mx:binding tag and the following solution :  Two-way Data Binding – Functional and Design Specification.

Advertisements
Categories: Uncategorized Tags:
  1. Frosty
    July 30, 2010 at 2:41 pm

    Nice when you are stuck with Flex 3 ; thanks.

  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: