PhoneGap

PhoneGap: Utilizing Native Mobile Features with Plugins

by on November 4, 2013 8:22 am

Recently, I was tasked with developing a mobile application in PhoneGap that utilized the Bluetooth feature. Although PhoneGap provides basic functionality, PhoneGap lacks the ability to implement mobile features like Bluetooth. However, it provides the mechanism to implement a user-defined plugin and the means to access the native functionality in the PhoneGap application. In this blog I will outline the steps for implementing a plugin for PhoneGap to utilize native mobile features.

In my previous blog “Android, iOS, and Windows Mobile…Oh My: An Introduction to PhoneGap,” I summarized the basic functionality. I would recommend reviewing the post if you have not yet done so.

Implementing a Plugin

To implement a plugin, you need to implement a JavaScript interface, which allows the functions to be accessed through HTML pages in a PhoneGap application. The plugin interface must be implemented in the native language.

The cordova.exec function is used in JavaScript interface to access the native features through a user-defined native plugin. I have outlined the format and description for the function and parameters for reference:

cordova.exec(success, failure, "NativePluginName", "start", [Arg]);

The arguments:

  • “success” – The function that will be called on the successful completion of the native call.
  • “failure” – The function call that will be called on error of the native plugin and pass the message based on the plugin implementation.
  • “NativePluginName” – The service class to be called on native side. Typically it will be the class name of a native plugin.
  • “start” – The action to be called on native plugin. Normally it is the method name. However, a different action name can be used based on the action name used in a native plugin (a description is provided below).
  • “[Arg]” – The last parameter enables passing the array of arguments for the method in the native plugin implementation.

Make sure to include the JavaScript interface in a HTML webpage to access the JavaScript interface functions.

<script type="text/JavaScript" src="js/JavaScriptplugininterface.js"></script>

In the statement above, JavaScriptplugininterface is the name of the JavaScript interface name. Usually it is similar to the native plugin.

User-defined Native Plugin

For the user-defined native plugin, I will talk about the Android plugin which utilizes Java.

To implement the native plugin interface, your class needs to extend to “CordovaPlugin.” Android uses intents to communicate between processes. The Cordova plugin provides the access to the Cordova object, through which you can access current activity and context. Using the context you can create new intent and launch it or perform the functions on the context from the plugin. To access the current activity and context of the application in the plugin, you can use:

this.cordova.getActivity() and this.cordova.getActivity().getBaseContext() respectively.

For Cordova to find the plugin, it must be declared in res/xml/config.xml.

<feature name="NativePluginName">
        <param name="android-package" value="com.keyhole.cordova.NativePluginName" />
</feature>

The name of the feature is the service name that is used in JavaScript to call the service. The param value is the full path (including namespace) of the service class. Do not change the param name =”android-package”. If you fail to include this, application will compile but Cordova will not be able to find the plugin.

Finally, the cordova.exec function of JavaScript will be passed to the plugin’s execute method along with the arguments. The argument action is passed from JavaScript and they can be matched as follow to implement the function. Also, the arguments passed in JavaScript are available in Cordova args.

@Override
public boolean execute(String action, CordovaArgs args, CallbackContext callbackContext) throws JSONException {

		boolean validAction = true;
		Log.d("Plugin executing action:",action);
		  if (action.equals("start")) {
			  theCallbackContext = callbackContext;
// Do work
	        } else {
	        	validAction = false;
	        }
		return validAction;
	}

Conclusion

A major benefit of using PhoneGap is that you can develop an application using HTML, jQuery, JavaScript without needing to get familiar with a variety of mobile native languages. But to implement a feature not yet available in PhoneGap like Bluetooth, a plugin needs to be implemented to provide access to the native functionality. Implementation of the plugin requires an interface to built in the specific mobile native language. Unfortunately, having to code in a specific mobile native language defeats one of the major the advantages of PhoneGap.

As demonstrated above, the interface code is a very small portion to be implemented in the native language. Thus, using PhoneGap lowers the amount of code needed in the native language. Because of this, I still believe PhoneGap is a good option to implement mobile applications for multiple platforms.

More information about PhoneGap can be located at phonegap.com.

– Jinal Patel, asktheteam@keyholesoftware.com

  • Share:

