【技术直通车】使用Dreamweaver 5.5 + JQuery + PhoneGap+ArcGIS Javascript API 开发跨平台手机应用程序

0
分享 2016-06-18
Esri为iOS、Android、Windows Phone提供了相应的API,GIS开发者需要针对不同的平台,使用不同的ArcGIS移动API进行同一款移动GIS应用的开发,不仅提高了开发成本,加大了开发难度,也造成了资源、人力的浪费。

那么能不能一次开发就可以应用到各个移动终端呢?虽然现在移动Web应用还没有兴起,但是答案是肯定的:HTML5+JQuery+PhoneGap实现跨平台、跨终端的应用开发,可以让我们只学一种技术来开发一个在所有手机平台、平板电脑、包括各种PC平台都可以运行的Native App!


HTML5+JQuery+PhoneGap到底是何方神圣?
关于HTML5、JQuery、PhoneGap等是什么,网上资料一搜一大把,在此我们不废话,以一两句话带出:
1)HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性(例如<nav>网站导航块和<footer>)。新型的标签有利于搜索引擎和语义分析,同时更好地帮助小屏幕装置和视障人士使用,除此之外,也提供了一些新的功能,比如视频音频用的<video>和<audio>。
2)CSS3是CSS技术的升级版本,CSS3语言开发是朝着模块化发展的。以前的规范作为一个模块实在是太庞大而且比较复杂,所以,把它分解为一些小的模块,更多新的模块也被加入进来。这些模块包括: 盒子模型、列表模块、超链接方式 、语言模块 、背景和边框 、文字特效 、多栏布局等。
3)Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ,它兼容CSS3,还兼容各种浏览器 (IE 6.0+, FF 1.5+, Safari2.0+, Opera 9.0+)。jQuery使用户能更方便地处理HTML documents、events、实现动画效果,并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是,它的文档说明很全,而且各种应用也说得很详细,同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离,也就是说,不用再在html里面插 入一堆js来调用命令了,只需定义id即可。
4)jQuery Mobile 是jQuery 在手机上和平板设备上的版本。jQuery Mobile 不仅会给主流移动平台带来jQuery核心库,而且会发布一个完整统一的jQuery移动UI框架。支持全球主流的移动平台。
5)PhoneGap是一个用基于HTML,CSS和JavaScript的,创建移动跨平台移动应用程序的快速开发平台。它使开发者能够利用 iPhone,Android,Palm,Symbian,WP7,Bada和Blackberry智能手机的核心功能——包括地理定位,加速器,联系 人,声音和振动等,此外PhoneGap拥有丰富的插件,可以以此扩展无限的功能。PhoneGap是免费的,但是它需要特定平台提供的附加软件,例如iPhone的iPhone SDK,Android的Android SDK等,也可以和DW5.5配套开发。
6)使用 Adobe&reg; Dreamweaver&reg; CS5.5 软件中的“多屏幕预览”面板同时为手机、Tablet和 PC 进行设计。使用“媒体查询”为各个设备编写和呈现单独的样式。借助“构件浏览器”快速放入 jQuery 移动用户界面构件。
我们开始吧,跨平台移动GIS开发!
1、安装完Dreamweaver CS5.5后,开发环境也就搭建完成了,我们新建一个站点,打开site/New Site…,输入站点名称,指定站点路径;
2、新建 JQuery+PhoneGap 的应用;
打开File/New,选择Page from Sample->Mobile Starters->JQuery Mobile(PhoneGap),DocType选择HTML5。点击“创建”,Dreamweaver自动帮你创建了一个应用开发的模版。把这个模版保存在刚才创建的站点中,并命名为index.html。移动应用的模板就创建完成了,看看创建完的模板是什么样吧。


已经可以在移动设备中看到应用的外观了,代码与设计视图如下:



可以看到JQuery Mobile通过标签中添加 data-role属性来实现移动UI设计,<div data-role=”page”id=”page”>代表移动设备中的一屏,可以看到在一个html页面中包含了4个page,即可以在移动设备中切换4个界面。
3、实现GIS的地图绘制;
移动GIS应用的模板创建完成了,接下来加入GIS的功能,去掉page2、page3和page4,在page的content中加入用于地图显示的div,在footer中添加3个按钮用于绘制点、线和面,代码如下:



界面设计完成后,在页面中导入arcgisjavascript API,完成相应的初始化和功能代码,就完成了一个简单的GIS应用了。 
 
4、构建跨平台的native app。
使用PhoneGap可以将刚刚创建的GIS应用包装成不同移动平台的native app应用,好在dreamweaver已经集成了PhoneGap,只需要简单的几步就可以生成native app应用了。以Android平台为例,打开site/MobileApplications/Build and Emulate/Android窗口,Dreamweaver自动生成Android工程,并把应用打包成可以在真实手机上安装的安装包保存在桌面上;
可以在桌面的com.esrichina.gis_mobile_Android/bin目录下找到 “gis_mobile-debug.apk”文件,这个就是安装包了。你可以把你安卓平台的手机连接电脑的USB口,把这个文件拷贝到你手机的SD卡里,就可以点击安装。
需要说明的是:
这个文件是debug模式的文件,只能通过SD卡安装在自己手机上自娱自乐,如果需要上传到应用商店,你还需要给这个文件签名。目前Dreamweaver还无法实现自动签名,但是Dreamweaver生成的安装包是支持Eclipse导入的。你可以用Eclipse把安装包导入,重新导出一个签名的安装包即可。 现在就可以在模拟器上来使用我们刚刚创建的应用了,如下图所示:


注:手工安装apk到模拟器的方法

1. 把生成的apk拷贝到 D:\ProgramFiles\Android\android-sdk\platform-tools 目录下。
2. 点击开始/运行,输入CMD进入DOS,一路CD到D:\ProgramFiles\Android\android-sdk\platform-tools目录。 3. 输入Adb install + 你的应用名称.apk即可。



文章来源:http://blog.csdn.net/arcgis_all/article/details/8233108

0 个评论

要回复文章请先登录注册