當前位置：首頁 > 运维知识 > Android >内容正文

Android

在Android上应用PhoneGap和Dojo Mobile

發布時間：2024/3/13 Android 44 豆豆

生活随笔收集整理的這篇文章主要介紹了在Android上应用PhoneGap和Dojo Mobile 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

?在Android上應用PhoneGap和Dojo Mobile

? 這一文章系列以創建一個簡單的移動應用為起點，最終會講到通過Android設備來使用web服務。你會學習如何使用Eclipse和PhoneGap來創建一個只用到了HTML和JavaScript的移動混合應用；以及使用Mobile Dojo賦予應用本地化的感覺。在本文中，我們了解如何通過整合PhoneGap和Mobile Dojo來快速地為Android創建一個混合移動應用，其外觀和行為都很類似典型的Android應用。

（譯者注：由于yeeyan編輯器對文章中的標簽做解析的原因，我在每個標簽的<符號之后都加入了一個空格，比如說，左尖括號<+head+右尖括號>，我會寫成< head>，以便其能夠在文章中正確顯示，不便之處敬請諒解。）

前言

無論你去到哪里，人們都在使用移動設備了與家庭和朋友保持聯系，拍照并上傳到社交網絡上，查找餐廳的位置，或是查看最新的頭條新聞。移動設備有著許多不同的外型和風格，移動電話上運行著各種各樣不同的操作系統，比如說Apple的iOS、Google的Android以及Blackberry的Research In Motion等。有些電話有著很大的顯示屏幕、物理鍵盤，并且是運行在3G、4G或是WiFi網絡上。移動電話可能裝備了用于加速、定位或甚至是付費的傳感器，某些這樣的設備甚至并不是電話，它們是有著更大的顯示屏幕和僅限于數據的網絡連接的平板電腦。

拋開這些不同之處，移動設備都是類似的，他們都運行移動應用。移動應用可分成兩種類型：

本地化應用

本地化應用安裝在設備上，是使用軟件開發工具（SDK）創建并通過應用商店發布的二進制可執行程序。每種移動操作系統都有一個SDK，遺憾的是，其與其他操作系統的SDK是不同的。

例如，若要為iOS創建一個應用，你需下載并安裝iOS SDK和開發工具，并且你需要使用Objective-C這一編程語言來編寫應用的代碼；Android應用則是使用Android SDK來開發，使用Java語言來進行編程。因此，若要創建一個移動應用，你需要了解每一種SDK，并且要使用所支持的編程語言來編寫應用。對于每一種平臺的SDK來說，都有著一個很陡的學習曲線，因此移動應用的開發是很復雜的。

Web應用

web應用被加載到移動web瀏覽器中，其與本地化應用的不同之處在于它們是使用web技術（HTML、JavaScript和CSS）來編碼的，不用考慮設備的操作系統，無需學習每種設備的不同編程語言。HTML和JavaScript對于web開發者來說是很熟悉的，因為他們被用來創建加載到桌面瀏覽器中的web頁面。一般情況下，移動瀏覽器都能夠渲染相同的web頁面，不過網站通常都會提供一個移動版本，該版本的內容少一些，以便加載速度更快一些（出于更小的屏幕尺寸和更慢的網絡連接方面的考慮）。

若要“運行”一個web應用，用戶把一個URL輸入到移動web瀏覽器中，這一操作加載web頁面，這是web應用的入口點。web應用不是通過應用商店來發布的；它們就是包含在其他web頁面、電子郵件甚至是硬拷貝中的簡單鏈接。

本地化應用和web應用都有著相應的優點和缺點，關于孰優孰劣存在著大量的爭論。出于解決這場爭斗的目的，一種新的混合型的應用試圖把本地化應用和web應用兩方面的優勢結合起來。

與web應用一樣，混合應用使用web技術編程，但被打包成本地化應用。對于多種設備操作系統來說，混合應用只需編寫一次，使用的是許多開發者熟悉的編程語言。由于混合應用實際上是一種本地化應用，因此你需要通過JavaScript來訪問一些目前對于web應用來說還是不可用的設備功能。混合應用還可以使用應用商店來發布和安裝，就像本地化應用那樣。

PhoneGap是一個在構建混合應用方面很受歡迎的工具，它的開源移動框架包含了一個訪問諸如加速計和照相機一類的設備功能的JavaScript API。

本文展示如何使用PhoneGap和Dojo Mobile工具來開發一個混合型的移動Android應用，學習如何使用Android模擬器和工具來測試應用，并了解如何在Android設備或是平板電腦上運行應用。

前提條件

本文假設你對于Eclipse開發環境、HTML、JavaScript和CSS都有一定程度的了解，下面的軟件是必需的：

　1. Windows、OSX或是 Linux操作系統
??? 2. Java Development Kit (JDK) 5或者JDK 6 (僅是JRE不能滿足要求)
??? 3. Eclipse開發環境，比如說Eclipse Helios V3.6或之后的版本，或是IBM Rational Application Developer V8
??? 4. Android SDK及平臺 (r12或之后的版本)
??? 5. Android Development Toolkit (ADT)的Eclipse插件
??? 6. PhoneGap SDK (V1.0.0或之后的版本)
??? 7. Dojo Toolkit (V1.6或之后的版本)

請參閱參考資料獲取下載這些軟件的鏈接。

安裝開發環境

安裝開發環境需要執行下面這些步驟：

1. 安裝JDK以及Eclipse或是Rational Application Developer。

2. 下載Android SDK。

3. 下載和安裝Eclipse的ADT插件。

4. 配置Android的Eclipse開發環境。

5. 安裝所需的Android平臺。

6. 創建一個新的Android虛擬設備（Android Virtual Device，AVD）。

7. 下載PhoneGap SDK。

8. 下載Dojo Toolkit。

安裝JDK以及Eclipse或是Rational Application Developer

第一項任務是驗證JDK 5或是之上的版本是否已經安裝，如果沒有的話，下載Java SE JDK（參見參考資料）。

就本文來說，你可以使用Eclipse或是IBM Rational Application Developer（RAD），RAD支持Windows或是Linux，OSX開發者可以使用Eclipse。

RAD由IBM版本的Eclipse構成，外加支持Java EE的IBM工具，其中包括了IBM的Web 2.0功能包。若要使用RAD，你需要使用版本8或是之后的版本。RAD包含了IBM的JDK，缺省情況下會使用該JDK，但是，這一JDK并未包含需要用來創建和簽署Android應用的Java包。若要使用Java SE JDK來代替的話，你需要使用清單1中的信息來代替C:/Program Files/IBM/SDP/eclipse.in（或是你安裝RAD的位置）。

清單1. Windows RAD的eclipse.ini的內容

-startup
plugins/org.eclipse.equinox.launcher_1.1.1.R36x_v20101122_1400.jar
--launcher.library
plugins/org.eclipse.equinox.launcher.win32.win32.x86_1.1.2.R36x_v20101222
--launcher.defaultAction
openFile
--launcher.XXMaxPermSize
256M
-showsplash
org.eclipse.platform
--launcher.XXMaxPermSize
256m
--launcher.defaultAction
openFile
-install
C:/Program Files/IBM/SDP
-vmargs
-Dosgi.requiredJavaVersion=1.5
-Xms40m
-Xmx512m

如果你想要使用Eclipse的話，需要使用3.6或是之后的版本。由于要在本系列后面的文章中編寫web服務，因此需要下載Eclipse IDE for Java EE Developers（參見參考資料）。不過，如果你只是想編寫Android應用的話，使用Eclipse IDE for Java Developers就可達目的了。

Eclipse和RAD非常類似，在本文中，在提到Eclipse時，指的是Eclipse或RAD，不過界面插圖則是來自運行在Windows上的RAD。

下載Android SDK

創建Android應用必須要用到Android SDK（參見參考資料），該SDK是命令行程序的一個集合，這些程序被用來編譯、構建、模擬和調試Android應用。

如果是安裝在Windows上的話，最簡單的做法是下載壓縮包然后解壓到c:\這一根目錄下。r12安裝程序有幾個問題，不能檢測Java，不能安裝到名字帶有空格的目錄下。

