Android 上的 PhoneGap 和 Dojo Mobile-移动端开发-火龙果软件工程

Android上的PhoneGap 和 Dojo Mobile

作者：Bryce Curtis,Gill Woodcock,Todd</ Kaplinger 来自于：博客园发布于 2015-8-14

2287 次浏览

在本系列中，将从创建一个简单移动应用程序开始，并以能够在您的 Android 设备上使用 Web 服务结束。我们将了解如何使用 Eclipse 和 PhoneGap 创建仅使用 HTML 和 JavaScript 的移动混合应用程序。您还将使用 Dojo Mobile 为应用程序提供一种与原生应用类似的感觉。在本文中，将了解如何结合使用 PhoneGap 和 Dojo Mobile，快速为 Android 创建一个外观和行为都类似于典型 Android 应用程序的混合移动应用程序。

简介

无论您走到哪里，都能看到人们使用移动设备与亲朋进行联系，比如照张照片发布到社交网站上，查找饭店地址，或者查看最新的新闻标题。移动设备的外形和款式各式各样。移动电话可以运行各种不同的操作系统，比如 Apple 的 iOS、Google 的 Android 以及 Research In Motion 的 Blackberry。有些移动设备拥有较大的显示屏和物理键盘，可运行于 3G、4G 或 WiFi 网络之上。移动电话可能还有加速、位置甚至付款传感器。有些设备甚至不是电话；它们可能是拥有大显示屏并且只能传输数据的网络连接的平板电脑。

尽管外形上千差万别，但各种移动设备有一个共同点：它们都可以运行移动应用程序。移动应用程序可以划分为两种类型：

原生应用程序

原生应用程序是一些二进制可执行程序，它们安装在设备上，通过软件开发工具包 (SDK) 创建，由应用程序商店分发。每个移动操作系统都有一个 SDK，遗憾的是，每个操作系统的 SDK 都不相同。

例如，要为 iOS 创建一个应用程序，则必须下载并安装 iOS SDK 和开发工具，必须使用 Objective-C 编程语言进行应用程序编码。Android 应用程序通过 Android SDK 开发，使用 Java 语言编写。因此，要创建一个移动应用程序，则必须了解每个 SDK 并使用支持的编程语言编写应用程序。每个平台的 SDK 都有一个陡峭的学习曲线，因此移动应用程序开发非常复杂。

Web 应用程序

Web 应用程序用于载入移动 Web 浏览器，它们与原生应用程序的区别在于：无论设备采用哪种操作系统，它们都通过 Web 技术（HTML、JavaScript 和 CSS）进行编码。没有必要针对每个设备学习不同的编程语言。Web 开发人员对 HTML 和 JavaScript 应该很熟悉，因为经常使用它们创建加载到桌面浏览器中的网页。多数情况下，移动浏览器能呈现相同的网页，但（由于移动设备屏幕较小，网络连接较慢）网站通常提供一个移动版本，该版本内容较少，加载速度更快。

要 “运行” 一个 Web 应用程序，用户可以在移动 Web 浏览器中输入一个 URL。这将载入一个网页，该网页是一个 Web 应用程序的入口点。Web 应用程序不通过应用程序商店分发；它们只是一些链接，可以包含在其他网页、电子邮件甚至硬拷贝中。

原生应用程序和 Web 应用程序都有各自的优缺点，关于哪个更好用的争论很多。为了解决这种争执，开发了一种新的混合应用程序，试图用它来结合原生应用程序和 Web 应用程序的优点。

与 Web 应用程序一样，混合应用程序通过 Web 技术编写，但被打包为原生应用程序。混合应用程序可以通过许多开发人员都熟悉的编程语言编写，只需编写一次即可用于多种设备操作系统。由于混合应用程序确实是原生应用程序，因此用户能从 Web 应用程序当前不可用的 JavaScript 访问设备功能。与原生应用程序一样，混合应用程序也能通过应用程序商店分发和安装。

PhoneGap 是一个流行的混合应用程序构建工具包。它是一个开源移动框架，包含一个 JavaScript API，用于访问加速仪和相机等设备功能。
本文将展示如何使用 PhoneGap 和 Dojo Mobile 工具包开发一个混合移动 Android 应用程序。了解如何使用 Android 模拟器和工具来测试应用程序，查看如何在 Android 设备或平板电脑上运行您的应用程序。

先决条件

本文假定您比较熟悉 Eclipse 开发环境、HTML、JavaScript 和 CSS。本文还需要以下软件：

Windows、OSX 或 Linux 操作系统

Java Development Kit (JDK) 5 或 JDK 6（一个 JRE 不够用）

一个 Eclipse 开发环境，比如 Eclipse Helios V3.6 或其更高版本，或者 IBM Rational Application Developer V8

Android SDK 和平台（r12 或其更高版本）

Eclipse 的 Android Development Toolkit (ADT) 插件

PhoneGap SDK（ V1.0.0 或其更高版本）

Dojo Toolkit（V1.6 或其更高版本）

设置开发环境

要设置开发环境，请执行以下步骤：

安装 JDK 和 Eclipse 或 Rational Application Developer

下载 Android SDK

下载并安装 Eclipse 的 ADT 插件

安装必要的 Android 平台

新建一个 Android Virtual Device (AVD)

配置 Eclipse for Android

下载 PhoneGap SDK

下载 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 的 Web 2.0 Feature Pack。要使用 RAD，您需要 Version 8 或更高版本。RAD 包含 IBM 的 JDK，这是默认设置。但是，这个 JDK 不包含创建和签署 Android 应用程序所需的 Java 包。要更改为使用 Java SE JDK，则需要使用清单 1 中的信息替换 C:/Program Files/IBM/SDP/eclipse.ini（或者您的已安装 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，则需要 Version 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（请参阅参考资料），它是一个命令行程序集合，用于编译、构建、模拟和调试 Android 应用程序。

如果您正在 Windows 上安装应用程序，最简单的方法是下载 zip 包并将其解压到您的 C:\ 根目录。r12 安装程序有两个问题：不能检测到 Java；无法安装到目录名具有空格的位置中。

下载和安装 ADT 插件

Android 提供了一个 Eclipse 插件，这极大地简化了应用程序开发。将 Android 与 Eclipse 集成，可提供一个快速开发环境。要安装 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 平台

要编译 Android 应用程序的一个特定版本，必须下载并安装一个或多个 Android 平台。该平台上提供了库文件和模拟器。

从 Eclipse 中打开 Android SDK and AVD Manager，可使用它来管理您的应用程序使用的 Android SDK 版本和模拟器。

选择 Window > Android SDK and AVD Manager，如图 3 所示：

图 3. Android 配置的菜单项

安装用来运行应用程序的 Android 版本所需的 SDK 平台。

示例应用程序需要使用 GPS 定位服务，因此您应该选择并安装一个基于 Google APIs 的平台。例如，选择 Google APIs by Google Inc., Android API 8, revision 2，如图 4 所示。如果不需要使用 GPS，那么可以安装 Android Repository 类别下列出的平台。

对于 Windows 安装，请选择 Google USB Driver 包，以支持连接到您的 Android 电话。

选择 Install Selected。

图 4. Android SDK and AVD Manager

接受每个包的许可协议，然后选择 Install，如图 5 所示：

图 5. 要安装的 Android 包

Manager 将下载并安装选中的包。

创建虚拟 Android 设备

Android SDK and AVD Manager 还用于创建和管理您的应用程序将使用的模拟器实例。

从 Virtual Devices 页中选择 New… 创建一个新 AVD。如图 6 中所示，输入名称、目标、SD 卡大小和 HVGA 皮肤：

图 6. 新建一个 AVD

选择 Create AVD。

配置 Eclipse for Android

要配置 Eclipse for Android，则需要显示 Preferences 对话框。

1.对于 Windows，请选择 Window > Preferences > Android。

2.对于 OSX，请选择 Eclipse > Preferences > Android。

对于 SDK 位置，请选择 Browse…，然后选择 Android SDK 所在的目录，如图 7 中所示：

图 7. 为 Eclipse 指定 SDK 位置

选择 Apply 和 OK。

将 Android LogCat 视图添加到 Eclipse IDE 以帮助调试：

Window > Show View > Other…
Android > LogCat

图 8. LogCat 视图

下载 PhoneGap SDK

PhoneGap 是一个开源混合移动应用程序框架，支持多个平台，包括 Android、iOS、Blackberry、Palm、Symbian 和 Windows Phone。通过使用 PhoneGap，可以使用标准 Web 技术（HTML、JavaScript 和 CSS）轻松编写跨平台移动应用程序，并从 JavaScript 访问加速仪和相机等设备特性。参见参考资料中的链接了解关于支持特性的信息，该信息提供关于 PhoneGap 的最新细节。

PhoneGap 提供一个 JavaScript APIs 集合，支持典型 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 的一些关键功能包括：

Dojo Mobile 解析器导致的轻量级小部件加载。

CSS3 动画和过渡，用于在高端 iOS 和 Android 设备上创建类似于原生应用程序的体验。

用于 iOS 和 Android 外观的主题。

对非 CSS3 兼容设备和浏览器的兼容性。

完整的声明性语法，支持一个轻松学习曲线。

大量小部件，即将发布的 Dojo Mobile 1.7 还有更多小部件。

对于本文，您需要下载 Dojo 1.6（请参阅参考资料）。

新建一个 Android 项目

现在开发环境已经就绪，下面我们来创建一个简单 Android 应用程序。

从 Eclipse，选择 File > New > Other…，然后选择 Android > Android project。您应该能看到一个如图 9 中所示的对话框。

图 9. New Android project

如图 9 中所示，输入项目名称，选择构建目标，输入应用程序名称、包名称和活动名称。然后单击 Finish 创建项目。

添加 PhoneGap 库

您现在有了一个简单的 Android 应用程序。在编写 PhoneGap 应用程序之前，需要添加 PhoneGap 库。有两个文件：一个 JavaScript 文件，包含我们的应用程序调用的 PhoneGap API；一个本机 JAR 文件，包含 PhoneGap API 的本机实现。

1.展开 AndroidPhoneGap 项目树视图，如图 10 中所示：

图 10. Android 项目和 PhoneGap 库

2.创建目录 \assets\www。如果 \libs 目录不存在，则创建该目录。

3.解压 PhoneGap 下载并定位 Android 子目录。

4.将 Android 使用的三个 PhoneGap 库文件复制到以下 Eclipse 项目文件夹：

将 phonegap-1.0.0.jar 复制到 \libs\phonegap-1.0.0.jar

将 phonegap-1.0.0.js 复制到 \assets\www\phonegap-1.0.0.js

将 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 所示。要编辑 App.java，可以双击树视图中的 App.java，如图 10 中所示。

清单 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，asset 目录下的文件通过 file:///android_asset 引用。根据清单 2 中的 loadUrl() 中的规定，需要在 assets/www 下创建一个 index.html 文件。

创建 index.hml 后，请输入清单 3 中的内容。

清单 3. index.html

<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
</head>
<body onload='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 APIs 之前，我们必须等待 deviceready 事件，它表明 PhoneGap 的本机部分已经被初始化并准备就绪。在清单 3 中，onload 回调 deviceready 。当它触发时，我们写出设备的 OS 和版本。

由于 PhoneGap 使用有权限保护的本机功能，需要修改 AndroidManifest.xml 以包含这些 uses-permission 标记。还需要指定 support-screens 标记、android:configChanges 属性和 com.phonegap.DroidGap 活动标记，如清单 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.切换到主界面并选择 Menu。

2.选择 Settings > Applications > Development。

3.启用 USB debugging。

4.还需要在 Android Manifest 中将应用程序声明为可调试。编辑 AndroidManifest.xml 文件，将 android:debuggable="true" 添加到 <application> 元素。

5.通过 USB 将 Android 电话连接到您的开发机器。

6.要运行应用程序，选择 Run As > Android Application。

系统将提示您选择模拟器还是真实设备作为目标。选择 Android 电话，如图 13 所示：

图 13. 选择设备

应用程序下载并安装到您的电话上之后，它将被启动，如图 14 所示：

图 14. 设备上运行的应用程序

使用 Dalvik Debug Monitor Server (DDMS)

ADT 插件包含一个用于调试的 Dalvik Debug Monitor Server (DDMS) 透视图。DDMS 的用途是跟踪和调试应用程序流，可用于模拟器和真实设备。

DDMS 透视图可以从 Eclipse 启动：选择 Window > Open Perspective > Other... > DDMS。图 15 中展示了一个示例。

图 15. Eclipse 中的 DDMS 窗口

DDMS 也可以使用命令行从 Android SDK 的位置启动。

对于 Windows：C:\android-sdk-windows\tools\ddms.bat

对于 OSX：.../android-sdk-mac-86/tools/ddms

图 16. 独立调试器

DDMS 提供以下功能：

查看日志控制台

显示设备上的进程的状态

检查线程信息

查看进程的堆使用情况

强制执行垃圾收集

跟踪对象的内存分配

执行方法配置 (profiling)

处理设备的文件系统

执行设备的屏幕截图

模拟电话操作

参见参考资料中的 DDMS 文档，了解有关的更多信息。

使用 Dojo 扩展项目

Dojo 是一个 JavaScript 工具包，可以向移动应用程序提供几个好处。它提供一些主题来模拟本机移动应用程序，它还拥有一些用户界面 (UI) 容器和小部件，可用于简化应用程序 UI 开发。

针对 Dojo 的设置

要使用 Dojo，需要将其复制到示例项目中。

创建以下目录，如图 17 所示。

\assets\www\libs
\assets\www\libs\dojo
\assets\www\libs\dojo\dojo
\assets\www\libs\dojo\dojox

复制以下 Dojo 文件：

从 dojox\mobile.js 复制到 \assets\www\libs\dojo\dojox 目录

从 dojox\mobile 目录复制到 \assets\www\libs\dojo\dojox 目录

从 dojo\dojo.js 复制到 \assets\www\libs\dojo\dojo 目录

图 17. 添加了 Dojo 的 Android 项目

要加载 Dojo，需要编辑 index.html，包含 phonegap-1.0.0.js 脚本标记之前的 <head> 区域中的行，如清单 5 所示。

清单 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" 
type="text/css" media="screen" title="no title" charset="utf-8">
<script type="text/javascript" src="libs/dojo/dojo/dojo.js" djConfig="parseOnLoad:true">
</script>

在为 phonegap-1.0.0.js 添加脚本标记之后，为 Dojo 移动解析器提供一些 require 语句，如清单 6 所示。

清单 6. 修改 index.html 以加载移动 Dojo

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

更新应用程序

将 index.html 中的现有 <body> 标记替换为新标记 <body>，该标记包含两个简单 <div> 部分，如清单 7 所示：

清单 7. 修改 index.html 的 body 标记

<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" 
            onclick="window.location='geo:0,0?q=police';">Call the Police</li>
        <li dojoType="dojox.mobile.ListItem"
            onclick="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>

在模拟器上运行

要应用程序作为 Android 应用程序运行，可以右键单击项目并选择 Run as > Android Application。

图 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" 
    onclick="window.location='geo:0,0?q=police';">Call the Police</li>

许多移动设备支持 geo: protocol。通过加载形式为 geo:lat,lng?q=query 的 URI，显示本机 Google 地图服务。

选择模拟器上的 Call the Police 显示最近的警察局的地图，如图 20 所示：

图 20. 搜索最近的警察局

根据 DDMS 中的 Emulator Control 下输入的经度和纬度，我们的位置可能有所不同。图 21 显示了一个位置设置。

图 21. DDMS 中的位置设置

在设备上运行

如果您连接了一个 Android 电话，按照 “在 Android 电话上运行应用程序” 小节中的描述在您的设备上运行应用程序。如图 22 所示，这些屏幕将类似于模拟器上的那些屏幕。警察局搜索将返回您的当前位置附近的警察局。

图 22. 设备上运行的应用程序

结束语

在本文中，了解了如何结合使用 PhoneGap 和 Mobile Dojo，为 Android 创建一个外观和行为都与典型 Android 应用程序类似的混合移动应用程序。由于我们使用的是 HTML 和 JavaScript，而不是 Java，因此我们可以快速编写应用程序。鉴于 Web 代码在所有移动操作系统上是相同的，因此只需付出极少的努力，即可为 iOS 和 Blackberry 轻松构建这个混合应用程序。

请继续关注本系列第 2 部分，该部分将展示如何使用 Dojo 和 PhoneGap 编写一个移动保险应用程序。

2287 次浏览