flex3.0] Binding 바인딩 방법

플렉스에서는 바인딩할수있는 여러가지 방법이 있는데 바인딩 처리 방법입니다

Method1.
                {} 를 이용한 방법

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]" viewSourceURL="srcview/index.html">

    <mx:TextInput id="myTI" text="Type something here"/>
    <mx:Text id="myText" text="{myTI.text}" color="white"/>
    <mx:Text id="myTextUpper" text="{myTI.text.toUpperCase()}" color="white"/>
    <mx:Text id="myTextLength" text="{myTI.text.length}" color="white"/>

</mx:Application>

 

Method2.
                {} 를 이용한 방법

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]">
    <mx:Text text="Type into either field" color="white"/>
   
    <mx:TextInput id="myTI1" text="{myTI2.text}"/>
    <mx:TextInput id="myTI2" text="{myTI1.text}"/>
   
</mx:Application>

 

Method3.
                <Binding > 테그를 이용한 방법

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]">

    <mx:TextInput id="myTI" text="Type something here"/>
    <mx:Text id="myText" color="white"/>  

    <mx:Binding source="myTI.text" destination="myText.text"/>
</mx:Application>

 

Method4.
                ActionScript에서 BindingUtils.bindProperty를 이용한 바인딩

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]">
   
    <mx:Script>
        <![CDATA[
            import mx.binding.utils.*;
           
            // Define data binding.
            public function initBindingHandler():void {
            BindingUtils.bindProperty(myText, "text", myTI, "text");
            }
          ]]>   
    </mx:Script>

    <mx:TextInput id="myTI" text="Type something here"/>
    <mx:Text id="myText" preinitialize="initBindingHandler();" color="white"/>
</mx:Application>

Method5.
                [Bindable]키워드를 이용한 바인딩
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle"
    horizontalAlign="center" backgroundGradientColors="[0x000000,0x323232]">
   
    <mx:Script>
        <![CDATA[
            // Define public vars for tracking temps.
            [Bindable]
            public var highTemp:Number = 90;
   
            [Bindable]
            public var lowTemp:Number = 55;
        ]]>   
    </mx:Script>
   
    <mx:Text text="High: {highTemp}   Low: {lowTemp}" color="white"/>

    <mx:Button label="Winter Temps" click="highTemp=50; lowTemp=10;"/>
    <mx:Button label="Summer Temps" click="highTemp=95; lowTemp=80;"/>
</mx:Application>