Adobe Flex提供三种方法指定Flex数据绑定-adobe flex教程

本文和大家重点学习一下Flex数据绑定，Adobe Flex 提供三种方法用于指定Flex数据绑定：MXML 中的大括号({})语法，MXML 中的<mx:Binding>标记，以及ActionScript 中的BindingUtils 的系列方法。

关于Flex数据绑定

Flex数据绑定是将一个对象中的数据同另一个对象中的数据联系在一起的过程。Flex数据绑定为在应用的不同层之间传递数据提供了便捷方法。Flex数据绑定需要一个源属性，一个目的属性，以及用于表明何时将数据从源属性拷贝到目的属性的触发事件。当源属性变化时，对象发出触发事件。

Adobe Flex 提供三种方法用于指定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>

Flex数据绑定表达式中可以将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 属性。下面的例子使用<mx:Binding>标记定义了一个从TextInput 控件到Text 控件的Flex数据绑定：

<?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>标记都能在编译期定义Flex数据绑定，而使用ActionScript 代码则可以在运行期定义Flex数据绑定，如下例所示：

<?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 就能自动将值拷贝到所有的目的属性。为了让Flex 执行拷贝，必须使用[Bindable]标记来向Flex 注册这个属性。
The [Bindable] 元数据标记有以下语法:

[Bindable]  
[Bindable(event="eventname")]

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

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

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

【编辑推荐】