5

I am using ionic framework to make android app .I am having cordova 5.1 version .first I create a project using command line ionic start myApp tabs .The I add android platform .Now I need to Communicate java code to javascript code .Using google I found I need to make custom plugin .But I did not found any solution on google how we will create custom plugin .I found ng-cordova which give own plugin we can't make customize plugin .

I just need A button on UI .On click of that button I need to call java function having print some log on console .Then return success or error callback on JavaScript file

Could you please tell me how we will create a simple plugin in ionic ?

2 Answers 2

16

Yes, custom cordova plugins are painful because the official docs are not so great.

First of all we need to understand a custom plugin folder structure.

enter image description here

  1. wrapper - Name you want to give to your plugin
  2. src - folder where your source code goes
  3. android - since you are looking for android, an android folder is required
  4. www - it contains the javascript functions that calls the java code.(using cordova)
  5. plugin.xml - the very heart of the plugin, this files configures the plugin (adding permissions, copying files to platforms etc)

In your android folder create a CustomPlugin.java file.

package com.example.myplugin;

import org.apache.cordova.CallbackContext;
import org.apache.cordova.CordovaPlugin;
import org.json.JSONObject;
import org.json.JSONArray;
import org.json.JSONException;

public class CustomPlugin extends CordovaPlugin {

   @Override
   public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
    if ("beep".equals(action)) {
        // print your log here... 
        callbackContext.success();
        return true;
    }
    return false;  // Returning false results in a "MethodNotFound" error.
    }
 }

Now we need to build a interface between javascript and java code.

Cordova provides a simple function for this.

exec(<successFunction>, <failFunction>, <service>, <action>, [<args>]); 

create a MycustomPlugin.js file in www folder.

cordova.exec( successCallback,  ErrorCallBack, "service","action", []);

It is worth to know that,

service -> Name of the java class

action -> action we want to call ( in this case "beep" see above code)

Your MycustomPlugin.js file should look like this:

var MyPlugin = {
  PrintLog: function (successCallback, errorCallback, action) {
    cordova.exec(
            successCallback, // success callback function
            errorCallback, // error callback function
            'CustomPlugin', // mapped to our native Java class called
            action, // with this action name , in this case 'beep'
            []  )// arguments, if needed
  }
}
module.exports = MyPlugin;

Lastly you need to configure your plugin.xml file

 <?xml version="1.0" encoding="utf-8"?>
    <plugin xmlns="http://www.phonegap.com/ns/plugins/1.0"
            id="com.example.plugin"
            version="0.0.1">        
      <name>Cordova Plugin</name> 

      <engines>
        <engine name="cordova" version=">=3.4.0"/>
      </engines> 

      <js-module src="www/MycustomPlugin.js" name="CustomPlugin">
        <clobbers target="window.MycustomPlugin" />
      </js-module>    
    <platform name="android">

        <config-file target="res/xml/config.xml" parent="/*">
           <feature name="CustomPlugin">
              <param name="android-package" value="com.example.myplugin.CustomPlugin"/>
           </feature>
        </config-file>

       <source-file src="src/android/CustomPlugin.java" target-dir="src/com/example/myplugin"/>     

   </platform>
</plugin>

now add this plugin to your project. myApp (the one you created) using cordova plugin add /path/to/your/custom/plugin

And in $ionicPlatform.ready function call your java code from javascript

   window.MycustomPlugin.PrintLog(function(res){
     //success
   }, function(err){
        //error
   }, "beep")
Sign up to request clarification or add additional context in comments.

2 Comments

Hello But I am using ionic framwork it is work on ionic
Yes I know, Ionic is built on cordova, so it dosen't matter. It will work on ionic as well. Also if you want to go in more details check this devgirl.org/2013/09/17/…
0

I found your error:

TypeError: Arguments to path.join must be strings
    at Object.win32.join (path.js:233:13)

It was fixed by appending the end tag

</platform>
</plugin>

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.