原文地址:Mobile application development, Part 1: PhoneGap and Dojo Mobile on Android
ps:由于原文发布于2011-9-13。时间较早。而大部分软件,框架都有很大更新和变化。我会将原文中发生变化的部分修改成最新的。
在上一篇中我们做到了模拟器调试,接下来是真机调试。
如果你手头上有android设备,你可以在你的设备上运行PhoneGap应用。在你开始之前,你需要开启USB debugging,步骤如下:
-
在你的设备上选择 设置>应用程序>开发>勾选USB调试
-
还要在应用中声明启用调试。在AndroidManifest.xml文件中添加android:debuggable="true" 到<application> 元素中。
-
链接你的设备和开发电脑。
-
选择Run As > Android Application.
你将被提示在模拟器和设备中选择一个作为调试目标。选择设备,如下图:
在你的设备上安装并运行程序。
================================================================
使用Dalvik Debug Monitor Server (DDMS)
ADT插件包含一个Dalvik Debug Monitor Server (DDMS)视图用来调试。DDMS可以用来追踪和调试应用运行(包含模拟器调试和设备调试)。
启用DDMS 视图很简单,选择Window > Open Perspective > Other... > DDMS.
通过DDMS ,你可以:
-
查看控制台记录
-
显示设备的进程状态
-
检查线程信息
-
查看进程使用堆的情况
-
强制垃圾回收
-
跟踪对象内存分配
-
查看方法的性能
-
和设备的文件系统一起工作
-
设备的屏幕捕捉
-
模拟设备的运行
================================================================
用Dojo扩展项目
Dojo是一个javascript工具包为手机应用提供了许多利器。它提供的主题可以使应用更像本地应用,它还提供UI(包含控件来简化应用UI开发)
安装Dojo
为了使用Dojo ,你需要复制一些文件到你的项目中去
建立如下目录
复制如下文件
-
dojox\mobile.js 到 \assets\www\libs\dojo\dojox 目录下
-
dojox\mobile 文件夹 到 \assets\www\libs\dojo\dojox 目录下
-
dojo\dojo.js 到 \assets\www\libs\dojo\dojo 目录下
此时你的项目目录看起来应该如下:
你需要编辑index.html,在<head>标签包含如下代码,来加载Dojo
<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,需包含如下标签
<script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
在cordova-2.0.0.js标签后面,包含下面的声明
<script type="text/javascript">
dojo.require("dojox.mobile.parser");
dojo.require("dojox.mobile");
</script>
更新我们的应用程序
将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>
<script>
function itemClicked() {
console.log("itemClicked()");
}
</script>
</body>
又到了见证奇迹的时刻,Run as > Android Application.
O(∩_∩)O~
下面来解释下Dojo的工作方式:
在Dojo应用里每一屏是通过一个带有dojoType='dojox.mobile.View'属性的div标签定义。初始屏还要加上一个属性selected='true'。
屏幕的标题通过<h1 dojoType='dojox.mobile.Heading'>标签定义。
最简单的一屏定义如下:
<div dojoType="dojox.mobile.View" id="accHelp" selected="true">
<h1 dojoType="dojox.mobile.Heading">Accident</h1>
</div>
注意到上一张截图中最后三个列表项带有 >符号。暗示点击后会加载另一屏。
<li>标签加上dojoType='dojox.mobile.ListItem'属性用来显示一个列表,其中的列表项可以被选择。如下所示:
<li dojoType="dojox.mobile.ListItem" moveTo="accInfo" transition="slide" onClick="itemClicked();">Exchange Driver Info</li>
其中 moveto 属性指定要显示的div,tansition 属性指定如何切换到下一个视图。
列表项不仅可以被用来加载其他屏。例如:onclick 属性可以用来显示搜索最近的警局的谷歌地图。如下代码:
<li dojoType="dojox.mobile.ListItem" onclick="window.location='geo:0,0?q=police';">Call the Police</li>
通过选择Accident按钮来返回前一屏。
许多手机设备支持geo:协议。通过加载一个URI 例如:geo:lat,lng?q=query,本地的谷歌地图将会显示
~~~~(>_<)~~~~
很遗憾,这一步我还没做出来。Logcat显示发生一个错误,暂时还没找到解决方案。希望大家可以帮到我。
幸好,这是文章的最后一步了。终于该写结语了:
结语:
通过本文,你学习了如何结合PhoneGap和Mobile Dojo来快速开发一个混合应用。我们的应用看起来,用起来很像一个android应用。你可以很快的写出一个应用因为我们用的是html和javascript而不是java。考虑到web 技术在所有的手机操作系统上可以保持一致,所以用最少的工作我们就可以开发ios和黑莓的应用。
================================================================
资源:
DDMS如何与调试器交互
Android开发者网站上DDMS文档
PhoneGap文档
Dojo文档
从Dojo Mobile 1.6 开始 展示了如何在你的应用里包含并使用Dojo Mobile 小工具和组件。学习如何使用PhoneGap打包你的网络应用为本地应用。
如果你在按照上述步骤操作过程中遇到任何问题,欢迎和我交流,共同进步。
翻译的不好,真诚希望得到大家的指正。
分享到:
相关推荐
使用指南:PhoneGap的CordovaWebView组件在Android原生项目中使用. 1.下载phonegap2.0, 1.1 从解压文件中“phonegap-phonegap-2dbbdab\lib\android”中可以看到以下文件: cordova-2.0.0.jar、cordova-2.0.0.js和...
PhoneGap+jQueryMobile开发Android应用实例,搭建开发环境
用PhoneGap+jQueryMobile开发Android应用实例,很好的android开发学习教材。
PhoneGap是一个自由开放源码的开发工具和框架,允许利用HTML + JavaScript + CSS的强大功能在多个手机平台上开发程序。本人介绍了该平台的一些基本特性和开发程序需要的知识,以帮助大家快速入手移动开发。 详细可...
使用jQuery Mobile + PhoneGap 开发Android应用程序
该源码是使用phonegap加jquery mobile开发基于html5 css3的应用的项目例子。可以很好的来学校jquery mobile。
android+Phonegap开发环境搭建android+Phonegap开发环境搭建android+Phonegap开发环境搭建android+Phonegap开发环境搭建
它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。PhoneGap是...
PhoneGap是一款开源的手机应用开发平台,它仅仅只用HTML和JavaScript语言就可以制作出能在多个移动设备上运行的应用。PhoneGap将移动设备本身提供的复杂的API进行了抽象和简化,提供了一系列丰富的API供开发者调用,...
它使开发者能够利用iPhone,Android,Palm,Symbian,WP,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。 下面...
phonegap开发中JS与Android之间的交互
它使开发者能够利用iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。
已经装eclipse,android sdk及adt的安装和配置。 1.进入eclipse界面,新建android工程 new > android project 2.该工程目录下建立两个文档 /libs 和 /assets/www 3.把phonegap中android目录下的cordova-1.7.0.js...
PhoneGap类库使用入门英文电子书 PhoneGap is a growing and leading open-source mobile web apps development framework that lets developers build JavaScript and ...
PhoneGap+Jquery mobile,完整开发代码.
没分下载东西了,只好卖我的经典代码了,以下是我通过html5做的多个跨平台应用的demo框架:使用 phonegap 开发android应用框架结构 前台页面用jquery mobile开发,后台用axis2开发实现webservice,前后台用js发送...
Android_App 使用 phonegap 和 android studio 为 android 开发的第一个应用程序
深入PhoneGap跨平台开发框架的内部,探索PhoneGap框架的架构、实现、细节。
EDT Mobile Runtime 主要包含两大模块: Dojo mobile widgets & PhoneGap mobile widgets a. org.eclipse.edt.rui.dojo.mobile.nightly: provides dojo egl mobile widgets support.(使用请参考sample) b. org....
EDT Mobile Runtime 主要包含两大模块: Dojo mobile widgets & PhoneGap mobile widgets a. org.eclipse.edt.rui.dojo.mobile.nightly: provides dojo egl mobile widgets support.(使用请参考sample) b. org....