Flex DataBinding(1)

Adobe Flex provides three ways to specify data binding:

 

1` the curly braces ({}) syntax in MXML,

2` the <fx:Binding> tag in MXML,

3` and the BindingUtils methods in ActionScript. 

 

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/halo"
               minWidth="1024"
               minHeight="768">
    <fx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;

            /**
             * Use a function to deal with data binding,
             * when  inputText change ,then will call this function
             * and the function will change the lable2.text
             */
            private function someFunction(_val:String):String
            {
                return _val + " receive";
            }

            /**
             * Binding the Data with the as3 BindingUtils
             * it define put which object.which param  binding where
             * !!Attaction the first two param is to define which object you want to binding
             */
            public function initDataBinding():void
            {
                mx.binding.utils.BindingUtils.bindProperty(lable4, "text", inputText, "text");
            }
        ]]>
    </fx:Script>
    <s:TextInput id="inputText"
                 x="22"
                 y="24"/>
    <mx:Label id="lable1"
              x="22"
              y="67"
              text="{inputText.text.toLocaleUpperCase()}"/>
    <mx:Label id="lable2"
              x="24"
              y="98"
              text="{someFunction(inputText.text)}"/>
    <mx:Label id="lable3"
              x="25"
              y="132"
              text="Label"/>
    <mx:Label id="lable4"
              preinitialize="initDataBinding()"
              x="24"
              y="167"
              text="Label"/>
    <fx:Binding source="inputText.text"
                destination="lable3.text"/>
</s:Application>

 

 

 

When data binding occurs：

Binding occurs under the following circumstances:
1· The binding source dispatches an event because the source has been modified.
This event can occur at any time during application execution. The event triggers Flex to copy the value of the
source property to the destination property.

2· At application startup when the source object dispatches the initialize event.
All data bindings are triggered once at application startup to initialize the destination property.

如果没有在initialize()函数调用时候Trigger的话，Demo中的Label3的Text默认应为“Label3”，但运行结果并非如此

 

Although binding is a powerful mechanism, it is not appropriate for all situations. For example, for a complex user
interface in which individual pieces must be updated based on strict timing, it would be preferable to use a method
that assigns properties in order. Also, binding executes every time a property changes, so it is not the best solution
when you want changes to be noticed only some of the time.

 

MoreInfo：

《Flex4 Help》P362