Macromedia Flex 制作計算器源碼和制作步驟

2024-09-12 17:50:40

字體：大中小

來源：轉載

供稿：網友

這個計算器是由兩個部分組成：一個前臺界面的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添加好后的效果為：
click for full size

==================== 添加計算器按鈕 ====================
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后的效果如下：
click for full size

==================== 創建后臺程序 ====================
新建一個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是什么及與FLASH的關系的介紹

下一篇：入門簡單的FLEX驗證碼一例