Fundamentals: Data Binding in Flex

Data binding enables a property to watch another property for changes in value.

{} are used for denoting/specifying data binding in flex. Below is the code example which show how to generate email address using Flex data binding

1:  <?xml version="1.0" encoding="utf-8"?>  
2:  <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"   
3:             xmlns:s="library://ns.adobe.com/flex/spark"   
4:             xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">  
5:     <s:Form x="11" y="5"   
6:           width="313"   
7:           backgroundColor="#FFFFFF"   
8:           contentBackgroundColor="#DADADA">  
9:        <s:FormItem width="290" label="First Name:">  
10:           <s:TextInput id="firstName"   
11:                     width="196"/>  
12:        </s:FormItem>  
13:        <s:FormItem width="290" label="Last Name:">  
14:           <s:TextInput id="lastName"   
15:                     width="196"/>  
16:        </s:FormItem>  
17:        <s:FormItem width="290" label="Email:">  
18:           <s:TextInput text="{firstName.text}.{lastName.text}@xyzcompany.com"   
19:                     width="196"/>  
20:        </s:FormItem>  
21:        <s:FormItem width="290">  
22:           <s:Button label="Submit"/>  
23:        </s:FormItem>  
24:     </s:Form>  
25:  </s:Application>  

The code above builds up dynamically the email address by watching the change in the First Name and Last Name property of the form.

text="{firstName.text}.{lastName.text}@xyzcompany.com" is the code specifing the data binding.
The above binding is one-way binding, that means incase changes are made to the Email id field the texts in First Name and Last Name field will not be affected.

Dispatching Events

The best practice for defining components that return information back to the main application is to design the component to dispatch an event that contains the return data.

the main application can define an event listener to handle the event and take appropriate action.

ChangeWatcher - it watches a variable for changes and when somthing happens fires an event. There are 3 ways to specify the paramters that chain.

ChangeWatcher.watch(this."myvar, header)


ChangeWater.watch(name:"myvar", getter: function():String{return "something"}}, handler);

BindingUtils.bindProperty


package mx.binding.util
// requires framework.swc
// immediately bind two properties one-way.
BindingUtils.bindProperty(this, "var1", this, "var2");

Data Binding in Flex Application

More DIY videos at 5min.com