Flex 3快速入門: 處理資料 使用資料繫結

本文來自：http://www.airia.cn/FLEX_Directory/using_data_binding/

資料繫結是連線一個物件中資料到另一個物件的處理過程。它提供了在應用程式中傳遞資料的方便的途徑。

Adobe Flex 3提供幾個途徑來指定資料繫結:

• 使用大括號({})語法。
• 使用在大括號中ActionScript表示式
• 在MXML中使用<mx:Binding>標籤
• 在ActionScript中使用繫結

使用大括號({})語法。

資料繫結需要源屬性，目標屬性，觸發事件。觸發事件表名了合適需要從源向目標拷貝資料。下邊的例子展示了一個Text控制元件獲得Hslider控制元件值屬性的資料。在大括號中的屬性名是繫結表示式的源屬性。當原屬性的值發生變化，Flex複製源屬性的當前值mySlider.value到目標屬性，Text控制元件的text屬性。

連線：要檢視使用大括號語法更復雜的關於資料繫結的例子，檢視Defining data models

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/DataBindingSimple/index.html"
    width="250" height="150"
>
    <mx:Panel
        title="Simple data binding"

        paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
        horizontalAlign="center"

    >
        <mx:HSlider id="mySlider"/>
        <mx:Text text="{mySlider.value}"/>           
    </mx:Panel>

</mx:Application>

使用在大括號中ActionScript表示式

大括號中的繫結表示式能夠被包含在ActionScript表示式中用來發回一個結果。例如你能夠使用大括號語法用於下邊型別的繫結：

• 在大括號中一個單獨的可繫結屬性
• 在大括號中使用字串串聯，其中報站一個可繫結的屬性
• 在大括號中基於可繫結屬性的計算
• 在大括號中使用條件運算來判斷一個可繫結屬性

下邊的例子中這事了使用者介面中使用了每一種型別的繫結表示式
 

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/DataBindingActionScriptExpressionsSimple/index.html"   
    width="420" height="350"
>
    <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) as Number) * 6 / 7}</c>

            <!-- Perform a conditional operation using a ternary operator;
                the person object contains a Boolean variable called isMale. -->
            <d>{(isMale.selected) ? "Mr." : "Ms."} {nameInput.text}</d>
        </myModel>

    </mx:Model>

    <mx:Panel
        paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10"

        width="100%" height="100%"
        title="Binding expressions"
    >
        <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="{'Simple binding: '+myModel.a}"/>
        <mx:Text text="{'String concatenation: '+myModel.b}"/>

        <mx:Text text="{'Calculation: '+numberInput.text+' * 6 / 7 = '+myModel.c}"/>       
        <mx:Text text="{'Conditional: '+myModel.d}"/>

    </mx:Panel>   
</mx:Application>

執行結果

在MXML中使用<mx:Binding>標籤

可以使用<mx:Binding>標記作為大括號語法的大體方案。當你使用<mx:Binding>標記時，你需要將源屬性賦給<mx:Binding>標記的source屬性，並且目標屬性賦給detination屬性。這與使用大括號語法是等同的。

在一個MCV架構中，與大括號語法相比，使用<mx:Binding>標記完全的從Model中分離了View（使用者介面）。在這個架構中，binging標記扮演了Controller。<mx:Binding>標記也使得不同的源屬性可以繫結到相同的目標屬性上，因為你可以使用多個<mx:Binding>標記指向同一個目標。

下邊的例子中，通過<mx:Binding>標記，使用者介面的控制元件屬性被繫結在wormModel資料模型中。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/DataBindingBindingTag/index.html"
    width="400" height="200"
>

    <!-- Model: Worm data -->
    <mx:Model id="wormModel">
        <Worm>
            <length/>
        </Worm>
    </mx:Model>

    <!--
        View: User Interface controls.
    -->
    <mx:Panel
        title="Using the binding tag"
        paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
        horizontalAlign="center"
    >
        <mx:Form>
            <mx:FormItem label="Length of worm:">
                <mx:HSlider id="mySlider"/>
            </mx:FormItem>
        </mx:Form>
        <mx:Text id="statusText"/>           
    </mx:Panel>  

    <!--
        Controller: Properties of user interface controls are bound
        to the data model using <mx:Binding> tags.
    -->

    <mx:Binding
        source="mySlider.value"
        destination="wormModel.length"
    />
    <mx:Binding
        source="wormModel.length"
        destination="statusText.text"
    />
</mx:Application>

 

注意： <mx:Binding>標記的source屬效能夠包含大括號。當包含大括號，source屬性的值被作為一個單獨的ActionScript表示式來處理。當有大括號在source屬性中時，它的值被當作關聯的ActionScript表示式來處理，下邊的表示式都是有效的。

<mx:Binding
        source="'The worm is ' + wormModel.length + 'cm long.'"
        destination="statusText.text"
    />

<mx:Binding
        source="{'The worm is ' + wormModel.length + 'cm long.'}"
        destination="statusText.text"
    />

<mx:Binding
        source="'The worm is ' + {wormModel.length} + 'cm long.'"
        destination="statusText.text"
    />

在ActionScript中使用繫結

一般在MXML中使用大括號({})或<mx:Binding>標記來定義資料繫結。你也可以在ActionScript中定義資料繫結，通過使用mx.binding.utils.BindingUtils類來實現。這個類的靜態方法bindProperty()方法使你建立一個基於變數的繫結，bindSetter()方法顯示一個基於setter方法的繫結。

例子

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
    xmlns:mx="http://www.adobe.com/2006/mxml"
    viewSourceURL="src/DataBindingActionScript/index.html"
    width="400" height="200"
    initialize="initializeHandler();"
>

    <!--
        Controller: Properties of user interface controls are bound
        to the data model using ActionScript.
    -->

    <mx:Script>
        <![CDATA[
            import mx.binding.utils.BindingUtils;           
            private function initializeHandler():void
            {
                // Updates the model
                BindingUtils.bindProperty(wormModel, "length", mySlider, "value");
               
                // Reads from the model to update the status text
                BindingUtils.bindProperty(statusText, "text", wormModel, "length");
            }
        ]]>
    </mx:Script>

    <!-- Model: Worm data -->
    <mx:Model id="wormModel">
        <Worm>
            <length/>
        </Worm>
    </mx:Model>

    <!--
        View: User Interface controls.
    -->

    <mx:Panel
        title="Using the binding tag"
        paddingLeft="10" paddingRight="10" paddingBottom="10" paddingTop="10"
        horizontalAlign="center"
    >
        <mx:Form>
            <mx:FormItem label="Length of worm:">
                <mx:HSlider id="mySlider"/>
            </mx:FormItem>
        </mx:Form>
        <mx:Text id="statusText"/>           
    </mx:Panel>   
</mx:Application>