簡(jiǎn)介： 隨著移動(dòng)設(shè)備計(jì)算能力的日益增強(qiáng)以及無線網(wǎng)絡(luò)的普及，人們對(duì)于移動(dòng)應(yīng)用的需求越來越大。由于主流平臺(tái)的差異， 如 iOS 和 Android，應(yīng)用程序需要針對(duì)不同的平臺(tái)進(jìn)行重復(fù)開發(fā)。為解決這個(gè)問題，PhoneGap 提供了基于 Web 的統(tǒng)一編程方式，使得同一程序能夠在不同的平臺(tái)上運(yùn)行。然而，PhoneGap 并未提供兼容不同平臺(tái)的統(tǒng)一界面風(fēng)格。Dojo Mobile 正好彌補(bǔ)這一缺失，將同一程序在不同平臺(tái)下展現(xiàn)為與平臺(tái)一致的界面風(fēng)格。另外，Dojo Mobile 還提供了模塊化的組件 Widget，簡(jiǎn)單有效的數(shù)據(jù)接口，大大提高了開發(fā)的效率。

本文將詳細(xì)講述 Dojo Mobile 在 PhoneGap 上的開發(fā)過程，并通過一個(gè)實(shí)例程序進(jìn)行講解，能夠讓讀者快速掌握利用 Dojo Mobile 在 PhoneGap 上的開發(fā)技術(shù)。

背景介紹

PhoneGap 是一款開源且跨平臺(tái)的移動(dòng)應(yīng)用開發(fā)框架。它對(duì)各個(gè)移動(dòng)平臺(tái)的本身 API 進(jìn)行了簡(jiǎn)化和抽象。開發(fā)者僅需要掌握 Web 開發(fā)的基本技術(shù)，就可以使用 HTML 和 JavaScript 在其上進(jìn)行開發(fā)。所開發(fā)的 JavaScript + HTML 代碼，經(jīng)過 PhoneGap 平臺(tái)的封裝，可以導(dǎo)出為 iOS 和 Android 程序。基于 PhoneGap 開發(fā)的應(yīng)用程序兼容性好，可以做到“Write once, run everywhere”而兼容性越強(qiáng)，所需的開發(fā)成本越低。目前 PhoneGap 對(duì)不同平臺(tái)提供的功能特性有一定的差別，如圖 1 所示。其對(duì)于主流平臺(tái) Windows Phone 7、Android 及 iOS 4 也能夠非常好地支持。

PhoneGap 對(duì)于標(biāo)準(zhǔn)化有著非常好的支持，它基于 W3C 標(biāo)準(zhǔn)，現(xiàn)有的 Web 程序甚至無需修改就可以在 PhoneGap 上運(yùn)行。當(dāng)與功能強(qiáng)大的 Mobile 框架結(jié)合時(shí)，能夠極大地降低開發(fā)成本。

Dojo Mobile 框架是一個(gè)移動(dòng)終端的 Web 應(yīng)用開發(fā)框架，是 Dojo 的一個(gè)子項(xiàng)目。它主要面向手持設(shè)備上的 Web 富客戶端應(yīng)用開發(fā)，提供了 iOS 和 Android 兩套主題， 使得基于 Dojo Mobile 的應(yīng)用具有手機(jī)本地應(yīng)用的外觀和效果。Dojo Mobile 具有輕量級(jí)、模塊化、速度快及封裝性好的特點(diǎn)。

Dojo Mobile 經(jīng)過壓縮之后體積只有幾百 K，對(duì)于移動(dòng)設(shè)備非常適合。

Dojo Mobile 基于 HTML5 和 CSS3 來實(shí)現(xiàn)一些特效，比較流暢，響應(yīng)速度快。

Dojo Mobile 對(duì)于 iOS 和 Android 主題封裝性好，開發(fā)者只需使用統(tǒng)一的布局和 CSS 即可實(shí)現(xiàn)不同平臺(tái)的本地效果。

