首頁»Flash»Flex4 AS3的簡單綁定總結

Flex4 AS3的簡單綁定總結

來源:ituring 發布時間:2013-01-05 閱讀次數:

  Flex開發中,組件的綁定功能是非常強大的,善用綁定,將大大提高開發效率。綁定實質也是事件處理,進一步說,要學好Flex,Flex的事件處理機制一定要理解透徹。接下來就對Flex AS3的簡單綁定做個總結。

  先來看看,不使用綁定時的常規處理方式:

<?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" minWidth="955" minHeight="600"
               fontSize="12" fontFamily="微軟雅黑">
    <fx:Declarations>
        <!-- 將非可視元素(例如服務、值對象)放在此處 -->
    </fx:Declarations>
    <s:layout>
        <s:BasicLayout />
    </s:layout>
    <s:Group top="30" left="20">
         <s:layout>
             <s:HorizontalLayout/>
         </s:layout>
        <s:TextInput id="myTextInput1"/>
        <s:Button label="復制到:" click="myTextInput2.text=myTextInput1.text"/>
        <s:TextInput id="myTextInput2"/>
    </s:Group>
</s:Application>

  效果如下:

  現在來看看使用綁定的3種場景。

  1. 組件內部綁定

<s:Group top="30" left="20">
        <s:layout>
            <s:HorizontalLayout/>
        </s:layout>
        <s:TextInput id="myTextInput1"/>
        <s:TextInput id="myTextInput2" text="{myTextInput1.text}"/>
    </s:Group>

  注意綁定使用花括號標記,效果如下,在第一個TextInput里輸入文字,第二個TextInput自動同步顯示:

  要實現雙向同步綁定,只需這樣:

<!-- <s:TextInput id="myTextInput1"/> -->
<s:TextInput id="myTextInput1" text="{myTextInput2.text}"/>
<s:TextInput id="myTextInput2" text="{myTextInput1.text}"/>

  2. 標簽綁定

  通過標簽<fx:Binding>在組件外部進行綁定,這種方式的優點在于:由于設置在組件的外部進行,代碼修改起來比較方便,只需集中修改就好了。

    <fx:Binding source="myTextInput1.text" 
                destination="myTextInput2.text" 
                twoWay="true"/>
    <s:Group top="30" left="20">
        <s:layout>
             <s:HorizontalLayout/>
         </s:layout>
        <s:TextInput id="myTextInput1"/>
        <s:TextInput id="myTextInput2"/> 
    </s:Group>

  從源(source)到目標(destination)綁定,twoWay屬性設置為true表示雙向同步綁定。

  效果如下:

 3. 變量綁定

  編程過程中將創建很多變量,這些變量也是可以跟組件綁定在一起的,這樣的話,動態生成的數據就能夠同步在對應組件里及時刷新顯示出來。

  可綁定變量要通過Flex的元關鍵字[Bindable]來實現。

  Flex MXML中的元關鍵字主要用途:

  • 用來描述變量、組件和類的額外屬性;
  • 聲明自定義組件所分發的自定義事件。
<fx:Script>
        <![CDATA[
            [Bindable]
            public var s:String="";
        ]]>
    </fx:Script>
    <s:Group top="30" left="20">
        <s:layout>
             <s:HorizontalLayout/>
         </s:layout>
        <s:TextInput id="myTextInput1"/>
        <s:Button label="點我" click="s=myTextInput1.text"/>
        <s:TextInput id="myText" text="{s}"/> 
    </s:Group>

  效果如下:

  總之,Flex 4在快速開發方面極具優勢,掌握好Flex,不啻于掌握了一門高效強大的開發工具,雖然現在有很多Flash、Flex的各種黑,但Flex在貢獻給Apache之后,迅速成為了Apache的頂級項目,其更新發布的速度更快了,社區支持非常活躍,在企業應用開發中,Flex能夠發揮很大作用。當然,移動應用開發能力也是很強大的,許多移動應用也是用Flash或Flex開發出來的。推薦有興趣的開發者把Flex放進你的開發工具箱里去。

QQ群:WEB開發者官方群(515171538),驗證消息:10000
微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
網友評論(共2條評論) 正在載入評論......
理智評論文明上網,拒絕惡意謾罵 發表評論 / 共2條評論
登錄會員中心
大发国际网址 新和县| 游戏| 德钦县| 崇文区| 长乐市| 成武县| 衢州市| 西宁市| 大石桥市| 古田县| 布拖县| 濉溪县| 湖北省| 子长县| 康乐县| 都江堰市| 大兴区| 黄大仙区| 和平区| 资源县| 麟游县| 星座| 沈丘县| 微山县| 长乐市| 秭归县| 罗山县| 津南区| 渑池县| 翁牛特旗| 托克托县| 蓬安县| 永昌县| 安义县| 五华县| 伊川县| 墨江| 汾阳市| 潜山县| 宜宾市| 哈密市| 班戈县| 灵台县| 原平市| 德化县| 中阳县| 江达县| 铜山县| 永善县| 无极县| 房山区| 阳山县| 伊宁县| 临湘市| 东乌| 象州县| 封开县| 察哈| 鄯善县| 石家庄市| 荣昌县| 谢通门县| 兴仁县| 卓资县| 马尔康县| 绩溪县| 丹东市| 江阴市| 阿拉善盟| 岐山县| 额尔古纳市| 铁岭市| 洛浦县| 漯河市| 日照市| 库伦旗| 海原县| 呼和浩特市| 泽州县| 湄潭县| 扎鲁特旗| 潞城市| 新乐市| 新巴尔虎左旗| 遂昌县| 乌拉特后旗| 晋中市| 棋牌| 成安县| 柘城县| 奉化市| 潜山县| 华安县| 宁南县| 六枝特区| 东港市| 岚皋县| 会东县| 攀枝花市| 定西市| 天津市| 康马县| 靖西县| 壶关县| 洮南市| 海口市| 定日县| 宽甸| 乌鲁木齐市| 丹阳市| 霍林郭勒市| 新竹市| 福清市| 铜梁县| 南安市| 新余市| 呼和浩特市| 成武县| 盐津县| 两当县| 柘城县| 江川县| 曲周县| 泽州县| 屏边| 双江| 扎鲁特旗| 周宁县| 两当县| 台中县| 蒙自县| 泸水县| 蓝田县| 德钦县| 元氏县| 五华县| 拉萨市|