Phonegap中自定义插件的使用

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

源代码结构图：

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

针对phonegap中activty扩展类：

Java代码  

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

插件实现类：

Java代码  

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中配置：

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. 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. });

页面调用如下：

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. $(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>

运行结果如下：