Flex 快速入門指南

---

---

Flex - 概述

什麼是 Flex？

Flex 是一款強大的開源應用程式框架，允許您使用相同的程式設計模型、工具和程式碼庫為瀏覽器、移動裝置和桌面構建傳統應用程式。

Flex 提供 FLEX SDK，其中包含 Flex 類庫（ActionScript 類）、Flex 編譯器、偵錯程式、MXML 和 ActionScript 程式語言以及其他構建富有表現力和互動性的富網際網路應用程式 (RIA) 的實用程式。

Flex 負責 Web 應用程式的使用者介面 (UI) 或客戶端功能。伺服器端功能取決於用傳統指令碼語言（Java/PHP 等）編寫的伺服器端元件。

基於 Flex 的應用程式實際上是以 SWF 檔案的形式交付的，它與傳統 Web 應用程式的 HTML/JavaScript 部分非常相似。

Flex 應用程式部署為 SWF 檔案以及 HTML 包裝器、CSS 檔案和任何伺服器端指令碼檔案（即 Java、.CFM、.PHP 等）到伺服器。就像傳統的 Web 應用程式一樣。

這些資源透過常用的 HTTP 請求/響應方式和執行應用程式的瀏覽器的 Flash Player 從伺服器交付到客戶端瀏覽器。

Flex 的優勢

• Flex 應用程式通常基於 Flash Player，可以訪問裝置功能，例如 GPS、攝像頭、本地資料庫、圖形加速器。

• Flex 應用程式可以在 Android、BlackBerry Tablet OS 和 iOS 裝置上執行。

• Flex 應用程式可以在瀏覽器和桌面上執行。

• Flex 應用程式與平臺無關。UI 可以是平臺原生，也可以在每個平臺上保持一致。

• Flex 應用程式可以使用 REST、SOAP、JSON、JMS 和 AMF 等行業標準與 Java、Spring、Hibernate、PHP、Ruby、.NET、Adobe ColdFusion 和 SAP 等所有主要的伺服器端技術進行互動。

• Flex 應用程式透過與應用程式的直觀互動以及以更豐富的視覺介面呈現資訊來確保豐富的使用者體驗。

• Flex 應用程式是單頁應用程式，其中狀態可以在一個狀態之間轉換，而無需從伺服器獲取新頁面或重新整理瀏覽器。

• Flex 應用程式在很大程度上減少了伺服器的負載，因為它只需要返回一次應用程式，而無需在使用者更改檢視時每次都返回新頁面。

Flex 的缺點

• Flex 應用程式是單執行緒應用程式，但 Flex 提供非同步程式設計模型來減輕此問題。

• Flex 基於 ActionScript 和 XML。學習這兩者對於使用 Flex 是必須的。

Flex - 環境設定

本教程將指導您如何準備開發環境以開始使用 Adobe Flex 框架。本教程還將在您設定 Flex 框架之前，教您如何在您的機器上設定 JDK 和 Adobe Flash Builder。

系統需求

FLEX 需要 JDK 1.4 或更高版本，因此第一個要求是在您的機器上安裝 JDK。

按照以下步驟設定您的環境以開始 Flex 應用程式開發。

步驟 1 - 驗證您的機器上是否安裝了 Java

現在開啟控制檯並執行以下 **java** 命令。

讓我們驗證所有作業系統的輸出 -

步驟 2 - 設定 Java 開發工具包 (JDK)

如果您沒有安裝 Java，則可以從 Oracle 的 Java 網站 Java SE 下載 安裝 Java 軟體開發工具包 (SDK)。您將在下載的檔案中找到安裝 JDK 的說明，然後按照給定的說明安裝和配置設定。最後設定 PATH 和 JAVA_HOME 環境變數以引用包含 java 和 javac 的目錄，通常分別為 java_install_dir/bin 和 java_install_dir。

設定 **JAVA_HOME** 環境變數以指向 Java 安裝在您的機器上的基本目錄位置。例如 -

將 Java 編譯器位置新增到系統路徑。

步驟 3 - 設定 Adobe Flash Builder 4.5

本教程中的所有示例均使用 Adobe Flash Builder 4.5 專業版 IDE 試用版編寫。因此，建議您在您的機器上安裝最新版本的 Adobe Flash Builder。此外，請檢查作業系統的相容性。

要安裝 Adobe Flash Builder IDE，請從 https://www.adobe.com/in/products/flash-builder.html 下載最新的 Adobe Flash Builder 二進位制檔案。下載安裝程式後，將二進位制分發版解壓縮到方便的位置。例如，在 Windows 上為 C:\flash-builder，或在 Linux/Unix 上為 /usr/local/flash-builder，最後適當地設定 PATH 變數。

當您在 Windows 機器上執行以下命令時，Flash Builder 將啟動，或者您可以簡單地雙擊 FlashBuilder.exe。

%C:\flash-builder\FlashBuilder.exe

可以透過在 Unix（Solaris、Linux 等）機器上執行以下命令來啟動 Flash Builder -

$/usr/local/flash-builder/FlashBuilder

Adobe Flash Builder 試用版可使用 60 天。只需接受條款和條件，並跳過初始註冊步驟即可繼續使用 IDE。為了我們的理解，我們出於教學目的使用試用版。

成功啟動後，如果一切正常，則應顯示以下結果 -

Adobe Flash Builder 預先配置了 FLEX SDK。我們在示例中使用的是與 Adobe Flash Builder 4.5 捆綁在一起的 FLEX SDK 4.5。

步驟 4 – 設定 Apache Tomcat

您可以從 https://tomcat.apache.org/ 下載最新版本的 Tomcat。下載安裝程式後，將二進位制分發版解壓縮到方便的位置。例如，在 Windows 上為 C:\apache-tomcat-6.0.33，或在 Linux/Unix 上為 /usr/local/apache-tomcat-6.0.33，並設定指向安裝位置的 CATALINA_HOME 環境變數。

可以透過在 Windows 機器上執行以下命令來啟動 Tomcat，或者您可以簡單地雙擊 startup.bat。

%CATALINA_HOME%\bin\startup.bat 
or 
C:\apache-tomcat-6.0.33\bin\startup.bat 

可以透過在 UNIX（Solaris、Linux 等）機器上執行以下命令來啟動 Tomcat -

$CATALINA_HOME/bin/startup.sh 
Or 
/usr/local/apache-tomcat-6.0.33/bin/startup.sh

成功啟動後，透過訪問 **https://:8080/** 可以使用 Tomcat 中包含的預設 Web 應用程式。如果一切正常，則應顯示以下結果 -

有關配置和執行 Tomcat 的更多資訊，請參閱此處包含的文件以及 Tomcat 網站：http://tomcat.apache.org

可以透過在 Windows 機器上執行以下命令來停止 Tomcat -

%CATALINA_HOME%\bin\shutdown
Or
C:\apache-tomcat-5.5.29\bin\shutdown

可以透過在 UNIX（Solaris、Linux 等）機器上執行以下命令來停止 Tomcat -

$CATALINA_HOME/bin/shutdown.sh
Or
/usr/local/apache-tomcat-5.5.29/bin/shutdown.sh

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編譯器將其轉換為Flash Player將在瀏覽器中執行的SWF檔案。

一個示例HelloWorld入口類如下：

<?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**應用程式。

Flex - 建立應用

我們將使用Flash Builder 4.5建立Flex應用程式。讓我們從簡單的**_HelloWorld_**應用程式開始。

