本文主要介绍如何利用插件打开android的组件
首先需要编写一个DatePickerPlugin插件:
package com.example.plugin;
import java.util.Calendar;
import org.apache.cordova.api.CallbackContext;
import org.apache.cordova.api.CordovaInterface;
import org.apache.cordova.api.CordovaPlugin;
import org.apache.cordova.api.PluginResult;
import org.apache.cordova.api.PluginResult.Status;
import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;
import android.app.DatePickerDialog;
import android.app.DatePickerDialog.OnDateSetListener;
import android.util.Log;
import android.widget.DatePicker;
//注意需要继承CordovaPlugin
public class DatePickerPlugin extends CordovaPlugin {
private static final String ACTION_DATE = "date"; //js调用执行的“指令”
//execute为CordovaPlugin需要实现的方法
public boolean execute(String action, JSONArray args, final CallbackContext callbackContext) throws JSONException {
if (action.equals(ACTION_DATE)) {
String message = args.getString(0);
datePicker(message,callbackContext );//Thread-safe.
return true;
}
return false;
}
//日期组件的实现代码
public synchronized void datePicker(final String message, final CallbackContext callbackContext) {
Log.d("TestPlugin echo message", message);
final Calendar c = Calendar.getInstance();
final int mYear = c.get(Calendar.YEAR);
final int mMonth = c.get(Calendar.MONTH);
final int mDay = c.get(Calendar.DAY_OF_MONTH);
final CordovaInterface cordova = this.cordova;
//启动子线程打开DatePickerDialog
Runnable runnable = new Runnable() {
public void run() {
DatePickerDialog dialog = new DatePickerDialog(cordova.getActivity(),
new OnDateSetListener(){//日期设置后事件
@Override
public void onDateSet(DatePicker view, int year,
int monthOfYear, int dayOfMonth) {
// TODO Auto-generated method stub
final JSONObject userChoice = new JSONObject();
try {
userChoice.put("year", year);
userChoice.put("month", monthOfYear+1);
userChoice.put("day", dayOfMonth);
} catch (final JSONException jsonEx) {
Log.e("showDatePicker", "Got JSON Exception " + jsonEx.getMessage());
callbackContext.sendPluginResult(new PluginResult(Status.JSON_EXCEPTION));
callbackContext.error("Expectedone non-empty string argument.");
}
//时间设置后再响应页面
callbackContext.sendPluginResult(new PluginResult(PluginResult.Status.OK, userChoice));
callbackContext.success(message);
}
}, mYear, mMonth, mDay
);
dialog.show();
};
};
// Activity类的runOnUiThread (Runnable action)函数,
//这个函数的主要功能:在UI线程中运行指定的操作,如果当前线程是UI线程,然后采取行动立即执行;
//如果当前线程不是UI线程,发送 消息到UI线程的事件队列。
this.cordova.getActivity().runOnUiThread(runnable);
}
}
然后配置DatePickerPlugin插件res/xml/config.xml
<plugin name="DatePickerPlugin" value="com.example.plugin.DatePickerPlugin"/>
接着利用js调用插件(datePickerPlugin.js)
//利用cordova.exec调用DatePickerPlugin插件
//DatePickerPlugin为config.xml配置的插件名称 //date为调用执行的“指令”
//str为传入值
window.datePickerPlugin = function(str,callback) {
cordova.exec(callback, pluginFailed, "DatePickerPlugin", "date", [ str ]);
};
//失败处理方法
var pluginFailed = function(message) {
alert("failed>>" + message);
}
//以下为cordova加载的操作
$(function() {
init();
});
var init = function() {
console.log("phonegap init!!");
document.addEventListener("deviceready", onDeviceReady, true);
}
var onDeviceReady = function() {
console.log("deviceready event fired");
//执行插件
window.datePickerPlugin("HELLO DATE!!!" , function(echoValue) {
console.log("datePickerPlugin echo>>" + echoValue.year+":"+echoValue.month+":"+echoValue.day);
});
};
最后html页面加载(此段相对简单)
<!DOCTYPE html>
<html>
<head>
<title>Device Properties Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" charset="utf-8" src="../js/jquery-1.8.3.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/cordova-2.3.0.js"></script>
<script type="text/javascript" charset="UTF-8" src="../js/datePickerPlugin.js"></script>
</head>
<body>
<p id="datePickerPlugin"></p>
<a href="../index.html">返回</a>
</body>
</html>