使用 AIR SDK 建立您的第一個 HTML 類型 AIR 應用程式

若要親身體驗 Adobe® AIR® 的運作方式,請使用這些指示來建立和封裝簡單的 HTML 類型的 AIR "Hello World" 應用程式。

您必須安裝執行階段並設定 AIR SDK,才能夠開始。在本教學課程中,您要使用 AIR Debug Launcher (ADL) 和 AIR Developer Tool (ADT) 。ADL 和 ADT 是命令列公用程式,位於 AIR SDK 的 bin 目錄中 (請參閱 安裝 AIR SDK )。本教學課程假設您已經熟悉從命令列執行程式,並知道如何設定作業系統所需的 path 環境變數。

備註: 如果您是 Adobe® Dreamweaver® 的使用者,請參閱 使用 Dreamweaver 建立您的第一個 HTML 類型 AIR 應用程式
備註: 您只能針對 desktop 及 extendedDesktop 描述檔開發 HTML 類型的 AIR 應用程式。不支援行動描述檔。

建立專案檔案

每一個 HTML 類型 AIR 專案必須含有下列兩個檔案:指定應用程式中繼資料的應用程式描述器檔案,以及最上層 HTML 頁面。除了這些必要檔案外,這個專案還包含一個 JavaScript 程式碼檔案 AIRAliases.js ,用來定義 AIR API 類別的易用別名變數。

  1. 建立名為 HelloWorld 的目錄來存放專案檔案。

  2. 建立名為 HelloWorld-app.xml 的 XML 檔案。

  3. 建立名為 HelloWorld.html 的 XML 檔案。

  4. 從 AIR SDK 的架構資料夾複製 AIRAliases.js 至專案目錄。

建立 AIR 應用程式描述器檔案

若要開始建立 AIR 應用程式,請建立具有下列結構的 XML 應用程式描述器檔案:

<application xmlns="..."> 
    <id>…</id> 
    <versionNumber>…</versionNumber> 
    <filename>…</filename> 
    <initialWindow> 
        <content>…</content> 
        <visible>…</visible> 
        <width>…</width> 
        <height>…</height> 
    </initialWindow> 
</application>
  1. 開啟 HelloWorld-app.xml 進行編輯。

  2. 加入根 <application> 元素,同時包括 AIR 命名空間特質:

    <application xmlns="http://ns.adobe.com/air/application/2.7"> :命名空間的最後一個區段 (「2.7」) 表示應用程式所需的執行階段版本。

  3. 加入 <id> 元素:

    <id>examples.html.HelloWorld</id> :應用程式 ID 連同發行者 ID (由 AIR 衍生自用來簽署應用程式套件的憑證) 可識別應用程式的唯一性。應用程式 ID 的用途為安裝、存取私有應用程式檔案系統儲存目錄、存取私有加密儲存,以及應用程式之間的通訊。

  4. 新增 <versionNumber> 元素:

    <versionNumber>0.1</versionNumber> :協助使用者判斷所安裝的應用程式版本。

    備註: 若是使用 AIR 2 或更早版本,您必須使用 <version> 元素而非 <versionNumber> 元素。
  5. 加入 <filename> 元素:

    <filename>HelloWorld</filename> :用於應用程式可執行檔、安裝目錄和作業系統中對應用程式的其他參考名稱。

  6. 加入 <initialWindow> 元素,其中包含下列子元素,以指定初始應用程式視窗的屬性:

    <content>HelloWorld.html</content> :識別供 AIR 載入的根 HTML 檔案。

    <visible>true</visible> :可立即顯示視窗。

    <width>400</width> :設定視窗寬度 (以像素為單位)。

    <height>200</height> :設定視窗高度。

  7. 儲存檔案。完成的應用程式描述器檔案應該看起來與下列相似:

    <?xml version="1.0" encoding="UTF-8"?> 
    <application xmlns="http://ns.adobe.com/air/application/2.7"> 
        <id>examples.html.HelloWorld</id> 
        <versionNumber>0.1</versionNumber> 
        <filename>HelloWorld</filename> 
        <initialWindow> 
            <content>HelloWorld.html</content> 
            <visible>true</visible> 
            <width>400</width> 
            <height>200</height> 
        </initialWindow> 
    </application>

這個範例僅設定一些可能的應用程式屬性。如需用來指定視窗顏色、視窗大小、透明度、預設安裝目錄、關聯檔案類型以及應用程式圖示等的全套應用程式屬性說明,請參閱 AIR 應用程式描述器檔案

建立應用程式 HTML 頁面

