Macromedia Flex 制作计算器源码和制作步骤_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添加好后的效果为：
document.body.clientWidth-300) {this.height=(document.body.clientWidth-300)*this.height/this.width;this.width=document.body.clientWidth-300}" border=0>

==================== 添加计算器按钮 ====================
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后的效果如下：
document.body.clientWidth-300) {this.height=(document.body.clientWidth-300)*this.height/this.width;this.width=document.body.clientWidth-300}" border=0>

==================== 创建后台程序 ====================
新建一个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

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索flex
Macromedia
flex bison 计算器、flex 计算器、java计算器源代码、android计算器源码、易语言计算器源码，以便于您获取更多的相关知识。

时间： 2024-04-18 03:31:06

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

Macromedia Flex 制作计算器源码和制作步骤_Flex的相关文章

android-Andrid自带计算器源码解析

Linux源码包制作RPM包之Apache

二维码制作-二维码如何制作需要什么语言

配置Visual Studio 2008来调试.NET Framework源码的基本步骤

linux系统openssh的源码编译安装步骤详解

WEBJX收集分享6款实用jQuery小插件及源码

Android Studio查看Android 5.x源码的步骤详解_Android

PG学习初体验--源码安装和简单命令

Android Studio查看Android 5.x源码的步骤详解