flex 数据绑定之理解

来源:互联网 发布:淘宝苏哥游戏是黑key吗 编辑:程序博客网 时间:2024/05/16 18:24

       之前写了《 flex 事件之理解》和《 flex meta tag 之理解》,本想是为写本文 flex 数据绑定之理解做铺垫的,谁知网上已有 flex 数据绑定之理解很好的文章,如下:

       http://www.cnblogs.com/nianshi/archive/2010/05/19/1739407.html FLEX 数据绑定 (1)

       http://www.cnblogs.com/nianshi/archive/2010/05/19/1739409.html FLEX 数据绑定 (2)

       http://www.cnblogs.com/nianshi/archive/2010/05/19/1739411.html FLEX 数据绑定 (3)

       因此,已无再详片大论 flex 绑定理解之需要,但是鉴于上述 3 篇文章稍显混论,看起来不是那么通俗易懂,为此,我简单的补充了一个 demo ,并且作简单归纳总结。

1、  flex 绑定通常有 3 中实现方式,即 FLEX 数据绑定 (1) 所述的 {} 绑定、 fx binding as 代码实现 ( BindingUtils , ChangeWatcher );

2、  flex 绑定分单、双向绑定,默认情况下都是单向绑定;

3、  flex 绑定最常见的编写方式就是 [Bingable] 元标签及 {} 的引用;

4、  flex 绑定基于事件,只不过 [Bingable] 等同于 [Bindable(event="propertyChange")] 而已;

5、  flex 绑定可以基于简单的变量、也可基于复杂的对象、方法和事件;

 

/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

下述为 flex 3 种绑定方式实现的一个简单 demo

<?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 "

              creationComplete="initWatcher()" >

    <s:layout>

       <s:BasicLayout/>

      

    </s:layout>

    <fx:Declarations>

       <!-- 将非可视元素(例如服务、值对象)放在此处 -->

    </fx:Declarations>

   

    <fx:Script>

       <![CDATA[

           import mx.binding.utils.BindingUtils;

           import mx.binding.utils.ChangeWatcher ;

           import mx.events.FlexEvent;    

           public function updateMyString(val:String): void {

              p3_target.text = val.toUpperCase();

           }

          

           public function mySetterBinding(event:FlexEvent): void {

              var watcherSetter:ChangeWatcher =

                  BindingUtils.bindSetter(updateMyString, p3_source, "text" );

           }

          

           public function initWatcher(): void {

              ChangeWatcher .watch(p4_source, "text" , watcherListener);

           }

          

           public function watcherListener(event:Event): void {

              p4_target.text=p4_source.text.toUpperCase();

           }

       ]]>

    </fx:Script>

    <fx:Binding source=" p2_source.text " destination=" p2_target.text " />

   

    <s:Panel x=" 9 " y=" 6 " width=" 462 " height=" 70 " title=" 大括号绑定 " id=" panel1 " >

       <s:Label x=" 6 " y=" 10 " text=" source: " />

       <mx:TextInput id=" p1_source " text=" Enter text here " x=" 50 " y=" 4 " />

       <s:Label x=" 259 " y=" 10 " text=" target: " />

       <mx:Text id=" p1_target " text=" { p1_source.text.toUpperCase() } " x=" 307 " y=" 4 " />

    </s:Panel>

    <s:Panel x=" 9 " y=" 84 " width=" 462 " height=" 98 " title=" mx:binding " id=" panel2 " >

       <s:Label x=" 6 " y=" 10 " text=" source: " />

       <mx:TextInput id=" p2_source " text=" Enter text here " x=" 50 " y=" 4 " />

       <s:Label x=" 259 " y=" 10 " text=" target: " />

       <mx:Text id=" p2_target " text="" x=" 307 " y=" 4 " />

       <s:Label x=" 7 " y=" 43 " text=" fx:binding 等同于 BindingUtils.bindProperty(p2_target,'text',p2_source,'text'); " />

    </s:Panel>

    <s:Panel x=" 9 " y=" 190 " width=" 462 " height=" 70 " title=" actionscript binding bindSetter " id=" panel3 " >

       <s:Label x=" 6 " y=" 10 " text=" source: " />

       <mx:TextInput id=" p3_source " text=" Enter text here " x=" 50 " y=" 4 " />

       <s:Label x=" 259 " y=" 10 " text=" target: " />

       <mx:Text id=" p3_target " text="" x=" 307 " y=" 4 " initialize="mySetterBinding(event);" />

    </s:Panel>

    <s:Panel x=" 9 " y=" 272 " width=" 462 " height=" 70 " title=" actionscript binding changewatcher " id=" panel0 " >

       <s:Label x=" 6 " y=" 10 " text=" source: " />

       <mx:TextInput id=" p4_source " text=" Enter text here " x=" 50 " y=" 4 " />

       <s:Label x=" 259 " y=" 10 " text=" target: " />

       <mx:Text id=" p4_target " text="" x=" 307 " y=" 4 " />

    </s:Panel>

</s:Application>

 

原创粉丝点击