使用 Adobe AIR 和 Dojo 開發基於 Ajax 的 Mashup 應用 - 轉貼

原創 fcj_com 2020-02-21 14:17

使用 Adobe AIR 和 Dojo 開發基於 Ajax 的 Mashup 應用

級別： 初級

劉 慶 ([email protected])

2007 年 10 月 18 日

本教程介紹了 Adobe AIR（Adobe Integrated Runtime）的基本知識以及如何運用 Web 開發技術結合 AIR 去開發桌面應用。通過幾個例子詳細介紹了在具體開發中遇到的各種問題，以及如何將 AIR 和 Dojo 框架結合起來，利用 REST 風格的 Web 服務接口開發一個基於 Ajax 的 Mashup 桌面應用程序。

開始之前

Adobe AIR（Adobe Integrated Runtime）是 Adobe 公司在 RIA（Rich Internet Applications）領域內全新的解決方案，它允許你利用現有的 Web 開發技能（包括 Flash，Flex，HTML，JavaScript，Ajax）優勢，建立和配置跨平臺（或跨操作系統）的桌面 RIA 應用。AIR 被媒體譽爲 2007 年最值得關注的技術，和 Ajax 技術一樣，將會引起廣泛的關注。

關於本教程

本教程採用介紹知識和開發實際例子相結合的方式，在解決實際問題的過程中穿插介紹 AIR 的相關知識。並在介紹 AIR 的過程中，講述瞭如何將 AIR 和目前廣泛使用的 Dojo 框架結合起來，從而利用 Dojo 強大的工具開發基於 Ajax 的 Mashup 桌面應用。

目標

通過本教程的學習，您不僅可以瞭解 AIR 的基礎知識，而且完全具備將 AIR 和傳統 Web 開發技術和開發框架（如：Dojo）結合起來利用 REST 風格的 Web 服務去開發基於 Ajax 的桌面 RIA 應用的能力。在此過程中，您還將學習到最新的 Dojo 0.9 的 Ajax 開發以及利用 Dojo 處理 JSON 和 XML 格式數據的知識。

先決條件

要學習本教程，您需要有一定的 Web 編程經驗，熟悉 JavaScript 並對 Ajax 技術和 Dojo 框架有一定的瞭解。

代碼示例和安裝要求

本文所有示例均在 Windows XP SP2 系統中測試完成。您需要一臺能流暢運行 Windows XP 系統的機器，除此之外您還需要一些工具才能試用本教程中的代碼。所有這些工具都可以免費下載（參見 參考資源）：

Ø         Java SDK 1.4.2 或更高版本的 JRE 或 JDK；

Ø         AIR 運行時環境 Adobe Integrated Runtime Beta1；

Ø         Adobe AIR SDK Beta1；

Ø         Dojo 0.9；

AIR 簡介

Adobe Integrated Runtime（AIR） 是一個跨操作系統的運行時環境，您可以使用已經掌握的現有 Web 開發技能（如 Flash，Flex，HTML，JavaScript，Ajax 等）去構建和部署富互聯網（Rich Internet）桌面應用。不必使用 VB/VC，不用購買 InstallAnywhere；僅使用現有流行的 Web 開發技術就可以讓我們做出一個帶有安裝程序，能夠安裝、卸載、運行在本機，並能夠和互聯網的服務融爲一體的桌面應用程序，這是不是一件很讓人興奮的事情呢？

比如，AIR 應用程序能用下列一個或一組技術來開發：

Ø         Flash/Flex/ActionScript

Ø         HTML/JavaScript/CSS/Ajax

Ø         PDF

由於技術方案選擇的多樣性，所以最終的 AIR 應用程序可以是下列組成結構中的一種：

Ø         基礎內容是 Flash/Flex（SWF）的應用程序；

Ø         基礎內容是 Flash/Flex（SWF）並附帶有 HTML/JS/CSS 或 PDF 內容的應用程序；

Ø         基礎內容是 HTML/JS/CSS 的應用程序；

Ø         基礎內容是 HTML/JS/CSS 並附帶 Flash/Flex（SWF）或 PDF 內容的應用程序；

由於上述第二種技術組合（即 HTML/JavaScript/CSS/Ajax）是我們大多數 Web 開發人員最常使用的技術組合，所以我們的教程將主要使用這種技術方案，這決定了最終的 AIR 示例應用程序也將是第三種結構（即基礎內容是 HTML/JS/CSS 的應用程序）。

在對 AIR 的整體情況有一個總體把握之後，我們將從安裝配置開發環境開始來編寫並部署第一個 Hello World 程序。

Hello World！第一個 AIR 應用

安裝配置開發環境

在 10 月 2 日我們慶祝國慶節日的時候，AIR 推出了其 Beta2 的版本，和 Beta1 相比，基本功能變化不大，但是在和 Dojo 0.9 的結合使用過程中會有一些異常，所以本例均在 AIR Beta1 版本下測試運行。AIR 開發環境的配置比較簡單：

Ø         下載 安裝 JRE 或者 JDK；