除此之外，Dojo Mobile 與 PhoneGap 的結(jié)合也非常好，基于 Dojo Mobile 的程序可以很簡(jiǎn)單的被 PhoneGap 轉(zhuǎn)換成本地應(yīng)用程序。

開發(fā)環(huán)境搭建

搭建開發(fā)環(huán)境分為三個(gè)步驟：第一步，搭建 Android 開發(fā)環(huán)境。第二步，配置 PhoneGap，將其集成到 Android 項(xiàng)目中。第三步，在配置好的 Android 項(xiàng)目中加入 Dojo Mobile。

Android 開發(fā)環(huán)境

Android 開發(fā)環(huán)境可以配置在 Windows,、Mac OS,、Linux 等操作系統(tǒng)上。本文的示例是在 Windows XP 平臺(tái)上開發(fā)，以下就以 Windows XP 為例進(jìn)行介紹。Android 開發(fā)環(huán)境的搭建需要若干軟件，詳細(xì)如下：JDK,、Eclipse、Android SDK, ADT(Eclipse 插件 )。

JDK 的安裝配置與 Eclipse 的配置，對(duì)于任何 Java 開發(fā)者或者用 Eclipse 作為開發(fā)平臺(tái)的開發(fā)者來說都是非常熟悉的，在這里就不贅述了。

安裝配置好 JDK 與 Eclipse 之后，接下來需要安裝 Android SDK 和 ADT。

Android SDK 可以在 http://developer./sdk/index.html 下載獲得壓縮包 android-sdk-windows.zip。詳細(xì)過程如下：

I. 將此壓縮包解壓到 C:\android( 目錄可以修改 )，運(yùn)行目錄下的 Setup.exe 將會(huì)彈出窗口如圖 2。若出現(xiàn)"Fail to fetch URL..."類似的錯(cuò)誤提示，請(qǐng)點(diǎn)選 Settings panel 中的 check box（紅色框標(biāo)記處）。

II. 在上面的窗口中選擇 Available packages，出現(xiàn)圖 3 所示的窗口。請(qǐng)選擇開發(fā)需要的 API 版本并點(diǎn)擊窗口右下方的"Install Selected"按鈕。在接下來出現(xiàn)的頁面中，請(qǐng)仔細(xì)閱讀相關(guān)的 license，然后選擇"Accepted All"和"Install Selected"，系統(tǒng)將完成 API 版本的安裝。

III. 安裝結(jié)束之后，可以在"Installed packages"中看到所有安裝成功的 API 版本，如圖 4。

IV. Android SDK 的配置。類似于 JDK 安裝完成后的配置，Android SDK 安裝完成之后也需要在系統(tǒng)的環(huán)境變量中配置。具體的做法是將 SDK 目錄下 tools 文件夾的路徑添加到 Path 中。

到此，Android SDK 的安裝與配置就完成了。接下來將要進(jìn)行的是 Android 插件 ADT 在 Eclipse 上的安裝與配置。詳細(xì)過程如下：

I. Eclipse 啟動(dòng)后，選擇 Help 菜單中的"Software Updates..."，出現(xiàn)如圖 5 所示的窗口。點(diǎn)擊右邊"Add Site..."按鈕，出現(xiàn)了圖 6 的窗口，將插件 ADT 的安裝地址 https://dl-ssl.google.com/android/eclipse 添加至輸入框中并點(diǎn)擊 OK 按鈕。若出現(xiàn)"No repository Found..."的錯(cuò)誤提示，請(qǐng)嘗試將 https 修改為 http 重新嘗試。

II. 正確選擇站點(diǎn)后，窗口中會(huì)列出可以安裝的插件列表，選擇最新的版本并按照提示安裝即可。

III. 安裝完成后重啟 Eclipse。選擇 window 菜單項(xiàng) Preference 窗口，如圖 7 所示。選擇左邊下列表中的 Android 選項(xiàng)，在右邊出現(xiàn)的 SDK Location 輸入框中配置 SDK 的安裝目錄并點(diǎn)擊"OK"按鈕。

