Macromedia Flex 制作计算器源码和制作步骤

这个计算器是由两个部分组成：一个前台界面的MXML文件，一个后台控制器的AS文件。mxml文件负责显示计算器的界面，as文件负责处理用户发送的信息并计算结果。在这个教程中我们主要学习：
[list]The Application class
The Panel container
The Label element
The Grid container
The Button element[/list]
ActionScript的主要学习内容:
[list]A class definition
Properties
Methods
The if-else and switch-case control structures[/list]

==================== 创建界面 ====================
创建一个空白的mxml文件，保存为calculator.mxml，一个符合标准的flex文件必须加入MX的类库
xmlns:mx="http://www.macromedia.com/2003/mxml
因此，在calculator.mxml写入下面的代码：

==================== 创建主面板 ====================
计算器中所有的按钮都集中在Panel元素中，因此我们首先要创建一个Panel面板，
并设置它的tittle属性为：Calculator
在Application区域添加：

==================== 创建计算器显示屏 ====================
显示屏其实是一个Label元素，它能够显示一行文字，Label元素有许多的属性，在这里，我们使用一下集中属性：
[list]id: Label的标识，类似Flash中的Instance Name
width: Label的宽度，单位：象素
text: Label的内容
textAlign: 对齐方式： left | right | center [/list]
在Panel区域中添加如下代码：

注意：在这里我们并没有设置Label的text属性，因为我们过会要通过后台程序动态显示Label标签的内容

==================== 创建 Grid ====================
Grid好比是Flex的排版工具，类似与HTML中的表格，只有Grid确定下来，我们才能对整个flex程序中的各种元素进行定位
Grid标签由三个元素组成：
[list]Grid: 类似HTML中的标签
GridRow: 类似HTML中的标签
GridItem: 类似HTML中的

标签[/list]
在这里我们添加一个5行4列的Grid，其中第一行和最后一行为三列，代码如下：

Grid添加好后的效果为：

==================== 添加计算器按钮 ====================
Flex的Button控件也类似于HTML的按钮，在这里我们将使用按钮的三种属性：
[list]label: 按钮上显示的文字
width: 按钮宽度
click: 按钮按下时所响应的事件[/list]
在Flex中每一个button控件都有相同的格式：

在我们上面制作的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后的效果如下：

==================== 创建后台程序 ====================
新建一个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

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"); } }

原文地址：
www.macromedia.com/devnet/flex/articles/calculator_print.html

以上就是Macromedia Flex 制作计算器源码和制作步骤的详细内容，更多请关注0133技术站其它相关文章！

赞(0) 打赏

未经允许不得转载：0133技术站首页 » Flex

Macromedia Flex 制作计算器源码和制作步骤

相关文章

编程

置顶推荐

猜你喜欢