Ø         下載 安裝 AIR 的運行時環境；

Ø         下載 AIR 的開發工具 SDK，並配置環境變量。

對於第一步，可能大家會比較疑惑，爲什麼開發 AIR 程序還需要 JDK 或者 JRE 呢？這是因爲 AIR 的命令行工具要使用 JRE 的原因。第二步把 Windows 版本的安裝程序下載並安裝就可以了。對於第三步，我們將 SDK 的壓縮包解壓之後，比如放在 D 盤根目錄下，其目錄結構將如下 圖 1 所示：

圖 1. SDK 的目錄結構

那麼，我們就將 D:/RIASDK/bin/ 目錄添加到系統的 Path 環境變量中，重啓一下機器，讓新的環境變量生效。設置環境變量後，我們就可以在命令行裏面直接使用 AIR 的 SDK 提供的命令行工具對程序進行調試，或者程序完成後打包發佈桌面應用程序。

安裝配置好開發環境之後，下面就可以接着學習如何用 HTML / JavaScript 等 Web 的開發技術開發 AIR 桌面應用。

用 HTML 和 JavaScript 開發 AIR Hello World!

由於使用的是大家早已熟練的 HTML 和 JavaScript，所以我們只要有一個文本編輯器就可以進行開發，比如 Windows 自帶的記事本或者 EditPlus 之類的工具軟件。本文爲了方便編輯 JavaScript，使用的是 Eclipse，但這並不是必需的。在下面的例子中，您只需要一個記事本就完全可以完成本教程中的示例開發。

首先，在硬盤上任意位置建立一個文件夾，本例取名爲 AIR_DOJO，該文件夾的文件結構如 圖 2 所示：

圖 2. AIR_DOJO 文件夾下的文件結構

在 AIR_DOJO 文件夾中，創建三個文本文件 index.html，second.html 和 application.xml，以及一個文件夾 js。在文件夾 js 下面再創建一個 JavaScript 文件 index.js。

在這些文件中最重要的是 application.xml 文件，這個文件幾乎描述了這個 AIR 應用的所有重要信息，所以我們將從 application.xml 這個文件開始看起。其內容如 清單 1 所示：

清單 1. application.xml 文件內容

                   

<?xml version="1.0" encoding="UTF-8"?>

<application appId="com.adobe.examplesAIRDojo" version="1.0"

xmlns="http://ns.adobe.com/air/application/1.0.M4">

    <name>HelloAIR</name>

    <rootContent systemChrome="standard">

        index.html

    </rootContent>

</application>

 爲了第一個程序的簡單起見，我們幾乎使用了最小化的屬性設置。Name 屬性設置了應用程序的名字，rootContent 屬性設置了應用程序的初始頁面是 intex.html。關於 application.xml 更復雜的配置我們將在本教程後面發佈爲最終的 AIR 桌面應用部分中講解。既然 index.html 是我們程序的初始頁面，接下來看看 index.html 文件的內容：

清單 2. index.html 文件內容                   

<html>

    <head>

        <title>AIR Hello World!</title>

        <script src="js/index.js" />

    </head>

    <body>

        <button id="b1" οnclick="clickme()">Click Me!</button>

        <br>

        <a href="second.html">Second Page</a>

        <br>

        <a href="http://www.ibm.com">Visit Internet Website</a>

    </body>

</html>

 這是一個極其簡單的 HTML 頁面，只定義了一個按鈕和兩個超鏈接。當按下按鈕的時候將觸發 JavsScript 函數 clickme()，該函數放在 index.js 文件中存放。一個超鏈接跳轉到本應用的另外一個頁面 second.html，另外一個鏈接則將應用頁面跳轉到互聯網上的某個頁面中。

index.js 和 second.html 的代碼分別見 清單 3 和 清單 4：

清單 3. index.js 文件內容                   

function clickme() {

    alert("Button clicked!");

}

 index.js 文件中的 clickme() 函數只是在用戶按下 index.html 頁面中的按鈕的時候彈出一個 alert 窗口。

清單 4. second.html 文件內容                   

<html>

    <head>

        <title>Second Page!</title>

    </head>

    <body>

        <a href="index.html">Return</a>

    </body>

</html>

 second.html 文件只定義了一個簡單的鏈接，跳轉回 index.html。

AIR 的 SDK 提供了兩個非常有用的命令行工具，一個是用來調試的 adl.exe，一個是用來打包應用程序爲安裝文件的腳本 adt.bat。它們位於 SDK 的 bin 目錄下面，如 圖 3 所示：

圖 3. AIR SDK 的命令行工具

在開發過程中，我們最常用的是調試工具 adl，下面我們將介紹如何用 adl 來調試運行 Hello World 程序。在本教程後面的 發佈爲最終的 AIR 桌面應用 部分，我們還將介紹如何使用 adt 工具來將應用程序打包爲一個安裝文件，並安裝運行。

