Using TimeInput in Flex 3

In Getting Started, we looked at the general usage of TimeInput. Now, let's experiment a little to see how we can use TimeInput in more interesting ways. Rather than using it as a user input control, let's take advantage of the TimeInput's ability to format time values to create a count down timer. We'll start by adding a few controls to our application.

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:yahoo="http://www.yahoo.com/astra/2006/mxml" layout="vertical" applicationComplete="init()"> <yahoo:TimeInput id="countDown" showAMPM="false" useTwelveHourFormat="false" enabled="false" backgroundDisabledColor="0x000000" disabledColor="0xffffff" borderStyle="none"/> <mx:Button label="Reset" click="beginCountDown()"/> </mx:Application>

We've disabled the TimeInput control so that the user cannot interact with it. By giving it custom backgroundDisabledColor and disabledColor styles, it begins to look rather different. Under the TimeInput is a "Reset" button that will call a function called beginCountDown() when clicked. When the application is initialized, a function named init() is called. Let's take a moment to view some of the code that we'll place in a <mx:Script> block.

import flash.utils.getTimer; import flash.utils.Timer; import flash.events.TimerEvent; private var _lastUpdate:uint; private var _timer:Timer; private function init():void { this._timer = new Timer(500); this._timer.addEventListener(TimerEvent.TIMER, timerHandler); this.beginCountDown(); } private function beginCountDown():void { //30 seconds var totalTime:Date = new Date(0, 0, 0, 0, 0, 30); countDown.value = totalTime; this.countDown.setStyle("backgroundDisabledColor", 0x000000); this._lastUpdate = getTimer(); if(!this._timer.running) { this._timer.start(); } }

When the init() function is called, it initializes the Timer object that controls the count down, and calls the same beginCountDown() function that is called when the Reset button is clicked. This function resets the total time to 30 seconds and starts the Timer object if needed. It also resets the TimeInput control's background color to black (we'll see where it changes in a moment). Next, let's look at the timerHandler() function that is called when the Timer updates.

private function timerHandler(event:TimerEvent):void { var now:uint = getTimer(); if(now - this._lastUpdate >= 1000) { var totalTime:Date = this.countDown.value; totalTime.seconds--; this.countDown.value = totalTime; if(totalTime.seconds == 0) { this._timer.stop(); this.countDown.setStyle("backgroundDisabledColor", 0x990000); } else this._lastUpdate = getTimer(); } }

If it has been at least one second since the last update, we'll refresh the Date value in the TimeInput control. If the number of seconds has reached zero, we'll stop the Timer and display a dark red color in the background of the TimeInput.

Download the MXML example file.

For additional information, please take a look at the Examples section for functional demonstrations and the ActionScript 3.0 Class Reference for full details on every property, method, and style available to the TimeInput component.