步驟1 - 建立專案

第一步是使用Flash Builder IDE建立一個簡單的Flex專案。使用選項**檔案 > 新建 > Flex專案**啟動專案嚮導。現在使用嚮導視窗將您的專案命名為_HelloWorld_，如下所示：

選擇應用程式型別**Web（在Adobe Flash Player中執行）**。但是，如果未選擇此選項，則保留其他預設值，然後單擊“完成”按鈕。專案成功建立後，您的專案資源管理器中將包含以下內容：

以下是所有重要資料夾的簡要說明：

步驟2 - 建立外部CSS檔案

在**html-template**資料夾中為包裝器HTML頁面建立一個CSS檔案**styles.css**。

html, body { 
   height:100%;
}

body { 
   margin:0; 
   padding:0; 
   overflow:auto; 
   text-align:center;		
}   

object:focus { 
   outline:none; 
}

#flashContent { 
   display:none;	
}

.pluginHeader {
   font-family:Arial, Helvetica, sans-serif;
   font-size:14px;
   color:#9b1204;
   text-decoration:none;
   font-weight:bold;
}

.pluginInstallText {
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#000000;
   line-height:18px;
   font-style:normal;
}

.pluginText { 
   font-family:Arial, Helvetica, sans-serif;
   font-size:12px;
   color:#000000;
   line-height:18px;
   font-style:normal;
}

步驟3 - 修改包裝器HTML頁面模板

修改**html-template**資料夾中的包裝器HTML頁面模板**index.template.html**。Flash Builder將建立一個預設的包裝器HTML頁面模板_html-template/index.template.html_，該模板將編譯為HelloWorld.html。

此檔案包含Flash Builder在編譯過程中替換的佔位符。例如，Flash Player版本、應用程式名稱等。

讓我們修改此檔案以在未安裝Flash外掛的情況下顯示自定義訊息。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml" lang = "en" xml:lang = "en">
   
   <head>
      <title>${title}</title>
      <meta name = "google" value = "notranslate" />
      <meta http-equiv = "Content-Type" content = "text/html; charset = utf-8" />
      <link rel = "stylesheet" href = "styles.css" type = "text/css"></link>
      <link rel = "stylesheet" type = "text/css" href = "history/history.css" />
      <script type = "text/javascript" table table-bordered = "history/history.js">
      </script>
      <script type = "text/javascript" table table-bordered = "swfobject.js"></script>
      
      <script type = "text/javascript">
         // For version detection, set to min. required Flash Player version,
         //or 0 (or 0.0.0), for no version detection.
         var swfVersionStr = "${version_major}.${version_minor}.${version_revision}";

         // To use express install, set to playerProductInstall.swf,
         //otherwise the empty string.
         var xiSwfUrlStr = "${expressInstallSwf}";
         var flashvars = {};
         var params = {};
         params.quality = "high";
         params.bgcolor = "${bgcolor}";
         params.allowscriptaccess = "sameDomain";
         params.allowfullscreen = "true";
         
         var attributes = {};
         attributes.id = "${application}";
         attributes.name = "${application}";
         attributes.align = "middle";
         swfobject.embedSWF (
            "${swf}.swf", "flashContent",
            "${width}", "${height}",
            swfVersionStr, xiSwfUrlStr,
            flashvars, params, attributes);

         // JavaScript enabled so display the flashContent div in case
         //it is not replaced with a swf object.
         swfobject.createCSS("#flashContent", "display:block;text-align:left;");
      </script>
   </head>
   
   <body>
      <div id = "flashContent">
         <p style = "margin:100px;">

            <table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
               <tr>
                  <td class = "pluginHeader">Flash Player Required</td>
               </tr>
               
               <tr>
                  <td class = "pluginText">The Adobe Flash Player version
                     10.2.0 or greater is required.</td>
               </tr>
               
               <tr>
                  <td class = "pluginInstallText" align = "left">
               
                  <table border = "0" width = "100%">
                     <tr class = "pluginInstallText" >
                        <td>Click here to download and install Adobe Flash Player:</td>
                        <td> </td>
                        <td align = "right">
                           <script type = "text/javascript">
                              var pageHost
                                 = ((document.location.protocol == "https:") ? "https://" : "http://");
                              document.write("<a target = '_blank'"
                                 +" href = 'http://get.adobe.com/flashplayer/'><"
                                 +"img style = 'border-style: none' table table-bordered = '"
                                 +pageHost
                                 +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
                                 +" alt = 'Get Adobe Flash player' /></a>" );
                           </script>
                        </td>
                     </tr>
                  </table>
               </tr>
            </table>
         </p>
      </div>
      
      <noscript>
         <object classid = "clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
            width = "${width}" height = "${height}" id = "${application}">
            <param name = "movie" value = "${swf}.swf" />
            <param name = "quality" value = "high" />
            <param name = "bgcolor" value = "${bgcolor}" />
            <param name = "allowScriptAccess" value = "sameDomain" />
            <param name = "allowFullScreen" value = "true" />
         
            <!--[if !IE]>-->
            <object type = "application/x-shockwave-flash" data = "${swf}.swf"
               width = "${width}" height = "${height}">
               <param name = "quality" value = "high" />
               <param name = "bgcolor" value = "${bgcolor}" />
               <param name = "allowScriptAccess" value = "sameDomain" />
               <param name = "allowFullScreen" value = "true" />
            <!--<![endif]-->
         
            <!--[if gte IE 6]>-->
               <p>
                  <p style = "margin:100px;">
                     <table width = "700" cellpadding = "10" cellspacing = "2" 
                        border = "0">
                        <tr>
                           <td class = "pluginHeader">Flash Player Required</td>
                        </tr>
                        
                        <tr>
                           <td class = "pluginText">The Adobe Flash Player version
                           10.2.0 or greater is required.</td>
                        </tr>
                        
                        <tr>
                           <td class = "pluginInstallText" align = "left">

                           <table border = "0" width = "100%">
                              <tr class = "pluginInstallText" >
                                 <td>Click here to download and install Adobe Flash 
                                    Player:</td>
                                 <td> </td>
                                 <td align = "right">
                                    <script type = "text/javascript">
                                       var pageHost
                                          = ((document.location.protocol == "https:") ? "https://" : "http://");
                                       document.write("<a target = '_blank'"
                                          +" href = 'http://get.adobe.com/flashplayer/'><"
                                          +"img style = 'border-style: none' table table-bordered = '"
                                          +pageHost
                                          +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
                                          +" alt = 'Get Adobe Flash player' /></a>" );
                                    </script>
                                 </td>
                              </tr>
                           </table>
                        </tr>
                     </table>
                  </p>
               </p>
            <!--<![endif]-->
         
            <p style = "margin:100px;">
               <table width = "700" cellpadding = "10" cellspacing = "2" border = "0">
                  <tr><td class = "pluginHeader">Flash Player Required</td></tr>
                  <tr><td class = "pluginText">The Adobe Flash Player version
                     10.2.0 or greater is required.</td></tr>
                  <tr>
                     <td class = "pluginInstallText" align = "left">
                        <table border = "0" width = "100%">
                           <tr class = "pluginInstallText" >
                              <td>Click here to download and install Adobe Flash 
                                 Player:</td>
                              <td> </td>
                              <td align = "right">
                                 <script type = "text/javascript">
                                    var pageHost
                                       = ((document.location.protocol == "https:") ? "https://" : "http://");
                                    document.write("<a target = '_blank'"
                                       +" href = 'http://get.adobe.com/flashplayer/'><"
                                       +"img style = 'border-style: none' table table-bordered = '"
                                       +pageHost
                                       +"www.adobe.com/images/shared/download_buttons/get_flash_player.gif'"
                                       +" alt = 'Get Adobe Flash player' /></a>" );
                                 </script>
                              </td>
                           </tr>
                        </table>
                     </td>
                  </tr>
               </table>
            </p>
         <!--[if !IE]>-->
         </object>
         <!--<![endif]-->
         </object>
      </noscript>
   </body>
