How to add/use plugins in Phonegap 3.0

Introduction:
Phonegap 3.0 plugins can be added to the project using the CLI (Command Line Interface). Phonegap 3.0 had made the developers life much easier to utilize the plugins. We just need to follow two basic steps to use the plugins.

Description:
Here are the two basic steps we need to flow.
1. Adding the plugin to application
2. Implementing the javascript function

Before moving forward, I would like to elaborate the basic structure used with Phonegap 3.0 plugins. The plugins will be having the below structure.

www
   |_ [javascript file (.js)]
src
   |_ android
   |           |_ [native file (.java)]
ios
   |_ [native file (.mm, .h)]
readme.txt (optional)
   |
plugin.xml

Let’s explore each steps in details.

Step #1 : Adding the plugin to application
We need to add the plugin to application using the CLI. Below command will do so,

 phonegap local plugin add <path to plugin>

We can set the path to Git Hub link or any local file path or any other hosted path pointing to the root folder of the plugin. Make sure the success message shows as plugin successfully added. Now the plugin JS file is now added to the WWW folder and the native files to SRC folder.

Step #2 : Implementing the JavaScript function.

Next include the JavaScript file in the HTML. Now define the function that will call the plugin. Basically, in Phonegap 3.0, we will be having a variable available at windows scope, we need to consume it. If the variable is not defined in the readme file, we can simply get that in plugin.xml as <clobbers target=”window.sampleplugin” />

So now our function should call the required method of this scope.

function InitPlugin() {
    sampleplugin.somemethod( function() {
		// success callback
	},
	function() {
		// error callback
    });
}

We just need to call the above function to start the plugin.

Summary:
In Phonegap 3.0, we don’t need to manually copy the files to its required path, this has been handled by the CLI, just we need to consume it. That’s it.

Written ByAshis Kumar, Software Developer, Mindfire Solutions

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s