面向JavaScript開發人員的Adobe AIR與Dreamweaver

作者：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