Search This Blog

2009-11-23

Flex Tutorials 14-Currency Formatter in Adobe Flex

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Style>
global {
fontSize:12;
}
</mx:Style>

<mx:Script>
<![CDATA[
private function calculate():void {
var result:Number = Number(amountInput.text) * (Number(percentInput.text) / 100);
resultLabel.text = formatter.format(result.toString());
}
]]>
</mx:Script>
<mx:CurrencyFormatter id="formatter" currencySymbol="kr" decimalSeparatorTo="," thousandsSeparatorTo="." precision="2"/>

<mx:NumberValidator id="amountV"
source="{amountInput}" property="text"
trigger="{submitButton}" triggerEvent="click"
minValue="1"
requiredFieldError="Amount is required"/>

<mx:NumberValidator id="percentV"
source="{percentInput}" property="text"
trigger="{submitButton}" triggerEvent="click"
requiredFieldError="Enter a percentage"
maxValue="100" exceedsMaxError="Percentage can't exceed 100%"
domain="int" integerError="Enter percent as a whole number"/>

<mx:Panel title="Tip Calculator">

<mx:Form>
<mx:FormItem label="Bill amount:">
<mx:TextInput id="amountInput" width="60"/>
</mx:FormItem>
<mx:FormItem label="Percent tip:">
<mx:TextInput id="percentInput" width="60"/>
</mx:FormItem>
</mx:Form>

<mx:ControlBar>
<mx:Image source="@Embed('assets/calculator.gif')" width="30" height="30" />
<mx:VBox>
<mx:Button id="submitButton"
label="Calculate"
click="calculate()"/>
<mx:Label id="resultLabel"/>
</mx:VBox>
</mx:ControlBar>

</mx:Panel>

</mx:Application>

No comments: