<li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    首页»Flash»Flex4 AS3的简单绑定总结

    Flex4 AS3的简单绑定总结

    来源:ituring 发布时间:2013-01-05 阅读次数:

      Flex开发中,组件的绑定功能是非常强大的,善用绑定,将大大提高开发效率。绑定实质也是?#24405;?#22788;理,进一步说,要学好Flex,Flex的?#24405;?#22788;理机制一定要理解透彻。接下来就对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中的元关键字主要用途:

    • 用来描述变量、组件和类的额外属性;
    • 声明自定义组件所分发的自定义?#24405;?/li>
    <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能够发挥很大作用。?#27604;唬?#31227;动应用开发能力也是很强大的,许多移动应用也是用Flash或Flex开发出来的。推荐?#34892;?#36259;的开发者把Flex放进你的开发工具箱里去。

    QQ群:WEB开发者官方群(515171538),验证消息:10000
    微信群:?#26377;?#32534;微信 849023636 邀请您加入,验证消息:10000
    提示:更多精彩内容关注微信公众号:全栈开发者中?#27169;╢sder-com)
    网友评论(共2条评论) 正在载入评论......
    理智评论文明上网,拒绝恶意谩骂 发表评论 / 共2条评论
    登录会员中心
    大乐透彩票预测
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>
    <li id="2aw4k"></li>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
  • <div id="2aw4k"><tr id="2aw4k"></tr></div>
    <center id="2aw4k"><small id="2aw4k"></small></center><center id="2aw4k"><small id="2aw4k"></small></center>