Data binding is one of the most used processes when building Flex applications, but at the same time, it’s a costly process and can delay initialization of an application (see my previous blog post). It’s a good idea to pay attention and ensure it’s used correctly and when needed. I compiled a list of five common pitfalls and incorrect misuses that developers do when building a Flex application and using the binding process.

1. Using bindable when binding is not necessary

Using unnecessary binding tags is when you bind a property that can be done easily without the binding tag. In cases where you don’t need to bind and you can do it with direct assignment then it’s best to avoid binding. I have seen this type of mistake many times in many shapes and forms. Take a look at the code below to illustrate one example:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     minWidth="1024" minHeight="768">

     <fx:Script>
          <![CDATA[

               private var text:String = "hello world";

          ]]>
     </fx:Script>

     <s:layout>
          <s:VerticalLayout />
     </s:layout>

	<s:TextInput id="textInput2" text="{text}"  />

</s:Application>

We have a text input with a text property binding to the text variable. Looks harmless enough, right? I have seen this type of tags often in Flex applications and I must admit that I have placed a few of these in the past myself. The mxmlc generates code to allow the binding. You will find that although you don’t need to bind the text String, since this is a one time assignment, the mxmlc still generates code to accommodate binding of the property. See part of the code generated by the mxmlc below:

[Bindable(event="propertyChange")]
    public function get textInput2():spark.components.TextInput
    {
        return this._1559985461textInput2;
    }

    public function set textInput2(value:spark.components.TextInput):void
    {
    	var oldValue:Object = this._1559985461textInput2;
        if (oldValue !== value)
        {
            this._1559985461textInput2 = value;
            this.dispatchEvent(mx.events.PropertyChangeEvent.createUpdateEvent(this, "textInput2", oldValue, value));
        }
    }

In this case we can do direct assignment of the value without the binding brackets:

<s:TextInput id="textInput2" text="hello world"/>

Or you can use an event (which is a much less costly than the binding process) to update the text property in case you need a variable to hold the value:

<s:TextInput id="textInput2" creationComplete="textInput2.text=text"/>

2. Using const as bindable event name

When you use the bindable tag with custom name, the example below looks like a good idea:

public static const EVENT_CHANGED_CONST:String = "eventChangedConst";

private var _number:Number = 0;

[Bindable(event=EVENT_CHANGED_CONST)]
public function get number():Number
{
	return _number;
}
public function set number(value:Number) : void
{
	_number = value;
	dispatchEvent(new Event(EVENT_CHANGED_CONST));
}

We are assigning a static property to the event name and then we can use the same assignment to dispatch the event, however, when the value changes the binding tag doesn’t recognize the change. The reason is that the event name will be EVENT_CHANGED_CONST and not the value of the variable.

3. Assuming execution order of binding

A common mistake when binding is assuming that a binding order is in synchronous execution order. Events in ActionScript are executing in an asynchronous manner. Take a look at the example below:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     minWidth="1024" minHeight="768" creationComplete="creationCompleteHandler(event)">

     <fx:Script>
          <![CDATA[
               import mx.events.FlexEvent;

               [Bindable]
               public var buttonText:String = "Execution order mistake ";

          ]]>
     </fx:Script>

     <s:layout>
          <s:HorizontalLayout />
     </s:layout>

     <s:SimpleText id="simpleText" text="{buttonText}" />
     <s:Button label="{simpleText.text}" />

</s:Application>

The code may work, however, you are assuming that the simpleText text property was already set since the value of text is binding and not the actual text property. We also get a compile time warning. See figure below:

Here’s another example, where we assume that the value of the first TextInput was already set. Also this type of assignment generates all the code to create binding from the mxmlc compiler. You have to consider if it’s worth it or if direct assignment (y=”35″) is a better choice.

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     minWidth="1024" minHeight="768">

     <s:TextInput id="textInput1" x="10" y="0" />
     <s:TextInput id="textInput2" x="0" y="{textInput1.x+25}" />

</s:Application>

4. Assigning Binding tag when you can avoid it

There are many cases where you can write your code easily without data binding and use ChangeWatcher or use events to assign a value. It’s recommended to avoid binding when it’s not needed. Consider the following code:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     minWidth="1024" minHeight="768">

     <fx:Script>
          <![CDATA[
               import mx.events.FlexEvent;

               [Bindable]
               public var dp:Array = [ { label:"New York", data: "New York" },
                    { label:"Miami Beach", data: "Miami Beach" } ];

          ]]>
     </fx:Script>

     <mx:ComboBox id="cb" editable="false" width="100" dataProvider="{dp}" />

</s:Application>

Looks pretty standard code in Flex application, however, this type of binding is not needed since instead of binding you can do direct assigement using an event handler:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
     xmlns:s="library://ns.adobe.com/flex/spark"
     xmlns:mx="library://ns.adobe.com/flex/halo"
     minWidth="1024" minHeight="768" creationComplete="creationCompleteHandler(event)">

     <fx:Script>
          <![CDATA[
               import mx.events.FlexEvent;

               public var dp:Array = [ { label:"New York", data: "New York" },
                    { label:"Miami Beach", data: "Miami Beach" } ];

               protected function creationCompleteHandler(event:FlexEvent):void
               {
                    cb.dataProvider = dp;
               }

          ]]>
     </fx:Script>

     <mx:ComboBox id="cb" editable="false" width="100" />

</s:Application>

5. Using binding class and binding property at the same time

Another common mistake to set a class to be bindable and then assign each property in a class to be bindable as well. See the code below:

package
{
     [Bindable]
     public class CustomerVO
     {
          [Bindable]
          public var customerID:int;

          public function CustomerVO(customerID:int) {
               this.customerID = customerID;
          }
     }
}

The reason that the bindable tag is not needed for the CustomerID property is because the class is already set to be bindable and every property in the class will be set to be bindable.

Data binding contains tremendous value, but also holds disadvantages. I recommend ensuring it is being used correctly and when needed since data binding can create overhead and memory leaks, which will cause your application to suffer in terms of performance.