</html>

步驟4 - 建立內部CSS檔案

為**table table-bordered/com/tutorialspoint**資料夾中的**HelloWorld.mxml**建立一個CSS檔案**Style.css**。Flex為其UI控制元件提供的CSS樣式與HTML UI控制元件的CSS樣式類似。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.heading {
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}

.button {
   fontWeight: bold;			
}

.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

步驟5 - 修改入口級類

Flash Builder將建立一個預設的mxml檔案_table table-bordered/com.tutorialspoint/HelloWorld.mxml_，該檔案包含應用程式的根標籤<application>容器。讓我們修改此檔案以顯示“Hello,World！”：

<?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:Style source = "/com/tutorialspoint/client/Style.css" />
   <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:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

您可以在相同的源目錄中建立更多mxml或actionscript檔案來定義新的應用程式或定義輔助例程。

步驟6 - 構建應用程式

Flash Builder預設情況下選中了**自動構建**。如果出現任何錯誤，請檢查**問題**檢視。完成更改後，您將不會看到任何錯誤。

步驟7 - 執行應用程式

現在單擊執行應用程式選單並選擇**HelloWorld**應用程式來執行應用程式。

如果一切正常，您應該會看到瀏覽器彈出視窗，應用程式啟動並執行。如果您的應用程式一切正常，它將產生以下結果：[線上試用]

因為您在Flash Player中執行應用程式，所以它需要為您的瀏覽器安裝Flash Player外掛。只需按照螢幕上的說明安裝外掛即可。如果您已為瀏覽器設定了Flash Player外掛，則應該能夠看到以下輸出：

恭喜！您已使用**Flex**實現了您的第一個應用程式。

Flex - 部署應用

本教程將解釋如何建立應用程式**war**檔案以及如何在Apache Tomcat Web伺服器根目錄中部署它。

如果您理解了這個簡單的示例，那麼您也能夠按照相同的步驟部署複雜的Flex應用程式。

讓我們按照以下步驟建立一個Flex應用程式：

按照以下步驟建立Flex應用程式的釋出版本，然後將其部署到Tomcat伺服器：

第一步是使用Flash Builder IDE建立釋出版本。使用選項**檔案 > 匯出 > Flash Builder > 釋出版本**啟動釋出版本嚮導。

使用嚮導視窗選擇專案為_HelloWorld_，如下所示

保留其他預設值，然後單擊“完成”按鈕。現在，Flash Builder將建立一個包含專案釋出版本的bin-release資料夾。

現在我們的釋出版本已準備就緒，讓我們按照以下步驟部署Flex應用程式：

以下是修改後的mxml檔案**table table-bordered/com.tutorialspoint/HelloWorld.mxml**的內容。

<?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:Style source = "/com/tutorialspoint/client/Style.css" />
   <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:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" 
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe" 
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們像在Flex - 建立應用程式章節中一樣，以普通模式編譯並執行應用程式。如果您的應用程式一切正常，它將產生以下結果：[線上試用]

建立WAR檔案

現在我們的應用程式執行良好，我們準備將其匯出為war檔案。請按照以下步驟操作：

• 進入專案的bin-release目錄C:\workspace\HelloWorld\bin-release

• 選擇bin-release目錄中所有可用的檔案和資料夾。

• 將所有選定的檔案和資料夾壓縮到名為_HelloWorld.zip_的檔案中。

• 將HelloWorld.zip重新命名為HelloWorld.war。

部署WAR檔案

停止Tomcat伺服器。

• 將HelloWorld.war檔案複製到Tomcat安裝目錄>webapps資料夾。

• 啟動Tomcat伺服器。

• 檢視webapps目錄，應該已經建立了一個名為HelloWorld的資料夾。

• 現在HelloWorld.war已成功部署到Tomcat Web伺服器根目錄。

執行應用程式

在Web瀏覽器中輸入URL：

**https://:8080/HelloWorld/HelloWorld.html**啟動應用程式。

伺服器名稱（localhost）和埠（8080）可能因您的Tomcat配置而異。

Flex - 生命週期階段

Flex應用程式的生命週期

雖然您可以構建Flex應用程式而無需瞭解應用程式的生命週期階段，但瞭解基本機制（事件發生的順序）仍然很有好處。這將幫助您配置諸如在執行時載入其他Flex應用程式以及管理在執行時載入和解除安裝類庫和資源的過程等功能。

深入理解 Flex 應用程式的生命週期能夠幫助您構建更好的應用程式並對其進行最佳化，因為您將知道在何處以最佳方式執行程式碼。例如，如果您需要確保某些程式碼在預載入器中執行，則需要知道將程式碼放置在該事件的何處。

當我們在瀏覽器中載入 Flex 應用程式時，Flex 應用程式的生命週期中會發生以下事件。

以下是關於不同 Flex 生命週期事件的簡要說明。

Flex 生命週期示例

讓我們按照以下步驟來了解透過建立測試應用程式來理解 Flex 應用程式的測試生命週期：

以下是修改後的 mxml 檔案 src/com.tutorialspoint/HelloWorld.mxml 的內容。（此處應插入 mxml 檔案內容）

<?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 = "reportEvent(event)"
   preinitialize = "reportEvent(event)"
   creationComplete = "reportEvent(event)"
   applicationComplete = "reportEvent(event)">	
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
   
         [Bindable]
         private var report:String = "";

         private function reportEvent(event:FlexEvent):void {
            report += "\n" + (event.type + " event occured at: " 
            + getTimer() + " ms" + "\n");
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label textAlign = "center" width="100%" id = "lblHeader"
         fontSize = "40" color = "0x777777" styleName = "heading" 
         text = "Life Cycle Events Demonstration" />
         <s:TextArea id = "reportText" text = "{report}" editable = "false" 
         width = "300" height = "200">				
         </s:TextArea>			
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們像在 Flex - 建立應用程式 章節中一樣，以普通模式編譯並執行應用程式。如果應用程式一切正常，它將產生以下結果：[ 線上試用 ]

Flex - 使用 CSS 樣式

Flex 支援使用 CSS 語法和樣式應用於其 UI 控制元件，就像 CSS 應用於 HTML 元件一樣。

方法 #1：使用外部樣式表文件

您可以引用應用程式類路徑中可用的樣式表。例如，考慮 com/tutorialspoint/client 資料夾中的 Style.css 檔案，HelloWorld.mxml 檔案也位於該資料夾中。

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
...
.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

然後可以使用以下程式碼片段引用 css 檔案。（此處應插入程式碼片段）

<fx:Style source = "/com/tutorialspoint/client/Style.css" />

使用 styleName 屬性為 UI 元件分配樣式

<s:BorderContainer width = "500" height = "500" id = "mainContainer" 
   styleName = "container"> 
   ...
</s:BorderContainer>		  

方法 #2：在 Ui 容器元件中使用樣式

您可以使用 <fx:Style> 標籤在 UI 容器元件中定義樣式。（此處應插入程式碼片段）

類級別選擇器

<fx:Style>
   @namespace s "library://ns.adobe.com/flex/spark";
   @namespace mx "library://ns.adobe.com/flex/mx";

   /* class level selector  */
   .errorLabel {
      color: red;
   }		
</fx:Style>

使用 styleName 屬性為 UI 元件分配樣式。

<s:Label id = "errorMsg" text = "This is an error message" styleName = "errorLabel" />

ID 級別選擇器

使用 id 選擇器設定 UI 元件的樣式。

<fx:Style> 
   /* id level selector  */ 
   #msgLabel { 
      color: gray; 
   } 
