想了解Macromedia Flex 制作计算器源码和制作步骤的相关内容吗，在本文为您仔细讲解的相关知识和一些Code实例，欢迎阅读和指正，我们先划重点：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写入下面的代码：
<?xml version="1.0">
<mx:Application xmlns:mx="http://www.macromedia.com/2003/mxml">
</mx:Application>
==================== 创 建 主 面 板 ====================计算器中所有的按钮都集中在
Panel元素中，因此我们首先要创建一个Panel面板，
并设置它的tittle属性为：
Calculator在Application区域添加：
<mx:Panel title="Calculator">
</mx:Panel>
==================== 创 建 计 算 器 显 示 屏 ====================显示屏其实是一个
Label元素，它能够显示一行文字，Label元素有许多的属性，在这里，我们使用一下集中属性：
[list]id: Label的标识，类似Flash中的Instance Name
width: Label的宽度，单位：象素
text: Label的内容
textAlign: 对齐方式： left | right | center [/list]
在Panel区域中添加如下代码：
<mx:Label id="calcDisplay" width="150" textAlign="right"/>
注意：在这里我们并没有设置Label的text属性，因为我们过会要通过后台程序动态显示Label标签的内容
==================== 创 建 Grid ====================Grid好比是Flex的排版工具，类似与HTML中的表格，只有Grid确定下来，我们才能对整个flex程序中的各种元素进行定位
Grid标签由三个元素组成：
[list]Grid: 类似HTML中的<table>标签
GridRow: 类似HTML中的<tr>标签
GridItem: 类似HTML中的<td>标签[/list]
在这里我们添加一个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添加好后的效果为：
==================== 添 加 计 算 器 按 钮 ====================Flex的
Button控件也类似于HTML的按钮，在这里我们将使用按钮的三种属性：
[list]label: 按钮上显示的文字
width: 按钮宽度
click: 按钮按下时所响应的事件[/list]
在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后的效果如下：
==================== 创 建 后 台 程 序 ====================新建一个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");
}
}
原文地址：
www.macromedia.com/devnet/flex/articles/calculator_print.html
