zoukankan      html  css  js  c++  java

  • Phonegap中自定义插件的使用

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

    运行结果如下：
  • 相关阅读:
    Python汉字转换成拼音
    python之Tkinter控件学习
    python 函数式编程：高阶函数，map/reduce
    python的高级特性：切片，迭代，列表生成式，生成器，迭代器
    python tkinter Listbox用法
    python函数定义语法总结
    Cmder 快捷键
    录音水波动画
    图片截取部分显示
    移动web在ios和android下点击元素出现阴影问题
  • 原文地址：https://www.cnblogs.com/isule/p/4574636.html
Copyright © 2011-2022 走看看