在phonegap中需要实现特定相关的功能,可能需要自定义扩展一下功能,那么扩展phonegap组件就成为了可能。

源代码结构图:

本文目的在于讲述怎么扩展一个phonegap组件以及实现。

针对phonegap中activty扩展类:

  1. package com.easyway.phonegap.datepicker;
  2. import com.phonegap.*;
  3. import android.os.Bundle;
  4. /**
  5. * 实现DroidGap的
  6. *
  7. * @Title:
  8. * @Description: 实现 phonegap调用android中datepicker组件
  9. * @Copyright:Copyright (c) 2011
  10. * @Company:易程科技股份有限公司
  11. * @Date:2012-5-4
  12. * @author  longgangbai
  13. * @version 1.0
  14. */
  15. public class PhonegapDatePluginActivity extends DroidGap {
  16. /** Called when the activity is first created. */
  17. @Override
  18. public void onCreate(Bundle savedInstanceState) {
  19. super.onCreate(savedInstanceState);
  20. //启动首页
  21. super.loadUrl("file:///android_asset/www/index.html");
  22. }
  23. }

插件实现类:

  1. package com.easyway.phonegap.datepicker;
  2. import java.util.Calendar;
  3. import org.json.JSONArray;
  4. import org.json.JSONException;
  5. import org.json.JSONObject;
  6. import android.app.DatePickerDialog;
  7. import android.app.DatePickerDialog.OnDateSetListener;
  8. import android.app.TimePickerDialog;
  9. import android.app.TimePickerDialog.OnTimeSetListener;
  10. import android.util.Log;
  11. import android.widget.DatePicker;
  12. import android.widget.TimePicker;
  13. import com.phonegap.api.PhonegapActivity;
  14. import com.phonegap.api.Plugin;
  15. import com.phonegap.api.PluginResult;
  16. import com.phonegap.api.PluginResult.Status;
  17. /**
  18. *
  19. * 实现DroidGap的在phonegap中想采用类似android中时间选择器datepicker
  20. *
  21. * @Title:
  22. * @Description: 实现 phonegap调用android中datepicker组件
  23. * @Copyright:Copyright (c) 2011
  24. * @Company:易程科技股份有限公司
  25. * @Date:2012-5-4
  26. * @author  longgangbai
  27. * @version 1.0
  28. */
  29. public class DatePickerPlugin extends Plugin {
  30. private static final String ACTION_DATE = "date";
  31. private static final String ACTION_TIME = "time";
  32. /*
  33. * 必须实现这个方法
  34. * (non-Javadoc)
  35. *
  36. * @see com.phonegap.api.Plugin#execute(java.lang.String,
  37. * org.json.JSONArray, java.lang.String)
  38. */
  39. @Override
  40. public PluginResult execute(final String action, final JSONArray data,
  41. final String callBackId) {
  42. Log.d("DatePickerPlugin", "Plugin Called");
  43. PluginResult result = null;
  44. if (ACTION_DATE.equalsIgnoreCase(action)) {
  45. Log.d("DatePickerPluginListener execute", ACTION_DATE);
  46. this.showDatePicker(callBackId);
  47. final PluginResult r = new PluginResult(
  48. PluginResult.Status.NO_RESULT);
  49. r.setKeepCallback(true);
  50. return r;
  51. } else if (ACTION_TIME.equalsIgnoreCase(action)) {
  52. Log.d("DatePickerPluginListener execute", ACTION_TIME);
  53. this.showTimePicker(callBackId);
  54. final PluginResult r = new PluginResult(
  55. PluginResult.Status.NO_RESULT);
  56. r.setKeepCallback(true);
  57. return r;
  58. } else {
  59. result = new PluginResult(Status.INVALID_ACTION);
  60. Log.d("DatePickerPlugin", "Invalid action : " + action + " passed");
  61. }
  62. return result;
  63. }
  64. public synchronized void showTimePicker(final String callBackId) {
  65. final DatePickerPlugin datePickerPlugin = this;
  66. final PhonegapActivity currentCtx = ctx;
  67. final Runnable runnable = new Runnable() {
  68. public void run() {
  69. final TimePickerDialog tpd = new TimePickerDialog(currentCtx,
  70. new OnTimeSetListener() {
  71. public void onTimeSet(final TimePicker view,
  72. final int hourOfDay, final int minute) {
  73. final JSONObject userChoice = new JSONObject();
  74. try {
  75. userChoice.put("hour", hourOfDay);
  76. userChoice.put("min", minute);
  77. } catch (final JSONException jsonEx) {
  78. Log.e("showDatePicker",
  79. "Got JSON Exception "
  80. + jsonEx.getMessage());
  81. datePickerPlugin.error(new PluginResult(
  82. Status.JSON_EXCEPTION), callBackId);
  83. }
  84. datePickerPlugin.success(new PluginResult(
  85. PluginResult.Status.OK, userChoice),
  86. callBackId);
  87. }
  88. }, 1, 1, true);
  89. tpd.show();
  90. }
  91. };
  92. ctx.runOnUiThread(runnable);
  93. }
  94. public synchronized void showDatePicker(final String callBackId) {
  95. final DatePickerPlugin datePickerPlugin = this;
  96. final PhonegapActivity currentCtx = ctx;
  97. final Calendar c = Calendar.getInstance();
  98. final int mYear = c.get(Calendar.YEAR);
  99. final int mMonth = c.get(Calendar.MONTH);
  100. final int mDay = c.get(Calendar.DAY_OF_MONTH);
  101. final Runnable runnable = new Runnable() {
  102. public void run() {
  103. final DatePickerDialog dpd = new DatePickerDialog(currentCtx,
  104. new OnDateSetListener() {
  105. public void onDateSet(final DatePicker view,
  106. final int year, final int monthOfYear,
  107. final int dayOfMonth) {
  108. final JSONObject userChoice = new JSONObject();
  109. try {
  110. userChoice.put("year", year);
  111. userChoice.put("month", monthOfYear);
  112. userChoice.put("day", dayOfMonth);
  113. } catch (final JSONException jsonEx) {
  114. Log.e("showDatePicker",
  115. "Got JSON Exception "
  116. + jsonEx.getMessage());
  117. datePickerPlugin.error(new PluginResult(
  118. Status.JSON_EXCEPTION), callBackId);
  119. }
  120. datePickerPlugin.success(new PluginResult(
  121. PluginResult.Status.OK, userChoice),
  122. callBackId);
  123. }
  124. }, mYear, mMonth, mDay);
  125. dpd.show();
  126. }
  127. };
  128. ctx.runOnUiThread(runnable);
  129. }
  130. }

