Different Data Binding Techniques

About Data Binding Process

The Data Binding process can be defined as a state where data of one object is tied to another object. Data binding requires a source property, a destination property and a triggering event which indicates when to copy the data from source to destination. Adobe Flex provides three ways to do Data Binding

Curly brace syntax in MXML Script ({})

<fx:binding> tag in MXML

BindingUtils in ActionScript

Data Binding - Using Curly Braces in MXML

Following example demonstrates using curly braces to specify data binding of a source to destination.

<s:TextInput id="txtInput1"/>

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

Data Binding - Using <fx:Binding> tag in MXML

Following example demonstrates using <fx:Binding> tag to specify data binding of a source to destination.

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

<s:TextInput id="txtInput1"/>

<s:TextInput id="txtInput2"/>

Data Binding - Using BindingUtils in ActionScript

Following example demonstrates using BindingUtils to specify data binding of a source to destination.

<fx:Script>

   <![CDATA[

      import mx.binding.utils.BindingUtils;

      import mx.events.Adobe FlexEvent;

      protected function txtInput2_preinitializeHandler(event:Adobe FlexEvent):void

      {

         BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");

      }     

]]>

</fx:Script>

<s:TextInput id="txtInput1"/>

<s:TextInput id="txtInput2"

preinitialize="txtInput2_preinitializeHandler(event)"/>

Adobe Flex Data Binding Example

Following are the steps to see skinning in action in a Adobe Flex application by creating a test application:

Step 1 - Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Adobe Flex - Create Application chapter.

Step 2 - Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.

Step 3 - Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified HelloWorld.mxml file src/com/application/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/Adobe Flex/spark"

   xmlns:mx="library://ns.adobe.com/Adobe 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.Adobe FlexEvent;

      protected function txtInput6_preinitializeHandler(event:Adobe 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>