Wednesday, 13 June 2012

Simple plugins with PhoneGap1.7 Android

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{


public PluginResult execute(String action, JSONArray data, String callbackID) {


       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(){};


  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="

5)Now write the html which will execute this plugin.Click the button " Click Me To Return Name" to run the plugin

<!DOCTYPE html>



        <meta charset="utf-8" />

        <meta name="viewport" content="width=device-width, initial-scale=1" />



        <link rel="stylesheet" href="" />

        <link rel="stylesheet" href="my.css" />

        <link rel="stylesheet" href="photoswipe.css" type="text/css"/>


           /* App custom styles */


        <script type="text/javascript" src="klass.min.js"></script>

        <script src="">


        <script src="">


        <script src="cordova-1.7.0.js">


        <script src="





         <div data-role="page" id="home">

              <div data-theme="a" data-role="header">


                    Plugin Example



               <div data-role="content">


                        <a data-role="button" data-transition="fade"  id="runplugin">

                            Click Me To Return Name




               <div data-role="footer"></div>


<script type="text/javascript">










Using this code you will be able to run a simple plugin using PhoneGap

No comments:

Post a Comment