Plugin:

A plugin is an extension (also known as an add-in, add-on etc..) code which adds an extra feature to an existing code program irrespective of the core features of the program.

when a code program supports plug-in, it set-up a customization.

API(Application Programming Interface):

a set of functions and procedures that provide an interface between two application.

It allows you to get the features or data of any operating system, application or any other services.

 What are the PhoneGap/Cordova plugins?

A plugin is a bit of add-in code that provides JavaScript interface to native components.

They allow your application  to use native device capabilities beyond what is available to pure web apps.

Cordova ships with a minimal set of API’s and projects add what extra APIs they require through plugins.


cordova plugins-add additional feature to existing one

You would be comfortable enough with the PhoneGap basics, you have read till now.

Now, how to use these Plugin Apis’?

To make you understand this, I will explain you the use of one of a plugin with an example, similarly you can proceed with others as well.

How to use Cordova Camera API…

…to grant the user, with the ability to take a picture of a person, and use that picture as…

…the person’s picture in the application. We do not pursue that picture in this sample application.git

Below listed code will only work, when you will run the application on your device as a Cordova app.

Ultimately, you can’t test it in a browser on the desktop.

Stpe by step explanation on use of Plugins Api as our Cordova project:

Add the camera plugin to your project:
cordova plugin add org.apache.cordova.camera
In index.html, add the following list item to the user template:

<li class="table-view-cell media">
<a hre="#" class="push-right change-pic-btn">
<span class="media-object pull-left"></span>
<div class="media-body">
Change Picture
</div>
</a>
</li>

In the initialize() function of user View, register an event listener for the click event of the Change Picture list item:

this.$el.on('click', '.change-pic-btn', this.changePicture);
In user View, define the changePicture event handler as follows:

this.changePicture = function(event) {
event.preventDefault();
if (!navigator.camera) {
alert("Camera API not supported", "Error");
return;
}
var options = { quality: 50,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: 1, // 0:Photo Library, 1=Camera, 2=Saved Album
encodingType: 0 // 0=JPG 1=PNG
};

navigator.camera.getPicture(
function(imgData) {
$('.media-object', this.$el).attr('src', "data:image/jpeg;base64,"+imgData);
},
function() {
alert('Error taking picture', 'Error');
},
options);

return false;
};

Events:

The movement or instance recognized by software that may be knobbed by a software.

Events can be triggered by the system, user, or in other ways.

What are the PhoneGap/Cordova events?

The Cordova events are the different-different processes which occur on  performing the specific action.


cordova events-process on an action

Cordova events and related functions are listed below:

Device Ready: The event fires when Cordova is fully loaded.

document.addEventListener("deviceready", yourCallbackFunction, false);

Pause: The event fires when an application is put into the background.

document.addEventListener("pause", yourCallbackFunction, false);

Resume: The event fires when an application is retrieved from the background.

document.addEventListener("resume", yourCallbackFunction, false);

Online: This event fires when an application goes online, and the device becomes connected to the Internet.

document.addEventListener("online", yourCallbackFunction, false);

Offline: The event fires when an application goes offline, and the device is not connected to the Internet.

document.addEventListener("offline", yourCallbackFunction, false);

Back Button: The event fires when the user presses the back button.

document.addEventListener("backbutton", yourCallbackFunction, false);

Battery Critical: The event fires when the battery has reached the critical level threshold.

window.addEventListener("batterycritical", yourCallbackFunction, false);

Battery Low: The event fires when the battery has reached the low-level threshold.

window.addEventListener("batterylow", yourCallbackFunction, false);

Battery Status: The event fires when there is a change in the battery status.

window.addEventListener("batterystatus", yourCallbackFunction, false);

Menu Button: The event fires when the user presses the menu button.

document.addEventListener("menubutton", yourCallbackFunction, false);

Search Button: The event fires when the user presses the search button on Android.

document.addEventListener("searchbutton", yourCallbackFunction, false);

Start Call Button: The event fires when the user presses the start call button.

document.addEventListener("startcallbutton", yourCallbackFunction, false);

End Call Button: This event fires when the user presses the end call button.

document.addEventListener("endcallbutton", yourCallbackFunction, false);

Volume Down Button: The event fires when the user presses the volume down button.

document.addEventListener("volumedownbutton", yourCallbackFunction, false);

Volume Up Button: The event fires when the user presses the volume up button.

document.addEventListener("volumeupbutton", yourCallbackFunction, false);

 Conclusion:

This post would be very helpful in understanding the basic idea about Plugin API’s & Events. This would be really a great help to you while you will be building your mobile application. We will be updating our blog post, so till then keep in touch & keep reading our blogs. Don’t forget to give your precious feedback from the space provided below.