1. CSC 2720 Building Web Applications FLEX – Data Binding

2. Data Binding  A source property is associated with a destination property such that whenever the source property change, the destination property is automatically updated with the value of the source property.

3. Performing Data Binding  { expression }, a data binding expression, is used in an attribute's value to establish data binding.  "Bindable" properties within a data binding expression automatically become the source property.  In the above example,  myTextInput.text becomes the source property.  The label's " text " becomes the destination property.

4. Performing Data Binding <mx:Binding source="myTextInput.text" destination="myLabel.text" />  Data binding can also be established using the element.

5. Using functions in the source of a data binding expression <![CDATA[ private function doubleStr(str:String): String { return str + " " + str; } ]]> Within { … }, we can  Invoke the method of the source property  Use the source property in an expression  Use the returned value of a function

6. Data Binding with Multiple Source and Destination Properties

7. Bindable Properties  A bindable property is a property that emits a property change event when its value changes.  Only a bindable property can be used as a source of a data binding.  Most properties on Flex UI controls are bindable properties.

8. Binding an ArrayCollection to a List control <![CDATA[ import mx.collections.ArrayCollection; [Bindable] private var listData: ArrayCollection = new ArrayCollection( [ "Value 1", "Value 2" ] ); ]]>  [Bindable] is a metadata that makes a property (or a class) bindable.  Must be specified before the access modifier of the property/class.

9. Binding an ArrayCollection to a List control Value 1 Value 2  A property created using MXML tags is bindable by default.

10. Exercise  Create a form that would update the message at the bottom whenever the input changes. John FemaleMaleGender Last Name First Name Hi! Mr. John Doe Doe

11. References and Resources  Adobe Flex 3.0 For Dummies, by Doug McCune, Deepa Subramaniam. Wiley Publishing, Inc. 2008