IV. 到此 ADT 的安裝與配置完成。安裝配置成功后，便可以在 Eclipse 工具欄看到象征 Android 的機(jī)器人圖標(biāo)及 Window 菜單欄中 ADT 的選項(xiàng)，見圖 8。

V. Android 的運(yùn)行創(chuàng)建特定版本的 AVD(android Virtual Device)。在 Android SDK and AVD Manager 窗口左側(cè)選擇 Virtual devices，在右邊出現(xiàn)的 panel 中點(diǎn)擊"New"按鈕。

配置 PhoneGap

PhoneGap 是一個(gè)使 Web 開發(fā)者能夠快速開發(fā)跨移動(dòng)平臺(tái)應(yīng)用程序的工具。只需要 Web 開發(fā)者具備良好的 HTML, JavaScript, CSS 技術(shù)就可以通過 PhoneGap 將其封裝成適應(yīng) iOS、Android、BlackBerry、 Web OS、Symbian 等 5 大平臺(tái)的應(yīng)用。配置過程如下：

I. 從 http:// 下載 PhoneGap 壓縮包，并解壓。

II. 在 Android 工程根目錄下新建兩個(gè)文件夾：/libs, /assets/www. 將 PhoneGap 壓縮包解壓放在目錄 D:\PhoneGap 下。將 D:\PhoneGap\android\phonegap.jar 復(fù)制到 Android 工程的 libs 目錄并添加到工程的 classpath 中。將 D:\PhoneGap\android\phonegap.js 復(fù)制到 Android 工程的 www 目錄下并將 D:\PhoneGap\android\xml 文件夾復(fù)制到 Android 工程的 res 目錄下。

III. 調(diào)整 Android 工程的配置文件 AndroidManifest.xml。將清單 1 中的內(nèi)容復(fù)制到 <manifest> 的第一個(gè)子元素的位置。其中 <uses-permission> 作用是賦予應(yīng)用程序訪問特定設(shè)備的權(quán)限，如照相機(jī)、文件等。若應(yīng)用程序不需要訪問這些設(shè)備，可將其對(duì)應(yīng)的訪問權(quán)限去掉。另外，將屬性 android:configChanges="orientation|keyboardHidden" 添加到第一個(gè) <activity> 中，并將清單 2 中的內(nèi)容添加到第一個(gè) <activity> 之后。

				 
 <supports-screens 
 android:largeScreens="true"
 android:normalScreens="true"
 android:smallScreens="true"
 android:resizeable="true"
 android:anyDensity="true" /> 
 <uses-permission android:name="android.permission.CAMERA" /> 
 <uses-permission android:name="android.permission.VIBRATE" /> 
 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> 
 <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> 
 <uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" /> 
 <uses-permission android:name="android.permission.READ_PHONE_STATE" /> 
 <uses-permission android:name="android.permission.INTERNET" /> 
 <uses-permission android:name="android.permission.RECEIVE_SMS" /> 
 <uses-permission android:name="android.permission.RECORD_AUDIO" /> 
 <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> 
 <uses-permission android:name="android.permission.READ_CONTACTS" /> 
 <uses-permission android:name="android.permission.WRITE_CONTACTS" /> 
 <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> 
 <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> 
  <uses-permission android:name="android.permission.GET_ACCOUNTS" /> 

				 
 <activity android:name="com.phonegap.DroidGap" 
    android:label="@string/app_name"       
    android:configChanges="orientation|keyboardHidden"> 
 <intent-filter> </intent-filter> 
 </activity> 

VI. 在 www 文件夾下創(chuàng)建 index.html 作為顯示頁面。將繼承自 Activity 的類修改為繼承于 DroidGap，并將此類的 onCreate 方法中的 setContentView(R.layout.main) 一行修改為 super.loadUrl("file:///android_asset/www/index.html")。最后，將 JS 腳本文件 phonegap.js 導(dǎo)入到 index.html 中，見清單 3。

