`
GhostWolf
  • 浏览: 311992 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

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,大侠能不能我指点指点呢

相关推荐

    Android代码-cordova调用安卓原生activity插件

    cordova调用安卓原生activity插件 使用简介 JS端使用方式 //sendData表示要从js端发送到原生activity的数据,需用json对象传输 var sendData = { id:10001, name:"Simon", age:28 }; window.cordova.plugins....

    cordova调用Android关于服务的插件示例

    本插件示例展示了如何在Cordova应用中调用Android服务,通过AIDL(Android Interface Definition Language)进行通信,并将服务打包为一个单独的jar文件。 首先,理解Cordova插件机制至关重要。Cordova插件是连接...

    cordova 和原生交互 调用h5页面

    例如,你可以使用`cordova.exec()`函数在JavaScript中调用Android的原生方法,而在原生代码中通过`cordova.PluginManager.getPlugin()`获取并调用插件方法。 10. **测试和调试**:使用Android Studio的模拟器或连接...

    cordova通过js调用OC原生代码demo

    本教程将深入探讨如何通过Cordova在JavaScript中调用OC原生代码,并提供一个简单的示例。 **1. Cordova 插件系统** Cordova的核心是它的插件系统,它为JavaScript提供了与不同平台原生API交互的桥梁。每个插件都是...

    cordova调用微信

    Cordova 调用微信集成指南 在 Cordova 项目中集成微信调用需要完成以下几个步骤: 1. 选择合适的插件:在进行微信调用时,需要选择合适的插件,常用的插件有 cordova-plugin-wechat 和 cordova-plugin-wechat-...

    cordova二维码扫描插件

    3. **引入JavaScript接口**:在项目的JavaScript代码中,通过`window.cordova.plugins.qrcodescan.scan`等方法调用插件提供的API,启动扫描过程。 4. **处理扫描结果**:当用户扫描到二维码后,插件会通过回调函数...

    在存在iOS项目添加Cordova实现H5调用设备相册

    在iOS项目中集成Cordova并实现H5调用设备相册的功能,是移动应用开发中的一个常见需求。Cordova是一个开源框架,它允许开发者使用HTML、CSS和JavaScript来构建原生移动应用程序。通过Cordova,我们可以利用Web技术来...

    swift-调用原生摄像头扫一扫功能cordova插件

    在本案例中,我们将讨论如何使用一个名为“cordova-plugin-scan”的Cordova插件来调用原生摄像头实现扫一扫功能。 首先,我们需要了解Cordova的工作原理。Cordova将Web应用程序包装在一个原生的壳中,使得Web应用...

    基于Cordova 写的WebView插件,可以调用Cordova插件

    Cordova开发中,插件调用都只能调用本地的html,这个功能就是为了Cordova能调用远程的HTML页面,这样的话,一些逻辑可以放在服务器上,不需要全部打包放在app中,同时远程的html可以调用插件,调用方式同一般的...

    cordova 原生拨号插件

    **Cordova原生拨号插件** Cordova是一款流行的开源框架,它允许开发者使用Web技术(HTML、CSS和JavaScript)来构建跨平台的移动应用。这个"cordova 原生拨号插件"是为了帮助开发者在Cordova应用中集成拨号功能,让...

    调用cordova插件的一个ionic实例,插件包含android服务

    在本文中,我们将深入探讨如何在Ionic应用中调用Cordova插件,特别是涉及Android服务的实例。首先,让我们理解一下关键概念。 **Cordova** 是一个开源框架,允许开发者使用Web技术(如HTML、CSS和JavaScript)构建...

    cordova开发自定义插件(详细篇含jar包调用示例)

    在本文中,我们将深入探讨如何在Cordova环境中开发自定义插件,特别是涉及Java JAR包的调用以及Android与JavaScript之间的交互。 首先,让我们了解为什么需要创建自定义插件。Cordova的核心理念是提供一个桥梁,...

    cordova : JS调用后台JAVA例子

    实现JS调用后台JAVA,并返回提示信息。在cmd窗口进入解压根目录后,运行cordova run即可看到效果;还可以用android studio导入 platfroms下的android包,点击模拟器运行也可以看到效果。 刚开始导入会提示SDK路径...

    cordova插件调用原生界面(这个插件是调用的loginsdk.aar内置界面)

    这个cordova插件是我项目中用到的,其中引用到的库文件是.aar文件,不是通常的jar包,所以有些特别。针对这种特殊aar文件,插件添加完成后需要手动在app的gradle文件中添加以下代码repositories { flatDir { dirs ...

    cordova 自定义插件demo(含jar包调用示例)

    这个文件是Cordova插件的Java实现,它继承自`org.apache.cordova.CordovaPlugin`基类,并覆盖`execute()`方法来处理来自JavaScript的调用。例如: ```java public class MyPlugin extends CordovaPlugin { @...

    cordova跳转原生Activity

    在Cordova的应用中,有时我们需要调用原生的Android Activity来实现特定功能,例如访问设备硬件或利用原生库。本篇文章将详细介绍如何在Cordova中进行原生Activity的跳转,以及`HjkPlugin`可能涉及的相关知识点。 ...

    Android版cordova人脸识别插件

    6. 调用插件API:在JavaScript代码中,通过Cordova的插件接口调用人脸识别功能,如`window.FaceScanPlugin.startScan()`,并提供必要的回调函数来处理结果。 7. 测试和优化:在真实设备或模拟器上测试应用,根据...

    android 第三方webview cordova的集成使用

    7. **调用设备API**:Cordova的插件机制使得JavaScript可以直接调用设备的原生功能。例如,要使用相机功能,可以添加相机插件`cordova plugin add cordova-plugin-camera`,然后在JavaScript中调用`navigator.camera...

Global site tag (gtag.js) - Google Analytics