`

ChangeWatcher Bindable

    博客分类:
  • flex
阅读更多

 

Adobe Flex 提供三种方法用于指定数据绑定:MXML 中的大括号({})语法,MXML 中的
<mx:Binding>标记,以及ActionScript 中的BindingUtils 的系列方法。


(1)下面的例子使用大括号({})语法来展示一个Text 控件,该控件的数据来自于TextInput 控件Text 属性:

 

<?xml version="1.0"?>
<!-- binding/BasicBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="myTI" text="Enter text here"/>
<mx:Text id="myText" text="{myTI.text}"/>
</mx:Application>
 

   数据绑定表达式中可以将ActionScript 代码以及E4X 表达式作为一部分包含进来,如下例
所示:


<?xml version="1.0"?>
<!-- binding/BasicBindingWithAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="myTI"/>
<mx:Text id="myText" text="{myTI.text.toUpperCase()}"/>
</mx:Application>

 

(2)用<mx:Binding>标记 作为大括号语法的替代方法。在使用<mx:Binding>时,要为
<mx:Binding>标记提供一个源属性作为标记的source 属性以及提供一个目的属性作为标记的
destination 属性。


<?xml version="1.0"?>
<!-- binding/BasicBindingMXML.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="myTI"/>
<mx:Text id="myText"/>
<mx:Binding source="myTI.text" destination="myText.text"/>
</mx:Application>

 

  同大括号语法相比,用<mx:Binding>标记能够将视图(用户界面)同模型完全分离。
<mx:Binding>标记也能实现将多个源属性绑定到一个相同的目的属性,这是因为能够定义多个
具有相同的destination 属性的<mx:Binding>标记.

 大括号语法和<mx:Binding>标记都能在编译期定义数据绑定,而使用ActionScript 代码则
可以在运行期定义数据绑定,如下例所示:

<?xml version="1.0"?>
<!-- binding/BasicBindingAS.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
import mx.binding.utils.*;
// Define data binding.
public function initBindingHandler():void {
BindingUtils.bindProperty(myText, "text", myTI, "text");
}
]]>
</mx:Script>
<mx:TextInput id="myTI"/>
<mx:Text id="myText" preinitialize="initBindingHandler();"/>
</mx:Application>

   

 

(3)创建用作数据绑定源的属性

  当创建一个用于绑定表达式源的属性,那么在源属性值发生变化时Flex 就能自动将值拷贝
到所有的目的属性。为了让Flex 执行拷贝,必须使用[Bindable]标记来向Flex 注册这个属性。
The [Bindable] 元数据标记有以下语法:
[Bindable]
[Bindable(event="eventname")]

  如果忽略了事件名称,Flex 自动地创建一个名为propertyChange 的事件,并且在属性发生
变化时,由Flex 发出这个事件以触发所有以这个属性作为源的数据绑定。

  下面的例子作了一个maxFontSize 属性和一个minFontSize 属性变量可用于数据绑定表达式的源:

 <?xml version="1.0"?>

<!-- binding/FontPropertyBinding.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
<![CDATA[
// Define public vars for tracking font size.
[Bindable]
public var maxFontSize:Number = 15;
[Bindable]
public var minFontSize:Number = 5;
]]>
</mx:Script>
<mx:Text text="{maxFontSize}"/>
<mx:Text text="{minFontSize}"/>
<mx:Button click="maxFontSize=20; minFontSize=10;"/>
</mx:Application>
 

2. 在ActionScript 中定义数据绑定

  通过使用mx.binding.utils.BindingUtils能够在ActionScript中定义绑定。这个类定义了
几个静态方法,通过使用bindProperty() 方法可以让我们创建一个到用变量实现的属性的数据
绑定,或者用bindSetter()方法创建一个到用方法实现的属性的数据绑定。

 

(1)在MXML 与在ActionScript 定义数据绑定的区别
编译期在MXML 中定义数据绑定与在运行期在ActionScript 中定义数据绑定有一些不同之
处:

分享到:
评论
1 楼 xiejiangbo 2009-09-01  
· Gods determine what you're going to be. -- Julius Erving
· 人生的奋斗目标决定你将成为怎样的人。 -- 欧文

相关推荐

    Flex Data Binding详解

    - **ChangeWatcher**:虽然ChangeWatcher可以用来监视某些对象属性的变化,但它无法监控私有变量或自定义事件的变更,除非你手动处理这些事件。 - **自定义事件**:在使用自定义事件时,必须确保在源数据改变后正确...

    绑定也疯狂 第二版

    当源属性使用[Bindable]元标签标记后,编译器会自动生成必要的绑定代码,从而实现对源属性变化的自动侦听和目标更新。 2. Flex框架内置了高级的观察器,能够处理复杂的绑定逻辑,如绑定链。此外,Flex组件和数据...

    FLEX内存释放优化原则

    - 如果使用了记录功能(如`BindingUtils.bindSetter()`或`ChangeWatcher.watch()`),那么在不再需要这些功能时,应当调用相应的取消记录方法(如`ChangeWatcher.unwatch()`)。这可以避免因记录未被清除而导致的...

    flex如何进行内存优化

    - 当使用`BindingUtils.bindSetter()`或`ChangeWatcher.watch()`等方法时,记得调用`ChangeWatcher.unwatch()`来取消监听,以防止内存泄露。 3. **效果处理:** - 当使用动画效果(如`Effect`)时,在不再需要时...

    Flex 动态绑定BindingUtils.bindProperty

    动态绑定是通过`ChangeWatcher`对象实现的,`watcher1`和`watcher2`分别用于这两个绑定。当不再需要绑定时,可以通过调用`unwatch()`方法来解除绑定,这样就不会再有属性之间的联动更新。 这个功能在Flex应用中非常...

    FLEX内存优化技巧集合

    2. **系统类泄露**:使用系统类如BindingUtils、ChangeWatcher等后,忘记执行相应的清除操作。 3. **效果泄露**:应用效果到组件后,删除对象前需停止效果并解除target引用。 4. **SWF泄露**:卸载SWF时,调用unload...

Global site tag (gtag.js) - Google Analytics