V. 將清單 3 中的內(nèi)容復(fù)制到 index.html 中，運(yùn)行 Android 應(yīng)用程序。若能在 Android 模擬器中出現(xiàn)新頁面并顯示"Hello, this is my first PhoneGap application."說明 PhoneGap 配置成功，見圖 10。

				 
 <!DOCTYPE HTML> 
 <html> 
 <head> 
 <title>PhoneGap Test</title> 
 <script type="text/javascript" charset="utf-8" src="phonegap.js"></script> 
 </head> 
 <body> 
 <h1>Hello, this is my first PhoneGap application.</h1> 
 </body> 
 </html> 

加入 Dojo Mobile

Dojo 是一個(gè)強(qiáng)大的、跨平臺(tái)且開源的 JavaScript 框架，提供了豐富的控件方便 Web 開發(fā)者使用。Dojo Mobile 是 Dojo 的一部分，為 Mobile 領(lǐng)域提供了一套前臺(tái)頁面技術(shù)解決方案。

Dojo 目前官方發(fā)布最新版為 1.7 版，可以在 http:///download/ 下載得到。本示例是在 Dojo 1.6 版本測(cè)試通過，1.7 版本的配置方法與之類似。將下載得到的 zip 壓縮包解壓。

在 www 文件夾下創(chuàng)建 libs 文件夾，并在 libs 下創(chuàng)建 Dojo 主目錄。在 Dojo 主目錄下創(chuàng)建 Dojo 和 Dojox 兩個(gè)分目錄。

1. 將 Dojo zip 解壓包中文件 Dojox/Mobile.js 復(fù)制到工程 Dojox 分目錄中。
2. 將 Dojo zip 解壓包中 Dojox/Mobile 文件夾及其所有內(nèi)容復(fù)制到工程 Dojox 分目錄中。
3. 將 Dojo zip 解壓包中文件 Dojo/Dojo.js 復(fù)制到工程 Dojo 分目錄中。

				 
 <meta name="viewport" content="width=device-width,initial-scale=1, 
    maximum-scale=1,minimum-scale=1, user-scalable=no"> 
 <meta name="apple-mobie-web-app-capable" content="yes"> 
 <link rel="stylesheet" href="libs/dojo/dojox/Mobile/themes/android/ 
   android.css" type="text/css">        
 <script src="libs/dojo/1.6/dojo/dojo.xd.js" 
    djConfig="parseOnLoad: true"></script> 
 <script> 
    dojo.require("dojox.Mobile.parser"); 
    dojo.require("dojox.Mobile"); 
    dojo.requireIf(!dojo.isWebKit, "dojox.Mobile.compat"); 
 </script> 

至此，開發(fā)環(huán)境搭建與配置就完成了。

Hello World ！

此節(jié)是作為整個(gè)開發(fā)環(huán)境搭建是否成功的一個(gè)驗(yàn)證。

				 
 <div dojoType="dojox.Mobile.View" selected="true"> 
    <h2 dojoType="dojox.Mobile.Heading" fixed="top">Hello, World!</h2> 
    <h2 dojoType="dojox.Mobile.RoundRectCategory">First Section</h2> 
    <div dojoType="dojox.Mobile.RoundRect"> 
        This is my first dojo Mobile application on android platform. 
    </div> 
    <h2 dojoType="dojox.Mobile.RoundRectCategory">Second Section</h2> 
    <ul dojoType="dojox.Mobile.RoundRectList"> 
        <li dojoType="dojox.Mobile.ListItem">List Item 1</li> 
        <li dojoType="dojox.Mobile.ListItem">List Item 2</li> 
        <li dojoType="dojox.Mobile.ListItem">List Item 3</li> 
    </ul> 
 </div> 

將清單 5 的源碼粘貼到 index.html 文件的 body 標(biāo)簽中，并將此 Android 應(yīng)用部署到模擬器上運(yùn)行。若出現(xiàn)如圖 11 的運(yùn)行結(jié)果，表明配置成功。若出現(xiàn)白屏，很可能的原因是 Dojo 加載失敗，詳細(xì)原因可以參考 LogCat 視圖中的錯(cuò)誤提示。

BlueVM 設(shè)計(jì)及實(shí)現(xiàn)