您現在必須建立一個簡單的 HTML 頁面,來當做 AIR 應用程式的主要檔案。

  1. 開啟 HelloWorld.html 以進行編輯。請加入下列 HTML 程式碼:

    <html> 
    <head> 
        <title>Hello World</title> 
    </head> 
    <body onLoad="appLoad()"> 
        <h1>Hello World</h1> 
    </body> 
    </html>
  2. 在 HTML 的 <head> 區段,匯入 AIRAliases.js 檔案:

    <script src="AIRAliases.js" type="text/javascript"></script>

    AIR 會在 HTML 視窗物件定義一個名為 runtime 的屬性。runtime 屬性會使用類別的完整套件名稱來存取內建 AIR 類別。例如,在建立 AIR 檔案物件時,您可以在 JavaScript 中加入下列陳述式:

    var textFile = new runtime.flash.filesystem.File("app:/textfile.txt");

    AIRAliases.js 檔案定義常用 AIR API 的易用別名。使用 AIRAliases.js 後,您可以縮短 File 類別的參考,如以下所示:

    var textFile = new air.File("app:/textfile.txt");
  3. 在 AIRAliases script 標籤下,新增另一個包含 JavaScript 函數的 script 標籤以處理 onLoad 事件:

    <script type="text/javascript"> 
    function appLoad(){ 
        air.trace("Hello World"); 
    } 
    </script>

    appLoad() 函數僅呼叫 air.trace() 函數。當您使用 ADL 來執行應用程式時,追蹤訊息會列印到命令主控台。追蹤陳述式對於除錯非常實用。

  4. 儲存檔案。

HelloWorld.html 檔案現在看起來應該如下所示:

<html> 
<head> 
    <title>Hello World</title> 
    <script type="text/javascript" src="AIRAliases.js"></script> 
    <script type="text/javascript"> 
        function appLoad(){ 
            air.trace("Hello World"); 
        }  
    </script> 
</head> 
<body onLoad="appLoad()"> 
    <h1>Hello World</h1> 
</body> 
</html>

測試應用程式

若要從命令列執行和測試應用程式,請使用 AIR Debug Launcher (ADL) 公用程式。ADL 執行檔案位於 AIR SDK.的 bin 目錄中。如果您尚未安裝 AIR SDK,請參閱 安裝 AIR SDK

  1. 開啟命令主控台或殼層。變更至您對這個專案建立的目錄。

  2. 執行下列命令:

    adl HelloWorld-app.xml

    隨即開啟 AIR 視窗,其中顯示您的應用程式。此外,主控台視窗會顯示 air.trace() 呼叫所產生的訊息。

    如需詳細資訊,請參閱 AIR 應用程式描述器檔案

建立 AIR 安裝檔案

應用程式成功執行後,可以使用 ADT 公用程式將應用程式封裝成 AIR 安裝檔案。AIR 安裝檔案是包含所有應用程式檔案的存檔檔案,供您散佈給使用者。安裝封裝的 AIR 檔之前必須先安裝 Adobe AIR。

為了確保應用程式安全,所有 AIR 安裝檔案都必須經過數位簽名。您可以使用 ADT 或其他憑證產生工具來產生基本的自我簽署憑證,供開發使用。您也可以向商業憑證授權單位如 VeriSign 或 Thawte 購買商業程式碼簽署憑證。使用者安裝自我簽署 AIR 檔時,安裝過程中會顯示發行者「不明」。這是因為自我簽署憑證僅保證 AIR 檔在建立後未曾變更。沒有辦法防止別人在偽裝的 AIR 檔中加入自我簽署來假冒是您的應用程式。強烈建議對公開發行的 AIR 檔案使用可驗證的商業憑證。如需 AIR 安全性問題的概觀,請參閱 AIR 安全性 (適用於 ActionScript 開發人員) 或 AIR security (適用於 HTML 開發人員)。

產生自我簽署憑證和金鑰組

從命令提示字元輸入下列命令 (ADT 執行檔案位於 AIR SDK 的 bin 目錄中):
adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword

ADT 會產生名為 sampleCert.pfx 的金鑰儲存檔案,其中包含憑證以及相關的私密金鑰。

這個範例使用最少數目的特質設定憑證。金鑰類型必須是 1024-RSA 或 2048-RSA (請參閱 簽署 AIR 應用程式 )。

建立 AIR 安裝檔案

從命令提示字元輸入下列命令 (在同一行中):
adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air 
HelloWorld-app.xml HelloWorld.html AIRAliases.js

將會出現提示,要求您提供金鑰儲存檔案密碼。

HelloWorld.air 引數是 ADT 產生的 AIR 檔。HelloWorld-app.xml 是應用程式描述器檔案。後續引數是您的應用程式使用的各個檔案。這個範例僅使用兩個檔案,但您可以加入任何數目的檔案和目錄。ADT 會驗證主要內容檔案 HelloWorld.html 是否包括在套件中,但是如果您忘記加入 AIRAliases.js,則您的應用程式將無法運作。

建立好 AIR 套件後,您可以按兩下套件檔案來安裝並執行應用程式。您還可以在殼層或命令視窗中輸入 AIR 檔案名稱當做命令。

後續步驟

HTML 和 JavaScript 程式碼在 AIR 中的行為,和在一般網頁瀏覽器中相同 (事實上,AIR 使用和 Safari 網頁瀏覽器相同的 WebKit 顯示引擎)。不過,您在 AIR 開發 HTML 應用程式時必須瞭解一些重要的差異。如需這些差異的詳細資訊,以及其他重要主題,請參閱 Programming HTML and JavaScript