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="https://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.