phonegap中plugin.xml中配置:

  1. <?xml version="1.0" encoding="utf-8"?>
  2. <plugins>
  3. <plugin name="App" value="com.phonegap.App"/>
  4. <plugin name="Geolocation" value="com.phonegap.GeoBroker"/>
  5. <plugin name="Device" value="com.phonegap.Device"/>
  6. <plugin name="Accelerometer" value="com.phonegap.AccelListener"/>
  7. <plugin name="Compass" value="com.phonegap.CompassListener"/>
  8. <plugin name="Media" value="com.phonegap.AudioHandler"/>
  9. <plugin name="Camera" value="com.phonegap.CameraLauncher"/>
  10. <plugin name="Contacts" value="com.phonegap.ContactManager"/>
  11. <plugin name="Crypto" value="com.phonegap.CryptoHandler"/>
  12. <plugin name="File" value="com.phonegap.FileUtils"/>
  13. <plugin name="Network Status" value="com.phonegap.NetworkManager"/>
  14. <plugin name="Notification" value="com.phonegap.Notification"/>
  15. <plugin name="Storage" value="com.phonegap.Storage"/>
  16. <plugin name="Temperature" value="com.phonegap.TempListener"/>
  17. <plugin name="FileTransfer" value="com.phonegap.FileTransfer"/>
  18. <plugin name="Capture" value="com.phonegap.Capture"/>
  19. <plugin name="DatePickerPlugin" value="com.easyway.phonegap.datepicker.DatePickerPlugin"/>
  20. </plugins>

