phonegap
人们无所不在,人们正在使用移动设备与家人和朋友保持联系,拍照以发布在社交网站上,查找餐厅的位置或查看最新新闻标题。 移动设备有许多不同的形状和样式。 手机运行各种不同的操作系统,例如Apple的iOS,Google的Android和Research In Motion的Blackberry。 有些具有大型显示器和物理键盘,并且可以在3G,4G或WiFi网络上运行。 移动电话可能还具有用于加速度,位置甚至付款的传感器。 其中一些设备甚至都不是电话。 它们是具有更大显示屏和纯数据网络连接的平板电脑。
尽管存在差异,但移动设备的相似之处在于它们都运行移动应用程序。 移动应用程序可以分为两种类型:
-
本机应用
-
本机应用程序安装在设备上,是使用软件开发工具包(SDK)创建并通过应用程序商店分发的二进制可执行程序。 每个移动操作系统都有一个SDK,很遗憾,它与其他操作系统的SDK不同。
例如,要为iOS创建应用程序,必须下载并安装iOS SDK和开发工具,并且必须使用Objective-C编程语言编写应用程序代码。 使用Android SDK开发并使用Java编写的Android应用程序。 因此,要创建移动应用程序,您必须学习每个SDK并使用支持的编程语言编写应用程序。 每个平台的SDK都有一个陡峭的学习曲线,因此移动应用程序开发非常复杂。
网络应用
-
加载到移动Web浏览器中的Web应用程序与本机应用程序不同,因为它们使用Web技术(HTML,JavaScript和CSS)进行编码,而与设备的操作系统无关。 无需为每种设备学习不同的编程语言。 HTML和JavaScript是Web开发人员所熟悉的,因为它们用于创建加载到桌面浏览器中的网页。 在大多数情况下,移动浏览器可以呈现相同的网页,但是网站通常会提供内容较少且加载速度更快的移动版本(由于屏幕尺寸较小且网络连接速度较慢)。
要“运行” Web应用程序,用户需要在移动Web浏览器中输入URL。 这将加载网页,这是Web应用程序的入口点。 Web应用程序不通过应用程序商店分发; 它们只是可以包含在其他网页,电子邮件甚至硬拷贝中的链接。
本机应用程序和Web应用程序都有优点和缺点,并且已经争论了哪些更好。 为了解决这一难题,新的混合应用程序尝试将本机应用程序和Web应用程序的优点结合起来。
混合应用程序使用Web技术(例如Web应用程序)进行编程,但打包为本机应用程序。 可以使用许多开发人员熟悉的编程语言为多个设备操作系统编写一次混合应用程序。 由于混合应用程序实际上是本机应用程序,因此您可以从JavaScript访问Web应用程序当前不可用的设备功能。 混合应用程序也可以像本地应用程序一样使用应用程序商店进行分发和安装。
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开发工具包(ADT)插件
- PhoneGap SDK(V1.0.0或更高版本)
- Dojo工具包(V1.6或更高版本)
请参阅相关信息的链接,下载该软件。
设置您的开发环境
要设置开发环境,您需要执行以下步骤:
- 安装JDK和Eclipse或Rational Application Developer 。
- 下载Android SDK 。
- 下载并安装用于Eclipse的ADT插件 。
- 为Android配置Eclipse 。
- 安装所需的Android平台 。
- 创建一个新的Android虚拟设备(AVD) 。
- 下载PhoneGap SDK 。
- 下载Dojo工具包 。
安装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 Feature Pack。 要使用RAD,您将需要版本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,则需要3.6版或更高版本。 由于您将在本系列的后面部分中编写Web服务,因此请下载Java EE开发人员的Eclipse IDE(请参阅参考资料 )。 但是,如果您只想编写Android应用程序,则可以使用Eclipse IDE for Java Developers。
Eclipse和RAD非常相似。 在本文中,当提到Eclipse时,它意味着Eclipse或RAD。 但是,屏幕图形来自Windows上运行的RAD。
下载Android SDK
必须使用Android SDK(请参阅参考资料 )来制作Android应用程序。 它是用于编译,构建,仿真和调试Android应用程序的命令行程序的集合。
如果要在Windows上安装,则最简单的方法是下载zip软件包并将其解压缩到C:\根目录中。 r12安装程序有几个问题,无法检测到Java或无法将其安装到名称中带有空格的目录中。
下载并安装ADT插件
Android提供了一个Eclipse插件,可以大大简化应用程序开发。 它与Eclipse集成以提供快速的开发环境。 要安装Android开发工具包(ADT)插件(请参阅参考资料 ),请按照以下步骤操作:
- 在Eclipse中,选择菜单项帮助 > 安装新软件… > 添加…。
- 输入软件的名称和URL位置,如图1所示。名称:Android ADT Eclipse插件; 位置:https://dl-ssl.google.com/android/eclipse/。
图1.安装Android ADT插件
- 选择Developer Tools ,验证是否已选中所有复选框,如图1所示,然后选择Next 。
- 如图2所示,选择Next接受许可协议并安装项目。
图2.安装细节
安装完成后,重新启动Eclipse。
为Android配置Eclipse
要为Android配置Eclipse,请显示“偏好设置”对话框。
- 对于Windows,选择“ 窗口” > “首选项” >“ Android” 。
- 对于OSX,选择Eclipse > 首选项 > Android 。
对于SDK的位置,选择Browse ... ,然后选择Android SDK所在的目录,如图3所示:
图3.指定Eclipse的SDK位置
选择“ 应用”,然后选择“ 确定” 。
将Android LogCat视图添加到Eclipse IDE,以帮助调试:
- 窗口 > 显示视图 > 其他…
- Android > LogCat
图4. LogCat视图
安装Android平台
要针对特定版本编译Android应用程序,必须下载并安装一个或多个Android平台。 该平台包括库文件和仿真器。
在Eclipse中,打开Android SDK和AVD Manager,用于管理与您的应用程序一起使用的Android SDK版本和仿真器。
选择Window > Android SDK和AVD Manager ,如图5所示:
图5. Android配置的菜单项
安装要在其上运行应用程序的Android版本所需的SDK平台。
该示例应用程序将使用GPS定位服务,因此您应该选择并安装基于Google API的平台。 例如,选择Google Inc.提供的Google API,Android API 8,修订版2 ,如图6所示。如果您未使用GPS,则可以安装Android Repository类别下列出的平台。
对于Windows安装,请选择Google USB驱动程序包以提供连接Android手机的支持。
选择“ 安装选定项” 。
图6. Android SDK和AVD Manager
接受每个软件包的许可协议,然后选择Install ,如图7所示:
图7.要安装的Android软件包
管理器将下载并安装选定的软件包。
创建一个虚拟Android设备
Android SDK和AVD Manager也用于创建和管理要与您的应用程序一起使用的仿真器实例。
在“虚拟设备”页面上,选择“ 新建...”以创建新的AVD。 如图8所示,输入名称,目标,SD卡大小和HVGA外观:
图8.创建一个新的AVD
选择创建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的一些关键功能包括:
- 由于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.新的Android项目
如图9所示,输入项目名称,选择构建目标,然后输入应用程序名称,程序包名称和活动名称。 单击完成以创建项目。
添加PhoneGap库
您现在有了一个简单的Android应用程序。 在编写PhoneGap应用程序之前,您需要添加PhoneGap库。 有两个文件:一个JavaScript文件(包含我们的应用程序调用的PhoneGap API)和一个本机JAR文件,其中包含PhoneGap API的本机实现。
- 展开AndroidPhoneGap项目树视图,如图10所示:
图10.带有PhoneGap库的Android项目
- 创建目录\ assets \ www。 如果目录\ libs还不存在,则还要创建它。
- 解压缩PhoneGap下载文件并找到Android子目录。
- 将三个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文件复制到项目中,您也需要将其添加到项目的构建路径中。
- 选择项目 > 属性 > Java构建路径 > 库 > 添加JAR… 。
- 通过在项目中导航到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,使用file:/// android_asset引用资产目录下的文件。 如清单2的loadUrl()
中所指定,您需要在asset / 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 API之前,我们必须等待deviceready
事件,该事件表明PhoneGap的本机部分已经初始化并准备就绪。 在清单3中, onload
回调注册了deviceready
。 触发时,我们会写出设备的操作系统和版本。
由于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调试,如下所示:
- 转到主屏幕,然后选择菜单 。
- 选择设置 > 应用程序 > 开发 。
- 启用USB调试。
- 您还需要在Android Manifest中将应用程序声明为可调试的。 编辑AndroidManifest.xml文件,将
android:debuggable="true"
到<application>
元素。 - 使用USB将Android手机连接到开发计算机。
- 要运行该应用程序,请选择“运行方式” >“ Android应用程序” 。
系统将提示您在仿真器或真实设备之间进行选择。 选择Android手机,如图13所示:
图13.选择设备
一旦将应用程序下载并安装到手机上,便会启动它,如图14所示:
图14.设备上运行的应用程序
使用Dalvik调试监视器服务器(DDMS)
ADT插件包括Dalvik调试监视器服务器(DDMS)透视图,用于调试。 DDMS可用于跟踪和调试应用程序流,可与仿真器或真实设备一起使用。
可以从Eclipse中通过选择Window > Open Perspective > Other ... > DDMS来启动DDMS透视图。 图15显示了一个示例。
图15. Eclipse中的DDMS窗口
也可以使用命令行从Android SDK的位置启动DDMS。
- 对于Windows:C:\ android-sdk-windows \ tools \ ddms.bat
- 对于OSX:... / android-sdk-mac-86 / tools / ddms
图16.独立调试器
在DDMS中,您可以:
- 查看日志控制台
- 显示设备上进程的状态
- 检查线程信息
- 查看进程的堆使用情况
- 强制垃圾收集
- 跟踪对象的内存分配
- 执行方法分析
- 使用设备的文件系统
- 执行设备的屏幕截图
- 模拟电话操作
有关更多信息,请参见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>
更新应用程序
替换现有<body>
用新index.html中标签<body>
标签,其中包含两个简单的<div>部分,如清单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"
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应用程序,将应用程序作为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驱动程序信息” ,它将隐藏当前div
并显示带有id='accInfo'
的目标div。 您应该看到Driver屏幕滑入视图,如图19所示。
图19.驱动程序信息屏幕
列表项可以用于加载其他屏幕。 例如, onclick
处理程序可用于显示带有搜索最近的警察局的Google地图。 清单11显示了代码。
要返回上一屏幕,请选择标题中的“ 事故”按钮。
清单11.加载Google地图的列表项
<li dojoType="dojox.mobile.ListItem"
onclick="window.location='geo:0,0?q=police';">Call the Police</li>
许多移动设备支持geo:协议。 通过加载格式为geo:lat,lng?q=query
的URI,将显示本机Google地图服务。
选择在模拟器上呼叫警察 ,这将显示最近的警察局的地图,如图20所示:
图20.搜索最近的警察局
您的位置可能会有所不同,具体取决于在DDMS中的“仿真器控制”下输入的纬度和经度。 图21显示了位置设置。
图21. DDMS中的位置设置
在设备上运行
如果您已连接Android手机,请按照“ 在Android手机上运行应用程序 ”部分中的说明在设备上运行该应用程序 。 如图22所示,屏幕看起来类似于仿真器上的屏幕。 警察搜索应返回您当前位置附近的警察局。
图22.设备上运行的应用程序
结论
在本文中,您学习了如何结合PhoneGap和Mobile Dojo来快速创建外观和行为类似于典型Android应用程序的Android混合移动应用程序。 您可以快速编写它,因为我们使用HTML和JavaScript而不是Java。 鉴于所有移动操作系统上的网络代码都相同,因此可以轻松地为iOS和Blackberry轻松构建此混合应用程序。
请继续关注本系列的第2部分,该部分将涉及使用Dojo和PhoneGap编写移动保险应用程序。
翻译自: https://www.ibm.com/developerworks/web/library/wa-mobappdev1/index.html
phonegap