Flex中创建一个简单计算器的例子

By Minidxer | October 5, 2008

接下来的例子演示了Flex中创建一个简单计算器。严格来说这个还不能算是计算器，只是简单的计算了增加百分比的计算。在“Amount”中输入数字并拖动滑标，可以看到计算结果。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
  3.         layout="vertical"
  4.         verticalAlign="middle"
  5.         backgroundColor="white">
  6.  
  7.     <mx:Script>
  8.         <![CDATA[
  9.             private function updateTotal():void {
  10.                 var amt:Number = parseFloat(amount.data.toString());
  11.                 if (isNaN(amt)) {
  12.                     total.text = "Not a Number";
  13.                     return;
  14.                 }
  15.                 var tipAmt:Number = amt * tip.value/100;
  16.                 total.text = currencyFormatter.format(tipAmt + amt);
  17.             }
  18.  
  19.             private function dataTipFunc(item:Number):String {
  20.                 var amt:Number = parseFloat(amount.data.toString());
  21.                 var tipAmt:Number = amt * item/100;
  22.                 return item + "% (" + currencyFormatter.format(tipAmt) + ")";
  23.             }
  24.  
  25.             private function amount_focusOut(evt:FocusEvent):void {
  26.                 amount.data = Number(amount.text).toFixed(2);
  27.                 amount.text = currencyFormatter.format(amount.data);
  28.             }
  29.  
  30.             private function amount_focusIn(evt:FocusEvent):void {
  31.                 amount.text = amount.data.toString();
  32.             }
  33.         ]]>
  34.     </mx:Script>
  35.  
  36.     <mx:CurrencyFormatter id="currencyFormatter" precision="2" />
  37.  
  38.     <mx:Form>
  39.         <mx:FormHeading label="Tip Calculator" />
  40.         <mx:FormItem label="Amount:">
  41.             <mx:TextInput id="amount"
  42.                     data="0"
  43.                     restrict="0-9."
  44.                     change="updateTotal();"
  45.                     focusOut="amount_focusOut(event);"
  46.                     focusIn="amount_focusIn(event);" />
  47.         </mx:FormItem>
  48.         <mx:FormItem label="Tip:">
  49.             <mx:HSlider id="tip"
  50.                     minimum="0"
  51.                     maximum="30"
  52.                     value="15"
  53.                     labels="[0,5,10,15,20,25,30]"
  54.                     snapInterval="1"
  55.                     tickInterval="5"
  56.                     liveDragging="true"
  57.                     change="updateTotal();"
  58.                     showTrackHighlight="true"
  59.                     dataTipFormatFunction="dataTipFunc" />
  60.         </mx:FormItem>
  61.         <mx:FormItem label="Total:" fontWeight="bold">
  62.             <mx:Label id="total" />
  63.         </mx:FormItem>
  64.     </mx:Form>
  65.  
  66. </mx:Application>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Flex | Tags: , , , , , ,

Related Post

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll

Sponsored Ads