Flex data binding

May 25, 2021 Flex

2. Data binding - Use parentheses in MXML

4. Data binding - Use BindingUtils in ActionScript

What is data binding?

Data binding is the process by which data from one object is bound to another. /b10> Data binding requires source properties, target properties, and trigger events that indicate when data is copied from source to destination.

Flex provides three ways to perform data binding

Brace syntax in MXML scripts
the label
Binding Utis in ActionScript

Data binding - Use parentheses in MXML

The following example shows using braces to specify source-to-target data binding.

<s:TextInput id="txtInput1"/>
<s:TextInput id="txtInput2" text = "{txtInput1.text}"/>

Data binding - Use the hashtags

The following example demonstrates the use of the "lt; fx:Binding> tag to specify the source-to-target data binding."

<fx:Binding source="txtInput1.text" destination="txtInput2.text" />
<s:TextInput id="txtInput1"/>
<s:TextInput id="txtInput2"/>

Data binding - Use BindingUtils in ActionScript

The following example demonstrates using BindingUtils to specify source-to-target data binding.

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

      protected function txtInput2_preinitializeHandler(event:FlexEvent):void
      {
         BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
      }      
]]>
</fx:Script>
<s:TextInput id="txtInput1"/>
<s:TextInput id="txtInput2" 
preinitialize="txtInput2_preinitializeHandler(event)"/>

Example of Flex data binding

Let's follow these steps in the Flex app to see skin changes in action by creating a test application:

Step	Describe
1	As described in the Flex - Create Applications section, create a project called HelloWorld under package com.tutorialspoint.client.
2	Modify HelloWorld.mxml, as described below. /b10> Keep the rest of the file unchanged.
3	Compile and run the application to ensure that the business logic works as required.

The following is the contents of the modified HelloWorld.mxml file src / com / tutorialspoint / client / HelloWorld.mxml.

<?xml version="1.0" encoding="utf-8"?>
<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/mx"
   width="100%" height="100%" minWidth="500" minHeight="500"
   >
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>
   <fx:Script>
   <![CDATA[
      import mx.binding.utils.BindingUtils;   
      import mx.events.FlexEvent;

      protected function txtInput6_preinitializeHandler(event:FlexEvent):void
      {
         BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
      }
      ]]>
   </fx:Script>
   <fx:Binding source="txtInput3.text" destination="txtInput4.text" />
   <s:BorderContainer width="500" height="550" id="mainContainer" 
   styleName="container">
      <s:VGroup width="100%" height="100%" gap="50" horizontalAlign="center" 
      verticalAlign="middle">
         <s:Label id="lblHeader" text="Data Binding Demonstration"
         fontSize="40" color="0x777777" styleName="heading"/>
         <s:Panel title="Example #1 (Using Curly Braces,\{\})" width="400" 
         height="100" >
            <s:layout>
               <s:VerticalLayout paddingTop="10" paddingLeft="10"/>
            </s:layout>
            <s:HGroup >
               <s:Label text = "Type here: " width="100" paddingTop="6"/>
               <s:TextInput id="txtInput1"/>	
            </s:HGroup>
            <s:HGroup >
               <s:Label text = "Copied text: " width="100" paddingTop="6"/>
               <s:TextInput id="txtInput2" text = "{txtInput1.text}"/>
            </s:HGroup>						
         </s:Panel>
         <s:Panel title="Example #2 (Using &lt;fx:Binding&gt;)" width="400" 
         height="100" >
            <s:layout>
               <s:VerticalLayout paddingTop="10" paddingLeft="10"/>
            </s:layout>
            <s:HGroup >
               <s:Label text = "Type here: " width="100" paddingTop="6"/>
               <s:TextInput id="txtInput3"/>	
            </s:HGroup>
            <s:HGroup >
               <s:Label text = "Copied text: " width="100" paddingTop="6"/>
               <s:Label id="txtInput4"/>
            </s:HGroup>						
         </s:Panel>
         <s:Panel title="Example #3 (Using BindingUtils)" width="400" 
            height="100" > <s:layout>
               <s:VerticalLayout paddingTop="10" paddingLeft="10"/>
            </s:layout>
            <s:HGroup >
               <s:Label text = "Type here: " width="100" paddingTop="6"/>
               <s:TextInput id="txtInput5"/>	
            </s:HGroup>
            <s:HGroup >
               <s:Label text = "Copied text: " width="100" paddingTop="6"/>
               <s:TextInput enabled="false" id="txtInput6" 
               preinitialize="txtInput6_preinitializeHandler(event)"/>
            </s:HGroup>						
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

When all the changes are ready, let's compile and run the application in normal mode, as in the Flex - Create Application chapter.
If all goes well with your application, this will result in the following results: ]