This is a quick write up to demonstrate phonegap statusbar notification plugin in a cordova (formally phonegap) app.
I am going to run through steps for creating an android application utilizing phonegap.
Creating a Project
I am going to assume that you already have android SDK and Eclipse plugin installed. If not, please follow the developer guide to do so.
We will create an sample application, we are going to name it “phonegapstatusnotificationdemo”.
Importing Cordova
At this point we should have a sample android application. Now, we are going to import the cordova(phonegap) libraries in our application. At the time of this writing Cordova 2.2.0 is the latest version. You can download the library form their website.
After you download the zip file, open and locate “lib/android”, and extract the cordova-2.2.0.jar.
- Place the jar file into “lib” folder in your Android project. This folder should already be in your class path. If not you may need to do it manually via project properties.
- Also, find the “xml” folder in the zip file and place it under “res” folder in the android project. The xml folder contains the config.xml that has the phonegap configuration.
- Create a folder named “www” inside “assets” folder in the android project as well.
- Place the cordova-2.2.0.js file from the zip into the www folder you just created.
You are now set to use phonegap.
Updating the Activity
Since phonegap places the html as the view in the application, we have to do 2 things.
1. create the html file
2. Update the Activity to extend DroidGap and local the html from step 1.
We are going to do just that. Lets create a html file and place it in the “www” folder inside the “assets” folder in the android project.
<html> <head> <script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script> </head> <body> Hello World! </body> </html>
In your main activity, update it to extend the DroidGap.
import org.apache.cordova.DroidGap;
import android.os.Bundle;
public class MainActivity extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Now you can run your phonegap application on your device or emulator. You should see the “Hello World” text on a blank screen.
Using Statusbar Notification plugin
Now, lets use a Status notification plugin. These steps will be same for implementing other phonegap plugins also.
Phonegap plugin work in 2 parts.
1. Javascript: Plugin will have a javascript code that your application can call form your html or js.
The provided js will invoke the back end java code. You shouldn’t need to worry much about the inner workings of the plugin js code. But it is import to understand the framework so you can debug issues.
2. Java code: This is the code that phonegap plugin framework will call when this method is called from the javascript library code.
Today we are going to use the statusbar notificaiton plugin.
Lets grab the plug in code from github.
https://github.com/phonegap/phonegap-plugins/tree/master/Android/StatusBarNotification
README provides steps to import this plugin in your application. We are going to do just that.
Importing Plugin files
place the “.java” files into your android project src package. At the time of this writing there are two files (StatusBarNotification.java and StatusNotificationIntent.java). Make sure you update the package appropriately. I would encourage to use the package name used in these java files for simplicity.
Now, place the statusbarnotification.js into your “www” folder. At this time you can include this script in your index.html by placing the html below in the portion of the html
<script type="text/javascript" charset="utf-8" src="statusbarnotification.js"></script>
In your res/xml/config.xml file, place the following script inside the section.
<plugin name="StatusBarNotification" value="com.phonegap.plugins.statusBarNotification.StatusBarNotification"/>
If you had placed the java files above in different package structure, be sure to change the value filed to appropriate location.
Since phonegap provides a default icons for notification, which is used in the java code, you will have to copy the png files from the plugin into your res/drawable folder. If you want different icon, just be sure to have those icons in the folder and change the reference in the java file. (Watch for “int icon = R.drawable.notification;” references, in StatusNotificationIntent.java)
So in your html file, whenever you want to show a notification, you can call the following javascript function.
window.plugins.statusBarNotification.notify("Put your title here", "Put your sticky message here");
.
You can checkout out my sample application on github (https://github.com/manijshrestha/PhonegapStatusNotificationDemo) that uses this plugin. If you have any questions/ enhancement request to this plugin feel free to PM me.
Thank you,
Manij Shrestha 