wangyisong
- 浏览: 235919 次
- 性别:
- 来自: 北京
-
最新评论
-
LoveJavaMM：
[color=red][/color]为什么我的自定义组建不出 ...
跟我StepByStep学FLEX教程------Demo6之自定义事件&自定义组件 -
wangsiaofish：
auditionlsl 写道在使用Flex4时:
代码:cre ...
跟我StepByStep学FLEX教程------Demo5之事件Event -
wangsiaofish：
成功，perfect.
跟我StepByStep学FLEX教程------Demo7之页面跳转 -
happyzjj：
感谢楼主的共享，很受用
跟我StepByStep学FLEX教程------结束语 -
娇雨zj：
请问：我用第二种绑定了数据，BindingUtils.bind ...
跟我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>标签使用。
分享到：
评论
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保持一样的进度值，但是我这里没有效果 不知道为什么
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保持一样的进度值，但是我这里没有效果 不知道为什么
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>
求解释
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>
<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教程------读者答疑
2010-07-14 09:56 2368跟我StepByStep学FLEX教程------读者答疑 ... -
跟我StepByStep学FLEX教程------结束语
2009-09-15 11:56 2556跟我StepByStep学FLEX教程系列教程就暂 ... -
跟我StepByStep学FLEX教程------PDF版
2009-09-15 11:43 23042跟我StepByStep学FLEX教程------PDF版 ... -
跟我StepByStep学FLEX教程------贵在坚持
2009-09-15 10:53 2429跟我StepByStep学FLEX教程------贵在坚持 ... -
跟我StepByStep学FLEX教程------版权声明
2009-09-15 10:17 2335跟我StepByStep学FLEX教程------版权声明 ... -
跟我StepByStep学FLEX教程------Cairngorm之Command部分
2009-09-09 17:31 2411跟我StepByStep学FLEX教程------Cairng ... -
跟我StepByStep学FLEX教程------Cairngorm之核心控制流程
2009-09-09 16:40 2522跟我StepByStep学FLEX教程-- ... -
跟我StepByStep学FLEX教程------Cairngorm之Model Locator
2009-08-18 11:45 3151跟我StepByStep学FLEX教程-- ... -
跟我StepByStep学FLEX教程------Cairngorm之代码结构
2009-08-18 11:27 2567跟我StepByStep学FLEX教程------Cairng ... -
跟我StepByStep学FLEX教程------Demo15之Cairngorm
2009-08-10 15:45 2595跟我StepByStep学FLEX教程------Demo15 ... -
跟我StepByStep学FLEX教程------Cairngorm之环境准备
2009-08-06 15:01 4140跟我StepByStep学FLEX教程------Cairng ... -
跟我StepByStep学FLEX教程------Cairngorm之组成部分
2009-08-05 10:31 3035跟我StepByStep学FLEX教程------Cairng ... -
跟我StepByStep学FLEX教程------MVC
2009-07-28 10:41 2886跟我StepByStep学FLEX教程------MVC ... -
跟我StepByStep学FLEX教程------Caringorm之简介
2009-07-27 11:50 3370跟我StepByStep学FLEX教程------Caring ... -
跟我StepByStep学FLEX教程------Demo14Flex+Spring+Hibernate整合
2009-07-14 13:29 4764跟我StepByStep学FLEX教程------Demo14 ... -
跟我StepByStep学FLEX教程------Flex之Hibernate
2009-07-08 11:46 3239跟我StepByStep学FLEX教程------Flex之H ... -
跟我StepByStep学FLEX教程------Demo13之Flex访问数据库
2009-07-07 11:01 5222跟我StepByStep学FLEX教程-- ... -
跟我StepByStep学FLEX教程------访问数据库之hsqldb
2009-07-06 11:16 3577跟我StepByStep学FLEX教程------访问数据库之 ... -
跟我StepByStep学FLEX教程------访问数据库之JDBCTemplate
2009-07-03 11:06 3417跟我StepByStep学FLEX教程------访问数据库 ... -
跟我StepByStep学FLEX教程------Demo12之FLEX和Spring整合
2009-07-02 10:53 4729跟我StepByStep学FLEX教程------FLEX和S ...
相关推荐
1 9 跟我StepByStep学FLEX教程------Demo4之进度条数据绑定 1 10 跟我StepByStep学FLEX教程------Demo5之事件Event 1 11 跟我StepByStep学FLEX教程------Event事件机制 1 12 跟我StepByStep学FLEX教程------Demo6...
跟我StepByStep学FLEX教程------王一松.pdf
跟我StepByStep学FLEX教程------王一松
跟我StepByStep学FLEX教程 跟我StepByStep学FLEX教程 跟我StepByStep学FLEX教程 跟我StepByStep学FLEX教程 跟我StepByStep学FLEX教程
跟我StepByStep学FLEX教程.pdf 跟我StepByStep学FLEX教程.pdf 跟我StepByStep学FLEX教程.pdf 跟我StepByStep学FLEX教程.pdf 跟我StepByStep学FLEX教程.pdf
跟我StepByStep学FLEX教程 flex教程 flex大全
跟我StepByStep学FLEX教程------王一松
跟我StepByStep学FLEX,个人觉得比较好的一本关于flex书了，我最近也是刚开始学，网上没发现什么好资料，个人觉得这个不错，就传上来大家分享。设置资源分是迫不得已啊，喜欢在csdn上面下载东西，最近快没分了！
很详细的flex教程，适合新手入门很详细的flex教程，适合新手入门
安装算量(实例体验)入门教程(StepByStep)---消防水篇借鉴.pdf
安装算量(实例体验)入门教程(StepByStep)---消防报警篇分析.pdf
安装算量(实例体验)入门教程(StepByStep)---消防报警篇(2).pdf
安装算量(实例体验)入门教程(StepByStep)---消防报警篇(2)借鉴.pdf