Flex 3: Two-way Form Databinding

I saw this "trick" in someone's code and have been using it lately so I thought I'd share. The idea is to create an object, bind it to the form elements, and bind the form elements to the object. In this example, I'm using a simple form from an app I'm working at the moment.

Userform.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:dto="com.katapultmedia.mystreamer.dto.*">
    <mx:Script>
        <![CDATA[
            private function save():void{
            }
        ]]>
    </mx:Script>
    <dto:User id="user" />
    <mx:Binding source="firstNameField.text" destination="user.firstName" />
    <mx:Binding source="lastNameField.text" destination="user.lastName" />
    <mx:Binding source="emailAddressField.text" destination="user.emailAddress" />
    <mx:Binding source="passwordField.text" destination="user.password" />
    <mx:Binding source="isActiveCheck.text" destination="user.isActive" />
    <mx:Form>
        <mx:FormItem label="First Name">
            <mx:TextInput id="firstNameField" text="{user.firstName}" />
        </mx:FormItem>
        <mx:FormItem label="Last Name">
            <mx:TextInput id="lastNameField" text="{user.lastName}" />
        </mx:FormItem>
        <mx:FormItem label="Email Address">
            <mx:TextInput id="emailAddressField" text="{user.emailAddress}" />
        </mx:FormItem>
        <mx:FormItem label="Password">
            <mx:TextInput id="passwordField" text="{user.password}" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:CheckBox id="isActiveCheck" selected="{user.isActive}" />
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button label="Save" click="save()" />
        </mx:FormItem>
    </mx:Form>
</mx:VBox>

So, I'm not going to go line but line since it is pretty straight forward but here's a brief outline.

Form Items

• Each TextInput is bound to the user objects respective property (ex - firstNameField.text is bound to {user.firstName}).
• The isActiveCheck is bound to {user.isActive}

Binding Tags

• Each Binding tags source property is bound to one of the form items.
• Each Binding tags destination property is bound to the respective user property.

That's it. What happens is when I create an instance of this component I will set myUserForm.user = someUser; and when the user edits one of the form items the respective value of the user object will be updated instantly. This way, when the user clicks the Save button I can easily pull myUserForm.user and pass that dto (data transfer object) to the backend.

Kinda cool, huh? Well, I think so. Saves a good bit of Actionscript writing.

Enjoy.

Update: I should test code before posting. :-) I've removed the brackets around the source/destination properties on the Binding tags. They aren't needed.