Flex 4 - Custom Progressbar not updating percentComplete - actionscript-3

Question

I am trying to create a custom progress bar which has common functionality implemented like twining and setting the total value etc.,
Every thing seems to be working but for some reason, percentComplete is always 0 instead of increasing the value even when I call setProgress()
Update1:
Also, the tweener is not calling the onUpdate function (old code)
Update2:
If I modified the onUpdate function like this, onComplete is called but onUpdateProgress is called only once
onUpdate:this.onUpdateProgress(getTimer()),
Old code (call to function from inside anonymous function)
onUpdate:function():void{this.onUpdateProgress(getTimer());}
This is my custom Progressbar mxml:
<?xml version="1.0" encoding="utf-8"?>
<mx:ProgressBar xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
indeterminate="false" labelPlacement="center" fontWeight="bold" textDecoration="none" fontStyle="normal" textAlign="center"
chromeColor="0xFFFFFF" mode="manual"
>
<fx:Script>
<![CDATA[
import caurina.transitions.Tweener;
import flash.utils.getTimer;
public var cancel:Boolean = false;
public const MESSAGE_TYPE_DELETE:String = "Delete";
public const MESSAGE_TYPE_REMOVE:String = "Remove";
public const MESSAGE_TYPE_COLLECT:String = "Collect";
public const MESSAGE_TYPE_MAINTAIN:String = "Maintain";
public const MESSAGE_TYPE_BUILD:String = "Build";
public const MESSAGE_TYPE_CONSTRUCT:String = "Construct";
private var _orgMessage:String;
private var _newMessage:String;
private var _completeMessage:String;
private var _lastValue:uint;
private var _tweenCompleted:Boolean;
private function onUpdateProgress(value:Number):void{
var txt:String;
if (!cancel){
Update3:
Below is where I am setting the progress
this.setProgress(value,_lastValue);
if (value == _lastValue){
txt = _completeMessage;
_tweenCompleted = true;
}else{
txt = _newMessage;
}
label = txt + ":" + int(this.percentComplete).toString() + "%";
trace(value,_lastValue,this.percentComplete);
}
}
private function onComplete():void{
_tweenCompleted = true;
label = _completeMessage + ": 100%";
trace("completed");
}
public function startProgress(message:String,duration:int = 2):void{
_tweenCompleted = false;
_lastValue = getTimer() + duration * 1000;
_newMessage = ((message.charAt(message.length - 1) == "e")?message.substr(0,message.length - 1):message) + "ing";
_completeMessage = "Completed";
Tweener.addTween(this,
{
time:duration,
onUpdate:function():void{this.onUpdateProgress(getTimer());},
onComplete:this.onComplete(),
transition:"liner"
}
);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</mx:ProgressBar>
Main mxml
protected function startProgress(event:MouseEvent):void
{
this.removeAllElements();
pb = null;
pb = new FGProgressBar();
this.addElement(pb);
pb.startProgress("Remove",5);
}
I have trace commands in the onUpdateProgress()
trace(value,_lastValue,this.percentComplete);
value is the current progress value, which I am passing getTimer()
_lastValue is the total value of the progress bar, this is set in the initialzation (getTimer() + duration * 1000)
percentComplete is the progress status which should increase after setProgress()
its priting something like this
.
.
.
.
.
5162 8130 0
5210 8130 0
5244 8130 0
5754 8130 0
6262 8130 0
6771 8130 0
7279 8130 0
7787 8130 0
8295 8130 0
If you notice the trace, the value is incrementing, but the percentComplete is 0
Can someone tell me what I am missing?

Answer 1

I have used Flex SDK 4.6.0 and code works for me:
FGProgressBar.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:ProgressBar xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"
indeterminate="false" labelPlacement="center" fontWeight="bold" textDecoration="none" fontStyle="normal" textAlign="center"
chromeColor="0xFFFFFF" mode="manual"
>
<fx:Script>
<![CDATA[
import caurina.transitions.Tweener;
import flash.utils.getTimer;
public var cancel:Boolean = false;
public const MESSAGE_TYPE_DELETE:String = "Delete";
public const MESSAGE_TYPE_REMOVE:String = "Remove";
public const MESSAGE_TYPE_COLLECT:String = "Collect";
public const MESSAGE_TYPE_MAINTAIN:String = "Maintain";
public const MESSAGE_TYPE_BUILD:String = "Build";
public const MESSAGE_TYPE_CONSTRUCT:String = "Construct";
private var _orgMessage:String;
private var _newMessage:String;
private var _completeMessage:String;
private var _lastValue:uint;
private var _tweenCompleted:Boolean;
private function onUpdateProgress(value:Number):void{
var txt:String;
if (!cancel){
this.setProgress(value,_lastValue);
if (value == _lastValue){
txt = _completeMessage;
_tweenCompleted = true;
}else{
txt = _newMessage;
}
label = txt + ":" + int(this.percentComplete).toString() + "%";
trace(value,_lastValue,this.percentComplete);
}
}
private function onComplete():void{
_tweenCompleted = true;
label = _completeMessage + ": 100%";
trace("completed");
}
public function startProgress(message:String,duration:int = 2):void{
_tweenCompleted = false;
_lastValue = getTimer() + duration * 1000;
_newMessage = ((message.charAt(message.length - 1) == "e")?message.substr(0,message.length - 1):message) + "ing";
_completeMessage = "Completed";
Tweener.addTween(this,
{
time:duration,
onUpdate:function():void{this.onUpdateProgress(getTimer());},
onComplete:this.onComplete(),
transition:"liner"
}
);
}
]]>
</fx:Script>
<fx:Declarations>
<!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
</mx:ProgressBar>
Main.mxml
<?xml version="1.0"?>
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark"
height="600">
<fx:Script><![CDATA[
protected function startProgress(event:MouseEvent):void
{
this.removeAllElements();
var pb:FGProgressBar = null;
pb = new FGProgressBar();
this.addElement(pb);
pb.startProgress("Remove",5);
}
]]></fx:Script>
<s:Button click="startProgress(event)"/>
</s:Application>

Answer 2

Try to set mode="manual"
ex
<mx:ProgressBar
id = "idPercent"
labelPlacement = "center"
mode = "manual"/>