Macriomedia Flex入门教程第二部分――创建一个简单的计算器

Flex入门教程第二部分――创建一个简单的计算器

作者：Robert Crooks

翻译及编辑：冰树

转载请务必注明来自：冰树之家（http://blog.youkuaiyun.com/zzr173/）

一、在这一部分内容中，你可以学到：

1、如何使用Application (应用程序)标签

2、如何使用Panel (面板)容器

3、如何使用Label (标签)控件

4、如何使用Button (按钮)控件

5、如何使用Grid (格子容器)控件

6、如何用ActionScript控制类编写MXML文件

二、要求：

完成本教程必须具备的软件和文件：Macriomedia Flex

Dreamweaver MX 2004 或其他文本编辑器（例如记事本），用来编辑XML和ActionScript代码

准备知识：

阅读Flex简介

会浏览一个Flex应用程序

已经学习过了第一个实例教程

三、开始创建一个计算器：

计算器包括了两个部分，一个是在MXML中建立用户界面，一个是在ActionScript控制类中编写的控制器。

（一）创建一个应用程序：

用flex1.5创建一个MXML Application应用程序。

保存为calculator.mxml

向导将为你生成：

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">

</mx:Application>

添加一个panel控件，程序是：

添加一个标签控件

添加一个停放按钮的5行4列的Grid控件在Panel控件上

<mx:Grid>

</mx:Grid>

在编辑器中对Grid进行布局。

将第一行第一列的GridItem中colSpan属性设为2，并删除后面一个GridItem

将第五行第三列的GridItem中colSpan属性设为2，并删除后面一个GridItem

在18个GridItem中添加按钮，做成一个计算器：

具体程序如下：

第一行：

第二行：

第三行：

第四行：

第五行：

width="30"

label="0"

click="calcController.addNumber('0')"width="30"

label="."

click="calcController.addNumber('.')"width="70"

label="="

click="calcController.doOperation()"

嘿嘿，写了这么多，记得保存哦。

（二） 创建一个ActionScript class，建立一个ActionScript文件。

保存为CalculatorController.as。

创建一个CalculatorController类，并添加相应的构造函数。

class CalculatorController

{

public function 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用于加、减、乘、除的操作接口。

首先是将两个字符串转化成数字类型：

r1=Number(reg1);

r2=Number(reg2);

使用选择结构确定是加、减、乘、除哪个操作：

完整函数是：

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

}

}

下面一步步完成加、减、乘、除的操作：

加法：

使用到的是if结构：

if (条件语句)

{

[ActionScript 语句]

}

[else if (条件语句) // 0 or 或更多

{

[ActionScript 语句]

}

else // 0 or 或一个

{

[ActionScript语句]

}]

比较操作如下:

Operator	Meaning
==	等于
<	小于
>	大于
<=	小于等于
>=	大于等于
!	逻辑非

添加得到如下函数：

public function addNumber(n:String):Void

{

if (operation=="none" && currentRegister=="reg2")

{

reg1="";

setCurrentRegister();

}

this[currentRegister]+=n;

setDisplay(currentRegister);

}

再添加清零等其他函数（不懂看本人加的备注）：

//刷新当前结果

public function clearEntry():Void

{

this[currentRegister]="";

setDisplay(currentRegister);

}

// 清除当前变量及结果

public function clearAll():Void

{

reg1="";

reg2="";

setCurrentRegister();

setOperation("none");

setDisplay(currentRegister);

}

// 设置当前操作的值

public function setOperation(operation:String):Void

{

this.operation=operation;

setCurrentRegister();

}

// 显示结果

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

}

（三） 最后一步就是将两文件联系起来了。

你可以通过应用程序标签进行关联。但在这里我们采用的是通过设置xmlns属性，设置成”*”，它的意思是加载所有检测到的类。但同时你还是要加上对calcController的引用。具体是：

1、添加xmlns属性：

<mx:Application xmlns:mx=http://www.macromedia.com/2003/mxml xmlns="*">

2、在应用程序第一个标签内添加：

CalculatorController.as文件