此 Mobile 應(yīng)用程序主要用于遠(yuǎn)程監(jiān)控 JVM（Java 虛擬機(jī)）的運(yùn)行狀態(tài)?；?Java 技術(shù)的服務(wù)器端應(yīng)用程序是運(yùn)行于 JVM 之上。一個(gè)應(yīng)用程序可能包含若干個(gè)服務(wù)器端組件，且這些組件都運(yùn)行于 JVM 上。目前，遠(yuǎn)程監(jiān)控多個(gè) JVM 需要切換到不同機(jī)器上，且必須要有 PC 或在這些機(jī)器附近才能夠完成。BlueVM 可以解決這一繁瑣的問題。只需要將 BlueVM 服務(wù)器端掛載到遠(yuǎn)端機(jī)器并提供機(jī)器的網(wǎng)絡(luò)地址及端口號(hào)給 BlueVM 即可。

BlueVM 是典型的 C/S 架構(gòu)，把 Server 端掛載到對(duì)應(yīng)的服務(wù)器端組件上即可在手機(jī)等移動(dòng)設(shè)備上監(jiān)控服務(wù)器端 JVM 的運(yùn)行狀態(tài)。通過分析 JVM 的運(yùn)行狀態(tài)進(jìn)而推測(cè)出服務(wù)器端組件的運(yùn)行狀況。BlueVM 架構(gòu)圖如圖 12，左邊是 Client 端將運(yùn)行于手機(jī)等移動(dòng)設(shè)備上。右端顯示有 3 個(gè)應(yīng)用程序服務(wù)器組件，這 3 個(gè)應(yīng)用程序服務(wù)器組件都運(yùn)行于 JVM 之上。在 JVM 之上灰色部分表示服務(wù)器組件，左邊藍(lán)色部分是掛載在此服務(wù)器端組件上的 BlueVM 的 Server 端。

BlueVM Server 端設(shè)計(jì)與實(shí)現(xiàn)

類 ManagementFactory 中實(shí)現(xiàn)了若干可以為 Java 平臺(tái)獲取 MXBean 的靜態(tài)方法。這些 MXBean 代表了 JVM 運(yùn)行狀態(tài)的管理接口。這些接口可以提供 JVM 類裝載、編譯、垃圾回收、內(nèi)存分配、操作系統(tǒng)、運(yùn)行平臺(tái)及線程等運(yùn)行時(shí)信息。其中的每一種運(yùn)行時(shí)的狀態(tài)信息都有唯一的 MXBean 與之對(duì)應(yīng)，正是這些 MXBean 提供了 JVM 的各種運(yùn)行時(shí)信息。

此 Mobile 應(yīng)用程序會(huì)展示給用戶信息列表，用戶可以根據(jù)自己的需要來選擇信息的類型。因此，Server 端設(shè)計(jì)了若干個(gè)類來響應(yīng)不同類型的請(qǐng)求。然而，由于這些類都要響應(yīng)用戶的請(qǐng)求，設(shè)計(jì)相同的接口更符合 Java 推薦的設(shè)計(jì)模式。因此，Server 端設(shè)計(jì)了一個(gè)公共的接口和繼承于此接口的五個(gè)實(shí)體類來分別展示五種不同類型的信息。BaseAction 是公共接口，聲明了 handleRequest 方法。類 ClassLoaderAction, GCAction, MemoryAction, ThreadAction 及 VMAction 都實(shí)現(xiàn)于 BaseAction 聲明的 handleRequest 方法。

