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

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

 

说明：该文系作者原创，请勿商用或者用于论文发表，转载必须经作者同意并且注明出处。

 

 

     先看一下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>标签使用。