码迷，mamicode.com
首页 > 其他好文 > 详细

Phonegap中自定义插件的使用

时间：2015-06-14 10:48:24      阅读：127      评论：0      收藏：0      [点我收藏+]

标签：

         在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. <!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.         
  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>  

 

运行结果如下：

技术分享

 

Phonegap中自定义插件的使用

标签：

原文地址：http://www.cnblogs.com/isule/p/4574636.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！