Category: Flash

Macromedia Flex 制作计算器

2004-09-06 21:51:13
原文出处：http://www.macromedia.com/devnet/flex/articles/calculator.html
click to enlarge
这个计算器是由两个部分组成：一个前台界面的MXML文件，一个后台控制器的AS文件。mxml文件负责显示计算器的界面，as文件负责处理用户发送的信息并计算结果。在这个教程中我们主要学习：
    The Application class
    The Panel container
    The Label element
    The Grid container
    The Button element
ActionScript的主要学习内容:
    A class definition
    Properties
    Methods
    The if-else and switch-case control structures
==================== 创 建 界 面 ====================
创建一个空白的mxml文件，保存为calculator.mxml，一个符合标准的flex文件必须加入MX的类库
xmlns:mx="http://www.macromedia.com/2003/mxml[/color]
因此，在calculator.mxml写入下面的代码：
<?xml version="1.0">
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
</mx:Application>

[color=#CC0000]==================== 创 建 主 面 板 ====================
计算器中所有的按钮都集中在Panel元素中，因此我们首先要创建一个Panel面板，
并设置它的tittle属性为：Calculator
在Application区域添加：
<mx:Panel title="Calculator">
</mx:Panel>

==================== 创 建 计 算 器 显 示 屏 ====================
显示屏其实是一个Label元素，它能够显示一行文字，Label元素有许多的属性，在这里，我们使用一下集中属性：
    id: Label的标识，类似Flash中的Instance Name
    width: Label的宽度，单位：象素
    text: Label的内容
    textAlign: 对齐方式： left | right | center
在Panel区域中添加如下代码：
<mx:Label id="calcDisplay" width="150" textAlign="right"/>
注意：在这里我们并没有设置Label的text属性，因为我们过会要通过后台程序动态显示Label标签的内容

==================== 创 建 Grid ====================
Grid好比是Flex的排版工具，类似与HTML中的表格，只有Grid确定下来，我们才能对整个flex程序中的各种元素进行定位
Grid标签由三个元素组成：
    Grid: 类似HTML中的<table>标签
    GridRow: 类似HTML中的<tr>标签
    GridItem: 类似HTML中的<td>标签
在这里我们添加一个5行4列的Grid，其中第一行和最后一行为三列，代码如下：
<mx:Grid>
 <mx:GridRow>
 <mx:GridItem colSpan="2"></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 </mx:GridRow>
 <mx:GridRow>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 </mx:GridRow>
 <mx:GridRow>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 </mx:GridRow>
 <mx:GridRow>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem></mx:GridItem>
 </mx:GridRow>
 <mx:GridRow>
 <mx:GridItem></mx:GridItem>
 <mx:GridItem ></mx:GridItem>
 <mx:GridItem colSpan="2"></mx:GridItem>
 </mx:GridRow>
 </mx:Grid>
Grid添加好后的效果为：
click to enlarge


==================== 添 加 计 算 器 按 钮 ====================
Flex的Button控件也类似于HTML的按钮，在这里我们将使用按钮的三种属性：
    label: 按钮上显示的文字
    width: 按钮宽度
    click: 按钮按下时所响应的事件
在Flex中每一个button控件都有相同的格式：
<mx:Button label="[something]" width="[number]" click="[some handler method]"/>
在我们上面制作的18个GridItem中依次添加1、2、3、4、5、6、7、8、9、0、.、+、-、*、/、＝、Clear、C/E这些按钮，如下：
Row1
  width="70"
  label="Clear"
  click="calcController.clearAll()"
 
  width="30"
  label="C/E"
  click="calcController.clearEntry()"

  width="30"
  label="+"
  click="calcController.setOperation('add')"

Row2
  width="30"
  label="1"
  click="calcController.addNumber('1')"
  
  width="30"
  label="2"
  click="calcController.addNumber('2')"
  
  width="30"
  label="3"
  click="calcController.addNumber('3')"
  
  width="30"
  label="-"
  click="calcController.setOperation('subtract')"

Row3
  width="30"
  label="4"
  click="calcController.addNumber('4')"
  
  width="30"
  label="5"
  click="calcController.addNumber('5')"
  
  width="30"
  label="6"
  click="calcController.addNumber('6')"
  
  width="30"
  label="*"
  click="calcController.setOperation('multiply')"

Row4
  width="30"
  label="7"
  click="calcController.addNumber('7')"
  
  width="30"
  label="8"
  click="calcController.addNumber('8')"
  
  width="30"
  label="9"
  click="calcController.addNumber('9')"
  
  width="30"
  label="/"
  click="calcController.setOperation('divide')"

Row5
  width="30"
  label="0"
  click="calcController.addNumber('0')"
  
  width="30"
  label="."
  click="calcController.addNumber('.')"
  
  width="70"
  label="="
  click="calcController.doOperation()"
完成后保存文件，添加好button后的效果如下：
click to enlarge


==================== 创 建 后 台 程 序 ====================
新建一个as文件，另存为 CalculatorController.as
先创建一个CalculatorController的类：
class CalculatorController
{}
然后创建一个构造器
public function CalculatorController(){}
在CalculatorController中声明以下变量：
  public var calcView:Object;
  private var reg1:String="";
  private var reg2:String="";
  private var result:Number;
  private var currentRegister:String="reg1";
  private var operation:String="none";
  private var r1:Number;
  private var r2:Number;
接着添加功能模块：

“等于”的功能 doOperation()
  public function doOperation():Void
  {
    r1=Number(reg1);
    r2=Number(reg2);
    switch (operation)
    {
      case "add":
        result=r1+r2;
        resetAfterOp();
        break;
      case "subtract":
        result=r1-r2;
        resetAfterOp();
        break;
      case "multiply":    
        result=r1*r2;
        resetAfterOp();
        break;
      case "divide":
        result=r1/r2;
        resetAfterOp();
        break;
      default:
        //do nothing
    }
  }

输入数字的功能 addNumber()
  public function addNumber(n:String):Void
  {
    if (operation=="none" && currentRegister=="reg2")
    {
      reg1="";
      setCurrentRegister();
    }
    this[currentRegister]+=n;
    setDisplay(currentRegister);
  }

“C/E”的功能 clearEntry()
  public function clearEntry():Void
  {
    this[currentRegister]="";
    setDisplay(currentRegister);
  }

“Clear”的功能 clearAll()
  public function clearAll():Void
  {
    reg1="";
    reg2="";
    setCurrentRegister();
    setOperation("none");
    setDisplay(currentRegister);
  }

“加、减、乘、除” 的功能 setOperation()
  public function setOperation(operation:String):Void
  {
    this.operation=operation;
    setCurrentRegister();
  }

显示屏的功能 setDisplay()
  private function setDisplay(register:String):Void
  {
    calcView.calcDisplay.text = this[register];
  }

其他
  private function setCurrentRegister():Void
  {
    if (reg1=="")
    {
      currentRegister="reg1";
    }
    else
    {
      currentRegister="reg2";
    }
  }

  private function resetAfterOp():Void
  {
    reg1=String(result);
    reg2="";
    setDisplay("reg1");
    setOperation("none");
  }

==================== 最 终 完 整 的 代 码 ====================
calculator.mxml
<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml" xmlns="*">
 <!-- calculator controller -->
 <CalculatorController id="calcController" calcView="{this}"/>
 <!-- calculator view -->
 <mx:Panel title="Calculator">
 <!-- calculator display -->
 <mx:Label id="calcDisplay" width="150" textAlign="right"/>
 <!-- calculator controls -->
 <mx:Grid>
 <mx:GridRow>
 <mx:GridItem colSpan="2">
 <mx:Button width="70" label="Clear" click="calcController.clearAll()"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="C/E" click="calcController.clearEntry()"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="+" click="calcController.setOperation('add')"/>
 </mx:GridItem>
 </mx:GridRow>
 <mx:GridRow>
 <mx:GridItem>
 <mx:Button width="30" label="1" click="calcController.addNumber('1')"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="2" click="calcController.addNumber('2')"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="3" click="calcController.addNumber('3')"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="-" click="calcController.setOperation('subtract')"/>
 </mx:GridItem>
 </mx:GridRow>
 <mx:GridRow>
 <mx:GridItem>
 <mx:Button width="30" label="4" click="calcController.addNumber('4')"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="5" click="calcController.addNumber('5')"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="6" click="calcController.addNumber('6')"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="*" click="calcController.setOperation('multiply')"/>
 </mx:GridItem>
 </mx:GridRow>
 <mx:GridRow>
 <mx:GridItem>
 <mx:Button width="30" label="7" click="calcController.addNumber('7')"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="8" click="calcController.addNumber('8')"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="9" click="calcController.addNumber('9')"/>
 </mx:GridItem>
 <mx:GridItem>
 <mx:Button width="30" label="/" click="calcController.setOperation('divide')"/>
 </mx:GridItem>
 </mx:GridRow>
 <mx:GridRow>
 <mx:GridItem>
 <mx:Button width="30" label="0" click="calcController.addNumber('0')"/>
 </mx:GridItem>
 <mx:GridItem >
 <mx:Button width="30" label="." click="calcController.addNumber('.')"/>
 </mx:GridItem>
 <mx:GridItem colSpan="2">
 <mx:Button width="70" label="=" click="calcController.doOperation()"/>
 </mx:GridItem>
 </mx:GridRow>
 </mx:Grid>
 </mx:Panel>
</mx:Application>

CalculatorController.as
/*
Calculator Controller
*/
class CalculatorController
{
  // properties
  // object to hold a reference to the view object
  public var calcView:Object;
  // registers to hold temporary values pending operation
  private var reg1:String="";
  private var reg2:String="";
  // result of an operation
  private var result:Number;
  // the name of the register currently used
  private var currentRegister:String="reg1";
  // the name of the next operation to be performed
  private var operation:String="none";
  // for convenience, holder for numerical equivalents
  // of the register string values
  private var r1:Number;
  private var r2:Number;
  // constructor
  public function CalculatorController()
  {}

  // methods
  // perform the current operation on the 2 registers
  public function doOperation():Void
  {
    // cast the register values to numbers
    r1=Number(reg1);
    r2=Number(reg2);
    switch (operation)
    {
      case "add":
        result=r1+r2;
        resetAfterOp();
        break;
      case "subtract":
        result=r1-r2;
        resetAfterOp();
        break;
      case "multiply":    
        result=r1*r2;
        resetAfterOp();
        break;
      case "divide":
        result=r1/r2;
        resetAfterOp();
        break;
      default:
        // do nothing
    }
  }
  // concatenate number to the value of the current register
  public function addNumber(n:String):Void
  {
    if (operation=="none" && currentRegister=="reg2")
    {
      reg1="";
      setCurrentRegister();
    }
    this[currentRegister]+=n;
    setDisplay(currentRegister);
  }
  // clear the current register
  public function clearEntry():Void
  {
    this[currentRegister]="";
    setDisplay(currentRegister);
  }
  // clear both registers and the current operation
  public function clearAll():Void
  {
    reg1="";
    reg2="";
    setCurrentRegister();
    setOperation("none");
    setDisplay(currentRegister);
  }
  // set the current operation
  public function setOperation(operation:String):Void
  {
    this.operation=operation;
    setCurrentRegister();
  }
  // set the value shown in the display
  private function setDisplay(register:String):Void
  {
    calcView.calcDisplay.text = this[register];
  }
  // set which register is current
  private function setCurrentRegister():Void
  {
    if (reg1=="")
    {
      currentRegister="reg1";
    }
    else
    {
      currentRegister="reg2";
    }
  }
  // reset values after an operation
  private function resetAfterOp():Void
  {
    reg1=String(result);
    reg2="";
    setDisplay("reg1");
    setOperation("none");
  }
}
[Last Modified By atan, at 2007-08-15 09:28:42]
Comments Feed Comments Feed: http://www.atan.cn/feed.asp?q=comment&id=208

View Mode: Show All | Comments: 3 | Trackbacks: 0 | Toggle Order | Views: 3695
Quote pcy*
[ 2005-03-18 14:36:51 ]
[smile]
Quote 赤道*
[ 2005-03-18 14:37:26 ]
This is a hidden comment.
Quote relishjos*
[ 2009-05-06 10:08:23 ]
birthday gift

You can't post comment on this article.

Login

or

Register

labs