</fx:Style>

<s:Label id = "msgLabel" text = "This is a normal message" /> 

型別級別選擇器

一次性設定一種型別的 UI 元件的樣式。

<fx:Style> 
   /* style applied on all buttons  */ 
   s|Button {  
      fontSize: 15; 
      color: #9933FF; 
   } 
</fx:Style>

<s:Button label = "Click Me!" id = "btnClickMe"
   click = "btnClickMe_clickHandler(event)" />

Flex 樣式與 CSS 示例

讓我們按照以下步驟檢查透過建立測試應用程式來檢視 Flex 應用程式的 CSS 樣式：

以下是修改後的 CSS 檔案 src/com.tutorialspoint/Style.css 的內容。（此處應插入 CSS 檔案內容）

/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";

.heading
{
   fontFamily: Arial, Helvetica, sans-serif;
   fontSize: 17px;
   color: #9b1204;
   textDecoration:none;
   fontWeight:normal;
}

.button {
   fontWeight: bold;			
}

.container {
   cornerRadius :10;
   horizontalCenter :0;	
   borderColor: #777777;
   verticalCenter:0;
   backgroundColor: #efefef;
}

以下是修改後的 mxml 檔案 src/com.tutorialspoint/HelloWorld.mxml 的內容。（此處應插入 mxml 檔案內容）

<?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)">
   
   <!--Add reference to style sheet -->
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />

   <!--Using styles within mxml file -->
   <fx:Style>
      @namespace s "library://ns.adobe.com/flex/spark";
      @namespace mx "library://ns.adobe.com/flex/mx";

      /* class level selector  */
      .errorLabel {
         color: red;
      }

      /* id level selector  */
      #msgLabel {
         color: gray;
      }

      /* style applied on all buttons  */
      s|Button {
         fontSize: 15;
         color: #9933FF;
      }
   </fx:Style>

   <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 = "CSS Demonstrating Application";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "560" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label width = "100%" id = "lblHeader" fontSize = "40"
            color = "0x777777" styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)"  />
         <s:Label id = "errorMsg"
            text = "This is an error message" styleName = "errorLabel" />
         <s:Label id = "msgLabel" text = "This is a normal message" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

完成所有更改後，讓我們像在 Flex - 建立應用程式 章節中一樣，以普通模式編譯並執行應用程式。如果應用程式一切正常，它將產生以下結果：[ 線上試用 ]

Flex - 使用皮膚樣式

什麼是皮膚？

• 在 Flex 中，皮膚是一個完全自定義 UI 元件外觀和感覺的過程。

• 皮膚可以定義元件的文字、影像、過濾器、轉換和狀態。

• 皮膚可以作為單獨的 mxml 或 ActionScript 元件建立。

• 使用皮膚，我們可以控制 UI 元件的所有視覺方面。

• 定義皮膚的過程對於所有 UI 元件都是相同的。

步驟 1 – 建立皮膚

使用選項 檔案 > 新建 > MXML 皮膚 啟動建立 MXML 皮膚嚮導。

將包輸入為 com.tutorialspoint.skin，名稱為 GradientBackgroundSkin，並選擇現有 Flex BorderContainer 控制元件 spark.component.BorderContainer 作為宿主元件。

現在您已為 BorderContainer 建立了一個皮膚。修改 mxml 皮膚檔案 src/com.tutorialspoint/skin/GradientBackgroundSkin.mxml 的內容。（此處應插入修改後的檔案內容）

如下更新填充層：

<!-- fill -->
<s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
   <s:fill>
      <s:LinearGradient rotation = "90">
         <s:GradientEntry color = "0x888888" ratio = "0.2" />
         <s:GradientEntry color = "0x111111" ratio = "1" />
      </s:LinearGradient>
   </s:fill>
</s:Rect>	

步驟 2：應用皮膚

您可以透過兩種方式將皮膚應用於元件：

在 MXML 指令碼中應用皮膚（靜態）

使用其 skinClass 屬性將 GradientBackgroundSkin 應用於 ID 為 mainContainer 的 BorderContainer。

<s:BorderContainer width = "560" height = "500" id = "mainContainer" 
   styleName = "container">
   <s:VGroup width = "100%" height = "100%" gap = "50" 
      horizontalAlign = "center" verticalAlign = "middle" 
      skinClass = "com.tutorialspoint.skin.GradientBackgroundSkin">

在 ActionScript 中應用皮膚（動態）

使用其 skinClass 屬性將 GradientBackgroundSkin 應用於 ID 為 mainContainer 的 BorderContainer。

protected function gradientBackground_clickHandler(event:MouseEvent):void {
   mainContainer.setStyle("skinClass", GradientBackgroundSkin);
}

Flex 樣式與皮膚示例

讓我們按照以下步驟檢視 Flex 應用程式中皮膚的實際應用，方法是建立一個測試應用程式：

以下是 GradientBackgroundSkin.mxml 檔案 src/com/tutorialspoint/skin/GradientBackg roundSkin.mxml 的內容。（此處應插入檔案內容）

<?xml version = "1.0" encoding = "utf-8"?>
<s:Skin xmlns:fx = "http://ns.adobe.com/mxml/2009" 
   xmlns:s = "library://ns.adobe.com/flex/spark" 
   xmlns:mx = "library://ns.adobe.com/flex/mx">
   
   <!-- host component -->
   <fx:Metadata>
      [HostComponent("spark.components.BorderContainer")]
   </fx:Metadata> 

   <!-- states -->
   <s:states>
      <s:State name = "disabled" />
      <s:State name = "disabled" />
      <s:State name = "normal" />
   </s:states>

   <!-- SkinParts
   name = contentGroup, type = spark.components.Group, required = false
   -->
   
   <!-- fill -->
   <s:Rect id = "backgroundRect" left = "0" right = "0" height = "100%" top = "0">
      <s:fill>
         <s:LinearGradient rotation = "90">
            <s:GradientEntry color = "0x111111" ratio = "0.2" />
            <s:GradientEntry color = "0x888888" ratio = "1" />
         </s:LinearGradient>
      </s:fill>
   </s:Rect>	
   
   <!-- must specify this for the host component --> 
   <s:Group id = "contentGroup" left = "0" right = "0" top = "0" bottom = "0" />
</s:Skin>

以下是修改後的 HelloWorld.mxml filesrc/com/tutorialspoint/client/HelloWorld.mxml 的內容。（此處應插入檔案內容）

