Macriomedia Flex入门教程第二部分――创建一个简单的计算器
Flex入门教程第二部分――创建一个简单的计算器
作者：Robert Crooks
翻译及编辑：冰树
转载请务必注明来自：冰树之家（http://blog.csdn.net/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控件，程序是：
<mx:Panel title="计算器">
</mx:Panel>
添加一个标签控件
<mx:Label id="计算结果" width="150" textAlign="right" />
添加一个停放按钮的5行4列的Grid控件在Panel控件上
<mx:Grid>
</mx:Grid>
在编辑器中对Grid进行布局。
将第一行第一列的GridItem中colSpan属性设为2，并删除后面一个GridItem
将第五行第三列的GridItem中colSpan属性设为2，并删除后面一个GridItem
在18个GridItem中添加按钮，做成一个计算器：
具体程序如下：
第一行：
width="70"
label="Clear" click="calcController.clearAll()"width="30"
label="C/E"
click="calcController.clearEntry()"width="30"
label="+"
click="calcController.setOperation('add')"
第二行：
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')"
第三行：
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')"
第四行：
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')"
第五行：
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);
使用选择结构确定是加、减、乘、除哪个操作：
switch (expression)
{
case 值:
[ActionScript 语句]
break; // 对应的值执行相应操作后返回
[多个case]
default: // 不在值列表中的，在这里处理
[默认操作actions]
}
完整函数是：
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 id="calcController" calcView="{this}"/>
四、完整的程序：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文件
class 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;
public function CalculatorController()
{}
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
}
}
public function addNumber(n:String):Void
{
if (operation=="none" && currentRegister=="reg2")
{
reg1="";
setCurrentRegister();
}
this[currentRegister]+=n;
</spa