flex实现简单计算机程序,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");

}

}