<?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:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import com.tutorialspoint.skin.GradientBackgroundSkin;
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         import spark.skins.spark.BorderContainerSkin;			

         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }

         protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
         }

         protected function gradientBackground_clickHandler(event:MouseEvent):void {
            mainContainer.setStyle("skinClass", GradientBackgroundSkin );
         }

         protected function standardBackground_clickHandler(event:MouseEvent):void {
            mainContainer.setStyle("skinClass", BorderContainerSkin );
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <s:RadioButtonGroup id = "selectorGroup" />
   </fx:Declarations>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer"
      skinClass = "spark.skins.spark.BorderContainerSkin" 
      horizontalCenter = "0" verticalCenter = "0" cornerRadius = "10">
      
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "green" 
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe" 
            click = "btnClickMe_clickHandler(event)" />
         <s:RadioButton color = "gray" fontWeight = "bold" 
            group = "{selectorGroup}" label = "Standard Background" 
            click = "standardBackground_clickHandler(event)" selected = "true" />
         <s:RadioButton color = "gray" fontWeight = "bold" 
            group = "{selectorGroup}" label = "Gradient Background" 
            click = "gradientBackground_clickHandler(event)" />			
      </s:VGroup>			
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們像在 Flex - 建立應用程式 章節中一樣，以普通模式編譯並執行應用程式。如果應用程式一切正常，它將產生以下結果：[ 線上試用 ]

Flex - 資料繫結

什麼是資料繫結？

資料繫結是一個將一個物件的資料繫結到另一個物件的過程。它需要一個源屬性、一個目標屬性和一個觸發事件，該事件指示何時將資料從源複製到目標。

Flex 提供三種資料繫結方式，如下所示：

• MXML 指令碼中的花括號語法 ({})
• <fx:binding> 標籤在 MXML 中
• ActionScript 中的 BindingUtils

資料繫結 – 在 MXML 中使用花括號

以下示例演示如何使用花括號指定源到目標的資料繫結。（此處應插入程式碼示例）

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" text = "{txtInput1.text}" />

資料繫結 – 在 MXML 中使用 <fx:Binding> 標籤

以下示例演示如何使用標籤指定源到目標的資料繫結。（此處應插入程式碼示例）

<fx:Binding source = "txtInput1.text" destination = "txtInput2.text" />
<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" />

資料繫結 – 在 ActionScript 中使用 BindingUtils

以下示例演示如何使用 BindingUtils 指定源到目標的資料繫結。（此處應插入程式碼示例）

<fx:Script>
   <![CDATA[
      import mx.binding.utils.BindingUtils;
      import mx.events.FlexEvent;

      protected function txtInput2_preinitializeHandler(event:FlexEvent):void {
         BindingUtils.bindProperty(txtInput2,"text",txtInput1, "text");
      }      
   ]]>
</fx:Script>

<s:TextInput id = "txtInput1" />
<s:TextInput id = "txtInput2" 
   preinitialize = "txtInput2_preinitializeHandler(event)" />

Flex 資料繫結示例

讓我們按照以下步驟檢視 Flex 應用程式中皮膚的實際應用，方法是建立一個測試應用程式：

以下是修改後的 HelloWorld.mxml 檔案 src/com/tutorialspoint/client/HelloWorld.mxml 的內容。（此處應插入檔案內容）

<?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">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.binding.utils.BindingUtils;   
         import mx.events.FlexEvent;

         protected function txtInput6_preinitializeHandler(event:FlexEvent):void {
            BindingUtils.bindProperty(txtInput6,"text",txtInput5, "text");
         }
      ]]>
   </fx:Script>
   
   <fx:Binding source = "txtInput3.text" destination = "txtInput4.text" />
   <s:BorderContainer width = "500" height = "550" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Data Binding Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />
         <s:Panel title = "Example #1 (Using Curly Braces,\{\})" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput1" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput2" text = "{txtInput1.text}" />
            </s:HGroup>						
         </s:Panel>
         
         <s:Panel title = "Example #2 (Using &lt;fx:Binding&gt;)" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput3" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:Label id = "txtInput4" />
            </s:HGroup>						
         </s:Panel>
         
         <s:Panel title = "Example #3 (Using BindingUtils)" width = "400" 
            height = "100" >
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "Type here: " width = "100" paddingTop = "6" />
               <s:TextInput id = "txtInput5" />	
            </s:HGroup>
            
            <s:HGroup >
               <s:Label text = "Copied text: " width = "100" paddingTop = "6" />
               <s:TextInput enabled = "false" id = "txtInput6" 
                  preinitialize = "txtInput6_preinitializeHandler(event)" />
            </s:HGroup>						
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們像在 Flex - 建立應用程式 章節中一樣，以普通模式編譯並執行應用程式。如果應用程式一切正常，它將產生以下結果：[ 線上試用 ]

Flex - 基本控制元件

每個使用者介面都考慮以下三個主要方面：

• UI 元素 – 這些是使用者最終看到並與之互動的核心視覺元素。Flex 提供了大量廣泛使用和常見的元素，從基本到複雜，我們將在本教程中介紹這些元素。

• 佈局 – 它們定義了 UI 元素如何在螢幕上組織，併為 GUI（圖形使用者介面）提供最終的外觀和感覺。這部分將在佈局章節中介紹。

• 行為 – 這些事件發生在使用者與 UI 元素互動時。這部分將在事件處理章節中介紹。

Flex UI 元素

Flex UI 庫在一個定義良好的類層次結構中提供類，以建立複雜的基於 Web 的使用者介面。此元件層次結構中的所有類都從 EventDispatcher 基類派生，如下所示：

每個基本的 UI 控制元件都繼承自 UI Component 類的屬性，而 UI Component 類又繼承自 EventDispatcher 和其他頂級類的屬性。

基本控制元件

以下是幾個重要的 基本控制元件：

Flex - 表單控制元件

表單控制元件允許使用者輸入資料，併為他們提供與應用程式互動的功能。每個表單 UI 控制元件都繼承自 UIComponent 類的屬性，而 UIComponent 類又繼承自 EventDispatcher 和其他頂級類的屬性。

表單控制元件

以下是幾個重要的表單控制元件：

Flex - 複雜控制元件

複雜控制元件為使用者提供了更高階的功能，以便更輕鬆地處理大量資料，併為他們提供了與應用程式互動的功能。每個複雜 UI 控制元件都繼承自 UIComponent 類，而 UIComponent 類又繼承自 EventDispatcher 類和其他頂級類。

複雜控制元件 (Complex Controls)

以下是一些重要的複雜控制元件：

Flex - 佈局面板

佈局面板控制元件允許使用者組織頁面上的 UI 控制元件。每個佈局控制元件都繼承自 UIComponent 類，而 UIComponent 類又繼承自 EventDispatcher 類和其他頂級類。

佈局面板 (Layout Panels)

以下是一些重要的佈局面板：

Flex - 視覺效果

我們可以使用 Effects 的概念向 Flex 應用程式新增行為。例如，當文字框獲得焦點時，我們可以使其文字變粗，並使其大小略微增大。

每個效果都繼承自 Effect 類，而 Effect 類又繼承自 EventDispatcher 類和其他頂級類。

基本效果 (Basic Effects)

以下是一些重要的基本視覺效果：

Flex - 事件處理

Flex 使用事件的概念來傳遞資料，具體取決於應用程式中的狀態或使用者互動。

ActionScript 有一個通用的Event類，它定義了處理事件所需的大部分功能。每次在 Flex 應用程式中發生事件時，都會建立來自 Event 類層次結構的三種類型的物件。

Event 具有以下三個關鍵屬性：

事件流階段 (Event Flow Phases)

事件會經過三個階段來查詢事件處理程式。

冒泡階段與捕獲階段相反，從目標元件的父級向上回溯結構。

