Overview
Setting a variable as Bindable allows an easy way of creating a one or two way link to change or display information.
Using binding to capture user input
A good example of using binding would be to capture the users name, address and email using TextInput controls. Start by creating a class to hold the data:
package valueObjects
{
public class MyInfo
{
[Bindable] public var name:String = '';
[Bindable] public var address:String = '';
[Bindable] public var email:String = '';
public function MyInfo()
{
}
}
} |
Bindable variables need to be public. Next create the controls and bind them in both directions to the class:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="250" creationComplete="init()">
<mx:Script>
<![CDATA[
import valueObjects.MyInfo;
import mx.controls.Alert;
[Bindable] public var mInfo:MyInfo = new MyInfo();
public function showInfo():void {
Alert.show("Name:" + mInfo.name + String.fromCharCode(13) + "Address:" + mInfo.address + String.fromCharCode(13) + "Email:" + mInfo.email,"Info");
}
public function resetInfo():void {
this.mInfo.address = "";
this.mInfo.name = "";
this.mInfo.email = "";
}
]]>
</mx:Script>
<mx:VBox width="100%">
<!-- Display objects get laid out vertically -->
<mx:HBox width="100%">
<mx:Label text="Name:" width="30%" />
<mx:TextInput id="mName" text="{this.mInfo.name}" width="70%" height="30"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label text="Address:" width="30%" />
<mx:TextArea id="mAddress" text="{this.mInfo.address}" width="70%" height="90"/>
</mx:HBox>
<mx:HBox width="100%">
<mx:Label text="Email:" width="30%" />
<mx:TextInput id="mEmail" text="{this.mInfo.email}" width="70%" height="30"/>
</mx:HBox>
<mx:Box width="100%" horizontalAlign="center">
<mx:HBox>
<mx:Button label="OK" click="this.showInfo()" height="30" />
<mx:Button label="Reset" click="this.resetInfo()" height="30" />
</mx:HBox>
</mx:Box>
</mx:VBox>
<mx:Binding source="this.mName.text" destination="this.mInfo.name"/>
<mx:Binding source="this.mAddress.text" destination="this.mInfo.address"/>
<mx:Binding source="this.mEmail.text" destination="this.mInfo.email"/>
</mx:WindowedApplication> |
The text properties of the TextInput and TextArea controls are set by bindings using curly braces, the reverse binding is done using binding tags. The reset function shows that altering the class variables mirror the changes in the text properties. The OK button shows that changing the text in the text boxes alters the values of the class properties. You can use binding for any control properties, for instance you can choose an image or icon to display depending on a variable’s value.
Using bindings to populate list controls
Binding an ArrayCollection of values or objects to a List, ComboBox or DataGrid populates the control with the values. By using ItemEditors with a DataGrid control the ArrayCollection holds the edited data. Here is an example of a ComboBox binded to an ArrayCollection:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="250" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] public var mArrC:ArrayCollection = new ArrayCollection();
public function init():void {
var i:Number;
for (i=0;i<50;i++){
this.mArrC.addItem(String(i*100));
}
}
]]>
</mx:Script>
<mx:VBox width="100%">
<!-- Display objects get laid out vertically -->
<mx:ComboBox width="100%" dataProvider="{this.mArrC}"/>
</mx:VBox>
</mx:WindowedApplication> |
In this example a for loop is used to add numbers to the ArrayCollection so that they are displayed in the ComboBox. Here is an example of how to display data in a DataGrid:
<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="300" height="250" creationComplete="init()">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
[Bindable] public var mArrC:ArrayCollection = new ArrayCollection();
public function init():void {
var i:Number;
var obj:Object;
for (i=0;i<50;i++){
obj = new Object();
obj.f1 = String(i*10);
obj.f2 = String(i*100);
obj.f3 = Boolean((i*0.5)==Math.round(i*0.5));
this.mArrC.addItem(obj);
}
}
]]>
</mx:Script>
<mx:VBox width="100%" height="100%">
<!-- Display objects get laid out vertically -->
<mx:DataGrid dataProvider="{this.mArrC}" width="100%" height="100%" rowHeight="25">
<mx:columns>
<mx:DataGridColumn headerText="Field1" dataField="f1"/>
<mx:DataGridColumn headerText="Field2" width="125" dataField="f2" itemRenderer="mx.controls.TextInput" rendererIsEditor="true" editorDataField="text" textAlign="center" />
<mx:DataGridColumn headerText="Field3" width="75" dataField="f3" itemRenderer="mx.controls.CheckBox" rendererIsEditor="true" editorDataField="selected" textAlign="center" />
</mx:columns>
</mx:DataGrid>
</mx:VBox>
</mx:WindowedApplication> |
This example shows how to make DataGrid columns editable, and again the data is put into the ArrayCollection using a loop. The ArrayCollection holds Objects that contain properties set in the DataGridColumn dataField property. Rather than creating Objects you can create a class to hold the data, this is useful if you need to run functions on the data at anytime.
|