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

若要親身體驗 Adobe® AIR® 的運作方式,請使用這些指示在 Adobe® Flash® Builder 建立和封裝一個簡單的 SWF 檔案類型 AIR "Hello World" 應用程式。

如果您尚未下載和安裝 Flash Builder,請進行下載和安裝。另外,請移至下列網址下載並安裝最新版的 Adobe AIR:http://www.adobe.com/tw/products/air

建立 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 應用程式

撰寫 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. 在「Flex 導覽器」窗格,從專案的來源目錄中找出應用程式描述器檔案。如果您將專案命名為 AIRHelloWorld,則這個檔案的名稱是 AIRHelloWorld-app.xml。

  2. 按兩下應用程式描述器檔案,以 Flash Builder 進行編輯。

  3. 在 XML 程式碼中,找出將 systemChrometransparent 屬性 (屬於 initialWindow 屬性) 設成註解的列。移除註解標記。(移除 "<!--""-->" 註解分隔符號。)

  4. systemChrome 屬性的文字值設成 none,如以下所示:

    <systemChrome>none</systemChrome>
  5. transparent 屬性的文字值設成 true,如以下所示:

    <transparent>true</transparent>
  6. 儲存檔案。

測試 AIR 應用程式

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

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

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

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

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

備註: 如果無法編譯應用程式,請修正不小心輸入的任何語法或拼字錯誤。錯誤和警告會顯示在 Flash Builder 的「問題」檢視中。

封裝、簽署和執行 AIR 應用程式

您現在可以將 "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 檔案來安裝並執行應用程式。