在 Flash Builder 中建立第一個桌上型 Flex AIR 應用程式

Flash Builder 包含開發和封裝 AIR 應用程式的工具。

在 Flex Builder 或 Flex Builder 中開始建立 AIR 應用程式的方式和建立其他 Flex 類型應用程式專案相同，都是從定義新專案開始。

1. 開啟 Flash Builder。

2. 選取「檔案 > 新增 > Flex 專案」。

3. 輸入 AIRHelloWorld 當做專案名稱。

4. 在 Flex 中，AIR 應用程式被視為一種應用程式類型。您有兩個類型選項：

   • 在 Adobe® Flash® Player 中執行的網頁應用程式

   • 在 Adobe AIR 中執行的桌上型應用程式

   請選取「桌上型」做為應用程式類型

5. 按一下「完成」來建立專案。

AIR 專案最初由兩個檔案組成：主要 MXML 檔案和應用程式 XML 檔案 (稱為應用程式描述器檔案)。後者檔案會指定應用程式屬性。

如需詳細資訊，請參閱 使用 Flash Builder 開發 AIR 應用程式 。

若要撰寫 “Hello World” 應用程式程式碼，請編輯開啟於編輯器中的應用程式 MXML 檔案 (AIRHelloWorld.mxml) (如果檔案未開啟，請使用「專案導覽器」開啟檔案)。

桌上型的 Flex AIR 應用程式包含在 MXML WindowedApplication 標記中。MXML WindowedApplication 標籤會建立簡單的視窗，其中包含基本的視窗控制項，例如標題列和關閉按鈕。

1. 在 WindowedApplication 組件加入 title 特質並指派值 "Hello World" ：

   <?xml version="1.0" encoding="utf-8"?> 
   <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          title="Hello World"> 
   </s:WindowedApplication>

2. 在應用程式中加入 Label 組件 (放置在 WindowedApplication 標籤內)。將 Label 組件的 text 屬性設成 "Hello AIR" ，並將佈局限制設成保持在中央，如以下所示：

   <?xml version="1.0" encoding="utf-8"?> 
   <s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                          xmlns:s="library://ns.adobe.com/flex/spark" 
                          xmlns:mx="library://ns.adobe.com/flex/mx" 
                          title="Hello World"> 
    
       <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
   </s:WindowedApplication>

3. 在 WindowedApplication 標籤開頭的後方以及您剛輸入之 Label 組件標籤的前方加入下列樣式區塊：

   <fx:Style> 
       @namespace s "library://ns.adobe.com/flex/spark"; 
       s|WindowedApplication 
       { 
        
   skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
           background-color:#999999; 
           background-alpha:"0.7"; 
       }          
   </fx:Style>

這些樣式設定會套用至整個應用程式，並將視窗背景顯示成稍微透明的灰色。

應用程式的程式碼現在看起來如下：

<?xml version="1.0" encoding="utf-8"?> 
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
                       xmlns:s="library://ns.adobe.com/flex/spark" 
                       xmlns:mx="library://ns.adobe.com/flex/mx" 
                       title="Hello World"> 
     
    <fx:Style> 
        @namespace s "library://ns.adobe.com/flex/spark"; 
        s|WindowedApplication 
        { 
         
skinClass:ClassReference("spark.skins.spark.SparkChromeWindowedApplicationSkin"); 
            background-color:#999999; 
            background-alpha:"0.7"; 
        }          
    </fx:Style> 
 
    <s:Label text="Hello AIR" horizontalCenter="0" verticalCenter="0"/> 
</s:WindowedApplication>

接下來，您會變更應用程式描述器中的某些設定，讓應用程式呈現透明效果：

若要測試您撰寫的應用程式程式碼，請以除錯模式執行程式碼。

1. 按一下主工具列中的「除錯」按鈕 。

   您也可以選取「執行 > 除錯 > AIRHelloWorld」命令。

   產生的 AIR 應用程式看起來應該如下列範例所示：

   

2. 使用 Label 控制項的 horizontalCenter 和 verticalCenter 屬性，將文字放置在視窗的中央。移動或調整視窗大小的方式，與其他任何桌面應用程式相同。

您現在可以將 "Hello World" 應用程式封裝成 AIR 檔進行散佈。AIR 檔是包含應用程式檔案的存檔檔案，即專案 bin 資料夾中的所有檔案。在這個簡單範例中，那些檔案包括 SWF 和應用程式的 XML 檔案。您將 AIR 套件散佈給使用者，使用者使用該套件來安裝應用程式。這個程序中有一個必要步驟，就是進行數位簽署。

1. 確定應用程式沒有編譯錯誤而且正常執行。

2. 選取「專案 > 匯出發行組建」。

3. 確定列出的專案和應用程式是 AIRHelloWorld 專案和 AIRHelloWorld.mxml 應用程式。

4. 選取「匯出為簽署的 AIR 套件」選項，然後按「下一步」。

5. 如果您已經有數位憑證，請按一下「瀏覽」來尋找並選取數位憑證。

6. 如果您需要建立新的自我簽署數位憑證，請選取「建立」。

7. 輸入必要資訊，然後按一下「確定」。

8. 按一下「完成」來產生 AIR 套件，名稱是 AIRHelloWorld.air。

您現在可以從 Flash Builder 中的「專案導覽器」，或從檔案系統按兩下 AIR 檔案來安裝並執行應用程式。