`
anmo_china
  • 浏览: 15457 次
  • 性别: Icon_minigender_1
  • 来自: 无锡
最近访客 更多访客>>
社区版块
存档分类
最新评论

数据绑定

    博客分类:
  • Flex
阅读更多
什么是数据绑定:当数据源对象的数据发生变化时,目标对象的数据会自动更新,而不需要我们再编写代码区强制更新


数据绑定实际也是借助于实践机制来完成的,当目标使用了数据绑定的时候,目标对象就会监听数据源对象的某一固定事件,当数据源发生变化时,数据源会派发改变事件(ChangeEvent),通知目标对象更新数据,这个过程由Flex完成,不用我们动手干预


数据绑定的前提条件:源对象的数据和目标对象的数据格式相同


实现数据绑定的方法:
      1、在对象的属性标签中使用{}把数据源直接绑定到对象的某个属性上
      2、在对象的属性标签中使用{}把某个函数的返回值作为数据源绑定到对象的属性上,函数的参数要是用[Bindable]绑定符号
      [Bindable]:[Bindable(event="eventname")]
          event表示当前数据源发生变化时数据源所在对象派发的事件类型,它是可选项,默认的事件名是“propertyChange”,一般情况
          下只需要使用[Bindable]标签
      3、使用<mx:Binding>标签:
            标签中有两个属性source="..." destination="...",分别是数据源和目标对象
            在使用第三种方法的时候要会“<mx:Model>”标签,下面示例中有

下面是三种方法的示例:
      第一种方法的示例:页面上有一个label和一个可拖动的滚动条,在拖动滚动条的时候label中字体大小改变,这个大小就是滚动条的值
<mx:Label x="42" y="47" text="中国加油" width="368" height="217" fontSize="{fsize.value}" id="txt_label"/>
<mx:HSlider x="42" y="358" width="482" minimum="10" maximum="100" id="fsize"/>


      第二种方法的示例:在这个示例中方法的返回值是数据源,当滚动条改变时触发滚动条的change事件,改变n的值,字体大小监听事件,当n改变时触发事件调用方法,并且将方法的返回值作为字体的大小
<mx:Script>
    <![CDATA[
        [Bindable]
        private var n:int;
        internal function sliderChange(num:int){
            return num * num;
        }			
    ]]>
</mx:Script>

<mx:Label x="42" y="47" text="中国加油" width="368" height="217" fontSize="{sliderChange(n)}" id="txt_label"/>
<mx:HSlider x="42" y="358" width="482" minimum="1" maximum="10" id="fsize" change="{n=fsize.value}"/>


       第三种方法:
            “<mx:Model>”标签的简单示例
<mx:Model id="books">
    <books>
        <book>
            <name>Flex入门</name>
            <author>anmo</author>
        </book>
        <book>
            <name>Flex入门</name>
            <author>anmo</author>
        </book>
    </books>
</mx:Model>


        第三种方法的简单示例代码,代码中省略了两个文本框,示例的大致内容是:使用“<mx:Model>”标签来定义数据源,然后用<mx:Binding>标签绑定到文本框中
<mx:Model id="books">
    <books>
        <book>
            <name>Flex入门</name>
            <author>anmo</author>
        </book>
    </books>
</mx:Model>

<mx:Binding source="books.book.name" destination="text_bookName.text"/>
<mx:Binding source="books.book.author" destination="text_bookAuthor.text"/>
分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics