Phonegap中自定义插件的使用
在phonegap中需要实现特定相关的功能,可能需要自定义扩展一下功能,那么扩展phonegap组件就成为了可能。
源代码结构图:
本文目的在于讲述怎么扩展一个phonegap组件以及实现。
针对phonegap中activty扩展类:
- package com.easyway.phonegap.datepicker;
- import com.phonegap.*;
- import android.os.Bundle;
- /**
- * 实现DroidGap的
- *
- * @Title:
- * @Description: 实现 phonegap调用android中datepicker组件
- * @Copyright:Copyright (c) 2011
- * @Company:易程科技股份有限公司
- * @Date:2012-5-4
- * @author longgangbai
- * @version 1.0
- */
- public class PhonegapDatePluginActivity extends DroidGap {
- /** Called when the activity is first created. */
- @Override
- public void onCreate(Bundle savedInstanceState) {
- super.onCreate(savedInstanceState);
- //启动首页
- super.loadUrl("file:///android_asset/www/index.html");
- }
- }
插件实现类:
- package com.easyway.phonegap.datepicker;
- import java.util.Calendar;
- import org.json.JSONArray;
- import org.json.JSONException;
- import org.json.JSONObject;
- import android.app.DatePickerDialog;
- import android.app.DatePickerDialog.OnDateSetListener;
- import android.app.TimePickerDialog;
- import android.app.TimePickerDialog.OnTimeSetListener;
- import android.util.Log;
- import android.widget.DatePicker;
- import android.widget.TimePicker;
- import com.phonegap.api.PhonegapActivity;
- import com.phonegap.api.Plugin;
- import com.phonegap.api.PluginResult;
- import com.phonegap.api.PluginResult.Status;
- /**
- *
- * 实现DroidGap的在phonegap中想采用类似android中时间选择器datepicker
- *
- * @Title:
- * @Description: 实现 phonegap调用android中datepicker组件
- * @Copyright:Copyright (c) 2011
- * @Company:易程科技股份有限公司
- * @Date:2012-5-4
- * @author longgangbai
- * @version 1.0
- */
- public class DatePickerPlugin extends Plugin {
- private static final String ACTION_DATE = "date";
- private static final String ACTION_TIME = "time";
- /*
- * 必须实现这个方法
- * (non-Javadoc)
- *
- * @see com.phonegap.api.Plugin#execute(java.lang.String,
- * org.json.JSONArray, java.lang.String)
- */
- @Override
- public PluginResult execute(final String action, final JSONArray data,
- final String callBackId) {
- Log.d("DatePickerPlugin", "Plugin Called");
- PluginResult result = null;
- if (ACTION_DATE.equalsIgnoreCase(action)) {
- Log.d("DatePickerPluginListener execute", ACTION_DATE);
- this.showDatePicker(callBackId);
- final PluginResult r = new PluginResult(
- PluginResult.Status.NO_RESULT);
- r.setKeepCallback(true);
- return r;
- } else if (ACTION_TIME.equalsIgnoreCase(action)) {
- Log.d("DatePickerPluginListener execute", ACTION_TIME);
- this.showTimePicker(callBackId);
- final PluginResult r = new PluginResult(
- PluginResult.Status.NO_RESULT);
- r.setKeepCallback(true);
- return r;
- } else {
- result = new PluginResult(Status.INVALID_ACTION);
- Log.d("DatePickerPlugin", "Invalid action : " + action + " passed");
- }
- return result;
- }
- public synchronized void showTimePicker(final String callBackId) {
- final DatePickerPlugin datePickerPlugin = this;
- final PhonegapActivity currentCtx = ctx;
- final Runnable runnable = new Runnable() {
- public void run() {
- final TimePickerDialog tpd = new TimePickerDialog(currentCtx,
- new OnTimeSetListener() {
- public void onTimeSet(final TimePicker view,
- final int hourOfDay, final int minute) {
- final JSONObject userChoice = new JSONObject();
- try {
- userChoice.put("hour", hourOfDay);
- userChoice.put("min", minute);
- } catch (final JSONException jsonEx) {
- Log.e("showDatePicker",
- "Got JSON Exception "
- + jsonEx.getMessage());
- datePickerPlugin.error(new PluginResult(
- Status.JSON_EXCEPTION), callBackId);
- }
- datePickerPlugin.success(new PluginResult(
- PluginResult.Status.OK, userChoice),
- callBackId);
- }
- }, 1, 1, true);
- tpd.show();
- }
- };
- ctx.runOnUiThread(runnable);
- }
- public synchronized void showDatePicker(final String callBackId) {
- final DatePickerPlugin datePickerPlugin = this;
- final PhonegapActivity currentCtx = ctx;
- 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 Runnable runnable = new Runnable() {
- public void run() {
- final DatePickerDialog dpd = new DatePickerDialog(currentCtx,
- new OnDateSetListener() {
- public void onDateSet(final DatePicker view,
- final int year, final int monthOfYear,
- final int dayOfMonth) {
- final JSONObject userChoice = new JSONObject();
- try {
- userChoice.put("year", year);
- userChoice.put("month", monthOfYear);
- userChoice.put("day", dayOfMonth);
- } catch (final JSONException jsonEx) {
- Log.e("showDatePicker",
- "Got JSON Exception "
- + jsonEx.getMessage());
- datePickerPlugin.error(new PluginResult(
- Status.JSON_EXCEPTION), callBackId);
- }
- datePickerPlugin.success(new PluginResult(
- PluginResult.Status.OK, userChoice),
- callBackId);
- }
- }, mYear, mMonth, mDay);
- dpd.show();
- }
- };
- ctx.runOnUiThread(runnable);
- }
- }
phonegap中plugin.xml中配置:
- <?xml version="1.0" encoding="utf-8"?>
- <plugins>
- <plugin name="App" value="com.phonegap.App"/>
- <plugin name="Geolocation" value="com.phonegap.GeoBroker"/>
- <plugin name="Device" value="com.phonegap.Device"/>
- <plugin name="Accelerometer" value="com.phonegap.AccelListener"/>
- <plugin name="Compass" value="com.phonegap.CompassListener"/>
- <plugin name="Media" value="com.phonegap.AudioHandler"/>
- <plugin name="Camera" value="com.phonegap.CameraLauncher"/>
- <plugin name="Contacts" value="com.phonegap.ContactManager"/>
- <plugin name="Crypto" value="com.phonegap.CryptoHandler"/>
- <plugin name="File" value="com.phonegap.FileUtils"/>
- <plugin name="Network Status" value="com.phonegap.NetworkManager"/>
- <plugin name="Notification" value="com.phonegap.Notification"/>
- <plugin name="Storage" value="com.phonegap.Storage"/>
- <plugin name="Temperature" value="com.phonegap.TempListener"/>
- <plugin name="FileTransfer" value="com.phonegap.FileTransfer"/>
- <plugin name="Capture" value="com.phonegap.Capture"/>
- <plugin name="DatePickerPlugin" value="com.easyway.phonegap.datepicker.DatePickerPlugin"/>
- </plugins>
插件对应的js的编写:
- /**
- *
- * @return Object literal singleton instance of DatePicker
- */
- var DatePicker = function() {
- };
- DatePicker.prototype.showDateOrTime = function(action,successCallback, failureCallback) {
- return PhoneGap.exec(
- successCallback, //Success callback from the plugin
- failureCallback, //Error callback from the plugin
- 'DatePickerPlugin', //Tell PhoneGap to run "DatePickerPlugin" Plugin
- action, //Tell plugin, which action we want to perform
- []); //Passing list of args to the plugin
- };
- /**
- * Enregistre une nouvelle bibliothèque de fonctions
- * auprès de PhoneGap
- **/
- PhoneGap.addConstructor(function() {
- //如果不支持window.plugins,则创建并设置
- if(!window.plugins){
- window.plugins={};
- }
- window.plugins.datePickerPlugin=new DatePicker();
- //向phonegap中注入插件相关的js
- //Register the javascript plugin with PhoneGap
- PhoneGap.addPlugin('datePickerPlugin', new DatePicker());
- //phonegap中注入后台插件相关的java类
- //Register the native class of plugin with PhoneGap
- PluginManager.addService("DatePickerPlugin",
- "com.easyway.phonegap.datepicker.DatePickerPlugin");
- });
页面调用如下:
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta name="viewport" content="width=320; user-scalable=no" />
- <meta http-equiv="Content-type" content="text/html; charset=utf-8">
- <title>Minimal AppLaud App</title>
- <!-- 加载phonegap -->
- <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
- <!-- 加载jquery -->
- <script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery-1.6.4.min"></script>
- <!-- 加载jquerymobile -->
- <script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery.mobile-1.0.1.js"></script>
- <!-- 加载自定义插件 -->
- <script type="text/javascript" charset="utf-8" src="datePickerPlugin.js"></script>
- <script type="text/javascript" charset="utf-8">
- $(function(){
- $("#datepicker").click(function(){
- alert("0000000");
- window.plugins.datePickerPlugin.showDateOrTime(
- 'date',
- function(r){
- document.getElementById("mydatetargetfield").value = r.day + "/" + r.month + "/" + r.year;
- },
- function(e){console.log(e);}
- );
- });
- });
- </script>
- </head>
- <body class="theme">
- <input id="mydatetargetfield" type="text" />
- <input id="datepicker" type="button" value="时间选择器">
- </body>
- </html>
运行结果如下:
Phonegap中自定义插件的使用的更多相关文章
- PhoneGap之自定义插件
PhoneGap:作为原生App,Java(这里面是指Android的)与JavaScript 的通信桥梁,使得我们的混合开发更加得心应手,我是与Android结合的混合开发. 但在这里不得不吐槽一下 ...
- Vue学习之--------Vue中自定义插件(2022/8/1)
文章目录 1.插件的基本介绍 2.实际应用 2.1 目录结构 2.2 代码实例 2.2.1 学校组件(School.vue) 2.2.2 学生组件(Student.vue) 2.2.3 定义的插件 2 ...
- 浅析MyBatis(三):聊一聊MyBatis的实用插件与自定义插件
在前面的文章中,笔者详细介绍了 MyBatis 框架的底层框架与运行流程,并且在理解运行流程的基础上手写了一个自己的 MyBatis 框架.看完前两篇文章后,相信读者对 MyBatis 的偏底层原理和 ...
- cordova /phonegap 自定义插件
### cordova /phonegap 自定义插件 在使用cordova 的过程中,虽然官方提供的插件以及其他人开源的插件较多.但有时为了实现某种需求,还是需要自己编写插件. 以前总是会手动的配置 ...
- Ionic2中集成腾讯Bugly之自定义插件
Ionic2混合开发,入坑系列:Ionic2中集成腾讯Bugly之自定义插件 1.编写Bugly.js代码 var exec = require('cordova/exec'); module.exp ...
- vue中自定义组件(插件)
vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...
- Cordova与现有框架的结合,Cordova插件使用教程,Cordova自定义插件,框架集成Cordova,将Cordova集成到现有框架中
一.框架集成cordova 将cordova集成到现有框架中 一般cordova工程是通过CMD命令来创建一个工程并添加Android.ios等平台,这样的创建方式可以完整的下载开发过程中所需要的的插 ...
- Phonegap 自定义插件
一.PhoneGap中js与Java之间相互调用分为同步和异步两种方式 1.同步:js调用Java类的方法,然后Java类的方法直接返回一个值给js端 2.异步:js调用Java类的方法,Java类的 ...
- cordova3.X 运用grunt生成plugin自定义插件骨架
Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还提供了一组统一的JavaScript类库,以及为这些 ...
随机推荐
- Eclipse 代码格式:“{ }”的格式设置
Eclipse设置代码大括号的格式 编写代码有很多中风格,常见的三种风格: 1.K & R风格:这种风格的代码比较紧凑,优点是在教科书或者打印成纸张的时候比较省地方:缺点是大括号匹配问题,代码 ...
- R语言基本操作函数---变量的基本操作
1.变量变换 as.array(x),as.data.frame(x),as.numeric(x),as.logical(x),as.complex(x),as.character(x) ...
- 移动端js写法
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...
- 准备阶段-maven项目构建
依据我现阶段对maven的了解,具使用POM管理项目和强大的repository资源管理库支持. 在项目建立初期,对网站的可拓展.高并发.易于管理做了评估.最终使用Maven 管理该项目 . 如下是m ...
- Redis单机版本的安装
我的是centos-6.5的环境,安装redis的单机版本 1.下载redis源文件redis-3.0.0.tar.gz到一个目录,我的下载目录是/software 2.编译安装源文件的先觉条件是安装 ...
- UE4 AI入门
转自:http://blog.csdn.net/u011707076/article/details/46607121 本文是翻译的官方文https://docs.unrealengine.com/l ...
- node.js + expres 的安装
一 windows下安装 首先去官网下载msi安装包. 两篇很有参考价值的文章: http://cnodejs.org/topic/4fae80c02e8fb5bc650a8360 http://bl ...
- php : 常用函数
常用函数: <?php /** * 获取客户端IP * @return [string] [description] */ function getClientIp() { $ip = NULL ...
- 复利计算器(4)——jQuery界面美化、自动补全
一.分工 这次终于可以跟小伙伴合作了,经过讨论,我负责界面的美化和输入框自动补全,小伙伴擅长安卓,于是将复利计算器弄成app的任务就交给了小伙伴.为了我们两人团队,我们都好奋斗哈哈哈!! 二.界面美化 ...
- 转 unity 优化
最近研究U3D开发,个人认为,精通一种新的技术,最快最好的方法就是看它的document,而且个人习惯不喜欢看中文的资料,原汁原味的东西是最正确的,一翻译过来很多东西就都不那么准确了.于是通读了uni ...