PhoneGap移动开发的“瑞士军刀” - Esri中国

needlessoybeanMobile - Wireless

Dec 10, 2013 (3 years and 7 months ago)

58 views

PhoneGap移动开发的“瑞士军刀”
Esri中国信息技术有限公司 韩兴刚
PhoneGap简介
PhoneGap
一个开源的开发框架;
使用HTML,CSS和JavaScript来构建跨平台的的移动应用程序;
使开发者能够利用iPhone,Android,Palm,Symbian,
Blackberry,Windows Phone和Beda智能手机的核心功能——
包括地理定位,加速器,联系人,声音和振动等。
最新版:2.0.0
PhoneGap-Cordova
PhoneGap
ArcGIS与PhoneGap移动开发揭秘
ArcGIS与PhoneGap
ArcGIS API for Javascript + PhoneGap + JQueryMobile
开发流程
Web应用
Index.html-JQueryMobile构建UI
<!--地图-->
<div data-role="page"id="home">
<div data-role="header"data-position="fixed">
<a href="#"data-role="button"data-inline="true"
onClick="doMapZoom(1)"><img src="images/zoomin.png"/></a>
<h1>
地图
</h1>
<a href="#"data-role="button"data-inline="true"onClick="doMapZoom(-
1)"><img src="images/zoomout.png"/></a>
</div>
<div id="mapcontent"data-role="content"style="width:100%;
height:100%;padding:0px;">
<div id="map"style="width:100%; height:100%;" ></div>
</div>
<!--footer-->
<div data-role="footer"data-id="myfooter"data-position="fixed">
<div data-role="navbar"data-iconpos="bottom">
<ul>
<li><a href="#home"data-icon="grid"data-
transition="none"class="ui-btn-active">地图</a></li>
<li><a href="#new"data-icon="star"data-
transition="none">新日记</a></li>
<li><a href="#travellist"data-icon="gear"data-
transition="none">日记列表</a></li>
</ul>
</div><!--/navbar -->
</div>
</div>
function getGraphics(result){
var i,len=result.rows.length,row;
if(len>0){
for(i=0;i<len;i++){
row=result.rows.item(i);
var entered=convertToMDY(row.entered),updated=row.updated;
var title=row.title,content=row.details,
photo=row.photourl;
if(row.latitude){
var pt=esri.geometry.geographicToWebMercator(new
esri.geometry.Point([row.longitude,row.latitude]));
var symbol = ……
var attr={……};
var infoTemplate=……
var g=new esri.Graphic(pt,symbol,attr,infoTemplate);
map.graphics.add(g);
}
}
}
}
Map.js-地图上显示日记
Map.js
function showMapNote(){
//alert("map page -pagebeforeshow");
if(!map) return;
$.mobile.notesdb.transaction(function(t){
t.executeSql("SELECT * FROM notes ORDER BY id DESC
LIMIT ?",[trNotes.limit],function(t,result){
getGraphics(result)
});
});
Trnotes.js-数据库操作,调用本地设备
//获得当期位置
function getLocation(){
if(!navigator.geolocation){
alert("can not use geolocation");
return;
}
navigator.geolocation.getCurrentPosition(locSuccess,locFail,
{maximumAge: 3000, timeout: 10000, enableHighAccuracy: true});
}
function locSuccess(position){
trNotes.lat=position.coords.latitude;
trNotes.lng=position.coords.longitude;
}
function locFail(error){
var msg="Cannot determine location.";
if(error.code==error.PERMISSION_DENIED)
{
msg+="Geolocation is disabled.";
}
try{
navigator.notification.alert(msg+'code:'+error.code+'\n'+"message:"+error.message
,null,"Geolocation");
}catch(e){
alert('code: '+ error.code + '\n'+'message: '+ error.message +
'\n');
}
}
//拍照
function getPhoto(){
if(!navigator.camera) {
alert("camera can not use");
return;
}
navigator.camera.getPicture(onSuccess, onFail,
{ quality: 50, destinationType: Camera.DestinationType.FILE_URI });
function onSuccess(imageData) {
var newnote=$("#newNote");
var src=imageData;
//var src="data:image/jpeg;base64," + imageData;
var img=$("#myPhoto");
img.attr("src",src);
newnote.listview("refresh");
}
function onFail(message) {
alert(' carema Failed because: '+ message);
}
//数据库操作
$(document).bind("mobileinit",function(){
//alert("jquerymobile init")
$.mobile.notesdb=openDatabase("trnotes","1.0","Travel Notes",10*1024*1024);
$.mobile.notesdb.transaction(function(t){
t.executeSql("CREATE TABLE IF NOT EXISTS notes (id INTEGER NOT NULL
PRIMARY KEY AUTOINCREMENT,title TEXT NOT NULL,details TEXT NOT NULL,entered TEXT NOT
NULL,updated TEXT,latitude REAL,longitude REAL,photourl TEXT);");
});
//$("[data-role=footer]").fixedtoolbar({ tapToggle: false });
$.mobile.fixedToolbars.setTouchToggleEnabled(false);
//$.mobile.showPageLoadingMsg();
});
PhoneGap打包方式
Android开发
public class TravelMap_AndroidActivity extends
DroidGap {
/** Called when the activity is first
created. */
@Override
public void onCreate(Bundle
savedInstanceState) {
super.onCreate(savedInstanceState);
super.setIntegerProperty( "splashscreen",
R.drawable.splash);
//setContentView(R.layout.main);
//html文件加载慢,设置超时时间
super.setIntegerProperty("loadUrlTimeoutValue",
120000);
super.loadUrl("file:///android_asset/www/
index.html");
}
}
IOS开发
为移动开发提供了一种开发方式
一次开发,多平台部署
总结
PhoneGap:phonegap.com;phonegap.cn
ArcGIS Mobile CSDN
官方博客:
http://blog.csdn.net/ArcGIS_Mobile

敬请期待
11月13日《ArcGIS移动应用新主张》
11月27日《Mobile Runtime SDKs,开启移动开发炫彩之旅》
ArcGIS移动公开课