欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間：2007年02月15日 00:00:00   作者：  
這個計算器是由兩個部分組成：一個前臺界面的MXML文件，一個后臺控制器的AS文件。mxml文件負(fù)責(zé)顯示計算器的界面，as文件負(fù)責(zé)處理用戶發(fā)送的信息并計算結(jié)果。在這個教程中我們主要學(xué)習(xí)：
[list]The Application class
The Panel container
The Label element
The Grid container
The Button element[/list]
ActionScript的主要學(xué)習(xí)內(nèi)容:
[list]A class definition
Properties
Methods
The if-else and switch-case control structures[/list]

==================== 創(chuàng) 建 界 面 ====================
創(chuàng)建一個空白的mxml文件，保存為calculator.mxml，一個符合標(biāo)準(zhǔn)的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>


==================== 創(chuàng) 建 主 面 板 ====================
計算器中所有的按鈕都集中在Panel元素中，因此我們首先要創(chuàng)建一個Panel面板，
并設(shè)置它的tittle屬性為：Calculator
在Application區(qū)域添加：
<mx:Panel title="Calculator">
</mx:Panel>


==================== 創(chuàng) 建 計 算 器 顯 示 屏 ====================
顯示屏其實是一個Label元素，它能夠顯示一行文字，Label元素有許多的屬性，在這里，我們使用一下集中屬性：
[list]id: Label的標(biāo)識，類似Flash中的Instance Name
width: Label的寬度，單位：象素
text: Label的內(nèi)容
textAlign: 對齊方式： left | right | center [/list]
在Panel區(qū)域中添加如下代碼：
<mx:Label id="calcDisplay" width="150" textAlign="right"/>

注意：在這里我們并沒有設(shè)置Label的text屬性，因為我們過會要通過后臺程序動態(tài)顯示Label標(biāo)簽的內(nèi)容

==================== 創(chuàng) 建 Grid ====================
Grid好比是Flex的排版工具，類似與HTML中的表格，只有Grid確定下來，我們才能對整個flex程序中的各種元素進行定位
Grid標(biāo)簽由三個元素組成：
[list]Grid: 類似HTML中的<table>標(biāo)簽
GridRow: 類似HTML中的<tr>標(biāo)簽
GridItem: 類似HTML中的<td>標(biāo)簽[/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: 按鈕按下時所響應(yīng)的事件[/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

==================== 創(chuàng) 建 后 臺 程 序 ====================
新建一個as文件，另存為 CalculatorController.as
先創(chuàng)建一個CalculatorController的類：
class CalculatorController
{}

然后創(chuàng)建一個構(gòu)造器
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
		}
	}


輸入數(shù)字的功能 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

相關(guān)文章

最新評論