下載并安裝ADT插件

Android提供了一個極大地簡化了應用開發的Eclipse插件，其與Eclipse集成在一起，提供一個快速的開發環境。若要安裝Android開發工具（Android Development Toolkit，ADT）插件（參見參考資料），請按照下面的步驟進行：

1. 從Eclipse中選擇菜單項?Help?>?Install New? Software…?>?Add…

2. 輸入軟件的名稱和URL位置，如圖1所示。名稱：Android ADT Eclipse plugin；位置：https://dl-ssl.google.com/android/eclipse/

圖1. 安裝Android ADT插件

3. 選擇Developer Tools，檢查確認所有的復選框都已選中，如圖1所示，然后選擇Next。

4. 如圖2所示，選擇Next接受許可協議，然后安裝選項。

圖2. 安裝的詳細選項

在安裝完成之后，重新啟動Eclipse。

配置Android的Eclipse開發環境

若要配置Android的Eclipse開發環境，顯示Preferences對話框。

1. 對于Windows來說，選擇Window?>?Preferences?>?Android。

2. 對于OSX來說，選擇?Eclipse?>?Preferences?>?Android。

點擊SDK location的Browse…按鈕，然后選擇Android SDK所在的目錄，如圖3所示：

圖3. 在Eclipse中指定SDK的位置

點擊Apply按鈕然后再點擊OK按鈕。

把Android LogCat視圖加入到Eclipse IDE中幫助調試：

1. Window?>?Show View?>?Other…

2. Android?>?LogCat

圖4. LogCat視圖

安裝Android平臺

若要編譯某個特定版本的Android應用的話，需要下載和安裝一個或多個Android平臺。平臺包括了庫文件和模擬器。

在Eclipse中打開Android SDK and AVD Manager，該管理器被用來管理應用用到的Android SDK的版本和模擬器。

選擇Window?>?Android SDK and AVD Manager，如圖5所示：

圖5. Android配置的菜單項

安裝運行應用所需版本的Android SDK平臺。

這一示例應用會用到GPS定位服務，因此你應該選擇并安裝一個基于Google API的平臺。例如，選擇Google APIs by Google Inc., Android API 8, revision 2，如圖6所示。如果你沒有使用GPS的話，那么可以安裝列在 Android Repository這一分類下的平臺。

對于Windows上的安裝來說，選擇Google USB Driver包來提供對連接Android電話的支持。

選擇Install Selected。

圖6.?Android SDK and AVD? Manager

接受每個包的許可協議，然后選擇Install，如圖7所示：

圖7. 要安裝的Android包

管理器會下載和安裝選中的包。

創建一個虛擬的Android設備

Android SDK and AVD Manager還被用來創建和管理應用用到的模擬器實例。

從Virtual Devices頁面中選擇New…來創建一個新的AVD，如圖8所示，輸入一個名稱（name）、目標（target）、SD卡大小（SD card size）和HVGA皮膚（skin）：

圖8. 創建一個新的AVD

點擊Create AVD按鈕。

下載PhoneGap SDK

PhoneGap是一個開源的混合移動應用框架，支持多種平臺，其中包括了Android、iOS、Blackberry、Palm、Symbian和Windows Phone。有了PhoneGap，你可以很容易地使用標準的web技術（HTML、JavaScript和CSS）來編寫跨平臺的移動應用，以及可以通過JavaScript來訪問諸如加速計和照相機一類的設備功能。請參閱參考資料來獲取所支持功能的信息的鏈接，這些信息提供了PhoneGap的最新細節。

PhoneGap提供了一組JavaScript API，這些API支持訪問許多的設備功能，對于一個典型的web應用來說，這些功能是無法通過移動web瀏覽器來獲得的；其使用一個本地化的包裝器來包裝web應用，從而實現了這一支持。PhoneGap把web應用的代碼和設備瀏覽器的渲染器結合起來，產生一個本地化應用，該應用能夠部署到應用商店中，并且可安裝在設備上。

作為PhoneGap API的功能組成，其支持訪問設備的加速計、音頻和視頻拍攝、相機、指南針、通訊錄、文件、地理定位、網絡、通知和存儲。PhoneGap API文檔（參見參考資料）提供了更多的細節和例子。

在下載了PhoneGap（參見參考資料）之后，你稍后要把代碼拷貝到Android工程中（在“創建一個新的Android工程”一節）。

下載Dojo

Dojo Toolkit是一個開源的JavaScript工具包，旨在加快那些被載入web瀏覽器并在其中運行的網站和應用的開發。

由于移動web瀏覽器的功能不如桌面瀏覽器，因此Dojo包含了一個名為Dojo Mobile的移動版本。其針對移動web瀏覽器進行了優化，提供了許多UI部件和主題，你可以使用它們來為你的移動應用選擇一種風格，模仿本地化應用。

Dojo Mobile的一些重要功能包括：

1. 得益于Dojo Mobile解析器的部件的輕量級加載。

2. 高端iOS和Android設備上的類本地化應用體驗的CSS3動畫和過渡。

3. 包括了iOS和Android觀感的主題。

4. 兼容非CSS3兼容的設備和瀏覽器。

5. 完全聲明式的語法，允許有一個簡單的學習曲線。

6. 一大套部件，在即將發布的Dojo Mobile 1.7中會有更多。

就本文來說，你需要下載Dojo 1.6（參見參考資料）。

創建一個新的Android工程

現在開發環境已經安裝好了，讓我們開始創建一個簡單的Android應用吧。

在Eclipse中選擇File?>?New?>?Other…然后是?Android?>?Android project，你應該會看到如圖9所示的對話框。

圖9. 新的Android工程

如圖9所示，輸入工程名稱（project name），選擇構建目標（build target），然后輸入應用的名稱（application name）、包名稱（package name）和活動名稱（create activity），然后點擊Finish按鈕創建工程。

添加PhoneGap庫

你現在就有了一個簡單的Android應用，在能夠編寫PhoneGap應用之前，需要添加PhoneGap庫。這涉及到了兩個文件：一個是包含了我們的應用調用到的PhoneGap API的JavaScript文件，一個是包含了PhoneGap API的本地化實現的本地化JAR文件。

1. 展開AndroidPhoneGap?工程的樹視圖，如圖10所示：

圖10. 帶有PhoneGap庫的Android工程

2. 創建目錄 \assets\www，如果 \libs不存在的話也創建該目錄。

3. 解壓PhoneGap的下載文件，并找到Android子目錄的位置。

4. 把三個PhoneGap庫文件從Android子目錄拷貝到下面的Eclipse工程文件夾中：

　　4.1. 把phonegap-1.0.0.jar復制到\libs\phonegap-1.0.0.jar
??? 　4.2. 把phonegap-1.0.0.js復制到\assets\www\phonegap-1.0.0.js
?????? 4.3. 把xml/plugins.xml復制到\res\xml\plugins.xml

盡管PhoneGap的JAR文件已經復制到了工程中，你還是需要把它添加到工程的構建路徑中。

1. 選擇Project?>?Properties?>?Java Build? Path?>?Libraries?>?Add JARs…。

2. 瀏覽工程，找到phonegap-1.0.0.jar并把它添加進來，如圖11所示：

圖11. 添加PhoneGap的JAR文件

最后一個準備讓示例Android應用使用PhoneGap的步驟是修改App.java，因為PhoneGap應用是使用HTML和JavaScript來編寫的，因此你需要修改App.java，使用loadUrl()來加載HTML文件，如清單2所示。你可以通過雙擊圖10所示的樹視圖中的App.java來編輯它。

清單2. App.java

Package com.ibm.swgs;
import android.os.Bundle;
import com.phonegap.*;
public class App extends DroidGap //Activity
{
??? /** Called when the activity is first created. */
??? @Override
??? public void onCreate(Bundle savedInstanceState)
??? {
??????? super.onCreate(savedInstanceState);
??????? //setContentView(R.layout.main);
??????? super.loadUrl("file:///android_asset/www/index.html");
??? }
}?