<?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" >
   
   <s:Panel>
      <s:Button id = "clickMeButton" label = "Click Me!" click = "doAction( );" />
   </s:Panel>   
</s:Application>

考慮以下應用程式程式碼：

當用戶單擊按鈕時，他/她也單擊了面板和應用程式。

事件經過三個階段來查詢事件處理程式分配。

以下是修改後的 mxml 檔案 src/com.tutorialspoint/HelloWorld.mxml 的內容。（此處應插入 mxml 檔案內容）

<?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">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         protected function reportEvent(event:MouseEvent):void {
            var target:String = event.target.id;
            var currentTarget:String = event.target.id;
            var eventPhase: String;

            if(event.target is Button) {
               var button:Button = event.target as Button;
               target = button.label + " Button";
            } else if(event.target is HGroup) {
               var hGroup:HGroup = event.target as HGroup;
               target = hGroup.id + " HGroup";
            } else if(event.target is Panel) {
               var panel:Panel = event.target as Panel;
               target = panel.id + " Panel";
            }

            if(event.currentTarget is Button) {
               var button1:Button = event.currentTarget as Button;
               currentTarget = button1.label + " Button";
            } else if(event.currentTarget is HGroup) {
               var hGroup1:HGroup = event.currentTarget as HGroup;
               currentTarget = hGroup1.id + " HGroup";
            } else if(event.currentTarget is Panel) {
               var panel1:Panel = event.currentTarget as Panel;
               currentTarget = panel1.id + " Panel";
            }

            var eventPhaseInt:uint = event.eventPhase;

            if(eventPhaseInt == EventPhase.AT_TARGET) {
               eventPhase = "Target";
            } else if(eventPhaseInt == EventPhase.BUBBLING_PHASE) {
               eventPhase = "Bubbling";
            } else if(eventPhaseInt == EventPhase.CAPTURING_PHASE) {
               eventPhase = "Capturing";
            }
            
            reports.text += " Target: " + target + "\n currentTarget: " +
               currentTarget + "\n Phase: " + eventPhase + "\n----------\n";
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10"
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Event Handling Demonstration"
            fontSize = "40" color = "0x777777" styleName = "heading" />

         <s:Panel id = "parentPanel" title = "Main Parent"
            click = "reportEvent(event)" width = "500"
            height = "100" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle"
                  horizontalAlign = "center" />
            </s:layout>
            
            <s:HGroup id = "mainHGroup" click = "reportEvent(event)">
               <s:Button label = "Click Me" click = "reportEvent(event)" />
            </s:HGroup>
         </s:Panel>

         <s:Panel id = "reportPanel" title = "Events" width = "500" height = "230">
            <mx:Text id = "reports" />
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

按照Flex - 建立應用程式章節中的說明，在com.tutorialspoint.client包下建立一個名為HelloWorld的專案。

Flex - 自定義控制元件

完成所有更改後，讓我們像在Flex - 建立應用程式章節中那樣以普通模式編譯並執行應用程式。如果您的應用程式一切正常，它將產生以下結果：[線上嘗試]

• Flex 提供兩種建立自定義元件的方法。
• 使用 ActionScript

Flex 提供兩種建立自定義元件的方法。

使用 MXML

您可以透過擴充套件現有元件來建立元件。要使用 Flash Builder 建立元件，請單擊檔案 > 新建 > ActionScript 類。

輸入如下所示的詳細資訊：

package com.tutorialspoint.client {
   import spark.components.Button;

   public class CustomButton extends Button {
      public function CustomButton() {
         super();
      }
   }
}

使用 ActionScript

Flash Builder 將建立以下 CustomButton.as 檔案。

您可以透過擴充套件現有元件來建立元件。要使用 Flash Builder 建立元件，請單擊檔案 > 新建 > MXML 元件。

輸入如下所示的詳細資訊。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
</s:Group>

Flash Builder 將建立以下 CustomLogin.mxml 檔案。

如上所述建立CustomLogin.mxml和CustomButton.as元件。修改這些檔案，如以下所述。保持其餘檔案不變。

<?xml version = "1.0" encoding = "utf-8"?>
<s:Group 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 = "400" height = "300">
   
   <s:Form>
      <s:FormItem label = "UserName:">
         <s:TextInput width = "200" />
      </s:FormItem>
      
      <s:FormItem label = "Password:">
         <s:TextInput width = "200" displayAsPassword = "true" />
      </s:FormItem>
      
      <s:FormItem>
         <s:Button label = "Login" />
      </s:FormItem>		
   </s:Form>
</s:Group>

以下是修改後的 mxml 檔案src/com.tutorialspoint/client/CustomLogin.mxml的內容。

package com.tutorialspoint.client {
   import spark.components.Button;

   public class CustomButton extends Button {
      
      public function CustomButton() {
         super();
         this.setStyle("color","green");
         this.label = "Submit";
      }
   }
}

以下是修改後的 mxml 檔案src/com.tutorialspoint/client/CustomButton.as的內容。

<?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" 
   xmlns:client = "com.tutorialspoint.client.*"
   initialize = "application_initializeHandler(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
        import mx.events.FlexEvent;

        protected function application_initializeHandler(event:FlexEvent):void {
           //create a new custom button
           var customButton: CustomButton = new CustomButton();
           asPanel.addElement(customButton);
        }

      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Custom Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />

         <s:Panel title = "Using MXML Component" width = "400" height = "200">
            <client:CustomLogin>			
            </client:CustomLogin>		
         </s:Panel>
         
         <s:Panel  title = "Using AS Component" width = "400" height = "100">
            <s:VGroup id = "asPanel" width = "100%" height = "100%" gap = "10" 
               horizontalAlign = "center" verticalAlign = "middle">
            </s:VGroup>
         </s:Panel>
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

以下是修改後的 mxml 檔案src/com.tutorialspoint/client/HelloWorld.mxml的內容。

Flex - RPC 服務

完成所有更改後，讓我們像在Flex - 建立應用程式章節中那樣以普通模式編譯並執行應用程式。如果您的應用程式一切正常，它將產生以下結果：[線上嘗試]

• Flex 提供 RPC 服務以將伺服器端資料提供給客戶端。Flex 對伺服器端資料提供了相當多的控制。

• 使用 Flex RPC 服務，我們可以定義要在伺服器端執行的使用者操作。

• Flex RPC 服務可以與任何伺服器端技術整合。

Flex RPC 服務中的一種提供對壓縮二進位制資料的內建支援，以便透過網路傳輸，並且速度很快。

我們將詳細討論 HTTP 服務。我們將使用伺服器上放置的 XML 原始檔，並透過 HTTP 服務在客戶端訪問它。

Items.xml

<items>
   <item name = "Book" description = "History of France"></item>
   <item name = "Pen" description = "Parker Pen"></item>
   <item name = "Pencil" description = "Stationary"></item>
<items>

HTTP 服務宣告

現在宣告一個 HTTPService 併為其傳遞上述檔案的 URL

<fx:Declarations>
   <mx:HTTPService id = "itemRequest" 
   url = "https://tutorialspoint.tw/flex/Items.xml" />
</fx:Declarations>

RPC 呼叫

呼叫 itemRequest.send() 方法並將值從 itemRequest webservice 的 lastResult 物件繫結到 Flex UI 元件。

...
itemRequest.send();
...
<mx:DataGrid id = "dgItems" height = "80%" width = "75%" 
   dataProvider = "{itemRequest.lastResult.items.item}">
   <mx:columns>
      <mx:DataGridColumn headerText = "Name" dataField = "name" />
      <mx:DataGridColumn headerText = "Description" dataField = "description" />
   </mx:columns>
