 |
 |
 |
 |
|
|
|
PHP and Adobe Air: Building a Time-tracking and Billing Application - Part II
Develop the timer
Before you can send tickets to PHP, you need to add the
inner-workings of the timer. ActionScript contains a built-
in
Timer class, but despite its name, it isn't
well suited for use as a timer in the literal sense. Because
it relies on the application's frame rate, time calculations
can vary significantly between computers. For this
application, you use a custom StopWatch class.
You can download the class file, StopWatch.as. I don't cover this
class in line-by-line detail, but when you open it, you'll
see that it is copiously commented and pretty
straightforward. After you've downloaded the file, place it
in the src/com/flexandair folder of your
project alongside Ticket.as. Back inside the script block of
clockedWidget.mxml, add another import
statement below the Alert import to bring in
these new classes:
import com.flexandair.*;
You also need to keep track of whether the clock is running.
To do that, add a Boolean variable called
isRunning. You also need variables for the
active ticket, the user's hourly rate, the time increment
used for billing purposes, and the billable amount accrued.
Add these lines below the import statements:
[Bindable] private var stopWatch:StopWatch = new StopWatch();
private var isRunning:Boolean = false;
private var rate:int = 35;
private var increments:int = 900; //15 minutes in seconds
private var money:Number = 0;
public var ticket:TicketVO = new TicketVO();
To actually start the timer, use a function called
startTimer():
private function startTimer():void {
swLabel.addEventListener(Event.ENTER_FRAME, updateTime);
stopWatch.start();
isRunning = true;
}
The first line tells the clock-like label to run the
updateTime function you'll create in a moment
on each new frame. Then, the stopWatch's
start method is called. Finally, the
isRunning variable is set to True. Next, add
the updateTime function referenced above:
private function updateTime(e:Event):void {
swLabel.text = stopWatch.getTimeStampAsString();
money = Math.ceil((stopWatch.getTimeStamp()/100) / increments) * (.25 * rate);
moneyAccruedLabel.text = myCF.format(money);
}
The
updateTime function sets the clock
label to the string that the custom
StopWatch class returns. Then, the accrued
value of the time elapsed is calculated, and that value is
displayed in a label control. You'll see an ID you haven't
created yet: myCF. Use an MXML component called
a CurrencyFormatter to create a string
from the raw number. To create the myCF
CurrencyFormatter, place this MXML code above your
script block:
<mx:CurrencyFormatter currencySymbol="$" decimalSeparatorTo="." precision="2" id="myCF"/>
The above
CurrencyFormatter's
format() method produces a string with a dollar
sign ($), a decimal, and two decimal places.
Allowing users to control the timer
With functions to start the timer and display pertinent
information to users, you next need a function to start and
stop everything at a user's instruction. It makes more sense
to have just one button that both starts and stops the
clock. The clock should operate like a switch, with the vast
majority of user actions being either
stop or
start requests. To make the single button work
this way, simply check the isRunning Boolean
value whenever the button is clicked:
private function buttonClick():void {
if (isRunning == false) {
startTimer();
clockBtn.label = "Stop";
}
else {
clockLabel.removeEventListener(Event.ENTER_FRAME, updateTime);
stopWatch.pause();
isRunning = false;
clockBtn.label = "Start";
}
}
As you can see, whenever the button is clicked, the state of
the stopwatch is reversed and so is the label on the button.
Note that
Stop only means pause; in
other words, the counter is not reset, and no values are
cleared. To actually reset the timer, you need to use
another function:
private function reset():void {
stopWatch.pause();
isRunning = false;
clockBtn.label = 'Start';
stopWatch = new StopWatch();
swLabel.text = '00:00:00';
}
| Comments: | ||
No Messages FoundYou can post questions/corrections/feedback here
| ||
|
If you are looking for help, please post on the appropriate forum here. Your questions will be answered much more quickly. | ||