調試工具 adl 的使用非常簡單，只要在應用文件夾下執行 adl application.xml 命令即可。ald 工具會根據 application.xml 文件中的應用描述來正確的以調試模式運行應用程序。程序的啓動頁面是描述中的 index.html，如 圖 4 所示：

圖 4. 用 adl 工具調試 Hello World 應用

下面我們在調試模式下驗證用 HTML 和 JavaScript 代碼編寫的 Hello World 程序能否達到預期的效果。圖 5 至 圖 7 分別是當點擊 Click Me! 按鈕和在界面上點擊兩個超鏈接的效果。

圖 5. 點擊按鈕彈出 alert 窗口

圖 6. 超鏈接跳轉到本地 second.html 頁面

圖 7. 超鏈接跳轉到遠程服務器頁面

從上面幾個圖可以看出，程序的可以正常運行。下面回顧一下通過這個最簡單 Hello World 應用，我們實現了哪些功能：

Ø         構建程序 UI

Ø         程序的事件處理

Ø         加載單獨的 JavaScript 文件

Ø         程序多頁面切換

Ø         本地程序獲取遠程 Web 服務器數據

此時，我們不禁要問：既然程序可以加載單獨的 JavaScript 文件，那麼能否結合 JavaScript 框架來簡化我們的開發工作呢？答案是：完全可以！

在本教程接下來的部分，我們將和您一起學習如何使用功能強大的 JavaScript 框架 Dojo 的最新發布版本 Dojo 0.9 來爲 AIR 程序開發具有 Ajax 功能的 Mashup 應用。

AIR 結合 Dojo 0.9 開發 Ajax 的 Mashup 應用

Dojo 簡介

Dojo 是一個功能強大、面向對象和開源的 JavaScript 工具箱。它爲開發 Web 胖客戶端程序提供了一套完整的 Widget 和功能強大的開發工具。根據筆者的開發經驗，使用 Dojo，您可以實現下列目標：

Ø         直接在您的頁面上使用它提供的 Widget 從而快速的開發您的程序界面；

Ø         開發自己的 Widget；

Ø         用它完善的事件機制來進行 Ajax 開發；

Ø         快速開發 SVG 和 VML 的 Web 矢量圖形；

Ø         利用它客戶端存儲方案來緩存數據，提高程序性能；

Ø         讓您的程序界面支持拖拽效果；

Ø         屏蔽瀏覽器差異，提高開發效率；

Ø         高效的處理大量數據類型，包括 JSON 和 XML 數據；

Ø         使用它的 Log 功能，方便的調試您的代碼；

Ø         數據加密；

Ø         Dojo 裁剪定製，JavaScript 代碼壓縮；

Ø         國際化支持；

當然，Dojo 的功能不僅這些，而且 Dojo 本身還在不斷的完善着。對於 Web 開發人員來說，Dojo 無疑是一個強大的工具。它的最新發布版本是 0.9，和上一個版本 0.4.3 相比，改動相當大，所以大家還是有必要重新研究一下 Dojo 0.9 。本文主要介紹 AIR 的開發技術，關於 Dojo 0.9 的相關知識，大家可以參考本教程的 參考資料 部分相關文章。

使用 Dojo 0.9

到 Dojo 的官方網站上 下載 Dojo 0.9，然後在 AIR_DOJO 文件夾建立一個 dojo9 文件夾，並將解壓後的 Dojo 0.9 放到其中。此時我們的 AIR 應用的文件結構如 圖 8 所示：

圖 8. 將 Dojo 0.9 放到 AIR 應用中

首先檢驗一下 Dojo 0.9 是否真的能夠用在我們的 AIR 程序中正常運行。爲此，在 index.html 頁面中加一個超鏈接，鏈接到 Dojo 0.9 的一個 Widget 演示頁面上：

<a href="dojo9/dojox/widget/tests/test_ColorPicker.html">Dojo Widget: Dojox ColorPicker</a>

同樣，我們通過命令行工具來調試運行 AIR 程序，當在界面上點擊到 Dojox ColorPicker 的超鏈接後，可以看到 圖 9 所示的界面：

圖 9. Dojo 0.9 的 Dojox ColorPicker 演示頁面

圖 9 的成功展現，證明了 Dojo 0.9 的確可以運行在 AIR 項目中。接下來就讓我們在 Dojo 的幫助下開發 Ajax 的 Mashup 應用吧！既然是 Mashup 應用，我們接下來就先介紹一下在該應用中需要調用的三個 REST 風格的 Web 服務。

三個 REST 風格的 Web 服務

在我們即將開始的 Mashup 應用中，將要用到下列三個服務：

Ø         www.sunlightlabs.com 提供的地區信息服務

此服務可以根據一個郵編，返回該地區 JSON 格式的相關信息。例如向服務器發送如下請求：

http://api.sunlightlabs.com/places.getCityStateFromZip.php?zip=94105&apikey=23kj234kjb3kjbcl87ds

其中 zip 參數表示 5 位數字郵編，此例是 94105。參數 apikey 是爲了使用他們的服務，需要申請一個 key，本教程就使用他們例子中給的 key 值就可以了。

