There are many different ways how to use DataBinding.
Beyond the obvious ones there are a few more which could be a nice feature for some weird hacks…

Flex gives us 4 different techniques to use DataBinding:

• Curly Brackets in MXML
• Binding tag
• BindingUtils
• ChangeWatcher

Lets have an overview of the possibilities of each technique:

Curly Brackets in MXML

The most obvious one: Binding a source value to a destination value:

This works also for readOnly properties and static constants. You can omit the Bindable metadata tag because the Binding is only triggered at application startup. Static variables are not supported (the Adobe docs are not correct at this). Also Binding to style properties are not supported.

To add 2 way Binding simply use the curly brackets syntax in both objects crosswise:

<mx:TextInput id="input3" text="{input4.text}"/>
<mx:TextInput id="input4" text="{input3.text}"/>

Here some code examples for Actionscript and E4X expressions:

// Method calls and calculations
<mx:Text text="{ Math.round(Number(myTI.text)) * 6 / 7 }" />

// Perform string concatenation
<mx:Text text="Cool stuff for lazy {myTI.text}" />

// Perform a conditional operation using a ternary operator
<mx:Text text="{(isMale.selected) ? 'Mr.' : 'Ms.'} {myTI.text}" />

// E4X expressions
<mx:List dataProvider="{data.item.(@id=='36' || @id=='59').desc}"/>

A nice feature which is probably not typically used in your daily work, is the possibility to bind to functions. You can use a function as source for your Binding:
(Read more…)

DataBinding is one of the favorite features of Flex. It makes development fast and is really nice to use. In the following posts we will have a closer look to some different aspects of DataBinding.

• Performance
• Features (beyond the obvious ones)
• Generated Code under the hood

So lets start first with a closer look at Performance:
It is clear that such a nice feature has it´s overhead.
For small and medium applications this probably will not be even noticeable. The benefit´s for rapid development will knock out the performance considerations. But when you work on larger applications you may come to a point where you have to take care of every possible bottleneck. And the sum of a lot of small improvements will give you a considerable performance boost at the end.

Lets have a look to different approaches to set a value from a source to a destination object:

• Binding in MXML with the curly brackets (or the Bindable tag)
• Using BindingUtils (or ChangeWatcher) in Actionscript
• Custom Event dispatching
• Setting the property directly

I created some tests passing a random value from a source to a destination with 10 000 iterations and repeated this tests 10 times to get a good average value.
Here are the results:

• Binding in MXML: 412 ms
• BindingUtils: 188 ms
• Event dispatching: 146 ms
• Write property directly: 81 ms

(Read more…)