当前位置：首页 > 资讯 > 技术文档

Macromedia Flex 制作计算器源码和制作步骤

时间：2022-05-25 07:05 编辑：来源：阅读：
扫一扫，手机访问

摘要：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属性为：[b]Calculator[/b] 在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添加好后的效果为： [url=http://dlog.***/uploadimg/20049622364460192.png][img]http://dlog.***/uploadimg/20049622364460192.png[/img] [/url] ==================== 添加计算器按钮 ==================== 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这些按钮，如下： [b]Row1[/b]

 width="70" 
 label="Clear" 
 click="calcController.clearAll()"
 
 width="30"
 label="C/E" 
 click="calcController.clearEntry()"

 width="30"
 label="+" 
 click="calcController.setOperation('add')"

[b]Row2[/b]

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

[b]Row3[/b]

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

[b]Row4[/b]

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

[b]Row5[/b]

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

完成后保存文件，添加好button后的效果如下： [url=http://dlog.***/uploadimg/20049622555798708.png][img]http://dlog.***/uploadimg/20049622555798708.png[/img] [/url] ==================== 创建后台程序 ==================== 新建一个as文件，另存为 [b]CalculatorController.as[/b] 先创建一个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;

接着添加功能模块： [b]“等于”的功能 doOperation()[/b]

 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
  }
 }

[b]输入数字的功能 addNumber()[/b]

 public function addNumber(n:String):Void
 {
  if (operation=="none" && currentRegister=="reg2")
  {
   reg1="";
   setCurrentRegister();
  }
  this[currentRegister]+=n;
  setDisplay(currentRegister);
 }

[b]“C/E”的功能 clearEntry()[/b]

 public function clearEntry():Void
 {
  this[currentRegister]="";
  setDisplay(currentRegister);
 }

[b]“Clear”的功能 clearAll()[/b]

 public function clearAll():Void
 {
  reg1="";
  reg2="";
  setCurrentRegister();
  setOperation("none");
  setDisplay(currentRegister);
 }

[b]“加、减、乘、除” 的功能 setOperation()[/b]

 public function setOperation(operation:String):Void
 {
  this.operation=operation;
  setCurrentRegister();
 }

[b]显示屏的功能 setDisplay()[/b]

 private function setDisplay(register:String):Void
 {
  calcView.calcDisplay.text = this[register];
 }

[b]其他[/b]

 private function setCurrentRegister():Void
 {
  if (reg1=="")
  {
   currentRegister="reg1";
  }
  else
  {
   currentRegister="reg2";
  }
 }

 private function resetAfterOp():Void
 {
  reg1=String(result);
  reg2="";
  setDisplay("reg1");
  setOperation("none");
 }

==================== 最终完整的代码 ==================== [b]calculator.mxml[/b]

<?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>

[b]CalculatorController.as[/b]

/*
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");
 }
}

原文地址： [url=http://www.macromedia.com/devnet/flex/articles/calculator_print.html]www.macromedia.com/devnet/flex/articles/calculator_print.html[/url]

全部评论(0)

上一篇：Flex结合JavaScript读取本地路径的方法
下一篇：flex SystemManger监控用户是否和程序打交道

资讯排行榜
更多>>