插件对应的js的编写:

  1. /**
  2. *
  3. * @return Object literal singleton instance of DatePicker
  4. */
  5. var DatePicker = function() {
  6. };
  7. DatePicker.prototype.showDateOrTime = function(action,successCallback, failureCallback) {
  8. return PhoneGap.exec(
  9. successCallback,    //Success callback from the plugin
  10. failureCallback,     //Error callback from the plugin
  11. 'DatePickerPlugin',  //Tell PhoneGap to run "DatePickerPlugin" Plugin
  12. action,              //Tell plugin, which action we want to perform
  13. []);        //Passing list of args to the plugin
  14. };
  15. /**
  16. * Enregistre une nouvelle bibliothèque de fonctions
  17. * auprès de PhoneGap
  18. **/
  19. PhoneGap.addConstructor(function() {
  20. //如果不支持window.plugins,则创建并设置
  21. if(!window.plugins){
  22. window.plugins={};
  23. }
  24. window.plugins.datePickerPlugin=new DatePicker();
  25. //向phonegap中注入插件相关的js
  26. //Register the javascript plugin with PhoneGap
  27. PhoneGap.addPlugin('datePickerPlugin', new DatePicker());
  28. //phonegap中注入后台插件相关的java类
  29. //Register the native class of plugin with PhoneGap
  30. PluginManager.addService("DatePickerPlugin",
  31. "com.easyway.phonegap.datepicker.DatePickerPlugin");
  32. });

页面调用如下:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=320; user-scalable=no" />
  5. <meta http-equiv="Content-type" content="text/html; charset=utf-8">
  6. <title>Minimal AppLaud App</title>
  7. <!-- 加载phonegap -->
  8. <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
  9. <!-- 加载jquery -->
  10. <script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery-1.6.4.min"></script>
  11. <!-- 加载jquerymobile -->
  12. <script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery.mobile-1.0.1.js"></script>
  13. <!-- 加载自定义插件 -->
  14. <script type="text/javascript" charset="utf-8" src="datePickerPlugin.js"></script>
  15. <script type="text/javascript" charset="utf-8">
  16. $(function(){
  17. $("#datepicker").click(function(){
  18. alert("0000000");
  19. window.plugins.datePickerPlugin.showDateOrTime(
  20. 'date',
  21. function(r){
  22. document.getElementById("mydatetargetfield").value = r.day + "/" + r.month + "/" + r.year;
  23. },
  24. function(e){console.log(e);}
  25. );
  26. });
  27. });
  28. </script>
  29. </head>
  30. <body  class="theme">
  31. <input id="mydatetargetfield" type="text" />
  32. <input id="datepicker" type="button" value="时间选择器">
  33. </body>
  34. </html>

运行结果如下:

