Flex Examples

I was installing a couple of Firefox plug-ins today and noticed the handy delay on a dialog window, which basically forces you to stare at the dialog for 2-3 seconds before you can press “OK”. Although it can be mildly annoying at times, I can see a lot of places where it would be nice to do that in a Flex application, even if it just helps to throttle user submissions (for example, a user couldn’t submit a feedback form for 3-5 seconds after the form was shown).

At any rate, I quickly threw this code together which creates a simple Flex Button control and disables it for 3 seconds. Naturally, I’m sure the code could be improved, or even possibly simplified if you didn’t want/need to update the button label with the counter, but hey…

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/19/disabling-a-button-control-for-a-fixed-number-of-seconds/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="init()">

    <mx:Script>
        <![CDATA[
            import flash.events.TimerEvent;
            import flash.utils.Timer;

            private const WAIT_NUM_SECONDS:int = 3;

            private var timer:Timer;

            private function init():void {
                timer = new Timer(1000, WAIT_NUM_SECONDS);
                timer.addEventListener(TimerEvent.TIMER, onTimer);
                timer.start();

                okButton.enabled = false;
                okButton.label = okButton.data + " (" + WAIT_NUM_SECONDS + ")";
            }

            private function onTimer(evt:TimerEvent):void {
                var count:int = timer.repeatCount - timer.currentCount;
                if (count > 0) {
                    okButton.label = okButton.data + " (" + count + ")";
                } else {
                    okButton.enabled = true;
                    okButton.label = okButton.data.toString();
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="Reset button" click="init()" />
    </mx:ApplicationControlBar>

    <mx:Button id="okButton"
            data="OK"
            width="80" />

</mx:Application>

View source is enabled in the following example.