以 MemoryAction 為例講解具體實(shí)現(xiàn)，清單 6 是 MemoryAction 的 Java 源碼?？梢钥吹?，MemoryAction 實(shí)現(xiàn)了 BaseAction 接口聲明的 handleRequest 方法。調(diào)用 ManagementFactory 類的 getMemoryMXBean 方法得到 MemoryMXBean 對(duì)象，獲取其中堆及非堆的內(nèi)存分配信息。將這些信息組裝到 Json 對(duì)象中返回。圖 13 中顯示的是 JVM 某時(shí)刻的內(nèi)存分配信息。

				 
 public class MemoryAction implements BaseAction { 
 @Override 
 public Json handleRequest(Properties params) { 
		 MemoryMXBean bean = ManagementFactory.getMemoryMXBean(); 
		 MemoryUsage heapUsage = bean.getHeapMemoryUsage(); 
		 MemoryUsage nonHeapUsage = bean.getNonHeapMemoryUsage(); 
		
		 /** 
		 * {'heap':{'init':#,'committed':#,'used':#,'max':#},'non-heap':{}} 
		 */ 
		 Json heapJson = new Json(); 
		 heapJson.add("init", heapUsage.getInit()); 
		 heapJson.add("committed", heapUsage.getCommitted()); 
		 heapJson.add("used", heapUsage.getUsed()); 
		 heapJson.add("max", heapUsage.getMax()); 
		
		 Json nonHeapJson = new Json(); 
		 nonHeapJson.add("init", nonHeapUsage.getInit()); 
		 nonHeapJson.add("committed", nonHeapUsage.getCommitted()); 
		 nonHeapJson.add("used", nonHeapUsage.getUsed()); 
		 nonHeapJson.add("max", nonHeapUsage.getMax()); 
		
		 Json json = new Json(); 
		 json.add("heap", heapJson); 
		 json.add("non-heap", nonHeapJson); 
		
		 return json; 
	 } 
 } 

BlueVM Client 端設(shè)計(jì)與實(shí)現(xiàn)

圖 13 及 14 是 Client 端的 UI 設(shè)計(jì)。圖 14 中左邊的截圖是此 Mobile 應(yīng)用程序的第一個(gè)頁面。由圖可知，有兩種方式查看遠(yuǎn)端機(jī)器上 JVM 的運(yùn)行時(shí)信息。既可以通過手動(dòng)配置機(jī)器網(wǎng)絡(luò)地址及端口號(hào)也可以預(yù)配置常用機(jī)器地址和端口信息來查看相關(guān)信息。圖 14 右邊的截圖是此應(yīng)用程序的第二個(gè)視圖。由圖可以看出 BlueVM Server 端共提供了五種類型的信息。點(diǎn)擊 VM Info 即為圖 13，BlueVM 的第三個(gè)頁面，展示 JVM 的內(nèi)存分配狀況。第二及第三個(gè)視圖的標(biāo)題上兼有一個(gè) Back 按鈕，點(diǎn)擊可以返回上一級(jí)頁面。

上述的三個(gè)頁面是由 Dojo Mobile 的 Widget 及 JavaScript 腳本實(shí)現(xiàn)。Dojo Mobile 為應(yīng)用程序提供了非常豐富的組件 (Widget) 以簡(jiǎn)化頁面的開發(fā)工作。每一個(gè)頁面對(duì)應(yīng)于 Dojo Mobile 的一個(gè) View 組件。在 View 組件中存放各種能夠容納頁面具體內(nèi)容的組件，如 Heading（標(biāo)題）、RoundRect（方框）及 EndToEndList（列表）等組件。清單 7 是圖 14 右圖 UI 源碼。

				 
 <div dojoType="dojox.Mobile.View" id="propertyList"> 
   	 <h1 dojoType="dojox.Mobile.Heading" back="Back" moveTo="query">JVM Status</h1> 
    <ul dojoType="dojox.Mobile.EdgeToEdgeList"> 
        <li dojoType="dojox.Mobile.ListItem" moveTo="vmInfo" transition="slide"
 onclick="flags.vm=true;viewVMInfo();">VM Info</li> 
        <li dojoType="dojox.Mobile.ListItem" moveTo="mmInfo" transition="slide" 
        onclick="flags.mm=true;viewMMInfo();">Memory Info</li> 
        <li dojoType="dojox.Mobile.ListItem" moveTo="thInfo" transition="slide" 
        onclick="flags.th=true;viewTHInfo();">Thread Info</li> 
        <li dojoType="dojox.Mobile.ListItem" moveTo="clInfo" transition="slide"  
        nclick="flags.cl=true;viewCLInfo();">Class Loader Info</li> 
        <li dojoType="dojox.Mobile.ListItem" moveTo="gcInfo" transition="slide" 
        onclick="flags.gc=true;viewGCInfo();">Garbage Collection Info</li> 
    </ul> 
 </div> 

