Customized Binding property

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:Script>
<![CDATA[
private var _firstName:String;
private var _lastName:String;
public static const FIRST_NAME_CHANGED:String = "firstNameChanged";
public static const LAST_NAME_CHANGED:String = "lastNameChanged";
private function clickHandler():void{
firstName = fnInput.text;
lastName = lnInput.text;}
[Bindable(event="firstNameChanged")]
public function get firstName():String{
return _firstName;}
public function set firstName( str:String ):void{
_firstName = str;
dispatchEvent( new Event( FIRST_NAME_CHANGED ) );}
[Bindable(event="lastNameChanged")]
public function get lastName():String{
return _lastName;}
public function set lastName( str:String ):void{
_lastName = str;
dispatchEvent( new Event( LAST_NAME_CHANGED ) );}
]]>
</mx:Script>
<mx:Panel title=”User Entry.”
paddingLeft=”5″ paddingRight=”5″
paddingTop=”5″ paddingBottom=”5″>
<mx:HBox>
<mx:Label text=”First Name:” />
<mx:TextInput id=”fnInput” />
</mx:HBox>
<mx:HBox>
<mx:Label text=”Last Name:” />
<mx:TextInput id=”lnInput” />
</mx:HBox>
<mx:Button label=”submit” click=”clickHandler();” />
<mx:HRule width=”100%” />
<mx:Label text=”You Entered:” fontWeight=”bold” />
<mx:HBox>
<mx:Label text=”First Name:” />
<mx:Text text=”{firstName}” />
</mx:HBox>
<mx:HBox>
<mx:Label text=”Last Name:” />
<mx:Text text=”{lastName}” />
</mx:HBox>
</mx:Panel>
</mx:Application>

Binding to a Generic object

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:Script>
<![CDATA[
import mx.utils.ObjectProxy;
private var obj:Object = {name:'Tom Waits',
album:'Rain Dogs',
genre:'Rock'};
[Bindable]
private var proxy:ObjectProxy = new ObjectProxy( obj );
private function clickHandler():void{
proxy.name = nameField.text;
proxy.album = albumField.text;
proxy.genre = genreField.text;}
]]></mx:Script>
<mx:Form>
<mx:FormItem label=”Name:”>
<mx:TextInput id=”nameField” />
</mx:FormItem>
<mx:FormItem label=”Album:”>
<mx:TextInput id=”albumField” />
</mx:FormItem>
<mx:FormItem label=”Genre:”>
<mx:TextInput id=”genreField” />
</mx:FormItem>
<mx:FormItem label=”Submit Changes”>
<mx:Button label=”ok” click=”clickHandler();” />
</mx:FormItem>
</mx:Form>
<mx:HRule width=”100%” />
<mx:Form>
<mx:FormItem label=”Name:”>
<mx:Text text=”{proxy.name}” />
</mx:FormItem>
<mx:FormItem label=”Album:”>
<mx:Text text=”{proxy.album}” />
</mx:FormItem>
<mx:FormItem label=”Genre:”>
<mx:Text text=”{proxy.genre}” />
</mx:FormItem>
</mx:Form>
</mx:Application>

With DataGrid

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:Script>
<![CDATA[
[Bindable] private var _data:XML =
<items>
<item id=’1′>
<name>Larry</name>
<type>The foil.</type>
<description>Has curly hair.</description>
</item>
<item id=’2′>
<name>Moe</name>
<type>The brains.</type>
<description>Has bowl cut.</description>
</item>
<item id=’3′>
<name>Curly</name>
<type>The braun.</type>
<description>Has bowl cut.</description>
</item>
</items>;
]]></mx:Script>
<mx:Binding source=”{_data..item.(@id == ’1′).name} {_data..item.(@id ==
’1′).description.toLowerCase()}” destination=”lab.text” />
<mx:Label id=”lab” />
<mx:List width=”200″ dataProvider=”{_data..item.name}” />
<mx:DataGrid width=”200″ dataProvider=”{_data..item}”>
<mx:columns>
<mx:DataGridColumn dataField=”name” />
<mx:DataGridColumn dataField=”type” />
</mx:columns>
</mx:DataGrid>
</mx:Application>

