Tech Per

About Technology in My Life

• Home
• Photography
• Contact
• About

Flex Spinning Progress Indicator Component

Sometimes you need to indicate progress to users when the application is doing something, like calling a remote web-service or something. At times, it can be nice to incorporate this as an element in the UI, that operates in an unobtrusive way. For instance showing a small indicator on or besides the button, that initiated the operation in progress.

Here is a small spinning wheel example on how to do this with an old style ASCII spinning wheel animation. Enter the LabelProgressIndicator.mxml component:

<?xml version="1.0" ?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
    <mx:Script><![CDATA[
        [Bindable]
        private var statusText:String;

        [Bindable]
        private var progressText:String;

        private const SPIN_CHARS:String = "/-\\|/-\\|";

        private var workingDotsTimer:Timer;
        private var progressCounter:int;

        public function startProgress(status:String):void {
            if (workingDotsTimer == null) {
                statusText = status;
                workingDotsTimer = new Timer(200);
                progressCounter = 0;
                workingDotsTimer.addEventListener(TimerEvent.TIMER, onWorkingDotsTimer);
                workingDotsTimer.start();
            }
        }

        public function stopProgress():void {
            if (workingDotsTimer != null) {
                workingDotsTimer.removeEventListener(TimerEvent.TIMER, onWorkingDotsTimer);
                workingDotsTimer.stop();
                workingDotsTimer = null;
                statusText = null;
                progressText = null;
            }
        }

        private function onWorkingDotsTimer(event:TimerEvent):void {
            if (progressCounter == SPIN_CHARS.length - 1) {
                progressCounter = 0;
            } else {
                progressCounter++;
            }
            progressText = SPIN_CHARS.charAt(progressCounter);
        }

        ]]></mx:Script>

    <mx:Label id="status" text="{statusText}"/>
    <mx:Label id="progress" text="{progressText}" fontFamily="courier" fontWeight="bold"/>
</mx:HBox>

and here is how to use it:

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ui="*">

    <mx:Button click="progress.startProgress('working')" label="Start"/>
    <mx:Button click="progress.stopProgress()" label="Stop"/>

    <ui:LabelProgressIndicator id="progress" />

</mx:Application>

October 28, 2009  Tags: flex  Posted in: Programming, Rich Internet Applications

• « Previous post
• Next post »

• Recent Posts

  • Debugging Hibernate AbstractFlushingEventListener Errors When Batching
  • Basic Auth – Just Say No
  • CXF Method Not Found When Further Annotated
  • Flex Spinning Progress Indicator Component
  • Flex Data Bindings – Behind The Scenes