2 Responses to “PhoneGap: Utilizing Native Mobile Features with Plugins”

  1. Pranav Joshi says:

    Good technical share might be helpful for awareness thanks for sharing

    Keep it up

    All the best

  2. […] Update: Check out a related PhoneGap post by Jinal Patel written November 4, 2013 - PhoneGap: Utilizing Native Mobile Features with Plugins […]

Leave a Reply

Things Twitter is Talking About
  • #HTML5 is a viable technology for the enterprise & a must-know for single page applications. Learn how - http://t.co/VlOjRiWZ25 #tutorial
    April 24, 2014 at 4:19 PM
  • JSF components can be used to quickly bring up a user interface. Here's a quick example using #ICEFaces: http://t.co/5YCOtIy2HE
    April 24, 2014 at 11:35 AM
  • Signed up for Keyhole's free monthly tech newsletter yet? Latest resources compiled to a quick email. Sign up here: http://t.co/F8h0NSiicZ
    April 24, 2014 at 10:35 AM
  • code smell: dev practices that leave a stench of inexperience. Avoid it in method implementation with these tips - http://t.co/b7A884BnXb
    April 23, 2014 at 9:20 PM
  • Tech Night is now! Mark D is presenting to the group on #Grunt 101. Good technology talk, food & team makes for a fantastic night.
    April 23, 2014 at 5:10 PM
  • Single Page Application architectures allow for rich, responsive UIs. #JavaScript is a must-know for SPA - http://t.co/6sfk3kt1k3 #tutorial
    April 23, 2014 at 2:15 PM
  • Vacuole #Encapsulation aims to minimize the code necessary for routinely verbose data tasks -http://t.co/fJQzz731rZ
    April 23, 2014 at 9:45 AM
  • DYK? We translate our hands-on experience to custom courses to train your dev teams. Our new course on #AngularJS: http://t.co/Bf3UuClj4Z
    April 23, 2014 at 8:45 AM
  • Interested in #Backbone & #Marionette but not sure where to start? Check out the Marionette-Require-Boilerplate: http://t.co/XDj43BwSS3 #SPA
    April 22, 2014 at 4:50 PM
  • Responsive Design can help in giving your users a consistent app experience across devices. Quick tutorial - http://t.co/BDrT5LvgRo
    April 22, 2014 at 2:31 PM
  • Tips & tricks to save time in the #Eclipse IDE - http://t.co/uGgCkchwNk (keystroke combos, navigation, time tracking & more)
    April 22, 2014 at 8:40 AM
  • Join us! Looking to add to our team a developer w/ advanced #JavaScript & #NodeJS exp (& love of tech variety). Info: http://t.co/cC9CU1RCF9
    April 21, 2014 at 7:35 PM
  • Looking into #ExtJS but don't know where to start? Check out our video tutorial series to find your way around - http://t.co/XFYDT6YNWA
    April 21, 2014 at 4:35 PM
  • We've been tinkering with JS library Famo.us since its public release 4/10. What we've learned so far via a POC app - http://t.co/S77TSKHDKd
    April 21, 2014 at 2:03 PM
  • RT @CompSciFact: Rivest, Shamir, and Adleman published the RSA public key cryptography algorithm in 1978.
    April 21, 2014 at 11:13 AM
  • DYK? When we share/RT/blog/etc, it doesn't mean that Keyhole endorses it - we just like variety of opinions! Info: http://t.co/MXhB9lE9tV
    April 19, 2014 at 3:01 PM
  • A huge welcome to Justin Graber who joined the Keyhole team this week!
    April 18, 2014 at 3:25 PM
  • Pssst... @kc_dc early bird pricing ends on Sunday. Shoot us a note if you want to save 10% off of your ticket with our sponsor promo code!
    April 18, 2014 at 2:49 PM
  • Join our team! Looking for a developer w/ advanced #JavaScript & #NodeJS experience (& love of tech variety). Info: http://t.co/cC9CU1RCF9
    April 18, 2014 at 11:21 AM
  • .@befamous has huge potential to make HTML5/JS/CSS web pages feel as native apps. Here's our inital tech takeaways - http://t.co/S77TSKHDKd
    April 18, 2014 at 9:50 AM
Keyhole Software
8900 State Line Road, Suite 455
Leawood, KS 66206
ph: 877-521-7769
© 2013 Keyhole Software, LLC. All rights reserved.