Adobe Flex 3 Help

Using ActionScript in data binding expressions

You can use ActionScript in data binding expressions defined by curly braces and by the <mx:Binding> tag; however, you cannot use ActionScript when defining a data binding by using the BindingUtils.bindProperty() or the BindingUtils.bindSetter() method.

Using ActionScript expressions in curly braces

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.

  • A single bindable property inside curly braces
  • To cast the data type of the source property to a type that matches the destination property
  • String concatenation that includes a bindable property inside curly braces
  • Calculations on a bindable property inside curly braces
  • Conditional operations that evaluate a bindable property value

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)) * 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>

The executing SWF file for the previous example is shown below:

Using ActionScript expressions in Binding tags

The source property of an <mx:Binding> tag can contain curly braces. When there are no curly braces in the source property, the value is treated as a single ActionScript expression. When there are curly braces in the source property, the value is treated as a concatenated ActionScript expression. The <mx:Binding> tags in the following example are valid and equivalent to each other:

<?xml version="1.0"?>
<!-- binding/ASInBindingTags.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            public function whatDogAte():String {
                return "homework";
            }
        ]]>
    </mx:Script>

    <mx:Binding 
        source="'The dog ate my '+ whatDogAte()" 
        destination="field1.text"/>
    <mx:Binding 
        source="{'The dog ate my '+ whatDogAte()}" 
        destination="field2.text"/>
    <mx:Binding 
        source="The dog ate my {whatDogAte()}" 
        destination="field3.text"/>

    <mx:TextArea id="field1"/>
    <mx:TextArea id="field2"/>
    <mx:TextArea id="field3"/>
</mx:Application>

The executing SWF file for the previous example is shown below:

The source property in the following example is not valid because it is not an ActionScript expression:

<mx:Binding source="The dog ate my homework" destination="field1.text"/>

Using an ampersand character in a data binding expression

Because of the parsing rules of XML, if you want to use an ampersand character, &, in a data binding expression in an MXML file, you must replace it with the hexadecimal equivalent character, &amp;. For example, if you want to use a logical OR expression, written in ActionScript as &&, then you have to write is as &amp;&amp;, as the following example shows:

<mx:Button label="Test" enabled="{authorized &amp;&amp; cc}" />