Cordova调用DatePickerDialog

本文主要介绍如何利用插件打开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>

 

评论

3 楼 gloryfuture_taiyuan 2013-12-26  

gloryfuture_taiyuan 写道

不能用啊，我用的是cordova3.2，大侠能不能我指点指点呢

通过了，是配置文件错误

2 楼 GhostWolf 2013-12-24  

gloryfuture_taiyuan 写道

不能用啊，我用的是cordova3.2，大侠能不能我指点指点呢

我不是大侠   但是我机子测试过是可以的，你报什么错了？

1 楼 gloryfuture_taiyuan 2013-12-11  

不能用啊，我用的是cordova3.2，大侠能不能我指点指点呢