`
wangyisong
  • 浏览: 238154 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

    博客分类：
  • FLEX
Flex脚本XML 
阅读更多

跟我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>标签使用。

 

     

 

 

  • 大小: 5.7 KB
  • 大小: 5.1 KB
  • 大小: 4.9 KB
分享到：
| 跟我StepByStep学FLEX教程------Demo3之数 ...
评论
12 楼 娇雨zj 2013-10-31  
请问：我用第二种绑定了数据，BindingUtils.bindProperty(testProBar, "label", dragHs, "value");再切换回手动单击加载进度条的方式，不能显示百分比数字了，这个应该怎么改呀？
11 楼 q821424508 2013-08-21  
darkfish_125 写道
q821424508 写道
楼主没有贴代码，各位大神贴出了代码，但是有两个问题？ 有人能帮解答一下么
1.最终效果怎么样，
我点击右边的下拉列表，能出现效果，就是让左边的按钮可见不可见，
但是当我点击slider划动的时候，可以划动，但是progressbar却没有任何效果
2.BindingUtils.bindSetter(setProValue,dragHs,"value");  这个函数是干什么用的
我的理解是，但划动slider的时候progress会和slider保持一样的进度值，但是我这里没有效果  不知道为什么


朋友，你的<mx:ProgressBar>控件enabled属性设为false了，改成true就OK了。


按照你说的，把enabled设置为trule了，还是不行，求解
10 楼 darkfish_125 2013-08-20  
q821424508 写道
楼主没有贴代码，各位大神贴出了代码，但是有两个问题？ 有人能帮解答一下么
1.最终效果怎么样，
我点击右边的下拉列表，能出现效果，就是让左边的按钮可见不可见，
但是当我点击slider划动的时候，可以划动，但是progressbar却没有任何效果
2.BindingUtils.bindSetter(setProValue,dragHs,"value");  这个函数是干什么用的
我的理解是，但划动slider的时候progress会和slider保持一样的进度值，但是我这里没有效果  不知道为什么


朋友，你的<mx:ProgressBar>控件enabled属性设为false了，改成true就OK了。
9 楼 q821424508 2013-08-20  
楼主没有贴代码，各位大神贴出了代码，但是有两个问题？ 有人能帮解答一下么
1.最终效果怎么样，
我点击右边的下拉列表，能出现效果，就是让左边的按钮可见不可见，
但是当我点击slider划动的时候，可以划动，但是progressbar却没有任何效果
2.BindingUtils.bindSetter(setProValue,dragHs,"value");  这个函数是干什么用的
我的理解是，但划动slider的时候progress会和slider保持一样的进度值，但是我这里没有效果  不知道为什么

下面是我的code ：
<?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" applicationComplete="init();">
<s:layout>
<s:BasicLayout/>
</s:layout>
<fx:Declarations>
<!-- 将非可视元素（例如服务、值对象）放在此处 -->
</fx:Declarations>
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.collections.ArrayList;

private var num:Number=0;
private var styleArr:ArrayList = new ArrayList(); 

internal function init():void{ 
styleArr.addItem("Button Click"); 
styleArr.addItem("Hslider Value"); 
cmbStyle.dataProvider = styleArr; 
}

internal function setProValue(num:Number):void{ 
testProBar.setProgress(num, 20); 
}
internal function clickPro():void { 
trace(cmbStyle.selectedIndex); 

//手动模拟 
if(num <= 100) { 
setProValue(num); 
num += 10; 
} 

if(num > 100) { 
num = 0; 
} 
} 
internal function styleChange():void{
if (cmbStyle.selectedIndex == 1) { 
startBtn.enabled = false; 
dragHs.enabled = true; 

BindingUtils.bindSetter(setProValue, dragHs, "value"); 

//BindingUtils.bindProperty(testProBar, "label", dragHs, "value"); 
} else { 
startBtn.enabled = true; 
dragHs.enabled = false; 

} 
}

]]>
</fx:Script>
<s:Panel x="155" y="104" width="404" height="334">
<s:Button x="50" y="38" label="开始" width="84" height="26" id="startBtn"  click="clickPro()"/>
<s:Label x="156" y="38" text="方式:" height="26" width="35" fontSize="14" fontFamily="Times New Roman" verticalAlign="middle" color="#E53030" fontWeight="bold"/>
<s:ComboBox x="218" y="41" width="127"  enabled="true" id="cmbStyle" change="styleChange()" selectedIndex="1"></s:ComboBox>
<mx:ProgressBar x="68" y="103" width="241" maximum="100" indeterminate="false" enabled="false" labelPlacement="center" chromeColor="#EDFFE9" id="testProBar"/>
<s:HSlider x="68" y="167" width="241" minimum="0" maximum="100" stepSize="10" value="10" liveDragging="true" id="dragHs" chromeColor="#C2C2C2" focusColor="#EF4949"/>
</s:Panel>
</s:Application>


求解释
8 楼 nahantest 2011-10-25  
楼主做事太不细心了，我很怀疑你能否胜任作为一个开发者的工作。
何况写教程，误人子弟的教程不如不写，以下是完整代码：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" applicationComplete="init();">

	<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, 10);
			}
			
			internal function clickPro():void{
				trace(cmbStyle.selectedIndex);
				
				if (num <= 10) {
					setProValue(num);
					num += 1;
				}
				
				if (num > 10) {
					num = 0;
				}
			}
			
			internal function styleChange():void{
				if (cmbStyle.selectedIndex == 1) {
					startBtn.enabled = false;
					dragHs.enabled = true;
					
					BindingUtils.bindSetter(setProValue, dragHs, "value");
					
					//BindingUtils.bindProperty(testProBar, "label", dragHs, "value");
				} else {
					startBtn.enabled = true;
					dragHs.enabled = false;
					
				}
			}
		]]>
	</mx:Script>

	<mx:Panel x="195.5" y="95" width="665" height="340" layout="absolute" title="This is a Panel" fontSize="15" backgroundColor="#DCBE16">
		<mx:Button x="116.5" y="51" label="Click" id="startBtn" click="clickPro()"/>
		<mx:Label x="226.5" y="53" text="Style: "/>
		<mx:ComboBox x="368.5" y="50" id="cmbStyle" change="styleChange()"></mx:ComboBox>
		<mx:ProgressBar x="116.5" y="127" width="412" height="37" id="testProBar" labelPlacement="center" visible="true" mode="manual"/>
		<mx:HSlider x="116.5" y="198" width="412" height="36" id="dragHs"/>
	</mx:Panel>
	<mx:Label x="10" y="10" text="This is a Demo about Progress Bar" fontSize="36"/>
	
	
	
</mx:Application>
7 楼 偶尔玩玩 2011-07-12  
下拉框没出来，回头再摸索
6 楼 tongliaozhang 2010-08-24  
补充一下 控件的代码 呵呵

<mx:Panel x="128" y="67" width="568" height="359" layout="absolute">
<mx:Button x="67" y="42" label="开始" width="93" height="32" id="startBtn" click="clickPro()"/>
<mx:Label x="189" y="50" text="方式：" color="#E82AD8" fontSize="15" fontWeight="bold" textAlign="center"/>
<mx:ComboBox x="280" y="47" id="cmbStyle" change="styleChange()"></mx:ComboBox>
<mx:ProgressBar x="67" y="135" width="373" height="26" mode="manual" labelPlacement="center"
id="testProBar" barColor="haloBlue" trackColors="[white,haloSilver]" trackHeight="20"/>
<mx:HSlider x="67" y="212" width="373" id="dragHs"/>
</mx:Panel>
5 楼 ylzyd12345 2010-07-08  
自己摸索了半个多小时。把mxml代码贴出来。可能跟楼主有不同。
<?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" width="611" height="448"  initialize="init()">
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.binding.utils.BindingUtils;
			import mx.collections.ArrayCollection;
			import mx.collections.ArrayList;
			import mx.controls.Alert;
			private var num:Number = 0;
			private var styleArr:ArrayList;
			
			[Bindable]
			public var cards:ArrayCollection = new ArrayCollection(
				[ {label:"Button",data:1},{label:"Hslider Value",data:2}//这样的数组分配方式也是第一次见:) 经过分析才学习到:这里的"data"似乎是自定义的变量名,label是组件"label"
				]);
//			internal function init():void {
//				styleArr.addItem("Button Click");
//				styleArr.addItem("Hslider Value");
//				cmbStyle.dataProvider = cards;
//			}
			
			internal function setProValue(num:Number):void {
				testProBar.setProgress(num,100);
				testProBar.label = "CurrentProgress" + " " + num+ "%";
			}
			
			internal function clickPro():void {
				trace(cmbStyle.selectedIndex);
				
				//手动模拟
				if(num <= 100) {
					setProValue(num);
					num += 10;
				}
				
				if(num > 100) {
					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;
				}
			}
			
			

		]]>
	</fx:Script>
	<s:Button x="40" y="127" label="开始" height="25" id="startBtn" click="clickPro();"/>
	<s:Label x="143" y="127" text="方式：" width="47" height="25" textAlign="center" verticalAlign="middle" color="#FE0101"/>
	<s:DropDownList x="249" y="131" id="cmbStyle"  dataProvider="{cards}" selectedIndex="0" change=" styleChange();" ></s:DropDownList>
	<mx:ProgressBar x="40" y="204" id="testProBar" height="38" minimum="0" maximum="100" color="#35F708" label="CurrentProgress 0%" labelPlacement="bottom" mode="manual" />
	<s:HSlider x="40" y="298" width="200" id="dragHs" minimum="0" maximum="100" stepSize="10"/>
</s:Application>
4 楼 zht110227 2010-07-07  
过程不是很清楚，你的截图，最起码你的说明你使用的是那个控件吧。我不熟悉的话，还得一个一个的找。然后对着看形状？还有只有脚本代码，那个mxml代码那，代码完整贴出来，我也能慢慢研究，只贴一部分，我怎么看那。希望改进。谢谢。
3 楼 41062947 2010-04-09  
没有代码搞不定呀老大，能不能把完整代码贴出来呀？
2 楼 lichuhui 2009-11-18  
总算搞掂了 。。。
1 楼 lichuhui 2009-11-18  
过程讲的不够清楚，如果能贴出源代码就好了。。。前面的几个例子我跟着做都可以做出来，但这样有点问题，希望能贴出源代码
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    跟我StepByStep学FLEX教程------王一松

    Demo4：进度条的数据绑定 - **数据绑定原理**：解释数据绑定的基本概念和工作原理。 - **实现步骤**：通过具体实例展示如何使用数据绑定来更新进度条的状态。 #### 10. Demo5：事件Event - **事件类型**：介绍...

    跟我StepByStep学FLEX教程-王一松.pdf

    6. 数据类型和数据绑定：在Flex开发中，理解数据类型对于处理用户输入和在组件之间共享数据非常重要。数据绑定是将界面组件与数据源连接起来的一种方法，当数据源更新时，UI也会相应更新。 7. 事件处理：Flex中的...

    跟我StepByStep学FLEX教程.pdf

    跟我StepByStep学FLEX教程.pdf 跟我StepByStep学FLEX教程.pdf 跟我StepByStep学FLEX教程.pdf 跟我StepByStep学FLEX教程.pdf 跟我StepByStep学FLEX教程.pdf

    跟我StepByStep学FLEX教程

    《跟我StepByStep学FLEX教程》是一本深入浅出的FLEX学习指南，由知名专家王一松编著。本书旨在帮助初学者和有一定基础的开发者系统地掌握Adobe Flex技术，通过逐步的教学方法，引领读者从零开始，直至能够独立开发富...

    跟我StepByStep学FLEX教程 flex教程

    Flex支持数据绑定，这意味着UI组件可以直接与数据模型关联，当数据改变时，界面会自动更新。同时，理解事件处理机制对于响应用户操作至关重要。 7. Flex与服务端通信 Flex应用程序可以通过AMF（Action Message ...

    跟我StepByStep学FLEX

    根据给定的信息，我们可以将《跟我StepByStep学FLEX》这本教程的主要知识点概括如下： ### FLEX基础 #### 概述 - **FLEX介绍**：FLEX是一种用于构建跨平台桌面应用程序和移动设备应用程序的技术。它结合了HTML、...

    StepByStep学FLEX教程.pdf

    通过一个进度条的例子来说明数据绑定的具体应用。 - **自定义组件**：除了内置组件外，开发者还可以根据需求创建自定义组件。这部分会教授如何定义自己的组件并封装成库供以后使用。 #### 五、综合案例 - **页面...

    flex-超好的flex学习资料

    书中通过具体的Demo，如进度条的数据绑定，详细解释了数据绑定的原理和实现方法。同时，事件处理也是Flex开发中不可或缺的一部分，书中不仅讲解了Flex中的事件机制，还通过实例展示了如何创建和处理自定义事件，以及...

    FLEX教程码源集合

    2. **跟我StepByStep学FLEX教程------王一松.pdf**：这是一本面向初学者的教程，由王一松编著。通过逐步的教学方式，讲解了Flex的基础知识，包括环境搭建、界面设计、事件处理、数据绑定等内容。适合没有FLEX背景的...

    安装算量(实例体验)入门教程(StepByStep)---消防报警篇(2)知识.pdf

    《安装算量(实例体验)入门教程(StepByStep)---消防报警篇(2)》是一份关于建筑电气安装算量的详细指南，主要讲解了消防报警系统的布线与识别布置过程，以及工程图的分层管理。以下是教程中涉及的关键知识点： 1. **...

    安装算量(实例体验)入门教程(StepByStep)---消防水篇借鉴.pdf

    《安装算量(实例体验)入门教程(StepByStep)---消防水篇借鉴》 本文主要介绍了使用金格软件进行安装工程量计算的入门教程，特别是针对消防水系统的计算。教程分为七个章节，旨在帮助初学者逐步理解并掌握专业安装算...

    安装算量(实例体验)入门教程(StepByStep)---消防报警篇(2).pdf

    《安装算量(实例体验)入门教程(StepByStep)---消防报警篇(2)》是一份详尽的教程，旨在帮助初学者掌握安装算量软件的使用，特别是在消防报警系统的回路识别与布置方面。以下是对教程内容的详细解析： 在消防报警系统...

Magicbox
Global site tag (gtag.js) - Google Analytics