Chinaunix首页 | 论坛 | 博客

BigTeam_learninglanduochong.blog.chinaunix.net

首页　| 　博文目录　| 　关于我

landuochong

  • 博客访问： 3534455
  • 博文数量： 864
  • 博客积分： 14125
  • 博客等级： 上将
  • 技术积分： 10634
  • 用 户 组： 普通用户
  • 注册时间： 2007-07-27 16:53
个人简介

https://github.com/zytc2009/BigTeam_learning

文章分类

全部博文（864）

文章存档

2023年（1）

2021年（1）

2019年（3）

2018年（1）

2017年（10）

2015年（3）

2014年（8）

2013年（3）

2012年（69）

2011年（103）

2010年（357）

2009年（283）

2008年（22）

我的朋友
最近访客
推荐博文
相关博文
Phonegap中自定义插件的使用

分类： 系统运维

2012-07-24 17:01:28

转自：http://topmanopensource.iteye.com/blog/1513263
在phonegap中需要实现特定相关的功能，可能需要自定义扩展一下功能，那么扩展phonegap组件就成为了可能。

 

源代码结构图：

 

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

 针对phonegap中activty扩展类：

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

 

 

插件实现类：

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

 

 

phonegap中plugin.xml中配置：

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的编写：

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

 

页面调用如下：

Html代码  收藏代码
  1. >  
  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 Apptitle>  
  7.       
  8.     <script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js">script>  
  9.       
  10.     <script type="text/javascript" charset="utf-8" src="jquery.mobile/jquery-1.6.4.min">script>  
  11.       
  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.         
  17.      $(function(){  
  18.         $("#datepicker").click(function(){  
  19.             alert("0000000");  
  20.               window.plugins.datePickerPlugin.showDateOrTime(  
  21.                     'date',  
  22.                     function(r){  
  23.                         document.getElementById("mydatetargetfield").value = r.day + "/" + r.month + "/" + r.year;  
  24.                     },  
  25.                     function(e){console.log(e);}  
  26.                 );  
  27.         });  
  28.      });  
  29. script>    
  30.   
  31.   head>  
  32.   <body  class="theme">  
  33.     <input id="mydatetargetfield" type="text" />  
  34.    <input id="datepicker" type="button" value="时间选择器">  
  35.   body>  
  36. html>  

 

运行结果如下：

 

源代码如下：

 

  • (860.1 KB)
  • 下载次数: 57
阅读(1198) | 评论(0) | 转发(0) |
0

上一篇：Phonegap开发Android版本的二维码扫码

下一篇：Native+WebApp中Phonegap调用Android Activity

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6