Recently I had a major run in with PhoneGap 1.7 and since I had a lot of java just begging to be called I ended up using plugins in PhoneGap.
Though there is a decent example on the PhoneGap website , I found it a little off base for a first plugin example , to explain just the basic functioning of plugins.The example I post here is a beginner level example which will help you understand the basic mechanism of plugins without any fancy stuff.
Steps :
1)Create an PhoneGap powered Android Project using
phonegap docs
2)This is where we write our business logic . Create a java file MyPluginClass . This class will return some standard string to a html. You need to override the execute method of Plugin class and send back your result in a PluginResult object
package org.firstplugin;
public class
MyPluginClass extends Plugin{
@Override
public PluginResult execute(String action, JSONArray data, String callbackID) {
try{
PluginResult rs=null;
/* Create the JSONObject which will be sent in PluginResult */
JSONObject jsonobj=new JSONObject();
/* Add whatever you want to send back to PhoneGap in the JSONObject */
jsonobj.put("myname","whats in a name");
/* Put your JSONObject in a PluginResult object */
rs=new PluginResult(Status.OK,jsonobj);
}
catch(JSONException e){ LOG.d("DEBUG",e.getmessage())}
/* Send your PluginResult object back to PhoneGap */
return rs;
}
}
3)Now we shall write the plugin javascript which will call MyPluginClass.This "myplugin.js" JS file will call PhoneGap.exec which in turn will call the execute method of MyPluginClass.
var CallPlugin=function(){};
CallPlugin.prototype.get=function(successCallback,failureCallback){
return PhoneGap.exec(successCallback,failureCallback,' MyPluginClass ','show',[ ]);
};
PhoneGap.addConstructor(function() {
//Register the javascript plugin with PhoneGap
PhoneGap.addPlugin('callplugin', new CallPlugin());
});
In detail :
successCallback : This method will be called after the plugin gets executed
failureCallback : This method will be called in case of error
We can also pass arguments to the Java class through the array
4)Register the plugin in plugins.xml with :
<plugin name="
MyPluginClass" value="
org.firstplugin.MyPluginClass"></plugin>
5)Now write the html which will execute this plugin.Click the button " Click Me To Return Name" to run the plugin
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>
</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<link rel="stylesheet" href="my.css" />
<link rel="stylesheet" href="photoswipe.css" type="text/css"/>
<style>
/* App custom styles */
</style>
<script type="text/javascript" src="klass.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js">
</script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js">
</script>
<script src="cordova-1.7.0.js">
</script>
<script src="
myplugin.js">
</script>
</head>
<body>
<div data-role="page" id="home">
<div data-theme="a" data-role="header">
<h3>
Plugin Example
</h3>
</div>
<div data-role="content">
<div>
<a data-role="button" data-transition="fade" id="runplugin">
Click Me To Return Name
</a>
</div>
</div>
<div data-role="footer"></div>
</div>
<script type="text/javascript">
$("#
runplugin").click(function(e){
window.plugins.callcamplugin.get(
function(r){alert(JSON.stringify(r);},
function(e){console.log(e)}
);
});
</script>
</body>
</html>
Using this code you will be able to run a simple plugin using PhoneGap