Phonegap中自定义插件的使用的更多相关文章

  1. PhoneGap之自定义插件

    PhoneGap:作为原生App,Java(这里面是指Android的)与JavaScript 的通信桥梁,使得我们的混合开发更加得心应手,我是与Android结合的混合开发. 但在这里不得不吐槽一下 ...

  2. 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 ...

  3. 浅析MyBatis(三):聊一聊MyBatis的实用插件与自定义插件

    在前面的文章中,笔者详细介绍了 MyBatis 框架的底层框架与运行流程,并且在理解运行流程的基础上手写了一个自己的 MyBatis 框架.看完前两篇文章后,相信读者对 MyBatis 的偏底层原理和 ...

  4. cordova /phonegap 自定义插件

    ### cordova /phonegap 自定义插件 在使用cordova 的过程中,虽然官方提供的插件以及其他人开源的插件较多.但有时为了实现某种需求,还是需要自己编写插件. 以前总是会手动的配置 ...

  5. Ionic2中集成腾讯Bugly之自定义插件

    Ionic2混合开发,入坑系列:Ionic2中集成腾讯Bugly之自定义插件 1.编写Bugly.js代码 var exec = require('cordova/exec'); module.exp ...

  6. vue中自定义组件(插件)

    vue中自定义组件(插件) 原创 2017年01月04日 22:46:43 标签: 插件 在vue项目中,可以自定义组件像vue-resource一样使用Vue.use()方法来使用,具体实现方法: ...

  7. Cordova与现有框架的结合,Cordova插件使用教程,Cordova自定义插件,框架集成Cordova,将Cordova集成到现有框架中

    一.框架集成cordova 将cordova集成到现有框架中 一般cordova工程是通过CMD命令来创建一个工程并添加Android.ios等平台,这样的创建方式可以完整的下载开发过程中所需要的的插 ...

  8. Phonegap 自定义插件

    一.PhoneGap中js与Java之间相互调用分为同步和异步两种方式 1.同步:js调用Java类的方法,然后Java类的方法直接返回一个值给js端 2.异步:js调用Java类的方法,Java类的 ...

  9. cordova3.X 运用grunt生成plugin自定义插件骨架

    Cordova提供了一组设备相关的API,通过这组API,移动应用能够以JavaScript访问原生的设备功能,如摄像头.麦克风等.Cordova还提供了一组统一的JavaScript类库,以及为这些 ...

随机推荐

  1. 后端Apache获取前端Nginx反向代理的真实IP地址 (原创贴-转载请注明出处)

    ====================说在前面的话==================== 环境:前段Nginx是反向代理服务器:后端是Apache是WEB项目服务器 目的:让后端Apapche获取 ...

  2. Radmin Server-3.5 完美绿色破解版(x32 x64通用) 第三版 + 单文件制作方法

    Radmin Server v3.5 汉化破解绿色版(x32 x64通用) 第三版 下载链接: https://pan.baidu.com/s/1qYVcSQo 2016年7月8日更新第三版1.修复在 ...

  3. Keras

    sudo pip install keras --安装 新建一个文件,里面存储的数据:第一列是属性,第二列是类别 11220044 011220044 011220044 011220033 1112 ...

  4. ubuntu一些常用的命令

    1.docker里的ubuntu不知道密码,更新密码 sudo passwd 2.解压zip文件 unzip xx.zip 3.安装LAMP (1)sudo apt-get install apach ...

  5. c++左值和右值

    c++编程中如果出现把一个函数的返回值.强行转化后的对象 作为函数的参数传进去时,编译器会报错的情况.这时候就该注意了,你需要把该函数的参数类型前加上const修饰. 原因在于c++的左值和右值有所区 ...

  6. [转]抓取安卓APP内接口的方法--Charles

    http://blog.csdn.net/yyh352091626/article/details/52759294

  7. CSS选择器详解

    选择器是CSS的核心,从最初的元素.class/id选择器,演进到伪元素.伪类,以及CSS3中提供的更丰富的选择器,定位页面上的任意元素开始变得愈发的简单. 1.元素选择器 这是最基本的CSS选择器, ...

  8. python成长之路【第十二篇】:RabbitMQ入门

    一.RabbitMQ介绍 解释RabbitMQ,就不得不提到AMQP(Advanced Message Queuing Protocol)协议. AMQP协议是一种基于网络的消息传输协议,它能够在应用 ...

  9. Greenlets间如何实现互相通信?

    Greenlets互相通信之Event 1.为什么引入Event: 2.Event是什么: 3.编程实例. 为什么引入Event 1.windows中有Events,作为线程间同步的方法: 2.Gev ...

  10. Alpha版本十天冲刺--Day6

    会议总结 队员 今天完成 遇到的问题 明天要做 感想 鲍亮 获取帖子接口,url图片解析 无 获取帖子详情接口,发帖接口 这两天都是白天睡大觉,晚上敲代码,感觉得调一下作息了,假期更加爱赖床了,还得继 ...