</mx:DataGrid>

RPC 服務呼叫示例

現在，讓我們按照以下步驟在 Flex 應用程式中測試 RPC 服務：

以下是修改後的 mxml 檔案 src/com.tutorialspoint/HelloWorld.mxml 的內容。（此處應插入 mxml 檔案內容）

<?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" 
   minWidth = "500" minHeight = "500" creationComplete = "init(event)">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.events.FlexEvent;
         import mx.rpc.events.FaultEvent;
         import mx.rpc.events.ResultEvent;

         protected function init(event:FlexEvent):void {
            itemRequest.send();				
         }
      ]]>
   </fx:Script>
   
   <fx:Declarations>
      <mx:HTTPService id = "itemRequest" 
         url = "https://tutorialspoint.tw/flex/Items.xml" />
   </fx:Declarations>
   
   <s:BorderContainer width = "630" height = "480" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "10" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "RPC Service Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "parentPanel" title = "Using RPC Services"  
            width = "500" height = "200" >
            <s:layout>
               <s:VerticalLayout  gap = "10" 
                  verticalAlign = "middle" horizontalAlign = "center" />
            </s:layout>						
            
            <mx:DataGrid id = "dgItems" height = "80%" width = "75%" 
               dataProvider = "{itemRequest.lastResult.items.item}">
               
               <mx:columns>
                  <mx:DataGridColumn headerText = "Name" dataField = "name" />
                  <mx:DataGridColumn headerText = "Description" 
                     dataField = "description" />
               </mx:columns>
            </mx:DataGrid>
         </s:Panel>	
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們像在Flex - 建立應用程式章節中那樣以普通模式編譯並執行應用程式。如果您的應用程式一切正常，它將產生以下結果：[線上試用]

Flex - FlexUnit 整合

Flash Builder 4 對 FlexUnit 整合在 Flex 開發週期中提供了極好的內建支援。

建立測試用例類

您可以使用 Flash Builder 建立測試類嚮導建立測試用例類。正如您將在本文中看到的那樣，使用 Flash Builder 執行測試用例非常簡單。

要使用 Flash Builder 建立測試用例類，請單擊檔案 > 新建 > 測試用例類。輸入如下所示的詳細資訊。

Flash Builder 將建立以下 TestClass1.as 檔案。

package com.tutorialspoint.client {
   public class TestClass1 {		
      [Before]
      public function setUp():void {}

      [After]
      public function tearDown():void {}

      [BeforeClass]
      public static function setUpBeforeClass():void {}

      [AfterClass]
      public static function tearDownAfterClass():void {}	
   }
}

FlexUnit 整合示例

現在，讓我們按照以下步驟在 Flex 應用程式中測試 FlexUnit 整合：

以下是修改後的 as 檔案src/com.tutorialspoint/client/TestClass1.as的內容。

package com.tutorialspoint.client {
   import org.flexunit.asserts.assertEquals;

   public class TestClass1 {		
      private var counter: int = 1;

      [Before]
      public function setUp():void {
         //this code will run before every test case execution
      }

      [After]
      public function tearDown():void {
         //this code will run after every test case execution
      }

      [BeforeClass]
      public static function setUpBeforeClass():void {
         //this code will run once when test cases start execution
      }

      [AfterClass]
      public static function tearDownAfterClass():void {
         //this code will run once when test cases ends execution
      }      

      [Test]  
      public function testCounter():void { 
         assertEquals(counter, 1);
      }
   }
}

以下是修改後的 mxml 檔案 src/com.tutorialspoint/HelloWorld.mxml 的內容。（此處應插入 mxml 檔案內容）

<?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" 
   minWidth = "500" minHeight = "500">
</s:Application>

完成所有更改後，讓我們像在Flex - 建立應用程式章節中那樣以普通模式編譯。

執行測試用例

現在右鍵單擊包資源管理器中的 TestClass1，然後選擇以...執行 > FlexUnit 測試。您將在 Flash Builder 測試視窗中看到以下輸出。

Flash Builder 還顯示瀏覽器中的測試結果。

Flex - 除錯應用

Flex 提供了出色的除錯 Flex 程式碼的能力，Flash Builder 4 具有出色的內建偵錯程式和除錯透檢視支援。

• 在除錯模式下，Flex 應用程式執行在 Flash Builder 4 中內建的支援除錯功能的 Flash Player 偵錯程式版本上。

• 因此，開發人員在 Flash Builder 中獲得了簡單易用的內建除錯配置。

在本文中，我們將演示使用 Flash Builder 除錯 Flex 客戶端程式碼的使用方法。我們將執行以下任務：

• 在程式碼中設定斷點並在斷點資源管理器中檢視它們。
• 在除錯期間逐行單步執行程式碼。
• 檢視變數的值。
• 檢查所有變數的值。
• 檢查表示式的值。
• 顯示掛起執行緒的堆疊幀。

除錯示例

以下是修改後的 mxml 檔案 src/com.tutorialspoint/HelloWorld.mxml 的內容。（此處應插入 mxml 檔案內容）

<?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:Style source = "/com/tutorialspoint/client/Style.css" />
   <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:BorderContainer width = "500" height = "500" id = "mainContainer"
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" horizontalAlign = "center"
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777"
            styleName = "heading" />
         <s:Button label = "Click Me!" id = "btnClickMe"
            click = "btnClickMe_clickHandler(event)" styleName = "button" />
      </s:VGroup>
   </s:BorderContainer>
</s:Application>

完成所有更改後，讓我們像在Flex - 建立應用程式章節中那樣以普通模式編譯。

步驟 1 - 放置斷點

在 HelloWorld.mxml 的應用程式初始化處理程式的第一行放置斷點。

步驟 2 - 除錯應用程式

現在單擊除錯應用程式選單，然後選擇HelloWorld應用程式以除錯該應用程式。

如果一切正常，應用程式將在瀏覽器中啟動，您將在 Flash Builder 控制檯中看到以下除錯日誌。

[SWF] \HelloWorld\bin-debug\HelloWorld.swf 
- 181,509 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\1 
- 763,122 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\2 
- 1,221,837 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\3 
- 1,136,788 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\4 
- 2,019,570 bytes after decompression
[SWF] \HelloWorld\bin-debug\HelloWorld.swf\[[DYNAMIC]]\5 
- 318,334 bytes after decompression

應用程式啟動後，您將看到 Flash Builder 斷點處於焦點狀態，因為我們已在 application_initialize 處理程式方法的第一行放置了斷點。

您可以看到掛起執行緒的堆疊跟蹤。

您可以看到表示式的值。

您可以看到已放置的斷點列表。

現在繼續按 F6，直到到達 application_initializeHandler() 方法的最後一行。作為函式鍵的參考，F6 逐行檢查程式碼，F5 進一步深入，F8 將恢復應用程式。現在您可以看到 application_initializeHandler() 方法的所有變數的值列表。

現在您可以看到 Flex 程式碼的除錯方式與 Java 應用程式的除錯方式相同。將斷點放在任何一行，並使用 Flex 的除錯功能。

Flex - 國際化

Flex 提供兩種國際化 Flex 應用程式的方法，我們將演示編譯時國際化方法的使用，它在專案中最為常用。

國際化 Flex 應用程式的工作流程

步驟 1 – 建立資料夾結構

