在 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 類型應用程式專案相同,都是從定義新專案開始。
開啟 Flash Builder。
選取「檔案 > 新增 > Flex 專案」。
輸入 AIRHelloWorld 當做專案名稱。
在 Flex 中,AIR 應用程式被視為一種應用程式類型。您有兩個類型選項:
請選取「桌上型」做為應用程式類型
按一下「完成」來建立專案。
AIR 專案最初由兩個檔案組成:主要 MXML 檔案和應用程式 XML 檔案 (稱為應用程式描述器檔案)。後者檔案會指定應用程式屬性。
如需詳細資訊,請參閱使用 Flash Builder 開發 AIR 應用程式。
撰寫 AIR 應用程式程式碼
若要撰寫 “Hello World” 應用程式程式碼,請編輯開啟於編輯器中的應用程式 MXML 檔案 (AIRHelloWorld.mxml)。(如果檔案未開啟,請使用「專案導覽器」開啟檔案)。
桌上型的 Flex AIR 應用程式包含在 MXML WindowedApplication 標記中。MXML WindowedApplication 標籤會建立簡單的視窗,其中包含基本的視窗控制項,例如標題列和關閉按鈕。
在 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>
在應用程式中加入 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>
在 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>
接下來,您會變更應用程式描述器中的某些設定,讓應用程式呈現透明效果:
在「Flex 導覽器」窗格,從專案的來源目錄中找出應用程式描述器檔案。如果您將專案命名為 AIRHelloWorld,則這個檔案的名稱是 AIRHelloWorld-app.xml。
按兩下應用程式描述器檔案,以 Flash Builder 進行編輯。
在 XML 程式碼中,找出將 systemChrome 和 transparent 屬性 (屬於 initialWindow 屬性) 設成註解的列。移除註解標記。(移除 "<!--" 和 "-->" 註解分隔符號。)
將systemChrome 屬性的文字值設成 none,如以下所示:
<systemChrome>none</systemChrome>
將 transparent 屬性的文字值設成 true,如以下所示:
<transparent>true</transparent>
儲存檔案。
測試 AIR 應用程式
若要測試您撰寫的應用程式程式碼,請以除錯模式執行程式碼。
按一下主工具列中的「除錯」按鈕
。
您也可以選取「執行 > 除錯 > AIRHelloWorld」命令。
產生的 AIR 應用程式看起來應該如下列範例所示:
使用 Label 控制項的 horizontalCenter 和 verticalCenter 屬性,將文字放置在視窗的中央。移動或調整視窗大小的方式,與其他任何桌面應用程式相同。
備註: 如果無法編譯應用程式,請修正不小心輸入的任何語法或拼字錯誤。錯誤和警告會顯示在 Flash Builder 的「問題」檢視中。
封裝、簽署和執行 AIR 應用程式
您現在可以將 "Hello World" 應用程式封裝成 AIR 檔進行散佈。AIR 檔是包含應用程式檔案的存檔檔案,即專案 bin 資料夾中的所有檔案。在這個簡單範例中,那些檔案包括 SWF 和應用程式的 XML 檔案。您將 AIR 套件散佈給使用者,使用者使用該套件來安裝應用程式。這個程序中有一個必要步驟,就是進行數位簽署。
確定應用程式沒有編譯錯誤而且正常執行。
選取「專案 > 匯出發行組建」。
確定列出的專案和應用程式是 AIRHelloWorld 專案和 AIRHelloWorld.mxml 應用程式。
選取「匯出為簽署的 AIR 套件」選項,然後按「下一步」。
如果您已經有數位憑證,請按一下「瀏覽」來尋找並選取數位憑證。
如果您需要建立新的自我簽署數位憑證,請選取「建立」。
輸入必要資訊,然後按一下「確定」。
按一下「完成」來產生 AIR 套件,名稱是 AIRHelloWorld.air。
您現在可以從 Flash Builder 中的「專案導覽器」,或從檔案系統按兩下 AIR 檔案來安裝並執行應用程式。