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+" "
+results.rows.item(i).passenger_name
+" "+results.rows.item(i).company;
p1=document.createElement("p");
p11[i]=p1;
p11[i].innerHTML=
results.rows.item(i).card_kind+" "+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