在 Flex 專案的 src 資料夾下建立一個 locale 資料夾。這將是應用程式將支援的所有語言環境的屬性檔案的父目錄。在 locale 資料夾內，為應用程式將支援的每個語言環境建立一個子資料夾。語言環境的命名約定是：

{language}_{country code}

例如，en_US 代表美國的英語。de_DE 語言環境代表德語。示例應用程式將支援兩種常用語言：英語和德語。

步驟 2 – 建立屬性檔案

建立包含要在應用程式中使用的訊息的屬性檔案。在我們的示例中，我們在src > locale > en_US資料夾下建立了一個HelloWorldMessages.properties檔案。

enterName = Enter your name
clickMe = Click Me
applicationTitle = Application Internationalization Demonstration
greeting = Hello {0}

建立包含特定於語言環境的翻譯值的屬性檔案。在我們的示例中，我們在src > locale > de_DE資料夾下建立了一個HelloWorldMessages.properties檔案。此檔案包含德語翻譯。_de 指定德語語言環境，我們將支援應用程式中的德語。

如果您使用 Flash Builder 建立屬性檔案，則將檔案的編碼更改為 UTF-8。選擇該檔案，然後右鍵單擊它以開啟其屬性視窗。選擇文字檔案編碼為其他 UTF-8。應用並儲存更改。

enterName = Geben Sie Ihren Namen
clickMe = Klick mich
applicationTitle = Anwendung Internationalisierung Demonstration
greeting = Hallo {0}

步驟 3 – 指定編譯器選項

• 右鍵單擊您的專案，然後選擇屬性。

• 選擇 Flex 編譯器，然後將以下內容新增到其他編譯器引數設定中：

-locale en_US de_DE

• 右鍵單擊您的專案，然後選擇屬性。

• 選擇 Flex 構建路徑，然後將以下內容新增到源路徑設定中：

src\locale\{locale}

國際化示例

現在，讓我們按照以下步驟在 Flex 應用程式中測試國際化技術：

以下是修改後的 mxml 檔案 src/com.tutorialspoint/HelloWorld.mxml 的內容。（此處應插入 mxml 檔案內容）

<?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" 
   minWidth = "500" minHeight = "500">
   
   <fx:Metadata>
      [ResourceBundle("HelloWorldMessages")]
   </fx:Metadata> 
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         import mx.controls.Alert;
         [Bindable]
         private var locales:Array =  [{label:"English", locale:"en_US"},
            {label:"German", locale:"de_DE"}];

         private function comboChangeHandler():void {
           resourceManager.localeChain = [localeComboBox.selectedItem.locale];
         }

         protected function clickMe_clickHandler(event:MouseEvent):void {
            var name:String = txtName.text;
            var inputArray:Array = new Array();
            inputArray.push(name);
            Alert.show(resourceManager.getString('HelloWorldMessages'
               ,'greeting',inputArray));
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
	  horizontalAlign = "center" verticalAlign = "middle">
         
         <s:Label id = "lblHeader" fontSize = "40" 
            color = "0x777777" 
            text  = "{resourceManager.getString('HelloWorldMessages','applicationTitle')}"
            styleName = "heading" width = "90%" height = "150" />
         
         <s:Panel width = "300" height = "150">
            <s:layout>
               <s:VerticalLayout paddingTop = "10" paddingLeft = "10" />
            </s:layout>
            
            <s:HGroup >
               <s:Label text = "{resourceManager.getString('HelloWorldMessages','enterName')}"
                  paddingTop = "2" />			
               <s:TextInput id = "txtName" />
            </s:HGroup>
            
            <s:Button 
               label = "{resourceManager.getString('HelloWorldMessages','clickMe')}" 
               click = "clickMe_clickHandler(event)" right = "10" />	
         </s:Panel>
         
         <mx:ComboBox id = "localeComboBox" dataProvider = "{locales}"
            change = "comboChangeHandler()" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們像在Flex - 建立應用程式章節中那樣以普通模式編譯並執行應用程式。如果您的應用程式一切正常，它將產生以下結果：[線上試用]

使用語言下拉選單更改語言，然後檢視結果。

Flex - 列印支援

Flex 提供了一個特殊的類FlexPrintJob來列印 Flex 物件。

• FlexPrintJob 可用於列印一個或多個 Flex 物件，例如表單或 VBox 容器。

• FlexPrintJob 列印物件及其包含的所有物件。

• 這些物件可以是顯示介面的全部或一部分。

• 這些物件可以是專門為列印格式化資料的元件。

• FlexPrintJob 類允許您縮放輸出以適應頁面。

• FlexPrintJob 類會自動使用多個頁面來列印不適合單個頁面的物件。

• FlexPrintJob 類會使作業系統顯示“列印”對話方塊。您不能在沒有使用者操作的情況下進行列印。

準備和傳送列印作業

您可以透過準備和傳送列印作業來列印輸出。讓我們建立一個 FlexPrintJob 類的例項。

var printJob:FlexPrintJob = new FlexPrintJob();

啟動列印作業

printJob.start(); 

Flex 將使作業系統顯示“列印”對話方塊。向列印作業新增一個或多個物件，並指定如何縮放它們。

printJob.addObject(myObject, FlexPrintJobScaleType.MATCH_WIDTH); 

每個物件都從新的一頁開始。將列印作業傳送到印表機。

printJob.send(); 

列印示例

以下是修改後的 mxml 檔案 src/com.tutorialspoint/HelloWorld.mxml 的內容。（此處應插入 mxml 檔案內容）

<?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:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
     <![CDATA[
         import mx.controls.Alert;
         import mx.events.FlexEvent;
         import mx.printing.FlexPrintJob;
         import mx.printing.FlexPrintJobScaleType;
         
         protected function btnClickMe_clickHandler(event:MouseEvent):void {
            
            // Create an instance of the FlexPrintJob class.
            var printJob:FlexPrintJob = new FlexPrintJob();
         
            // Start the print job.
            if (printJob.start() != true) return;

            // Add the object to print. Do not scale it.
            printJob.addObject(myDataGrid, FlexPrintJobScaleType.NONE);

            // Send the job to the printer.
            printJob.send();
        }

        protected function application_initializeHandler(event:FlexEvent):void {
            lblHeader.text = "My Hello World Application";				
        }
     ]]>
   </fx:Script>
   
   <s:BorderContainer width = "500" height = "500" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50"
         horizontalAlign = "center" 
         verticalAlign = "middle">
         <s:Label id = "lblHeader" fontSize = "40" color = "0x777777" 
            styleName = "heading" />
         
         <mx:DataGrid id = "myDataGrid" width = "300">
            <mx:dataProvider>
               <fx:Object Product = "Flex" Code = "1000" />
               <fx:Object Product = "GWT" Code = "2000" />
               <fx:Object Product = "JAVA" Code = "3000" />
               <fx:Object Product = "JUnit" Code = "4000" />
            </mx:dataProvider>
         </mx:DataGrid>
         
         <s:Button label = "Print Me!" id = "btnClickMe" 
            click = "btnClickMe_clickHandler(event)" 
            styleName = "button" />
      </s:VGroup>	
   </s:BorderContainer>	
</s:Application>

完成所有更改後，讓我們像在Flex - 建立應用程式章節中那樣以普通模式編譯並執行應用程式。如果您的應用程式一切正常，它將產生以下結果：[線上試用]

單擊“列印”按鈕，您可以看到下面顯示的資料網格的列印輸出。