TimeInput is a user interface component for Flex that allows the user to input a time value. This control include fields for hours, minutes, seconds, and AM/PM. Styling options allow the time to be presented in 12- or 24-hour formats.
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.
We've disabled the TimeInput control so that the user cannot interact with it. By giving it custom
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
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.
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.
To see a live example, please install Adobe Flash Player version 9 or higher.
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.