編寫PhoneGap應用

現在已經做好了編寫PhoneGap應用的準備了，對于Android來說，assets目錄下的文件要使用file:///android_asset來引用，如清單2的loadUrl()中指定的那樣，你需要在assets/www下創建一個index.html文件。

在創建了index.html之后，輸入下面的清單3中的內容。

清單3. index.html

< !DOCTYPE HTML>
< html>
< head>
< title>PhoneGap< /title>
< script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js" kesrc="phonegap-1.0.0.js">< /script>
< /head>
< body οnlοad='document.addEventListener("deviceready", deviceInfo, false);'>
< script>
function deviceInfo() {
??? document.write("< h1>This is Phonegap 1.0.0 running on "+device.platform+"?
??? "+device.version+"!< /h1>");
}
< /script>
< /body>
< /html>

按順序對index.html做一下簡單的解釋，在調用任何的PhoneGap API之前，我們必須等待deviceready事件，該事件表明PhoneGap的本地化部分已經初始化并做好了準備。在清單3中，onload回調注冊了deviceready事件，在該事件觸發時，我們輸出設備的OS和版本。

由于PhoneGap使用了有權限保護的本地化功能，因此你需要修改AndroidManifest.xml來加入這些uses-permission標簽；你還需要指定support-screens標簽、android:configChanges 屬性和com.phonegap.DroidGap這一activity標簽，如清單4所示。

清單4. AndroidManifest.xml

< ?xml version="1.0" encoding="utf-8"?>
< manifest xmlns:android="http://schemas.android.com/apk/res/android"
?? package="com.ibm.swgs"
?? android:versionCode="1"
?? android:versionName="1.0">
< supports-screens
???? android:largeScreens="true"
???? android:normalScreens="true"
???? android:smallScreens="true"
???? android:resizeable="true"
???? android:anyDensity="true"
?/>
?< 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.INTERNET" />
?< uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
< application android:icon="@drawable/icon" android:label="@string/app_name">
?? < activity android:name=".App"
?????? android:label="@string/app_name"
?????? android:configChanges="orientation|keyboardHidden">
???? < intent-filter>
?????? < action android:name="android.intent.action.MAIN" />
?????? < category android:name="android.intent.category.LAUNCHER" />
???? < /intent-filter>
?? < /activity>
?? < activity android:name="com.phonegap.DroidGap" android:label="@string/app_name"?
??????? android:configChanges="orientation|keyboardHidden">
???? < intent-filter>
???? < /intent-filter>
?? < /activity>
< /application>
< /manifest>

在Android模擬器中運行應用

現在PhoneGap應用做好了運行的準備了，選擇Run?>?Run? As?>?Android Application，你應該會看到類似圖12的界面。

圖12. Android模擬器

Eclipse自動地構建應用，啟動模擬器，在模擬器中安裝和運行應用。

模擬器可能要花幾分鐘的時間來啟動，若要加快開發速度，讓模擬器保持運行，直到某段開發時間的結束。Eclipse會自動使用正在運行的模擬器而不會啟動一個新的。

在Android電話上運行應用

如果你有一個Android電話的話，你可以在你的設備上運行該PhoneGap應用。不過，在能夠使用你的電話來進行開發之前，你需要打開USB調試，步驟如下：

1. 進入Home界面，選擇Menu。

2. 選擇Settings?>?Applications?>??Development。

3. 啟用USB調試。

4. 你還需要在Android Manifest中聲明應用是可調式的，編輯AndroidManifest.xml，把android:debuggable="true"添加到元素中。

5. 使用USB線來把Android電話連接到你的開發機器上。

6. 運行應用，選擇?Run As?>?Android Application。

　　你會被提示選擇模擬器還是真實的設備作為目標，選擇Android電話，如圖13所示：

　　圖13. 選擇設備

一旦應用被下載并安裝到你的手機上之后，就會被啟動，如圖14所示：

圖14. 運行在設備上的應用

使用Dalvik調試監控服務器（DDMS）

ADT插件包含了一個調試用的Dalvik調試監控服務器（Dalvik Debug Monitor Server，DDMS）透視圖，可用來跟蹤和調試應用的流程，可以與模擬器或是真實設備一起使用。

DDMS可在Eclipse中啟動，選擇Window?>?Open Perspective?>?Other...?>?DDMS，圖15給出了一個例子。

圖15. Eclipse內的DDMS窗口

還可以使用Android SDK的安裝位置上的命令行來啟動DDMS。

1. Windows：C:\android-sdk-windows\tools\ddms.bat?

2. OSX：.../android-sdk-mac-86/tools/ddms

圖16. 獨立的調試器

?通過DDMS，你可以：

1. 查看日志控制臺

2. 顯示設備上的進程的狀態

3. 檢查線程信息

4. 查看某個進程的堆使用情況

5. 強制垃圾回收

6. 跟蹤對象的內存分配

7. 執行方法分析

8. 操作設備的文件系統

9. 執行設備的屏幕捕捉

10. 模擬電話操作

請（在參考資料中）參閱DDMS文檔了解更多信息。

使用Dojo來擴展工程

Dojo是一個JavaScript工具包，為移動應用帶來了幾方面的好處。它提供了模擬本地化移動應用的主題，它帶來的用戶界面（UI）容器和小部件簡化了應用UI的開發。

Dojo的安裝

若要使用Dojo，你需要把它復制到例子工程中。

創建下面的目錄，如圖17所示。

??? 1. \assets\www\libs
??? 2. \assets\www\libs\dojo
??? 3. \assets\www\libs\dojo\dojo
??? 4. \assets\www\libs\dojo\dojox

復制下面的Dojo文件：

??? 1. 把dojox\mobile.js復制到\assets\www\libs\dojo\dojox目錄下
??? 2. 把dojox\mobile目錄復制到\assets\www\libs\dojo\dojox目錄下
??? 3. 把dojo\dojo.js復制到\assets\www\libs\dojo\dojo目錄下

圖17. 加入了Dojo的Android工程

若要加載Dojo，你需要編輯index.html并把清單5中的代碼行加入到< head>段中的phonegap-1.0.0.js這一script標簽之前。

清單5. 把Dojo加入到index.html中

< meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,
minimum-scale=1,user-scalable=no"/>
< link rel="stylesheet" href="libs/dojo/dojox/mobile/themes/android/android.css" kesrc="libs/dojo/dojox/mobile/themes/android/android.css"?
type="text/css" media="screen" title="no title" charset="utf-8">
< script type="text/javascript" src="libs/dojo/dojo/dojo.js" kesrc="libs/dojo/dojo/dojo.js" djConfig="parseOnLoad:true">
< /script>

在phonegap-1.0.0.js這一script標簽之后，加入Dojo Mobile解析器的require語句，如清單6所示。

清單6. 修改index.html以加載移動Dojo

< script type="text/javascript">
? dojo.require("dojox.mobile.parser");
? dojo.require("dojox.mobile");
< /script>?

更新應用

使用一個新的< body>標簽來代替index.html中現有的標簽，這一新的標簽包含了兩個簡單的段，如清單7所示：

清單7. 修改index.html的主體部分內容

< body>
< !-- ACCIDENT TOOLKIT PAGE -->
< div dojoType="dojox.mobile.View" id="accHelp" selected="true">
??? < h1 dojoType="dojox.mobile.Heading">Accident< /h1>
??? < div class="text">If you are in an accident, you should first move to a safe?
??? location. Below are some additional actions you can take:< /div>
??? < ul dojoType="dojox.mobile.RoundRectList">
??????? < li dojoType="dojox.mobile.ListItem"?
??????????? οnclick="window.location='geo:0,0?q=police';">Call the Police< /li>
??????? < li dojoType="dojox.mobile.ListItem"
??????????? οnclick="window.location='geo:0,0?q=towing';">Call for a Tow Truck< /li>
??????? < li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
??????????? onClick="itemClicked();">Exchange Driver Info< /li>
??????? < li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
??????????? onClick="itemClicked();">Record Accident Location< /li>
??????? < li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
??????????? onClick="itemClicked();">Take Photos of Accident< /li>
??? < /ul>
< /div>
< !-- EXCHANGE DRIVER INFO PAGE -->
< div dojoType="dojox.mobile.View" id="accInfo">
??? < h1 dojoType="dojox.mobile.Heading" back="Accident" moveTo="accHelp"
??????? onClick="console.log('Going back');">Driver< /h1>
??? < h2 dojoType="dojox.mobile.RoundRectCategory">Other Driver Info< /h2>
< /div>
< /body>

如清單8所示，在最后的一個< div>標簽之后加入一個簡單的JavaScript函數itemClicked()，用來向控制臺寫入日志。

清單8. Onclick處理程序

< script>
function itemClicked() {
? console.log("itemClicked()");
}
< /script>

在模擬器上運行

在工程上點擊右鍵，選擇Run as?>?Android Application，把該應用當成Android應用來運行。

圖18. 運行在模擬器上的應用

Dojo應用中的每個界面都由一個聲明為 dojoType='dojox.mobile.View'的div元素來定義，如清單9所示。最初的界面由屬性selected='true'來標識。

界面的標題由< h1 dojoType='dojox.mobile.Heading'>標簽來定義。

清單9. 定義界面和標題

< div dojoType="dojox.mobile.View" id="accHelp" selected="true">
??? < h1 dojoType="dojox.mobile.Heading">Accident< /h1>
< /div>

可以注意到最后三個列表項末端的>符號，這是加載另一個Dojo界面的指示器。

帶有dojoType='dojox.mobile.ListItem'的列表項標簽被用來顯示項目列表，列表可被選擇，如清單10所示。其被渲染成一個本地化的選擇列表。moveTo屬性指定了哪一個div被顯示，transition屬性則指明了其移入視圖中的方式。

清單10. 列表項加載新的界面

< li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide"
??? onClick="itemClicked();">Exchange Driver Info< /li>

選中?Exchange Driver Info，該操作隱藏當前的div并顯示id='accInfo'的目標div。你應該會看到Driver界面滑入視圖中，如圖19所示。

圖19. Driver的信息界面

列表項目的作用不僅是加載其他界面，例如，onclick處理程序可用來顯示Google地圖，搜索最近的警察局，清單11給出了代碼。

若要返回到之前的界面中，選擇標題中的Accident按鈕。

清單11. 加載Google地圖的列表項

< li dojoType="dojox.mobile.ListItem"?
??? οnclick="window.location='geo:0,0?q=police';">Call the Police< /li>

許多的移動設備都支持geo:協議，通過加載geo:lat,lng?q=query格式的URI，本地化的Google地圖服務會被顯示出來。

在模擬器上選擇Call the Police，在操作會顯示一幅最近警察局的地圖，如圖20所示：

圖20. 搜索最近的警察局

你的位置可能會有所不同，這取決于在DDMSD Emulator Control中輸入的經度和維度，圖21給出了位置的設定。

圖21. DDMS中的位置設定

在設備上運行

如果你有一個已經連接好的Android電話的話，按照“在Android電話上運行應用”一節中的描述來在你的設備上運行該應用。如圖22所示，界面看起來類似模擬器上的那些。警察局的搜索應該是返回一個臨近你的當前位置的警察局。

圖22. 運行在設備上的應用

結束語

在本文中，你了解到了如何通過整合PhoneGap和Mobile Dojo來快速地創建一個Android版本的混合移動應用，該應用的外觀和行為都類似典型的Android應用。你能夠很快地編寫出這樣的應用，因為我們使用的是HTML和JavaScript而不是Java。鑒于web代碼是跨所有的移動操作系統保持不變的，因此只需要稍微花一點精力，就能夠為iOS和Blackberry構建這樣的一個混合應用。

請繼續關注這一系列的第2部分內容，該部分談及的是使用Dojo和PhoneGap來編寫一個移動保險應用。

參考： (1)(2)

總結

以上是生活随笔為你收集整理的在Android上应用PhoneGap和Dojo Mobile的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： USB over Network通过本地
下一篇： MySQL 8.0 新特性之哈希连接（H