- Flex 3開發實踐
- 鄭阿奇主編
- 734字
- 2018-12-29 18:36:10
1.6.2 編寫實例
具體操作步驟如下：
（1）執行“File”→“New”→“ActionScript Class”菜單命令，新建一個ActionScript類，如圖1-24所示。
圖1-24 新建ActionScript類
（2）設置包名為“com.flex.demo”，名稱為“Circle”，如圖1-25所示，完成后單擊【Finish】按鈕。
圖1-25 設置ActionScript包名和類名
（3）在Circle.as文件的輸入窗口中編寫Circle類文件，內容如下：
package com.flex.demo
{
public class Circle
{
//定義常量派
private const PAI:Number = 3.14;
//定義屬性：半徑
private var radius:Number ;
//構造方法
public function Circle(radius:Number)
{
this.radius = radius ;
}
//獲得圓的面積方法
public function area():Number
{
return this.PAI*this.radius*this.radius;
}
}
}
（4）完成后單擊工具欄的保存按鈕
保存文件，關于ActionScript語法規則，將在第2章進行詳細介紹，這里不做過多講解。
（5）雙擊“Flex Navigator”窗口下的“CalculateCircleArea.mxml”文件，打開該主程序運行文件，如圖1-26所示。
圖1-26 主程序文件內容
（6）單擊“CalculateCircleArea.mxml”文件窗口中的【Design】按鈕，進入該文件的設計模式，主界面左下角會出現“Components”窗口，如圖1-27所示，拖曳一個“TextInput”標簽到Design區域。
圖1-27 添加TextInput標簽
（7）選擇該標簽，在“Flex Properties”屬性窗口中，設置TextInput標簽的ID屬性值為“radius”，如圖1-28所示。
圖1-28 設置TextInput標簽的id屬性
（8）同理，添加TextInput標簽，ID值為“area”用來顯示面積值，設置其“Editable”屬性值為“false”，表示不能編輯，由程序計算得出。添加一個Button標簽，“Label”值設置為“計算圓面積”，該按鈕用于調用實現方法，并將計算結果添入到“area”欄中。再添加兩個Label標簽，作為半徑和面積的中文說明。
最終效果如圖1-29所示。
圖1-29 添加Label標簽的主程序界面
設計完成后單擊【Source】按鈕，查看CalculateCircleArea.mxml文件源碼，如下所示：
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
fontSize="12">
<mx:Label x="37" y="59" text="請輸入半徑值:" width="97" height="18"/>
<mx:TextInput x="142" y="57" id="radius"/>
<mx:Label x="37" y="110" text="圓的面積是:" width="86"/>
<mx:TextInput x="142" y="108" enabled="true" id="area" editable="false"/>
<mx:Button x="310" y="59" label="計算圓的面積" />
</mx:Application>
接下來，需要將之前建立的Circle.as類加到應用中，計算面積填入TextInput文本框中，并在控制臺輸出。在<mx:Application>標簽中添加如下代碼：
<mx:Script>
<![CDATA[
import mx.controls.Alert;
import com.flex.demo.Circle;
//定義CalArea計算面積填入TextInput文本框并在控制臺輸出
internal function CalArea():void
{
var r:Number = (Number)(radius.text);
//將輸入的半徑轉化為Number類型
if(r.toString() == "NaN")//如果輸入的不是數字類型則給出錯誤提示信息
{
Alert.show("請輸入數字！","錯誤提示");
}
else
{
//如果輸入正確則計算圓的面積返回顯示
var c:Circle = new Circle(r);
area.text = c.area().toString() ;
trace(area.text); //在控制臺輸出面積值
}
}
]]>
</mx:Script>
<mx:Script>標簽表示其中需要編寫as代碼內容，猶如在JSP文件中編寫Java代碼時需要使用<%%>一樣。“<![CDATA”和“]]>”語法是為了告訴XML包含在其中的任何東西都不需要做XML解析。在Script標簽中添加CDATA塊并不是必需的，但是如果不使用CDATA塊，在<mx:Script>標簽中使用像“<”的符號，XML解析器會認為你正在寫一個新的標簽。
在以上程序中，首先，需要使用import語句引入Circle類；之后，創建Circle類實例，將半徑值作為Circle類構造方法參數傳入到Circle對象中，然后將計算得出的面積值填入“area”欄中顯示，同時在控制臺打印輸出面積值。trace語句用來輸出信息到控制臺，前提是使用的Flash Player必須是Debug版本。最新的Flash Player Debug版本可以到Adobe官方網站下載：http://www.adobe.com/support/flashplayer/downloads.html。
最后，需要在Button的click事件中調用CalArea方法，如下所示：
<mx:Button x="310" y="59" label="計算圓的面積" click="CalArea()" />