CODEWITHSUNDEEP
actionscript-3flex4progress-bartween
dejjub-AIS
dejjub-AIS

Reputation: 1541

Flex 4 - Custom Progressbar not updating percentComplete

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);

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?

Upvotes: 0

Views: 1692

Answers (2)

Engineer
Engineer

Reputation: 48793

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>

Upvotes: 1

Adrian Pirvulescu
Adrian Pirvulescu

Reputation: 4340

Try to set mode="manual"

ex 

<mx:ProgressBar 
    id              = "idPercent"
    labelPlacement  = "center"
    mode            = "manual"/>

Upvotes: 0

Related Questions