Cordova-Android Plugin Example / Cordova-Android 插件详解

Posted by Pengyu on October 27, 2015
**------English (英文)------**

This is sample cordova plugin (currently for android platform only). Tested with Cordova 5.3.3 + Android 5.1.1

You can get the original codes from here.

How to run example?

Create a new cordova project, for example:

cordova create PluginTest com.shongsu.test PluginTest

Go into the directory you just created.

cd PluginTest

Add Android platform.

cordova platform add android

Add this plugin to your cordova project, type:

cordova plugin add https://github.com/shongsu/cordova-example-plugin.git

or clone this git and add it locally, for example:

cordova plugin add file-path-here

Eidt your www/index.html file, here is full example:

<!DOCTYPE html>

``` Cordova - Android Plugin Example ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ``` ```

Cordova - Android Plugin Example

```

1. a+b;
2. a-b;
3. a!;

``` ``` ``` ``` ``` ``` ```

Run application.

  In this example, page shuld alert "5 + 3 = 8", "5 - 3 = 2" and "5! = 120".




How it works?
-------------

We have **three files**: native code (.java), javascript code which exposes native code to cordova box (.js) and plugin manifest file (.xml). The structure looks as

ExamplePlugin
│  plugin.xml
│
├─src
│  └─android
│       ExamplePlugin.java
│
└─www

ExamplePlugin.js

<br />

Let's take a look at plugin files:

`src/android//ExamplePlugin.java` contains native code which executes outside of your cordova box.
<br />
`www/ExamplePlugin.js` connects native code with javascript - declares javascript functions `func_add`, `func_sub` and `func_factorial`.
<br />
`plugin.xml` contains info about plugin itself and paths to java and js files.


ExamplePlugin.java
-----------------

package com.shongsu.plugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;
import org.apache.cordova.PluginResult;

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

/**
 * This class performs sum called from JavaScript.
 */
public class ExamplePlugin extends CordovaPlugin {

@Override public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException { if (action.equals(“func_add”)) { Integer num1 = args.getInt(0); Integer num2 = args.getInt(1); this.func_add(num1, num2, callbackContext); return true; } else if (action.equals(“func_sub”)) { Integer num1 = args.getInt(0); Integer num2 = args.getInt(1); this.func_sub(num1, num2, callbackContext); return true; } else if (action.equals(“func_factorial”)) { Integer num1 = args.getInt(0); this.func_factorial(num1, callbackContext); return true; }


return false; } ``` ```

private void func_add(Integer num1, Integer num2, CallbackContext callbackContext) { if(num1 != null && num2 != null) { callbackContext.success(num1 + num2); } else { callbackContext.error(“Expected two integer arguments.”); } }


private void func_sub(Integer num1, Integer num2, CallbackContext callbackContext) { if(num1 != null && num2 != null) { int s = num1 - num2; callbackContext.success(s); } else { callbackContext.error(“Expected two integer arguments.”); } }


private void func_factorial(Integer num1, CallbackContext callbackContext) { if(num1 != null && num1 >= 0) { int result = 1; if (num1 == 0 || num1 ==1) { result = 1; } else { for(int i=1;i<=num1;i++) { result *= i; } }


    callbackContext.success(result);
} else {
    callbackContext.error("Expected a non-negative integer argument.");
} } ``` ```

}



First method `execute` is the same in every plugin, it overrides standard method of CordovaPlugin class and allways has the same parameters:

- Parameter `action` is string containing name of method to execute.
- `args` is array containing variable number of arguments
- `callbackContext` has `.success` and `.error` methods which are called when your function finishes or in case of error.

Note that our plugin class can have many methods, but just one `execute` function. We test `action` argument to see which method we should call.
<br />

Next method `func_add` is our example function: it receives two integers and callbackContext. In case of error it calls `callbackContext.error` with error message string, or in case of success it calls `callbackContext.success` with result.

Same as method `func_sub` and `func_factorial`.

ExamplePlugin.js
---------------

(function (cordova) {

function TestPlugin() {}



TestPlugin.prototype.func_add = function(num1, num2, successCallback, errorCallback) { cordova.exec(successCallback, errorCallback, “ExamplePlugin”, “func_add”, [num1, num2]); };


TestPlugin.prototype.func_sub = function(num1, num2, successCallback, errorCallback) { cordova.exec(successCallback, errorCallback, “ExamplePlugin”, “func_sub”, [num1, num2]); };


TestPlugin.prototype.func_factorial = function(num1, successCallback, errorCallback) { cordova.exec(successCallback, errorCallback, “ExamplePlugin”, “func_factorial”, [num1]); };



window.testplugin = new TestPlugin();


// backwards compatibility window.plugins = window.plugins || {}; window.plugins.testplugin = window.testplugin; })(window.PhoneGap || window.Cordova || window.cordova);



In this file we extend `window.testplugin` object with function `func_add` (for example) which calls `cordova.exec`. Cordova translates that and calls `execute` method from our class declared in ExamplePlugin.java.

Arguments to `exec` are allways the same: two callback functions (success and error callback), plugin class name, action name and array of arguments.
You can pass any number of arguments - they are processed by execute function as described.

plugin.xml
----------

<?xml version="1.0" encoding="UTF-8"?>
<plugin xmlns="http://apache.org/cordova/ns/plugins/1.0"

id=”com.shongsu.plugin.ExamplePlugin” version=”1.0.0”>


ExamplePlugin

  <description>

Cordova-Android Plugin Example

  </description>

  <js-module src="www/ExamplePlugin.js" name="ExamplePlugin">
<clobbers target="ExamplePlugin" />

</js-module>


  <engines>
  </engines>

  <!-- android -->
  <platform name="android">

  </platform>

  <!-- more platforms here -->

</plugin>

```

This file tells cordova how to deal with plugin. Package name, class name and (relative) paths to files are defined here. More details about plugin.xml.

For more details refer:

Cordova Plugin Development Guide and Android Plugins