phoneGap插件

快过年回家了，为了不阉割phonegap开发的介绍，在今天完成phonegap的最后一个介绍，在上一篇中提到过的如何开发phonegap的插件。
   目前PhoneGap虽然提供了很多的API，但是我们也很容易发现，他有很多地方不能满足我们的需求，比如发短信。我也将介绍如何开发一个针对PhoneGap发短信的Plugin。（Android 版本）。
1、创建一个Android工程，创建之后的目录结构如图：


2、把PhoneGap的android版jar包、javascript和xml文件夹加入工程。（参照上一篇中的做法）目录结构：


3、新增一个类MessagePlugin
这个类就是负责发送短信功能的具体类，可以调用发送短信的android API，当然如果是其他功能，则调用相应的API，但是当使用这个API时记得申请权限。
具体代码：

Java代码

1. package com.phonegap.kiddyu.plugin; 
2.  
3. import org.json.JSONArray; 
4. import org.json.JSONException; 
5. import org.json.JSONObject; 
6.  
7. import android.telephony.SmsManager; 
8.  
9. import com.phonegap.api.Plugin; 
10. import com.phonegap.api.PluginResult; 
11.  
12. public class MessagePlugin extends Plugin { 
13.      
14.     private static final String SEND = "send"; 
15.      
16.     @Override 
17.     public PluginResult execute(String action, JSONArray data, String callbackId) { 
18.         PluginResult result; 
19.         if (SEND.equals(action)) { 
20.             try { 
21.                 JSONObject jsonObj = new JSONObject(); 
22.                 String target = data.getString(0); 
23.                 String content = data.getString(1); 
24.                 SmsManager sms = SmsManager.getDefault(); 
25.                 sms.sendTextMessage(target, null, content, null, null); 
26.                 jsonObj.put("target", target); 
27.                 jsonObj.put("content", content); 
28.                 result = new PluginResult(PluginResult.Status.OK, jsonObj); 
29.             } catch (JSONException ex) { 
30.                 result = new PluginResult(PluginResult.Status.JSON_EXCEPTION); 
31.             }catch(IllegalArgumentException ex){ 
32.                 result = new PluginResult(PluginResult.Status.ERROR); 
33.             } 
34.         } else { 
35.             result = new PluginResult(PluginResult.Status.INVALID_ACTION); 
36.         } 
37.  
38.         return result; 
39.     } 
40.  
41. } 

package com.phonegap.kiddyu.plugin;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

import android.telephony.SmsManager;

import com.phonegap.api.Plugin;
import com.phonegap.api.PluginResult;

public class MessagePlugin extends Plugin {
	
	private static final String SEND = "send";
	
	@Override
	public PluginResult execute(String action, JSONArray data, String callbackId) {
		PluginResult result;
		if (SEND.equals(action)) {
			try {
				JSONObject jsonObj = new JSONObject();
				String target = data.getString(0);
				String content = data.getString(1);
				SmsManager sms = SmsManager.getDefault();
				sms.sendTextMessage(target, null, content, null, null);
				jsonObj.put("target", target);
				jsonObj.put("content", content);
				result = new PluginResult(PluginResult.Status.OK, jsonObj);
			} catch (JSONException ex) {
				result = new PluginResult(PluginResult.Status.JSON_EXCEPTION);
			}catch(IllegalArgumentException ex){
				result = new PluginResult(PluginResult.Status.ERROR);
			}
		} else {
			result = new PluginResult(PluginResult.Status.INVALID_ACTION);
		}

		return result;
	}

}

4、为phonegap增加一个javascript的API
在工程目录www/js下面增加一个javascript文件：phonegapPlugin.js，然后加入代码：

Javascript代码

1. var Message = function(){}; 
2.  
3. Message.prototype = { 
4.         send: function(success, error, target, content){ 
5.             PhoneGap.exec(success, error, "MessagePlugin", "send", [target, content]); 
6.         } 
7. }; 
8.  
9. PhoneGap.addConstructor(function() { 
10.     PhoneGap.addPlugin("message", new Message()); 
11. }); 

var Message = function(){};

Message.prototype = {
		send: function(success, error, target, content){
			PhoneGap.exec(success, error, "MessagePlugin", "send", [target, content]);
		}
};

PhoneGap.addConstructor(function() {
	PhoneGap.addPlugin("message", new Message());
});

关键的方法是PhoneGap.exec(success, error, "MessagePlugin", "send", [target, content]);
做一下简单的介绍：
success：方法执行成功时调用该函数；
error：方法执行失败时调用该函数；
"MessagePlugin"：类名，最好与前面创建的Java类一个样；
"send"：插件类中的参数String action；
[target, content]：一个数据，插件类中的参数JSONObject data；

PhoneGap.addPlugin("message", new Message());中的"Message"是你调用send方法时的实例名称。（不知道这样叫是否准确）


5、将自己的插件加入到PhoneGap的配置中
打开目录中res/xml/plugins.xml文件，在最后面加上
<plugin name="MessagePlugin" value="com.phonegap.kiddyu.plugin.MessagePlugin"/>
注意name要和你的插件类名一致！ value是类的包名.类名。

插件到这里就算完成了，让我们测试一下到底能不能工作吧。
加入一个简单的html页面（上一篇已经介绍怎么开发，这里不做重复介绍），代码参照下面：

Html代码

1. <!DOCTYPE html> 
2. <html> 
3. <head> 
4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
5. <script type="text/javascript" charset="utf-8" src="../js/jquery_1_6_4.js"></script> 
6. <script type="text/javascript" charset="utf-8" src="../js/phonegap-1.2.0.js"></script> 
7. <script type="text/javascript" charset="utf-8" src="../js/phonegapPlugin.js"></script> 
8. <script type="text/javascript"> 
9.     $(function(){ 
10.         var onSend = function(){ 
11.              
12.             var success = function(data){ 
13.                 alert("tel : " + data.target + ', and content : ' + data.content); 
14.             }; 
15.              
16.             var error = function(e){ 
17.                 alert(e); 
18.             }; 
19.              
20.             var tel = $('#tel').val(); 
21.             var content = $('#content').val(); 
22.             window.plugins.message.send(success, error, tel, content); 
23.         }; 
24.          
25.         $('#send').bind('click', onSend); 
26.     }); 
27. </script> 
28. </head> 
29. <body> 
30.     <div id="messageDiv"> 
31.         <input type="tel" id="tel" value="5556" /> 
32.         <textarea rows="20" cols="25" id="content"></textarea> 
33.         <button type="button" id="send">Send Me</button> 
34.     </div> 
35. </body> 
36. </html> 

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" charset="utf-8" src="../js/jquery_1_6_4.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/phonegap-1.2.0.js"></script>
<script type="text/javascript" charset="utf-8" src="../js/phonegapPlugin.js"></script>
<script type="text/javascript">
	$(function(){
		var onSend = function(){
			
			var success = function(data){
				alert("tel : " + data.target + ', and content : ' + data.content);
			};
			
			var error = function(e){
				alert(e);
			};
			
			var tel = $('#tel').val();
			var content = $('#content').val();
			window.plugins.message.send(success, error, tel, content);
		};
		
		$('#send').bind('click', onSend);
	});
</script>
</head>
<body>
	<div id="messageDiv">
		<input type="tel" id="tel" value="5556" />
		<textarea rows="20" cols="25" id="content"></textarea>
		<button type="button" id="send">Send Me</button>
	</div>
</body>
</html>

注意在页面中加入你自己的phonegapPlugin.js，而且顺序必须在phonegap.js之后。
其他的都参照上一篇中，修改自己的Activity就开始测试吧！一下是测试截图：