Develop plugin for PhoneGap

Currently, the development of cross-platform mobile application development is gaining momentum. In this article I would like to draw attention to another tool for implementing such applications - PhoneGap. This is a free open source framework for creating mobile applications.

PhoneGap allows you to create iOS, Android, Windows Phone, BlackBerry, Bada, Symbian, webOS applications in HTML using JavaScript. The number of downloads of this framework has already increased 1 million, and the number of developers reaches 400,000.



Applications developed on PhoneGap are small in size, which is very convenient, however, this framework does not describe all the features of working with devices. In this article I will talk about writing your own plugins for PhoneGap. Such plug-ins are necessary in order to take advantage of the capabilities of the device, access to which is not provided by the main package of the above-mentioned framework.
')
First you should download PhoneGap on the official site . At the time of writing, the latest version was 2.0.0. We will not focus on the creation of the project, this process is described here . As a development platform, I chose Android.

To begin with, I will give an example of an already existing plug-in for launching 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 need to start by writing a java class:

 public class IntentPlugin extends Plugin { … } 

Here we will create some simple methods that will be triggered by pressing buttons in our phoneGap application (they can be with or without parameters).

Camera startup method:

 private void openPhotoCamera() throws IOException { Intent intent = new Intent(MediaStore.ACTION_IMAGE_CAPTURE); this.cordova.getActivity().startActivity(intent); } 

Browser startup method:

 private void openBrowse(String url) throws IOException { Intent intent = new Intent(Intent.ACTION_VIEW, Uri.parse(url)); this.cordova.getActivity().startActivity(intent); } 

Card startup method:

 private void openMap(String url) throws IOException { Intent intent = new Intent(android.content.Intent.ACTION_VIEW, Uri.parse(url)); this.cordova.getActivity().startActivity(intent); } 

Next, create an overloaded 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 the lines “makePhoto”, “lookAtBrowse” and “lookAtMap” are transmitted to us from a javascript file.

At this stage, everything looks pretty simple. Next, you need to include the created plugin in the config.xml file, which is located in res / xml. This is done as follows:

 <plugin name="IntentPlugin" value="com.ruswizards.phonegapplugin.IntentPlugin"/> 

In the new JS file, create an object of the IntentPlugin class:

 function IntentPlugin() { }; if(!window.plugins) { window.plugins = {}; } if (!window.plugins.intentPlugin) { window.plugins.intentPlugin = new IntentPlugin(); } 

Consider the process of accessing this object using the example of creating one function:

 IntentPlugin.prototype.makePhotoFunction = function(url) { cordova.exec(null, null, "IntentPlugin", "makePhoto", [url]); }; 

Now, when calling makePhotoFunction (""), we will access the openPhotoCamera () method.
The same for the other two functions:

 IntentPlugin.prototype.lookAtBrowseFunction = function(url) { cordova.exec(null, null, "IntentPlugin", "lookAtBrowse", [url]); }; IntentPlugin.prototype.lookAtMapFunction = function(url) { cordova.exec(null, null, "IntentPlugin", "lookAtMap", [url]); }; 

In the file where these functions will be called, you should add:

 <script type="text/javascript" charset="utf-8" src="intentPlagin.js"></script> 

That's all ready, now we can call the appropriate functions.
Add 4 buttons to the file body:

 <a id="makeVideo" data-role="button">Create video</a> <a id="makePhoto" data-role="button">Create photo</a> <a id="lookAtBrowse" data-role="button">Open browse</a> <a id="lookAtMap" data-role="button">Open map</a> 

The first of them handles the internal function, which was described at the very beginning of the article; the rest - refer to the functions that were created on their own. This happens 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"); }); 

So, everything works! I hope this article has left a positive impression, and also gave some useful information about writing applications on PhoneGap.