Communication between Android Java and Phonegap Ja

Question

I believe that it's possible to call Java methods from (PhoneGap) Javascript.

Anyone knows how to do that?? (I know how to do it by changing the source code of PhoneGap, but I'd avoid that)

Answer 1

PhoneGap has a decent Plugin API. You'd write the plugin in Java by implementing the IPlugin interface. Most of the magic is in the execute() function.

public interface IPlugin {

    /**
     * Executes the request and returns PluginResult.
     *
     * @param action        The action to execute.
     * @param args          JSONArry of arguments for the plugin.
     * @param callbackId    The callback id used when calling back into JavaScript.
     * @return              A PluginResult object with a status and message.
     */
    PluginResult execute(String action, JSONArray args, String callbackId);

        // ... more ...
}

The best way to start writing a plugin is by writing the javascript API first. You would typical start by writing a custom javascript class, and in each method on the javascript class, marshal the variables and call into the plugin you developed using the Phonegap.exec() method. Here is the method signature for your reference.

/* src/com/phonegap/api/PluginManager.java */
/**
 * Receives a request for execution and fulfills it by finding the appropriate
 * Java class and calling it's execute method.
 *
 * PluginManager.exec can be used either synchronously or async. In either case, a JSON encoded
 * string is returned that will indicate if any errors have occurred when trying to find
 * or execute the class denoted by the clazz argument.
 *
 * @param service       String containing the service to run
 * @param action        String containt the action that the class is supposed to perform. This is
 *                      passed to the plugin execute method and it is up to the plugin developer
 *                      how to deal with it.
 * @param callbackId    String containing the id of the callback that is execute in JavaScript if
 *                      this is an async plugin call.
 * @param args          An Array literal string containing any arguments needed in the
 *                      plugin execute method.
 * @param async         Boolean indicating whether the calling JavaScript code is expecting an
 *                      immediate return value. If true, either PhoneGap.callbackSuccess(...) or
 *                      PhoneGap.callbackError(...) is called once the plugin code has executed.
 *
 * @return              JSON encoded string with a response message and status.
 */
@SuppressWarnings("unchecked")
public String exec(final String service, final String action,
    final String callbackId, final String jsonArgs,
    final boolean async)

You also need to register the Plugin. You do this by adding the registration code at the bottom of your custom javascript library.

In the example below, the author defined a javascript BarcodeScanner class and registers it using the addConstructor method.

Two steps are carried out in the addConstructor:

1. Create a new instance of BarcodeScanner in javascript and registers it. This is accessible in javascript as window.plugins.barcodeScanner

2. Registers the custom Plugin class with a service name. This service name is passed in as the first argument to PhoneGap.exec so that PhoneGap can instantiate the java plugin class and call the execute() method on it.

Sample registration code:

PhoneGap.addConstructor(function() {
    /* The following registers an instance of BarcodeScanner in window.plugins.barcodeScanner */
    PhoneGap.addPlugin('barcodeScanner', new BarcodeScanner());

    /* The following associates a service name BarcodeScanner with a class com.beetight.barcodescanner.BarcodeScanner */
    /* The service name is the first argument passed into PhoneGap.exec */
    PluginManager.addService("BarcodeScanner","com.beetight.barcodescanner.BarcodeScanner");
});

Answer 2

a simpler form:

public void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    super.init(); 
    super.appView.getSettings().setJavaScriptEnabled(true);
    super.appView.addJavascriptInterface(this, "MyCls");
    super.loadUrl("file:///android_asset/www/login.html");
}

Answer 3

If anyone gets nullPointer exception using the code above, do super.oncreate() first and then super..init()

super.onCreate(savedInstanceState);
super.init();

I found this solution here: Phonegap Google Group

Thanks a lot to @zorglub76 for the solution....

Answer 4

addJavaScriptInterface(mc, "MyCls") without Gap init()ed may cause crush of the app, you'd better add super.init() before addJavascriptInterface()

public class Main extends DroidGap
{
   private MyClass mc;

   @Override
   public void onCreate(Bundle savedInstanceState)
   {
       super.onCreate(savedInstanceState);

       super.init();

       mc = new MyClass(this, appView);
       appView.addJavascriptInterface(mc, "MyCls");

       super.loadUrl(getString(R.string.url));
   }
}

Answer 5

Communication from JavaScript to native is achieved by overriding the JavaScript prompt function in the Android native code and the message passed is much like that used in iOS. We used to use WebView.addJavascriptInterface to add Java objects directly to the JavaScript sandbox but that was causing some devices to crash with Android 2.3. To call JavaScript from native we currently use WebView.loadUrl(”javascript:…”) but that has some problems so we are soon moving over to polling a Java message queue calling a local HTTP server via a long-lived XHR connection.

Description by here

Answer 6

I finally made it work.

• Create a class with methods you want to use:

  public class MyClass {
    private WebView mAppView;
    private DroidGap mGap;
  
    public MyClass(DroidGap gap, WebView view)
    {
      mAppView = view;
      mGap = gap;
    }
  
    public String getTelephoneNumber(){
      TelephonyManager tm = 
        (TelephonyManager) mGap.getSystemService(Context.TELEPHONY_SERVICE);
      String number = tm.getLine1Number();
      return number;
    }
  }
  

• In your main activity add a Javascript interface for this class:

  public class Main extends DroidGap
  {
      private MyClass mc;
  
      @Override
      public void onCreate(Bundle savedInstanceState)
      {
          super.onCreate(savedInstanceState);
          super.init();
  
          mc = new MyClass(this, appView);
          appView.addJavascriptInterface(mc, "MyCls");
  
          super.loadUrl(getString(R.string.url));
      }
  }
  

• In Javascript call window.MyCls methods:

  <script>
    $(function(){
      $("#phone").text("My telephone number is: " + 
              window.MyCls.getTelephoneNumber());
    });
  </script>
  

Note:

As mentioned in the comment, for Android version 4.2 and above, add @JavascriptInterface to the method which you want to access from your HTML page. Reference.