使用 MXML 和 ActionScript 進行編碼
Adobe® 將 Flex 實施為 ActionScript 類庫。 該類庫包含組件 (容器和控制項)、管理器類、數據服務類和所有其他功能的類。 您通過將 MXML 和 ActionScript 語言與該類庫一起使用來開發應用程式。
MXML
MXML 是用於為 Adobe® Flex™ 應用程式進行用戶界面組件布局的 XML 語言。 您還使用 MXML 來顯式定義應用程式的非可視方面, 例如訪問伺服器端數據源和用戶界面組件與數據源之間的數據綁定。
例如, 您通過使用下面的 MXML 語句, 使用 <mx:Button> 標籤來創建 Button 控制項的實例:
<mx:Button id="myButton" label="I'm a button!"/>
您設定 id 屬性以賦予 Button 實例一個唯一的名稱, 以後可以使用該名稱引用到它。 label 屬性設定在 Button 實例上顯示的標籤的文本。
下面的示例顯示創建顯示 Button 控制項的 Flex 應用程式所需的完整代碼:
<?xml version="1.0" encoding="utf-8"?> <mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
horizontalAlign="center" verticalAlign="center"
> <mx:Button id="myButton" label="I'm a button!" /> </mx:Application>
在編寫 Flex 應用程式之後, 您必須使用 Flex 編譯器來編譯它。 Flex 編譯器是稱為 mxmlc 的一個很小的執行檔, 處於 Flex 2 安裝資料夾下的 Flex SDK 2.0\bin 資料夾中。
提示: 確保 Flex 2 installation folder\Flex SDK 2.0\bin 資料夾處於您的系統的路徑中。 讓 Flex 編譯器處於您的路徑中, 使您不管當前處於哪個資料夾中, 都可以從命令行調用它。
說明
1在您喜愛的文本編輯器 (如, 記事本) 中創建一個新檔案並將它另外儲存為 MyFirst.mxml。
2 從前面的示例中將代碼輸入到 MyFirst.mxml 中並保存您的檔案。
3 通過選擇“開始”>“所有程式”>“附屬檔案”>“命令提示符”, 打開命令視窗。
4 將您的當前目錄更改為包含您在步驟 1 中保存的 Flex 應用程式的資料夾。
5 鍵入下面的命令來調用 Flex 編譯器:
mxmlc --strict=true --file-specs MyFirst.mxml
以雙短劃線開頭的命令字元串中的項目被稱為編譯器選項, 它們被用於定義 Flex 編譯器的行為。 在前面的示例 中, 您將 --strict 選項設定為 true 以強制編譯器進入 Strict 模式。 在 Strict 模式下, 編譯器對您的代碼具有較高的期望。 例如, 它期望您以靜態方式鍵入變數。 您使用 --file-specs 選項來指定被編譯的 MXML 檔案。
6 在 Windows 資源管理器中雙擊 SWF 檔案或在命令行中輸入其名稱, 在獨立的 Adobe Flash Player 9 中打開它。
若要查看全部原始碼, 請右鍵單擊 Flex 應用程式並從上下文選單中選擇“查看原始碼”。
提示: 您還可以使用 Adobe Flex Builder 2 創建和編譯 Flex 應用程式, Adobe Flex Builder 2 是包含可視設計視圖的用於 Flex 開發的集成開發環境 (IDE)。 有關 Flex Builder 2 的詳細信息, 請參閱使用 Flex Builder 2。
ActionScript
MXML 標籤與 ActionScript 類或類的屬性相對應。 當您編譯 Flex 應用程式時, Flex 會解析 MXML 標籤並生成相應的 ActionScript 類。 接著它將這些 ActionScript 類編譯成存儲在 SWF 檔案中的 SWF 位元組碼。
提示: 若要查看 Flex 生成的中間 ActionScript 檔案, 請將 --keep-generated-actionscript 選項添加到 mxmlc 命令中。
繼續上面的例子, Flex 提供定義 Flex Button 控制項的 ActionScript Button 類。
注意: 在前面的示例中, <mx:Button> 標籤中的 mx 前綴是一個名稱空間。 它是通過使用 Application 標籤中的唯一 URL 聲明的。 mx 前綴將 mx 名稱空間中的每個組件映射到其完全合格的類名稱。 這就是 Flex 編譯器可以找到與 mx 名稱空間中的 MXML 標籤相對應的 ActionScript 類的方式。
下面的示例闡述如何通過使用 ActionScript 創建 Button 控制項。 該結果與該 MXML 版本是相同的。
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
viewSourceURL="src/GettingStartedActionScript/index.html"
creationComplete="creationCompleteHandler();"
width="300" height="80"
>
<mx:Script>
<![CDATA[
import mx.controls.Button;
import mx.events.FlexEvent;
private var myButton:Button;
private function creationCompleteHandler():void
{
// Create a Button instance and set its label
myButton = new Button();
myButton.label = "I'm a button!";
// Get notified once button component has been created and processed for layout
myButton.addEventListener (FlexEvent.CREATION_COMPLETE, buttonCreationCompleteHandler);
// Add the Button instance to the DisplayList
addChild (myButton);
}
private function buttonCreationCompleteHandler ( evt:FlexEvent ):void
{
// Center the button
myButton.x = parent.width/2 - myButton.width/2;
myButton.y = parent.height/2 - myButton.height/2;
}
]]>
</mx:Script>
</mx:Application>
通過 ActionScript 創建 Flex 組件時, 必須導入組件的類。 您還必須通過使用 addChild() 方法使組件可見, 將組件添加到應用程式的 DisplayList 中。 通過將此示例的長度和複雜性與其等同的 MXML 版本相比較, 您可以看到 MXML 的簡單的基於標籤的聲明性語法是如何使您免於編寫許多 ActionScript 代碼行來進行組件布局的。
此示例會產生下列 SWF 檔案:
圖注意: 此示例闡述線上 ActionScript 與 Script 標籤的使用, 這是在 Flex 應用程式中包含 ActionScript 的一個可能的方法。 其他方法有: 將腳本塊分隔到外部 ActionScript 檔案中, 或使用外部 ActionScript 類。
轉載自：http://www.airia.cn/FLEX_Directory/coding_with_mxml_and_actionscript/
