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;//注意需要继承CordovaPluginpublic 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(){//日期设置后事件@Overridepublic void onDateSet(DatePicker view, int year,int monthOfYear, int dayOfMonth) {// TODO Auto-generated method stubfinal 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>

更多相关文章

随机推荐