Android版添加phonegap--Sqlite实现离线功能技术教程

1、创建Phonegap环境
1) 在Phonegap官网下载Phonegap最新版本的开发包Phonegap1.9.0

2) 建立Android项目,将Phonegap1.9.0包中的XML文件夹拷进项目中的res文件夹
里,在文件夹asset中创建文件夹www,并把cordova-1.9.0.js拷进www文件夹中。

3)在工程中加入corvoda-1.9.0.jar,经过buildpath导入工程中。

4)在AndroidManifest.xml里加入如下代码:      
<supports-screens
android:largeScreens="true"         
android:normalScreens="true"         
android:smallScreens="true"         
android:xlargeScreens="true"         
android:resizeable="true"         
android:anyDensity="true"/>

<uses-permission android:name="android.permission.CAMERA"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<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.RECEIVE_SMS"/>
<uses-permission android:name="android.permission.RECORD_AUDIO"/>
<uses-permission android:name="android.permission.RECORD_VIDEO"/>
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/>
<uses-permission android:name="android.permission.READ_CONTACTS"/>
<uses-permission android:name="android.permission.WRITE_CONTACTS"/>    
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>  
<uses-permission android:name="android.permission.GET_ACCOUNTS"/>
<uses-permission android:name="android.permission.BROADCAST_STICKY"/>  

5)把src中的Activity改为继承DroidGap,setContextView()改为
super.loadUrl("file:///android_asset/www/index.html")
并在www文件夹创建index.html文件,在html文件中导入cordova-1.9.0.js
<script type="text/javascript" charset="utf-8" src="cordova-1.9.0.js"></script>
完成以上步骤,Phonegap环境配置成功。
 
2、经过ajax请求服务器获取JSON数据
//经过ajax请求服务器取得数据
function request(){    
//创建一个XMLHttpRequest对象      
var xmlhttp;
if (window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
}else{     
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}   
xmlhttp.open("GET","http://10.108.1.113:8080/PassengerService/servlet/mServlet",true);  
xmlhttp.send();
xmlhttp.onreadystatechange=function(){   
if (xmlhttp.readyState==4 && xmlhttp.status==200){          
var result=xmlhttp.responseText;          
var shu=parserJSON(result);         
}else{  
window.plugins.simpleplugin.selectDB();
        }
       }
 }
xmlhttp.onreadystatechange=function(){   
if(xmlhttp.readyState==4 && xmlhttp.status==200){          
var result=xmlhttp.responseText;          
var shu=parserJSON(result);         
}else{  
window.plugins.simpleplugin.selectDB();
}
       }
       }

3、解析JSON数据
@param JSONdata //传入要解析的JSON数据格式的字符串
function parserJSON(JSONdata){  
var JSONobj=eval('('+JSONdata+')');
//window.plugins为引用插件。调用插件simpleplugin的insertDB方法,解析JSON的同时插入进数据库中    
for(var i=0;i<JSONobj.passengers.length;i++){
window.plugins.simpleplugin.insertDB(JSONobj.passengers.length,'Passengers', JSONobj.passengers[i].passenger_id,      
JSONobj.passengers[i].passenger_name,      
JSONobj.passengers[i].icon_url,          
JSONobj.passengers[i].job);  
}
}

4、离线功能:离线功能是指把从服务器得到的数据保存进数据库中。在不能使用网络的状况下,能从数据库取出数据,达到离线功能。
1)调用Phonegap的api,制做数据库插件。新建SimplePlugin.js文件
Phonegap.addConstructor(function(){  
Phonegap.addPlugin('simpleplugin', new SimplePlugin());
});
//插件名为simpleplugin,在html文件中调用插件语句为window.plugins.simpleplugin。当调用插件时,自动建立SimplePlugin的对象,并能调用该对象的方法。  

2) 编写插件里的方法  
db.transaction(populateDB,successCB,errorCB);
var SimplePlugin = function(){
};  
SimplePlugin.prototype.createDB = function(table_name){
Var db=window.openDatabase("db_amberlo", "1.0", "Cordova Demo", 200000); db.transaction(
function CreateDB(tx){    
tx.executeSql('CREATE TABLE IF NOT EXISTS '+table_name+    
'(passenger_id INTEGER primary key AUTOINCREMENT,'+
'passenger_name varchar(20), '+ 'icon_url varchar(50), '+'job varchar(20))');
},
errorCB, successCB);
};  
var count=0;
var nowNum=0;  
SimplePlugin.prototype.insertDB=
function(num,table_name,passenger_id,passenger_name,icon_url,job){  
var db=window.openDatabase("db_amberlo", "1.0", "Cordova Demo", 200000); nowNum=num;  
db.transaction(function queryID(tx){
tx.executeSql('SELECT passenger_id FROM Passengers where passenger_id='+passenger_id,[],function queryFinish(tx,result){     
var len2 = result.rows.length;
if(len2==0){  
db.transaction(
function InsertDB(tx){   
count++;  
tx.executeSql('INSERT INTO '+table_name
+'(passenger_name,icon_url,job)VALUES ("'+ passenger_name+'","'  
+job + '")');
},errorCB, successCB_show);
  }
},errorCB);
},errorCB);
};
SimplePlugin.prototype.selectDB=function(){  
var db=window.openDatabase("db_amberlo", "1.0", "Cordova Demo", 200000); db.transaction(queryDB,errorCB);
}
function queryDB(tx){  
tx.executeSql('SELECT * FROM Passengers', [],querySuccess,errorCB);
}    
var total=document.getElementById("ul_first");
var image=new Array();  
var h33=new   Array();  
var p11=new   Array();  
var p22=new   Array();
for(var i=0;i<results.rows.length;i++){   
var li=document.createElement("li");  
total.appendChild(li);  
var a=document.createElement("a");
a.setAttribute("href","#");
var img=document.createElement("img");   
image[i]=img;
image[i].src="file:///android_asset/www/passenger-1.0.1/female.PNG";    
var h3=document.createElement("h3");   
h33[i]=h3;
h33[i].innerHTML= results.rows.item(i).position+"&nbsp;&nbsp;"
+results.rows.item(i).passenger_name
+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+results.rows.item(i).company;    
p1=document.createElement("p");   
p11[i]=p1;
p11[i].innerHTML=
results.rows.item(i).card_kind+"&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;"+results.rows.item(i).job;    
var p2=document.createElement("p");   
p22[i]=p2;
p22[i].innerHTML="旅客职位:" + results.rows.item(i).job;    
li.appendChild(a);   
a.appendChild(img);   
a.appendChild(h3);
a.appendChild(p1);
a.appendChild(p2);
$('ul').listview('refresh');

KeyMob移动广告平台为应用开发者提供高效稳定的移动广告SDK,支持主流智能手机操做系统,拥有插屏、全屏广告、视频广告等丰富广告形式,帮助应用开发者将流量快速转化为广告收入。










javascript

相关文章
相关标签/搜索