該請求將返回如下 JSON 格式數據：

{ "zip" : "94105", "city" : "San Francisco", "state" : "CA" }

分別表示了郵編是 94105，城市名是 San Francisco，州名縮寫是 CA。您可以瞭解此服務的 詳細說明。

Ø         www.yahoo.com 雅虎提供的地圖服務

此服務可以根據郵編返回一個 XML 格式的消息，在此 XML 格式消息內部包含了該地區的地圖 PNG 圖片的 URL。例如向服務器發送下列請求：

http://local.yahooapis.com/MapsService/V1/mapImage?appid=YahooDemo&zip=94015

其中 appid 也是需要申請的一個 key，參數 zip 表示郵編。則服務器返回的 XML 數據如 清單 5 所示

清單 5. 雅虎地圖服務返回的 XML 數據

                           

<?xml version="1.0"?>

<Result xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">

http://gws.maps.yahoo.com/mapimage?MAPDATA=kleOx

.d6wXWiukeLcvUT08WLwFAywdxcamwFe9Gg7kH0qNE_N_ByeugEnrodc7JK3Ew_pidR8_RhiL06p

.3sBLAnatvi2ZNEVAo

.y9AaxsBjdV2MduaF7vVF1KSz2WFpZDRR4HXBgIit&mvt=m

</Result>

 在 Result 標籤內部就包含了地圖圖片的一個非常長的 URL，將該 URL 複製到瀏覽器的地址欄，就可以看到地圖圖片，如 圖 10 所示：

圖 10. 從返回的 XML 數據中獲取地圖 URL

您可以瞭解此服務的 詳細說明。

Ø         www.wunderground.com 提供的天氣服務

此服務根據國家名州名和城市名獲得當日該城市的天氣信息圖片。例如向服務器發送如下請求：

http://banners.wunderground.com/weathersticker/big2_both_cond/language/www/US/CA/San_Francisco.gif

就能得到 US 美國 CA 州 San_Francisco 市的今日天氣情況的圖片如 圖 11 所示。城市名多個單詞之間用下劃線連接。

圖 11. 獲得 San Francisco 市的天氣情況圖

您可以瞭解此服務的 詳細說明。

在瞭解了三個服務之後，來看看我們的是如何準備使用這三個服務構建自己的 Mashup 應用的。

Mashup 的目標

關於 Mashup 的介紹，大家可以參考我的另一篇教程“使用 Eclipse 和 JavaFX 開發 Mashup 應用”，此處不再贅述。在本教程中，我們的最終目標是讓用戶在界面上輸入美國城市的一個郵編，AIR 程序一方面從 www.sunlightlabs.com 提供的服務上得到該城市的州名和城市名，然後根據州名和城市名從 www.wunderground.com 提供的天氣服務上得到該城市的天氣信息；另外一方面，AIR 程序將根據郵編向雅虎的地圖服務請求含有該城市地圖圖片 URL 信息的 XML 消息，根據返回消息提取地圖圖片地址，再根據該地址向雅虎地圖上請求地圖圖片，最終在界面中顯示出來。程序的處理流程如 圖 12 所示：

圖 12. 用已知服務構建 Mashup 應用

應用程序的最終目標界面如 圖 13 所示：
圖 13. 最終目標界面

在明確了目標之後，我們要開始開發之旅了。首先我們要搭建整體框架和界面。

搭建框架和界面

在前面工作的基礎上，我們將首先搭建程序的總體框架：

  1. 建立 Mashup 應用的界面 AjaxMashup.html。

  2. 將 AjaxMashup.html 需要的 JavaScript 代碼放到 AjaxMashup.js 文件中。

  3. 在首頁 index.html 增加一個鏈接到 AjaxMashup.html。

<a href="AjaxMashup.html">Ajax Mashup</a>

此時文件結構如 圖 14 所示：
圖 14. Mashup 應用的文件結構

應用程序首頁如 圖 15 所示：
圖 15. 應用程序首頁

此時 AjaxMashup.html 文件內容如 清單 6 所示：

清單 6. AjaxMashup.html 文件內容

                   

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>Ajax Mashup</title>

  <style type="text/css">

    @import "dojo9/dojo/resources/dojo.css";

    @import "dojo9/dijit/themes/tundra/tundra.css";

    @import "dojo9/dijit/themes/dijit.css";

  </style>

  <script type="text/javascript" src="dojo9/dojo/dojo.js"

    djConfig="isDebug:false, parseOnLoad: true">

  </script>

  <script type="text/javascript">

    dojo.require("dijit.form.Button");

  </script>

  <script src="js/AjaxMashup.js" />

</head>

<body>

Zip Code:<input id="zip" maxlength="5"/>

<!—-使用了Dojo的一個Widget -->

<button id="query" dojoType="dijit.form.Button">Go!</button>

<br>

<div id="jsonroot">

  <span id="jsontitle">Display JSON Message Received From sunlightlabs</span>

  <br>

  <!—-用來顯示從服務器得到的JSON數據-->

  <span id="jsonmsg"></span>

