跟我StepByStep学FLEX教程－－－－－－Demo4之进度条数据绑定

核心提示：先看一下Demo运行效果： 手动方式BingdingUtils绑定方式一BingdingUtils绑定方式一源码如下：<mx:Script><![CDATA[ import mx.binding.utils.BindingUtils; private var num:Number=0; privat

先看一下Demo运行效果：

手动方式

BingdingUtils绑定方式一

BingdingUtils绑定方式一

源码如下：

<mx:Script>
　　<![CDATA[
　　　　　 import mx.binding.utils.BindingUtils;
　　　　　
　　　　　 private var num:Number=0;
　　　　　　　　　　　 private var styleArr:Array=[];
　　　　　　　　　　　
　　　　　　　　　　　 internal function init():void {
　　　　　　　　　　　 　styleArr.push("Button Click");
　　　　　　　　　　　 　styleArr.push("Hslider Value");
　　　　　　　　　　　 　cmbStyle.dataProvider = styleArr;
　　　　　　　　　　　 }
　　　　　　　　　　　
　　　　　　　　　　　 internal function setProValue(num:Number):void {
　　　　testProBar.setProgress(num, 1000);
　　　}
　　　
　　　internal function clickPro():void {
　　　　trace(cmbStyle.selectedIndex);
　　　　
　　　　//手动模拟
　　　　if (num <= 1000) {
　　　　　setProValue(num);
　　　　　num+=100;
　　　　}
　　　　
　　　　if (num > 1000) {
　　　　　num = 0;
　　　　}

　　　}　　　
　　　
　　　internal function styleChange():void {
　　　　if (cmbStyle.selectedIndex == 1) {
　　　　　startBtn.enabled = false;
　　　　　dragHs.enabled=true;
　　　　　
　　　　　//BindingUtils实现数据绑定
　　　　　　　　　　　　　　　　　　　 //方式一
　　　　　BindingUtils.bindSetter(setProValue, dragHs, "value");
　　　　　//方式二 这儿只说明这种绑定方式，并不是进度条效果，在进度条显示值
//　　　　　　　　　　　　　　　　　　　 BindingUtils.bindProperty(testProBar, "label", dragHs, "value");
　　　　} else {
　　　　　startBtn.enabled = true;
　　　　　dragHs.enabled=false;
　　　　}
　　　}
　　]]>
　</mx:Script>

这儿主要讲数据绑定，大家看一下运行效果就发现AS3的数据绑定还是很好用的，所谓数据绑定就是源数据和目标数据绑定，目标数据随着源数据的变化而变化。

Demo中采用BingdingUtils类的方式，大家看一下代码，非常简单。

还有以下的数据绑定方式：

1、直接在“{}”中；

　　　　　 <mx:TextInput id="testInp"/>

　　　　　 <mx:Label text="{testInp.text}"

2、使用<mx:binding>；

　　　　　 <mx:TextInput id="testInp"/>

　　　　　 <mx:Label id="desLab" text="{testInp.text}"

　　　　　 <mx:Binding source="testInp.text" destination="desLab.text">　

可以配合<mx:Model>标签使用。

文章来源：http://wangyisong.javaeye.com/blog/373230