Server 與 Client 通信

由于 BuleVM 的 Client 是一個(gè)將 Web 技術(shù)封裝為本地應(yīng)用的程序，因此 Client 端可以通過發(fā)送 HTTP 請(qǐng)求來獲取 Server 端的響應(yīng)。Server 端使用 ServerSocket 實(shí)現(xiàn)了在某個(gè)端口上的監(jiān)聽，并等待 Client 的請(qǐng)求。當(dāng) Server 端監(jiān)聽到有 HTTP 請(qǐng)求到來的時(shí)候，會(huì)將此請(qǐng)求解析并調(diào)用對(duì)應(yīng)的 Action 的 handleRequest 方法來響應(yīng)。Client 端獲取到 Server 端的響應(yīng)內(nèi)容之后解析并顯示在頁面中。因此，當(dāng)點(diǎn)擊第二個(gè)頁面上的 Memory Info 會(huì)觸發(fā) Client 端的一個(gè) Ajax 請(qǐng)求。此請(qǐng)求到達(dá) Server 端時(shí)，Server 端調(diào)用 MemoryAction 的 handleRequest 方法產(chǎn)生 JSON 對(duì)象返回給 Client 端，當(dāng) Client 端收到此 JSON 對(duì)象后，解析其中的信息并顯示在第三個(gè)頁面上。

				 
 function viewMMInfo() { 
	 var surl = getUrl() + '?action=memoryinfo.do'; 
	 //ajax call 			
	 callHttp(surl,function(req) { 
 var data = eval("(" + req.responseText + ")"); 
 var heapData = data['heap']; 
		 var nonHeapData = data['non-heap']; 
					
		 $('hInit').innerHTML = (heapData['init']/1024/1024).toFixed(2)+'MB'; 
 $('hCommit').innerHTML = (heapData['committed']/1024/1024).toFixed(2)+'MB'; 
		 $('hUsed').innerHTML = (heapData['used']/1024/1024).toFixed(2)+'MB'; 
		 $('hMax').innerHTML = (heapData['max']/1024/1024).toFixed(2)+'MB'; 
				
 $('nhInit').innerHTML = (nonHeapData['init']/1024/1024).toFixed(2)+'MB'; 
 $('nhCommit').innerHTML=(nonHeapData['committed']/1024/1024).toFixed(2)+'MB'; 
 $('nhUsed').innerHTML = (nonHeapData['used']/1024/1024).toFixed(2)+'MB'; 
 $('nhMax').innerHTML = (nonHeapData['max']/1024/1024).toFixed(2)+'MB'; 
 }); 
	 // loop to refresh info 			
	 if(flags.mm){ 
		 window.setTimeout("viewMMInfo()",2000); 
	 } 
 } 

調(diào)試

Mobile 應(yīng)用程序有與 Web 應(yīng)用程序相似的技術(shù)。與此同時(shí)，又有很多不同于 Web 應(yīng)用程序的方法及技術(shù)。若能及時(shí)發(fā)現(xiàn)與掌握相關(guān)的開發(fā)技巧必定能夠事半功倍，調(diào)試便是其中基本技巧之一。

DDMS 前景圖是 ADT 插件帶來的，是 Android 應(yīng)用者開發(fā)必備的工具。LogCat 是此前景圖的一個(gè)視圖，會(huì)輸出程序中各類調(diào)試及錯(cuò)誤信息。因此，在開發(fā)過程中除了需要關(guān)注控制臺(tái)的提示信息外，LogCat 也能提供有用的調(diào)試信息。另外，在程序中可以嵌入特定的調(diào)試語句，運(yùn)行時(shí)這些語句會(huì)產(chǎn)生相應(yīng)的信息輸出到 LogCat 中供開發(fā)者使用。

文章出處：IBM developerWorks