Site navigation

Social networks

Contact us

Enhance PhoneGap with your own plugins

Cross platform development goes forward at a steady gait. This post is about one of the means used for development of cross platform applications - PhoneGap. It is a free open source framework for mobile development.

With PhoneGap you can develop for iOS, Android, Windows Phone, BlackBerry, Bada, Symbian, webOS and create HTML applications using JavaScript. This framework has already been downloaded more than 1 million times, and the number of PhoneGap developers amounts to 400 000.

The apps, developed with PhoneGap are not big in size, which is a substantial advantage; however, this framework doesn't provide opportunities to work with all the peculiar features of mobile devices. In this post I'm going to talk about the development of special plugins for PhoneGap. Such plugins are necessary, if you want to take advantage of some particular features of mobile devices, as the access to some of the features is not provided by the standard pack of the above mentioned framework.

To begin with you should download PhoneGap from their official website.

I used version 2.0.0., which was the latest when writing this post. Let's not pay too much attention to the project creation, as this procedure is well described here.

I use Android as a platform for development.

At first, I'd like to share an existing plugin for the launching of a video camera:
$('#makeVideo').click(function() { 
	navigator.device.capture.captureVideo(captureSuccess, captureError, {limit : 1}); 
	function captureSuccess(mediaFiles) {console.log("Capturing video successfully finished");} 
	function captureError(error) {console.log("Video capture error + " + error.code);}
});
When creating your own plugin you should start writing a java class:
public class IntentPlugin extends Plugin {}

Then we create several simple methods, that will snap into action upon pressing the buttons in our PhoneGap application (the methods can have some parameters or have not any).

Here is the method for starting a video cam:

private void openPhotoCamera() throws IOException {Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); this.cordova.getActivity().startActivity(intent);}
Here is the method for opening a browser:
private void openBrowse(String url) throws IOException {Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); 
this.cordova.getActivity().startActivity(intent);}
Here is the method for opening a map:
private void openMap(String url) throws IOException {Intent intent = new Intent(android.content.Intent.ACTION_VIEW, Uri.parse(url)); this.cordova.getActivity().startActivity(intent);}
Then create an overriding method:
@Override public PluginResult execute(String action, JSONArray args, String callbackId) {
	PluginResult.Status status = PluginResult.Status.OK;    
	String result = "";
	try { 
		if (action.equals("makePhoto")) {
			openPhotoCamera();
		} else if (action.equals("lookAtBrowse")) { 
			openBrowse(args.getString(0)); 
		} else if (action.equals("lookAtMap")) {
			openMap(args.getString(0));
		} else {
			status = PluginResult.Status.INVALID_ACTION;
		}
		return new PluginResult(status, result);
	} catch (JSONException e) {
		return new PluginResult(PluginResult.Status.JSON_EXCEPTION);
	} catch (IOException e) {
		return new PluginResult(PluginResult.Status.IO_EXCEPTION);
	}
}
where , and are retrieved from the JavaScript file.It looks quite easy up to this point. Then it is necessary to include this created plugin into config.xml file, which is located in res/xml. You can do it this way:
<plugin name="IntentPlugin" value="com.ruswizards.phonegapplugin.IntentPlugin"/>
Create a class object IntentPlugin in a new JS file:
function IntentPlugin() {};
if(!window.plugins) {window.plugins = {};}
if (!window.plugins.intentPlugin) {
	window.plugins.intentPlugin = new IntentPlugin();
}
Let's create a function and look how we call the object:
IntentPlugin.prototype.makePhotoFunction = function(url) {
	cordova.exec(null, null, "IntentPlugin", "makePhoto", [url]);
};
Now while calling makePhotoFunction("") we are using method openPhotoCamera().
It relates to the other two functions as well:
IntentPlugin.prototype.lookAtBrowseFunction = function(url) {
	cordova.exec(null, null, "IntentPlugin", "lookAtBrowse", [url]);
};
IntentPlugin.prototype.lookAtMapFunction = function(url) {
	cordova.exec(null, null, "IntentPlugin", "lookAtMap", [url]);
};
Add the following to the file, where these functions will be called:
<script type="text/javascript" charset="utf-8" src="intentPlagin.js"></script>
All set! Now we can call necessary functions.
Add 4 buttons to the file body:
<a id="makeVideo" data-role="button">Create video</a><br /><a id="makePhoto" data-role="button">Create photo</a><br /><a id="lookAtBrowse" data-role="button">Open browse</a><br /><a id="lookAtMap" data-role="button">Open map</a>
The first button relates to the internal function that was described in the very beginning of this post. The other buttons call the functions that were created by us. The procedure is as follows:
$('#makePhoto').click(function() {
	window.plugins.intentPlugin.makePhotoFunction("");
});
$('#lookAtBrowse').click(function() {
	window.plugins.intentPlugin.lookAtBrowseFunction("http://www.google.com");
});
$('#lookAtMap').click(function() {
	window.plugins.intentPlugin.lookAtMapFunction("geo:52.431198,31.004899");
});

It works! And I hope this post left you with positive impression about PhoneGap and some information useful for mobile application development.

Andrey Kudievskiy

ABOUT

WEEZLABS

Not just another web and mobile apps development company!

WeezLabs is about dreaming big and helping our clients reach their full potential.

LEARN MORE

VISIT OUR OFFICE:

1848 Lincoln Blvd, Suite #100,
Santa Monica, CA 90404

TELL US HOW

WE CAN HELP

Call us 310.776.6234 or complete the form below.