</div>

<br>

 

<div id="weatherroot">

  <span id="weathertitle">Display the weather forcast</span>

  <br>

  <!—-用來顯示天氣圖片-->

  <img id="weatherimg" src="" border=0 alt="Weather Forecast" height=61 width=468/>

</div>

<br>

 

<div id="xmlroot">

  <span id="xmltitle">Display XML Message Received From Yahoo!</span>

  <br>

  <!—-用來顯示從服務器得到的XML消息-->

  <span id="xmlmsg">

  </span>

</div>

<br>

<div id="maproot">

  <span id="maptitle">Display the map</span>

  <br>

  <!—-用來顯示地圖圖片-->

  <img id="mapimg" src="" alt="Yahoo! map" height=500 width=620/>

</div>

 

</body>

</html>

 

大家可以看出，在該頁面中，我們僅僅設計了頁面的 UI，並沒有加入任何的邏輯。此外，我們在頁面中引入了 Dojo 0.9 並對其進行了一些基本的配置，使用了它的 dijit.form.Button 組件。

接下來，我們將在界面內增加業務邏輯。

增加業務邏輯

首先，給 AjaxMashup.html 頁面中的按鈕增加一個 onclick 事件，如 清單 7 所示：

清單 7. 給按鈕增加事件響應

<button id="query" dojoType="dijit.form.Button" οnclick="mashup()">Go!</button>

在 AjaxMashup.js 文件中增加該方法的代碼，如 清單 8 所示：

清單 8. AjaxMashup.js 的事件響應代碼

                   

//main function

function mashup(){

  var zipcode = dojo.byId("zip").value;

  if(!validateZip(zipcode)){

    alert("You must input a 5 digit zipcode");

    return false;

  }

  getJsonMsg(zipcode);

  getXMLMsg(zipcode);

}

 

//Make sure zipcode is 5 digits

function validateZip(zipcode){

  if(zipcode.length!=5 || isNaN(zipcode)){

    return false;

  }

  return true;

}

 

//process JSON data, get weather forcast image.

function processJson(response){

  try{

    var jsonObj=response;

    var baseWURL=

      "http://banners.wunderground.com/weathersticker/big2_both_cond/language/www/US/";

    var weathersrc=baseWURL+jsonObj.state+"/"+jsonObj.city.replace(" ","_")+".gif";

    dojo.byId("weatherimg").src=weathersrc;

  }catch(e){}

}

 

//get JSON data according to zipcode

function getJsonMsg(zipcode){

  dojo.xhrGet( { //

    // Call REST style web service.

    url: "http://api.sunlightlabs.com/places.getCityStateFromZip.php?apikey=

    23kj234kjb3kjbcl87ds&zip="+zipcode,

    handleAs: "json",// you can get JavaScript Object from response directly

    timeout: 9000, // Time in milliseconds

    // The LOAD function will be called on a successful response.

    load: function(response, ioArgs) { //

      //Display JSON message

      dojo.byId("jsonmsg").innerHTML = ioArgs.xhr.responseText;

      processJson(response);

      return response; //

    },

    // The ERROR function will be called in an error case.

    error: function(response, ioArgs) { //

      console.error("HTTP status code: ", ioArgs.xhr.status); //

      return response; //

    }

  });

}

 

//process XML data, get map image.

function processXML(response){

  try {

    var docObj=response;

    dojo.byId("mapimg").src=docObj.getElementsByTagName("Result")[0].textContent;

  }catch(e){}

}

 

function getXMLMsg(zipcode){

  dojo.xhrGet( { //

    // Call REST style web service.

    url: "http://local.yahooapis.com/MapsService/V1/mapImage?appid=

    YahooDemo&zip="+zipcode,

    handleAs: "xml",//We can document object directly

    timeout: 9000, // Time in milliseconds

    // The LOAD function will be called on a successful response.

    load: function(response, ioArgs) { //

      dojo.byId("xmlmsg").innerHTML = ""; // reset xml message

      var text = document.createTextNode(ioArgs.xhr.responseText);

      dojo.byId("xmlmsg").appendChild(text);

      processXML(response);

      return response; //

    },

    // The ERROR function will be called in an error case.

    error: function(response, ioArgs) { //

      console.error("HTTP status code: ", ioArgs.xhr.status); //

      return response; //

    }

  });

}

 

各函數的作用在程序裏面均有註釋。下面對其中幾個重要問題進行詳細講述：

  1. 主函數 mashup()

主函數的處理順序完全按照 圖 12 的流程進行處理。根據用戶在 zipcode 輸入框中輸入的數據，到三個 REST 風格的服務器上獲取數據並進行進一步加工，然後再根據加工後的數據到服務器上請求該城市天氣情況和地圖。

  1. 如何用 Dojo0.9 進行 Ajax 開發

