Flex - 應用程式

---

---

在使用 Flash Builder 建立實際的 “HelloWorld” 應用程式之前，讓我們先了解 Flex 應用程式的實際組成部分。

Flex 應用程式由以下四個重要部分組成，其中最後一個部分是可選的，但前三個部分是必須的。

• Flex 框架庫
• 客戶端程式碼
• 公共資源 (HTML/JS/CSS)
• 伺服器端程式碼

典型 Flex 應用程式（如 HelloWord）的不同部分的示例位置如下所示：

應用程式構建過程

首先，Flex 應用程式需要 Flex 框架庫。稍後，Flash Builder 會自動將庫新增到構建路徑。

當我們使用 Flash Builder 構建程式碼時，Flash Builder 將執行以下任務：

• 將原始碼編譯成 HelloWorld.swf 檔案。

• 從儲存在 html-template 資料夾中的 index.template.html 檔案編譯 HelloWorld.html（swf 檔案的包裝檔案）。

• 將 HelloWorld.swf 和 HelloWorld.html 檔案複製到目標資料夾 bin-debug 中。

• 將 swfobject.js（一個負責在 HelloWorld.html 中動態載入 swf 檔案的 JavaScript 程式碼）複製到目標資料夾 bin-debug 中。

• 將框架庫以名為 frameworks_xxx.swf 的 swf 檔案的形式複製到目標資料夾 bin-debug 中。

• 將其他 Flex 模組（.swf 檔案，例如 sparkskins_xxx.swf、textLayout_xxx.swf）複製到目標資料夾中。

應用程式啟動過程

• 在任何 Web 瀏覽器中開啟位於 \HelloWorld\bin-debug 資料夾中的 HelloWorld.html 檔案。

• HelloWorld.swf 將自動載入，應用程式將開始執行。

Flex 框架庫

以下是關於一些重要框架庫的簡要說明。請注意，Flex 庫使用 .swc 表示法表示。

客戶端程式碼

Flex 應用程式程式碼可以使用 MXML 和 ActionScript 編寫。

在 Flex 中，我們可以混合使用 ActionScript 和 MXML 來執行以下操作：

• 使用 MXML 標記佈局使用者介面元件。

• 使用 MXML 宣告性地定義應用程式的非可視方面，例如訪問伺服器上的資料來源。

• 使用 MXML 在使用者介面元件和伺服器上的資料來源之間建立資料繫結。

• 使用 ActionScript 在 MXML 事件屬性內定義事件偵聽器。

• 使用標籤新增指令碼塊。

• 包含外部 ActionScript 檔案。

• 匯入 ActionScript 類。

• 建立 ActionScript 元件。

公共資源

這些是 Flex 應用程式引用的幫助檔案，例如位於 html-template 資料夾下的主機 HTML 頁面、CSS 或影像。它包含以下檔案：

HelloWorld.mxml

這是實現應用程式業務邏輯的實際 MXML/AS（ActionScript）程式碼，Flex 編譯器將其轉換為 SWF 檔案，該檔案將在瀏覽器中由 Flash Player 執行。

HelloWorld Entry 類的示例如下：

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%"
   minWidth = "500" minHeight = "500" 
   initialize = "application_initializeHandler(event)">

   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }
      ]]>
   </fx:Script>
   
   <s:VGroup horizontalAlign = "center" width = "100%" height = "100%" 
      paddingTop = "100" gap = "50">
      <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" />
      <s:Button label = "Click Me!" id = "btnClickMe" 
         click = "btnClickMe_clickHandler(event)" />
   </s:VGroup>	
</s:Application>

下表描述了上述程式碼指令碼中使用的所有標籤。

伺服器端程式碼

這是應用程式的伺服器端部分，它是完全可選的。如果您不在應用程式中執行任何後端處理，則不需要此部分；但如果後端需要一些處理，並且您的客戶端應用程式與伺服器互動，則您必須開發這些元件。

在下一章中，我們將使用所有上述概念使用 Flash Builder 建立 HelloWorld 應用程式。