| Flex 2 Developer's Guide > Flex Data Features > Binding Data > Binding data with curly braces | |||
|
|||
|
|||
|
|||
Using the curly braces syntax is the simplest way to pass data between objects in an application. When you use this syntax, you put curly braces ({ }) around a binding source as the value of a destination property.
In the following example, a set of control properties acts as the binding source for a data model. For more information about data models, see Storing Data.
<?xml version="1.0"?>
<!-- binding/BindingBraces.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<!-- Data model stores registration data that user enters. -->
<mx:Model id="reg">
<registration>
<name>{fullname.text}</name>
<email>{email.text}</email>
<phone>{phone.text}</phone>
<zip>{zip.text}</zip>
<ssn>{ssn.text}</ssn>
</registration>
</mx:Model>
<!-- Form contains user input controls. -->
<mx:Form>
<mx:FormItem label="Name" required="true">
<mx:TextInput id="fullname" width="200"/>
</mx:FormItem>
<mx:FormItem label="Email" required="true">
<mx:TextInput id="email" width="200"/>
</mx:FormItem>
<mx:FormItem label="Phone" required="true">
<mx:TextInput id="phone" width="200"/>
</mx:FormItem>
<mx:FormItem label="Zip" required="true">
<mx:TextInput id="zip" width="60"/>
</mx:FormItem>
<mx:FormItem label="Social Security" required="true">
<mx:TextInput id="ssn" width="200"/>
</mx:FormItem>
</mx:Form>
</mx:Application>
Binding expressions in curly braces can contain an ActionScript expression that returns a value. For example, you can use the curly braces syntax for the following types of binding:
The following example shows a data model that uses each type of binding expression:
<?xml version="1.0"?>
<!-- binding/AsInBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Model id="myModel">
<myModel>
<!-- Perform simple property binding. -->
<a>{nameInput.text}</a>
<!-- Perform string concatenation. -->
<b>This is {nameInput.text}</b>
<!-- Perform a calculation. -->
<c>{(Number(numberInput.text) as Number) * 6 / 7}</c>
<!-- Perform a conditional operation using a ternary operator. -->
<d>{(isMale.selected) ? "Mr." : "Ms."} {nameInput.text}</d>
</myModel>
</mx:Model>
<mx:Form>
<mx:FormItem label="Last Name:">
<mx:TextInput id="nameInput"/>
</mx:FormItem>
<mx:FormItem label="Select sex:">
<mx:RadioButton id="isMale"
label="Male"
groupName="gender"
selected="true"/>
<mx:RadioButton id="isFemale"
label="Female"
groupName="gender"/>
</mx:FormItem>
<mx:FormItem label="Enter a number:">
<mx:TextInput id="numberInput" text="0"/>
</mx:FormItem>
</mx:Form>
<mx:Text
text="{'Calculation: '+numberInput.text+' * 6 / 7 = '+myModel.c}"/>
<mx:Text text="{'Conditional: '+myModel.d}"/>
</mx:Application>
A binding expression in curly braces or an <mx:Binding> tag can contain an ECMAScript for XML (E4X) expression when the source of a binding is a bindable property of type XML. A binding expression in curly braces automatically calls the toString() method when the binding destination is a String property. A binding expression in curly braces or an <mx:Binding> tag can contain an ECMAScript for XML (E4X) expression when the source of a binding is a bindable property of type XML; for more information, see Using an E4X expression in an <mx:Binding> tag.
In the code in the following example, there are three binding expressions in curly braces that bind data from an XML object. The first uses . (dot) notation, the second uses .. (dot dot) notation, and the third uses || (or) notation.
<?xml version="1.0"?>
<!-- binding/E4XInBraces.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var xdata:XML = <order>
<item id = "3456">
<description>Big Screen Television</description>
<price>1299.99</price><quantity>1</quantity>
</item>
<item id = "56789">
<description>DVD Player</description>
<price>399.99</price>
<quantity>1</quantity>
</item>
</order>;
]]>
</mx:Script>
<mx:Label text="Using .. notation."/>
<!-- Inline databinding will automatically call the
toString() method when the binding destination is a string. -->
<mx:List width="25%"
dataProvider="{xdata..description}"/>
<mx:Label text="Using . notation."/>
<mx:List width="25%"
dataProvider="{xdata.item.description}"/>
<mx:Label text="Using || (or) notation."/>
<mx:List width="25%"
dataProvider="{xdata.item.(@id=='3456'||@id=='56789').description}"/>
</mx:Application>
You can use ActionScript functions as the source of binding expressions. You usually do this when using a bindable property as an argument of a function. When the bindable property changes, the function executes, and the result is used in the binding destination, as the following example shows:
<?xml version="1.0"?>
<!-- binding/ASInBraces.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
[Bindable]
public var inString:String;
public function getNewText(sourceString:String):String {
return sourceString.toUpperCase();
}
]]>
</mx:Script>
<mx:TextInput id="myTI" text="Enter text here"/>
<mx:Button label="Trigger Binding" click="inString=myTI.text;"/>
<mx:TextArea text="{getNewText(inString)}"/>
</mx:Application>
In this example, Flex calls the getNewText() function to update the TextArea control every time the inString property is updated.
If the inString property is not passed as an argument, but is referenced from within the function, the function does not get invoked when the inString property changes. In the following example, the getNewText() references the inString property:
public function getNewText():String {
if(inString == "")
...
}
You then use the function in a binding expression:
<mx:TextArea text="{getNewText()}"/>
The getNewText() function gets called once when the applications starts, but changes to the inString property do not trigger a data binding, and the TextArea controls remains unchanged.
Flex 2.01
