作者：David Tucker
Adobe AIR對於HTML/JavaScript應用程序與桌面的集成有着出色的支持，但除了所有附加功能之外，還需要一些其他工具和技術。這篇文章探討了使用HTML/JavaScript的Web開發與使用同樣工具的應用程序開發之間的差異。<?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
需求
爲了更好地學習本文，您需要以下軟件和文件：
Adobe AIR
Dreamweaver CS3
Adobe AIR Extension for Dreamweaver CS3
範例文件
- exercise_files_for_js.zip (ZIP, 308K)
必備知識
本教程要求理解Dreamweaver CS3的工作原理，並掌握JavaScript的中級知識。
爲AIR設置Dreamweaver
要開始進行AIR開發，最簡單的方法之一就是安裝Adobe AIR Extension for Dreamweaver CS3。
安裝必備項
請安裝本文簡介頁面提到的AIR運行時。這將使您能夠按照本教程中展示的範例逐步操作。
此外，還必須安裝Adobe AIR Extension for Dreamweaver CS3。這一擴展使您能夠在Dreamweaver內構建、測試和部署AIR應用程序。下載本擴展後，雙擊它。這將打開Adobe Extension Manager。如果此前您安裝過任何用於Dreamweaver CS3的AIR擴展，將提示您本操作將覆蓋某些文件。由於正在安裝的是最新版本的擴展，因此覆蓋舊文件不會造成問題。
Dreamweaver AIR工作流
AIR擴展的安裝不會立即改變Dreamweaver的佈局。可以從菜單欄中選擇Commands項，確認安裝已成功完成。您應看到新增了兩個選項：AIR Applications Settings和Create AIR File。如果您使用的是Windows機器，則應看到如圖1所示的菜單。
<?xml:namespace prefix = v ns = "urn:schemas-microsoft-com:vml" /> 
圖1. Dreamweaver CS3中的Site菜單
驗證安裝之後，可以開始構建您的第一個AIR應用程序。儘管這項任務初看起來可能有些令人畏縮，但很快您就會發現，Dreamweaver會替您完成大多數配置。
AIR應用程序設置
Web應用程序和桌面應用程序之間的一個主要差異就在於配置。對於桌面應用程序來說，有一些必須解答的新問題。這個應用程序應該有多大？窗口看起來應該是怎樣的？它應該定位在屏幕的什麼位置？程序圖標應該是什麼樣子？有許多類似的問題需要回答，之後才能打包應用程序並將其發送給用戶。
在AIR中，這些配置項均由一個稱爲應用程序描述符文件的XML文件處理。下面是一個簡單的應用程序描述符文件：
可以看到，您必須回答的許多問題都在這個短短的文件中得到了解答。例如，應用程序的寬度和高度以及應用程序主窗口有關的其他屬性都是在<initialWindow>標記內定義的。完整的應用程序描述符文件要比這長得多，包含用於自定義程序圖標、窗口定位和自定義文件類型的選項。
爲您開發的每一個AIR應用程序創建一個這樣的文件看上去有些繁瑣，但Dreamweaver使您可以輕鬆創建應用程序描述符文件。如果您有一個在Dreamweaver CS3上開放的站點，可以單擊Command菜單中的AIR Application Settings項。這將打開圖2所示窗口。
圖2. Dreamweaver CS3中的AIR Application and Installer Settings對話框
其中許多設置都可保留默認值，但必須爲各AIR項目更改ID和Name值。ID是用於將您的應用程序與其他AIR應用程序區分開來的惟一值——即便它們具有相同的名稱。許多開發人員都爲其ID使用反向域名解析（reverse-dns）的形式。例如，我的域是davidtucker.net，我可能會爲應用程序選擇net.davidtucker.SampleApplication這樣的ID。如果開發人員運用此慣例，就能夠最大程度地消除應用程序ID重複的可能性。
對於應用程序的發佈和更新來說，ID尤爲重要。在稍後的部分中，您將瞭解更多內容。有必要了解，在創建應用程序時應設置ID，而且在此後不應再更改。如果更改，就無法在Adobe AIR內使用更新框架等功能。
創建AIR應用程序
既然已經完成了準備工作，就可以將一個Web應用程序置入Adobe AIR，查看其運行方式。爲在Dreamweaver內完成此任務，首先需要爲您的項目創建一個新站點。在本文附帶的練習文件中，您可以看到一個名爲Sample Application Template的文件夾。將所有這四個文件都放到site文件夾中。
接下來，選擇Site > AIR Application and Installer Settings。確保四個文件都出現在本對話框的Incluede Files部分（如圖3所示）。如果其中某些文件未出現在此列表中，可以單擊加號並選擇缺少的文件添加它們。
圖3. 使用Dreamweaver CS3包含AIR應用程序中的文件
完成此任務之後，單擊Preview按鈕。祝賀您，您剛剛在Dreamweaver CS3中測試了您的第一個AIR應用程序。還有一個地方必須在打包和部署此應用程序之前進行檢查，也就是安全性。
AIR中的安全性
對於Web開發人員來說，思維方面的一項重大改變就是要認識到，他們在AIR中開發的是桌面應用程序，而不是Web應用程序。桌面應用程序有一些Web應用程序沒有的特殊許可，例如文件系統交互。出於此原因，必須給予特別關注，確保AIR應用程序未受任何外部源的威脅，同時確保您的AIR應用程序來自預計的正確發佈者。因此，您會發現AIR內部的證書和安全性沙箱。
備註：如需進一步瞭解AIR中的安全性，請參見Lucas Adamski的文章Introducing the Adobe AIR security model。
自簽證書
由於桌面應用程序可能會給用戶的計算機造成風險，因此有必要找到某種方法，驗證AIR應用程序發佈者的身份。與其他一些桌面應用程序平臺類似，Adobe AIR也要求您的應用程序具備證書。但這並不表示您必須使用商業證書。Adobe實際上也允許開發人員使用自簽證書。在Dreamweaver中，您可以單擊AIR Application and Installation窗口中Digital Signature字段旁邊的Set按鈕，爲您的應用程序創建證書。此操作將打開一個窗口，您需要單擊Create按鈕。接下來出現的窗口允許您填寫關於您和您的組織的信息（參見圖4）。完成此步驟之後，Dreamweaver就會通知您證書是否已正確創建。
備註：如需進一步瞭解簽名應用程序的基本原理，請參見Todd Prekaski的文章Digitally signing Adobe AIR applications中的Why sign an application。
圖4. Dreamweaver CS3中的證書創建窗口
現在，您可以在AIR Application Settings窗口中設置數字簽名。您需要確認並牢記創建證書時所用的密碼，每次創建.air文件時都必須輸入此密碼。
商業簽名證書
商業簽名證書爲應用程序的最終用戶確認您的身份。這非常重要，在用戶安裝自籤AIR應用程序和商業簽名應用程序時，所出現的安裝屏幕是不同的。圖5和圖6展示了這種差別。
圖5. 自簽證書應用程序的安裝窗口
圖6. 商業簽名證書應用程序的安裝窗口
商業簽名證書由Thawte等企業提供。不同於創建自簽證書的過程，商業證書的發行者會處理證書創建過程。
安全性沙箱
沙箱爲一個頁面或應用程序中的資產分配一個具體的權限組。應用程序描述符文件中引用的根HTML文件將自動置於應用程序沙箱中。應用程序的根文件將位於應用程序沙箱中。
應用程序沙箱提供了最廣泛的功能。實際上，對於應用程序沙箱中的內容，只有一項約束：eval方法的使用受嚴格限制。Eval方法仍然可以計算字面值，但函數調用無法通過JSON傳遞。由於這是桌面應用程序而非Web應用程序，核心AIR API調用需要受到保護。如果遠程服務器收到威脅，發送以下JSON語句會怎樣？
{ air.NativeApplication.nativeApplication.exit() }
這將導致應用程序在未發出警報的前提下退出。許多JavaScript開發人員都不會將此編寫到他們的代碼中，但許多JavaScript框架都實現了這種功能。在這種情況下，開發人員可以使用遠程沙箱，使用parentSandboxBridge和childSandboxBridge在兩種不同的沙箱之間通信。
使用高級模板創建apProject
用於在不同的沙箱之間進行處理的功能可能令人迷惑，因此Adobe提供了一種模板，專門處理此類應用程序。可在本文附帶的練習文件中找到此模板。此模板是將現有Web應用程序與AIR相集成的理想起點。
掌握細節
AIR中的沙箱是一個複雜的主題。對於許多應用程序來說，這種基本的應用/非應用沙箱方法都足以應對，但在數據從多個數據源動態加載時，就需要對AIR內的安全性模型有更加透徹的理解。在Developing AIR Applications with HTML and Ajax 中，您會看到有整整一章的內容專門介紹安全性模型。Lucas Adamski最近還撰寫了一篇文章，介紹了AIR安全性模型及其背後的基本原理。
調試應用程序
調試是Ajax開發的重要部分。有許多調試工具可用，但許多開發人員都單純依靠Firebug（Joe Hewitt開發的一種Firefox插件）之類的插件。如何調試AIR Ajax應用程序？Firebug不是理想選擇，那麼開發人員應該做些什麼？Adobe在爲AIR開發人員設計工具時考慮了這方面的問題，提供了兩種選擇。
簡單調試
簡單調試是獲得某部分信息的簡單方法。在很多情況下，如果調試單個的代碼塊，只需採用這種方法即可。在AIR中，有許多方法可實現簡單調試，但常用的方法有兩種：調用alert方法，使用AIR內的跟蹤功能。Alert方法的功能與它在標準JavaScript Web應用程序中的功能相同，但air.trace是AIR API獨有的。Air.trace方法允許開發人員通過ADL（AIR Debug Lanuncher）發送跟蹤語句。Dreamweaver不支持此方法，因此您往往需要考慮複雜的調試解決方案——Introspector。
使用AIR introspector實現複雜調試
對於幾乎所有情況，AIR Introspector都提供了比前述任何方法更高、更具體的調試級別。Introspector提供了Firebug之類的標準工具中的大多數功能。Introspector包含五個選項卡（參見圖7）：
· Console：控制檯將接收來自AIR的錯誤、警告和通知以及由用戶發送的自定義消息。開發人員可以使用五種不同的方法向控制檯發送數據。
o air.Introspector.Console.log('Sample Log Item')o air.Introspector.Console.warn('Sample Warning Item')o air.Introspector.Console.info('Sample Info Item')o air.Introspector.Console.error('Sample Error Item')o air.Introspector.Console.dump( object )
- HTML：HTML選項卡提供了一種方法，可以使用樹型佈局查看HTML並查看XML中某個節點的DOM屬性和computed style元素。將鼠標移動到一個XML節點上時，應用程序中的對應內容將突出顯示。
- DOM：DOM選項卡提供了窗口的所有DOM屬性的列表。
- Assets：Assets選項卡提供了一種方法，可查看您的應用程序中使用的所有文件，包括圖像、JavaScript文件和CSS文件。
- Source：source選項卡不僅使您能夠查看應用程序的實際源代碼（以及JavaScript文件、CSS文件和應用程序描述符文件的源代碼），還允許您查看解析後的源代碼。
XHR：XHR選項卡允許您查看所有XMLHTTPRequests、其響應XML及其響應報頭。
圖7. AIR Introspector
Introspector還提供了一種可視化的方法，用於檢查應用程序中的元素。使用Introspector時，您可以按F11鍵來打開和關閉此模式。圖8展示了此功能的一個示例。
圖8. AIR Introspector的Inspect模式
最後，另外一項有用的特性就是，可以使用Introspector右上角的Refresh Active Window按鈕來刷新應用程序中的某個窗口。
使用範例應用程序
在本文附帶的練習文件中，有一個範例應用程序（及其源代碼），名爲Debugging Sample。安裝並啓動此應用程序時，Introspector窗口應默認顯示。此應用程序包含一些可與控制檯和範例XMLHTTPRequest交互的按鈕。
發佈AIR應用程序
AIR爲Web開發人員引入了一組全新的挑戰。要發佈一個Web應用程序，只需將其放在Web服務器上，發出URL即可。對於在Adobe AIR上運行的桌面應用程序，事情並不是這麼簡單。
使用在線安裝
在線安裝（install badge）允許用戶在不離開Web站點的前提下安裝您的應用程序和Adobe AIR運行時。我爲<?xml:namespace prefix = st1 ns = "urn:schemas-microsoft-com:office:smarttags" />Adobe Developer Center編寫了一篇文章，介紹了使用自動安裝無縫地部署AIR應用程序的整個過程。
使用範例應用程序
本文附帶的練習文件包含一個AIR內更新功能的示例。其中包括AIR應用程序和源代碼。應用程序不依賴於任何框架，因此大多數代碼都可在您的應用程序中重用。圖9展示了此應用程序。
圖9. Update Sample應用程序
通過執行以下步驟來使用此應用程序：
- 確定您要更新的應用程序的URL和版本號（有許多方法可完成此任務）。
- 創建一個URLStream類的實例，爲其傳遞一個URLRequest類的實例（指向步驟1中的URL）。由於
URLStream.load方法是異步的，您將需要添加一個事件偵聽器，偵聽URLStream何時完成。 - 下載完成中，您將URLStream的內容讀入一個
ByteArray。 - 現在，您要在應用程序的存儲目錄中創建一個新的File對象。還要創建一個新的FileStream對象，將ByteArray的內容讀入File對象。由於這是一個異步過程，還需要創建一個事件偵聽器，偵聽此流程在何時完成。
- 最後，創建Updater類的實例，爲其傳遞File對象和最新的版本。AIR會完成其他工作。
此流程最初看起來比較複雜，但只要將它拆分成較小的部分，就非常簡單了。同樣，只要編碼了應用流程，您很有可能在未來的應用程序中重用大部分信息（由於核心流程不會有太大的變動）。社區開發人員還創建了一些類，使更新流程更加簡單。
加深理解
儘管這篇文章簡單介紹了Web開發和AIR開發之間的差異，但並未涵蓋此主題的方方面面。要加深對AIR和Ajax的認識，請參考Adobe AIR Developer for HTML and Ajax Developers，進一步瞭解可以在AIR中實現的目標。