用 Dojo 0.9 來進行 Ajax 開發和 Dojo 0.4.3 在用法上有了很大的不同。Dojo 0.4.3 的版本中主要是通過 dojo.io.bind() 來進行。在 getJsonMsg() 和 getXMLMsg() 兩個函數中可以看出，Dojo 0.9 則是通過 dojo.xhrGet() 來進行。各參數的含義則和 Dojo 0.4.3 的版本幾乎相同。如下列所示：

  • url：發起異步請求的目標地址。

  • handleAs：將返回值轉換成某種類型。可以是純文本（text）、JSON 格式（json）、XML 格式（xml），還可以是 JavaScript 代碼（javascript），以及另外兩種和 JSON 相關的格式 json-comment-optional 和 json-comment-filtered。

  • timeout：超時時間，單位爲毫秒。

  • load：無異常情況時的回調函數。

  • error：處理異常情況的回調函數。

  • 如何用 Dojo 0.9 處理 JSON 數據

    • Dojo 0.9 用來處理 JSON 數據有兩個最重要的方法，如下列所示：

    • dojo.toJson()：本方法主要將傳入的參數轉化成 JSON 格式的序列；

    • dojo.fromJson()：本方法將 JSON 格式的數據轉化爲對應的 JavaScript 對象，從而可以通過 JavaScript 來對數據進行操作。

    如果我們在 dojo.xhrGet() 方法中指定 handleAs 爲 json，那麼 Dojo 0.9 會自動將結果轉化爲對應的 JavaScript 對象。從而更方便了我們的數據操作。有了這兩個方法，結合本教程的例子，對 Dojo 0.9 的 JSON 數據處理問題都能夠應付自如了。

    1. 如何用 Dojo 0.9 處理 XML 數據

    JavaScript 和 JavaScript 的各種框架（包括 Dojo 0.9）對 XML 數據的處理主要都是基於 JavaScript 對 DOM 處理的支持。如果我們在 dojo.xhrGet() 方法中指定 handleAs 爲 xml，那麼 Dojo 0.9 會自動將結果轉化爲對應的 DOM 對象。只要我們熟悉 JavaScript 的 DOM 操作，XML 數據的處理問題將不再難以應付。當然，Dojo 0.9 也給我們提供了 XML 和 DOM 處理的一個工具 dojox.xml.DomParser，它的源文件位於 dojox/xml 文件夾下。

    和本教程之前的例子一樣，我們用 SDK 的命令行工具在調試狀態下運行，就會得到 圖 13 所示的效果。

    到此爲止，我們需要的全部功能代碼均已完成。下面我們就一起來學習如何將應用用 SDK 提供的工具打包成一個安裝文件，並且安裝運行。從而真正的將應用變成一個和 Web 服務互動的桌面應用。

    發佈爲最終的 AIR 桌面應用

    用 application.xml 文件來描述應用

    通過前面的學習，我們知道 application.xml 文件在整個應用中起着至關重要的作用，它描述了應用的相關屬性。那麼如何來編寫 application.xml 文件呢？

    在 AIR SDK 目錄的 templates 子目錄下，有一個 application.xml 模板文件。如 圖 16 所示：

    圖 16. application.xml 模板文件

    模板文件很簡單，而且註釋很詳細。根據註釋我們可以知道一個應用主要有下列幾個屬性：

    • Xmlns：在本教程中使用 AIR Beta1 版本，必須使用 http://ns.adobe.com/air/application/1.0.M4；

    • appId：應用的 ID，作爲應用的身份識別；

    • version：版本號；

    • name：應用的名字，操作系統執行我們的應用時候顯示；

    • title：安裝應用的時候提示的標題；

    • description：說明，安裝時候顯示；

    • copyright：版權聲明，安裝時候顯示；

    • rootContent：默認首頁，必須是一個 HTML 頁面或者 SWF 文件，還可以給該屬性再設置 height、width、transparent 和 visible 等顯示屬性。從而定義應用運行時候的顯示屬性。

    • installFolder：安裝默認文件夾；

    • icon：ICON 圖標的位置，製作成安裝文件和安裝運行時候都會需要；

    • handleUpdates：更新處理，定義應用更新屬性；

    • fileTypes：定義本應用安裝到操作系統上後，需要向操作系統註冊的文件類型；

    Ø

    下面將按照模板來編寫我們的 application.xml 文件。

    首先我們找幾個分辨率分別爲 16*16，32*32，64*64，128*128 的圖片作爲 ICON，放在 icons 文件夾下，這也是應用文件夾的最終結構。如 圖 17 所示：
    圖 17. 應用文件夾最終結構

    其次，給出最終的 application.xml 文件，如 清單 10 所示。

    清單 10. 最終的 application.xml 文件

    <?xml version="1.0" encoding="UTF-8"?>
    <application appId="AIRDojo" version="1.0" 
    xmlns="http://ns.adobe.com/air/application/1.0.M4">
      <name>AIRDOJO</name>
      <installFolder>Adobe/AIR/QuickStart Samples/AIRDOJO</installFolder> 
      <description>Sample application for AIR and DOJO</description>
      <copyright>Everyone can get the source code!</copyright>
      <rootContent systemChrome="standard" width="800" height="600">
        index.html
      </rootContent>
      <icon>
        <image16x16>icons/AIRDOJO_16.png</image16x16>
        <image32x32>icons/AIRDOJO_32.png</image32x32>
        <image48x48>icons/AIRDOJO_48.png</image48x48>
        <image128x128>icons/AIRDOJO_128.png</image128x128>  
      </icon>
    </application>

    下一步，我們用 SDK 的工具來將應用打包成安裝文件。

    打包成安裝文件

    我們用 SDK 的 adt 命令行工具對應用打包，adt 命令的運行需要您已經按照教程開始時候說的那樣配置好環境變量，並且在您的機器上已經安裝了 JRE 1.4.2 及以上版本。

    adt 打包命令如 清單 11 所示：

    清單 11. 用 adt 命令打包我們的應用成安裝文件

                       

    adt -package AIRDOJO.air application.xml index.html second.html

    AjaxMashup.html js icons dojo9

    AIRDOJO.air 表示要將應用打包成一個 AIRDOJO.air 類型的安裝文件，該安裝文件必須在您已經安裝了 AIR Beta1 的運行時環境才能正確進行安裝。後面將應用所需要的文件和文件夾列出來，即可以打包到安裝文件中。圖 18 給出了打包後的結果。

    圖 18. 打包後生成了 AIRDOJO.air 安裝文件

    安裝運行最終的桌面程序

    到目前爲止，仍然沒有建立一個完整的桌面應用。下面就讓我們來完成最後的工作，安裝剛纔打包生成的安裝文件。並像桌面應用一樣去運行它！雙擊 AIRDOJO.air 安裝包，將會看到 圖 19 所示安裝界面，Application 屬性顯示的就是我們在 application.xml 中給應用設定的 name 屬性。

     

    圖 19. 程序安裝界面

    點擊 Install 按鈕後可以看到 圖 20 所示，我們在 application.xml 中設定的屬性都有顯示，並且還可以看出我們可以選擇是否將應用在桌面上放置爲一個快捷方式！

    圖 20. 安裝界面 2

    點 Continue 繼續安裝，將會看到 圖 21 所示的安裝完成提示。

     

    圖 21. 安裝完成

    安裝完成後，會發現在桌面上有一個新安裝應用的快捷方式，在開始菜單裏面也有一個快捷方式。在您操作系統的添加刪除程序裏面，也有了新安裝程序。如 圖 22 和 圖 23 所示：

    圖 22. 生成了程序的快捷方式

    點擊快捷方式，就可以看到我們的程序可以正確運行，出現 圖 15 和 圖 13 的界面。

    圖 23. 添加刪除程序的程序列表已經有了我們的程序

    可以在不需要使用的時候，通過控制面板 --- 添加刪除程序將應用卸載。

    結束語

    本教程僅僅講述了使用傳統 Web 技術 HTML / JavaScript 來進行 AIR 開發的相關技術，其實 AIR 還可以和 Flex 結合起來進行開發。並且由於 AIR 應用最終是個桌面應用，所以它還具有桌面應用的強大功能。比如：操作本地數據庫，和遠程服務器進行 Socket 通信，操作本地文件系統以及和操作系統進行交互等等。在以後的文章中，我們還將會爲大家介紹使用 Eclipse 的 Aptana 插件來開發調試和發佈 AIR 應用，並且介紹 AIR 應用作爲桌面應用更爲強大的功能。

    致謝

    在本文完成之際，特別感謝 IBM 中國軟件開發中心 DB2 z/OS 開發團隊我的同事們和我的 Mentor 陳威在工作和學習中給我的巨大幫助！

    下載

    參考資料

    學習

     

    獲得產品和技術

    討論

    關於作者

      劉慶，目前在 IBM 軟件開發中心（IBM CSDL）DB2 z/OS 開發團隊擔任開發工程師，擁有 IBM DB2 DBA 專業認證，他在 J2EE 和 Web 開發領域有着多年開發經驗，喜歡關注新技術。他畢業於中國科技大學，並擁有碩士學位。

     
    fcj_com
    發佈了16 篇原創文章 · 獲贊 1 · 訪問量 6萬+
    私信 關注
    發表評論
    所有評論
    還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
    相關文章

    Objective-C爬蟲：實現動態網頁內容的抓取

    在當今的互聯網時代，數據的獲取和分析變得日益重要。無論是進行市場研究、用戶行爲分析還是產品開發，獲取大量數據都是不可或缺的一環。然而，很多有價值的信息都隱藏在動態加載的網頁中，這些網頁通過JavaScript動態生成內容，傳統的爬蟲技術

    原創 2024-05-29 00:07:51

    響應式界面控件DevExtreme * 更強的數據分析和可視化功能

    DevExtreme擁有高性能的HTML5 / JavaScript小部件集合*使您可以利用現代Web開發堆棧*包括React*Angular*ASP.NET Core*jQuery*Knockout等*構建交互式的Web應用程序。從Ang

    原創 2024-05-31 12:32:20

    網頁爬蟲開發：使用Scala和PhantomJS訪問知乎

    引言 隨着大數據時代的到來，網頁爬蟲作爲一種高效的數據收集工具，被廣泛應用於互聯網數據抓取和信息抽取。而知乎是一個知識分享平臺，擁有大量的用戶生成內容。通過爬蟲獲取知乎數據，企業和研究人員可以進行深入的數據分析和市場研究，瞭解用戶的需求

    原創 2024-05-31 00:11:23

    「盤點」JetBrains IDEs v2024.1新功能一覽，更智能的開發體驗！

    JetBrains IDEs日前正式發佈了v2024.1版本，此版本中最大的亮點就是帶來了AI賦能的全行代碼補全，同時在最新的IDEs中重做了終端、擁有更強大的代碼編輯和導航功能、更智能的代碼分析和提示、更優化的性能、更豐富的插件和集成等。

    原創 2024-05-29 12:18:44

    音頻鏈接抓取技術在Lua中的實現

    前言 隨着數字音樂的普及，越來越多的用戶選擇在線音樂平臺來享受音樂。網易雲音樂作爲國內領先的音樂服務平臺，不僅提供了豐富的音樂資源，還擁有獨特的社交屬性，吸引了大量的用戶。在衆多的音樂服務中，音頻鏈接的抓取技術成爲了一個重要的需求。無論

    原創 2024-05-28 00:07:25

    今天！通義靈碼在北京、成都、杭州三城開講啦

    通義靈碼自從入職阿里雲以來備受行業關注。5 月 24 日，阿里雲工程師奔赴北京、成都、杭州三城，向企業和開發者介紹並演示通義靈碼，通義靈碼依然是大家話題的C位，並收穫了衆多粉絲。 @杭州 阿里雲金融創新峯會 今天，2024 阿里雲金融創新峯

    原創 2024-05-27 21:13:46

    響應式UI組件DevExtreme中文教程 - 工具欄的自適應模式

    DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建交互式的Web應用程序。從Ang

    原創 2024-05-27 12:19:43

    使用JavaScript日曆小部件和DHTMLX Gantt的應用場景（三）

    DHTMLX Suite UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕鬆組合到單個應用程序界面中。 DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功

    原創 2024-05-27 12:19:39

    由淺入深在實踐中玩轉Zabbix，解決剩下20%的監控需求！

    本文整理自Zabbix中級認證專家李銘栓（滿分學員）在Zabbix Meetup廣州站的演講。 掌握這幾種監控方式解決80%的監控問題，剩下的20%如何實現？這裏有答案！ 幾點經驗分享： 1

    Zabbix中國 2024-05-24 22:33:53

    H5按需加載探索——Webpack模塊化示例

    1-前言 瀏覽器早已已經全面支持ESM即ES模塊化，可以實現前端代碼的模塊化，以及按需加載/下載，甚至還提供了一個非常貼心的ES特性：importmap 通過importmap，可以代碼零修改實現按需加載： 1.1 在html中聲明模塊的

    原創 2024-05-22 11:10:06

    「Java開發指南」如何用MyEclipse搭建GWT 2.1和Spring？（二）

    本教程將指導您如何生成一個可運行的Google Web Toolkit (GWT) 2.1和Spring應用程序，該應用程序爲域模型實現了CRUD應用程序模式。在本教程中，您將學習如何： 安裝Google Eclipse插件 爲GWT配置

    原創 2024-05-17 12:21:26

    前端面試題 - Node JS與V8是什麼關係？

    前端面試題 - Node JS與V8是什麼關係？ V8 引擎是 Node.js 的核心組成部分，負責執行 JavaScript 代碼， 而 Node.js 爲 V8 提供了一個運行環境和API，使其能夠在服務器端運行。 通俗易懂的前端面試題

    原創 2024-05-16 12:41:41

    前端面試題 - V8是什麼？

    前端面試題 - V8是什麼？ V8 是一個JavaScript引擎，能將JavaScript代碼直接編譯成本地平臺的機器碼並執行。 通俗易懂的前端面試題網站： https://www.front-interview.com

    原創 2024-05-16 12:41:40

    Visual C++界面開發組件Xtreme Toolkit Pro v24測試版發佈——完全支持SVG

    Codejock軟件公司的Xtreme Toolkit Pro是屢獲殊榮的VC界面庫，是MFC開發中最全面界面控件套包，它提供了Windows開發所需要的11種主流的Visual C++ MFC控件，包括Command Bars、Contr

    原創 2024-05-16 12:19:55

    SharePoint Online 客製化開發：如何使用CSS更改網站主題背景顏色？

    一般情況下公司爲了某個團隊或者公司內部共享數據等用途來更改網站的樣式，打造獨特的品牌樣式，很多研發工程師給定的解決方案是爲他們的站點構建自定義主頁，雖然SharePoint Designer是一個強大的工具，但這裏我不推薦使用ShareP

    osc_w6noy934 2024-05-14 02:00:35