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

  


  

    
    
分享到：
      
      
    
  

  

    

      华为软件编程规范和范例
      |
      C++ Buileder 建立一个windows资源管理器 ...
    
  
  

    

      
2005-12-13 11:48
      
浏览 1356
      
评论(0)
      
      
            
      
查看更多