Using Bindable property chain

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
creationComplete=”initHandler();”>
<mx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
// create data binding using BindingUtils.
private function initHandler():void{
BindingUtils.bindProperty( lastNameField, "text",
usermodel, ["name", "lastName"] );}
private function clickHandler():void{
usermodel.name.firstName = fNameInput.text;
usermodel.name.lastName = lNameInput.text;
usermodel.birth.date = dateInput.text;}
]]></mx:Script>
<!– defined model –>
<mx:Model id=”usermodel”>
<user>
<name>
<firstName>Ted</firstName>
<lastName>Henderson</lastName>
</name>
<birth>
<date>February 29th, 1967</date>
</birth>
</user>
</mx:Model>
<!– create data binding using <mx:Binding> –>
<mx:Binding source=”usermodel.birth.date” destination=”dateField.text” />
<mx:Form>
<mx:FormItem label=”First Name:”>
<!– create data binding using curly braces –>
<mx:Text text=”{usermodel.name.firstName}” />
</mx:FormItem>
<mx:FormItem label=”Last Name:”>
<mx:Text id=”lastNameField” />
</mx:FormItem>
<mx:FormItem label=”Birthday:”>
<mx:Text id=”dateField” />
</mx:FormItem>
</mx:Form>
<mx:HRule />
<mx:Form>
<mx:FormItem label=”First Name:”>
<mx:TextInput id=”fNameInput” />
</mx:FormItem>
<mx:FormItem label=”Last Name:”>
<mx:TextInput id=”lNameInput” />
</mx:FormItem>
<mx:FormItem label=”Birthday:”>
<mx:TextInput id=”dateInput” />
</mx:FormItem>
<mx:FormItem label=”Submit Changes”>
<mx:Button label=”ok” click=”clickHandler();” />
</mx:FormItem>
</mx:Form>
</mx:Application>

Using Binding property

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:Binding source=”nameInput.text” destination=”nameOutput.text” />
<mx:Panel
paddingLeft=”5″ paddingRight=”5″
paddingTop=”5″ paddingBottom=”5″>
<mx:Label text=”Enter name:” />
<mx:TextInput id=”nameInput” maxChars=”20″ />
<mx:HRule width=”100%” />
<mx:Label text=”You’ve typed:” />
<mx:Text id=”nameOutput” />
</mx:Panel>
</mx:Application>

Form

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
creationComplete=”initHandler();”>
<mx:Script>
<![CDATA[
import mx.binding.utils.ChangeWatcher;
import mx.binding.utils.BindingUtils;
private var _nameWatcher:ChangeWatcher;
private function initHandler():void{
_nameWatcher = BindingUtils.bindProperty( nameField, "text",
nameInput, "text" );}
private function clickHandler():void{
if( _nameWatcher.isWatching() ){
_nameWatcher.unwatch();
btn.label = "watch";}
else{
_nameWatcher.reset( nameInput );
btn.label = "unwatch";}}
]]></mx:Script>
<mx:Panel title=”User Entry.”
paddingLeft=”5″ paddingRight=”5″
paddingTop=”5″ paddingBottom=”5″>
<mx:Form>
<mx:FormItem label=”Name:”>
<mx:TextInput id=”nameInput” />
</mx:FormItem>
</mx:Form>
<mx:HRule width=”100%” />
<mx:Label text=”You Entered:” fontWeight=”bold” />
<mx:HBox>
<mx:Label text=”First Name:” />
<mx:Text id=”nameField” />
</mx:HBox>
<mx:Button id=”btn” label=”unwatch”
click=”clickHandler();” />
</mx:Panel>
</mx:Application>

Using ComboBox control

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”
creationComplete=”initHandler();”>
<mx:Script>
<![CDATA[
private var _fruit:String;
private var _fruits:Array = ["Apple", "Banana", "Orange"];
private function initHandler():void{
fruitCB.dataProvider = _fruits;}
[Bindable(event="fruitChanged")]
private function isOrangeChosen():Boolean{
return _fruit == “Orange”;}
public function get fruit():String{
return _fruit;}
public function set fruit( str:String ):void{
_fruit = str;
dispatchEvent( new Event( “fruitChanged” ) );}
]]></mx:Script>
<mx:Label text=”select a fruit:” />
<mx:HBox>
<mx:ComboBox id=”fruitCB”
change=”{fruit = fruitCB.selectedLabel}” />
<mx:Button label=”Eat the orange.”
enabled=”{isOrangeChosen()}” />
</mx:HBox>
</mx:Application>

Using Currency formatter

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:CurrencyFormatter id=”formatter” precision=”2″ />
<mx:Form>
<mx:FormItem label=”Enter the withdrawl amount:”>
<mx:TextInput id=”amtInput” />
</mx:FormItem>
<mx:FormItem label=”Formatted amount:”>
<mx:TextInput editable=”false” restrict=”1234567890″
text=”{formatter.format( amtInput.text )}” />
</mx:FormItem>
</mx:Form>
</mx:Application>

With VBox

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>
<mx:VBox>
<mx:Label text=”From Input 2:” />
<mx:TextInput id=”input1″ text=”{input2.text}” />
<mx:HRule />
<mx:Label text=”From Input 1:” />
<mx:TextInput id=”input2″ text=”{input1.text}” />
</mx:VBox>
</mx:Application>

With HRule

<mx:Application
xmlns:mx=”http://www.adobe.com/2006/mxml”
layout=”vertical”>
<mx:Panel
paddingLeft=”5″ paddingRight=”5″
paddingTop=”5″ paddingBottom=”5″>
<mx:Label text=”Enter name:” />
<mx:TextInput id=”nameInput” maxChars=”20″ />
<mx:HRule width=”100%” />
<mx:Label text=”You’ve typed:” />
<mx:Text text=”{nameInput.text}” />
</mx:Panel>
</mx:Application>