The following example shows a very simple (and probably somewhat buggy) tip calculator which I put together in a few minutes using Flex. Nothing really new, but sometimes its fun to combine a few of the things we’ve covered over the past posts and build something a bit more interesting.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/09/17/building-a-simple-tip-calculator-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
private function updateTotal():void {
var amt:Number = parseFloat(amount.data.toString());
if (isNaN(amt)) {
total.text = "Not a Number";
return;
}
var tipAmt:Number = amt * tip.value/100;
total.text = currencyFormatter.format(tipAmt + amt);
}
private function dataTipFunc(item:Number):String {
var amt:Number = parseFloat(amount.data.toString());
var tipAmt:Number = amt * item/100;
return item + "% (" + currencyFormatter.format(tipAmt) + ")";
}
private function amount_focusOut(evt:FocusEvent):void {
amount.data = Number(amount.text).toFixed(2);
amount.text = currencyFormatter.format(amount.data);
}
private function amount_focusIn(evt:FocusEvent):void {
amount.text = amount.data.toString();
}
]]>
</mx:Script>
<mx:CurrencyFormatter id="currencyFormatter" precision="2" />
<mx:Form>
<mx:FormHeading label="Tip Calculator" />
<mx:FormItem label="Amount:">
<mx:TextInput id="amount"
data="0"
restrict="0-9."
change="updateTotal();"
focusOut="amount_focusOut(event);"
focusIn="amount_focusIn(event);" />
</mx:FormItem>
<mx:FormItem label="Tip:">
<mx:HSlider id="tip"
minimum="0"
maximum="30"
value="15"
labels="[0,5,10,15,20,25,30]"
snapInterval="1"
tickInterval="5"
liveDragging="true"
change="updateTotal();"
showTrackHighlight="true"
dataTipFormatFunction="dataTipFunc" />
</mx:FormItem>
<mx:FormItem label="Total:" fontWeight="bold">
<mx:Label id="total" />
</mx:FormItem>
</mx:Form>
</mx:Application>
View source is enabled in the following example.
Will you be adding the running application to the end of your examples again soon? Keep up the good work.
yes, i miss the running applications too. BTW, your website is my new #1 flex resource.
Fear not, devoted readers. The example SWFs will be coming back, I’ve just been too busy the last few days to recreate, upload and them in the HTML.
I’ll try and find some time tonight and go back and add them in.
Sorry, and thanks for keeping me on my toes!
BFF,
Peter
Peter - The first time you load the example and enter an amount the total reads $0.00 before you move the slider control. You have to move the slider to get the new total, even though your TextInput control is calling updateTotal on its change event.
I tried using the TextInput control’s textInput event but that crashed my FireFox browser. The other TextInput events did not seem to work with. The enter event reads 0 the first time and then the next time uses the previous amount to calculate the tip.
I actually just added this code right above the amt variable declaration
This updates the data variable to whatever the text field contains, as long as it contains a number.
I am noticing that clicking on the slider track does not register as a focusOut event for the TextInput (when the text input has focus). Only clicking on the slider thumb or dragging the thumb causes this event to occur. Is there a way to force the text input to recognize a track click as a focusOut? I am having the same problem in an application I am working on, so any help is appreciated!
Thanks
first of all, I would really like to thank you for all the examples and code tutorials given on this site. it is really helpful. thank you very much for all the efforts you have put into this, really appreciate it.
i had a simple question, why do you send ‘event’ as a param for ‘amount_focusOut’ and ‘amount_focusIn’. I don’t see the param being used within the function.
Varun Shetty,
No real reason, mainly just a force of habit. You can change:
to:
And then update the ActionScript code to:
private function amount_focusIn():void { amount.text = amount.data.toString(); }Peter