Introduction

PhoneGap is a great platform for building mobile applications. If you know HTML, JavaScript and CSS, you can build native applications for just about every mobile platform there is. The trick is that you build the application in HTML5 and use the plethora of tools provided by the PhoneGap application to hook into the device, giving you access to things like the device camera, gps, contacts list, and much more.

In this article, we are going to implement the latest version of jQuery Mobile into our PhoneGap application. jQuery Mobile is an UI framework that gives you a mobile friendly user interface that is both cross-platform as well as cross browser compatible, and the combination of the two gives you a realistic mobile experience with very little work involved.

Create Your PhoneGap 3.x Application

The first thing you need to do is setup your PhoneGap application. If you are not sure how to do this, first follow the previous article in this series here. Once your PhoneGap application is set up, you should have the following directory structure setup in the application:

Default PhoneGap project structure

To run the PhoneGap application in the IOS simulator on my mac, I use the command-line as explained in the setup tutorial, as follows:

If I run the PhoneGap application in the IOS simulator now (using the command-line utility from in the setup tutorial), the result is:

In this tutorial we are only concerned with the ‘/www’ directory, which contains the HTML, CSS and JavaScript files for the application (among other things). We are going to install the jQuery Mobile files in the ‘/www/js’ directory, and then we are going to tell PhoneGap to use jQuery mobile.

Install jQuery Mobile 1.4

jQuery mobile 1.4 is currently a release candidate, but we’re going to use this for the following reasons:

1. jQuery Mobile 1.4 uses a new UI that is much more mobile friendly
2. jQuery Mobile 1.4 will be released as a stable version soon, and the previous installation processes (1.3.x) will then become superfluous.
3. I have built a professional application using JQM 1.4 RC1, and it is already quite stable.
4. I like pushing the limits, and JQM 1.4 stable is due anytime now.

Head to http://jquerymobile.com/ and look at the header of the page. You’ll see this:

fig 4

Click on the yellow bar that “JQUERY MOBILE 1.4.0 RC1 RELEASED!”

This will bring you to the blog entry announcing the release of JQM 1.4. Scroll down to the download section of the page, and download the ZIP files, as seen below:

Download the ZIP files

Unzip the directory and you will see these files inside

Rename the folder to “jquery.mobile-1.4.0” and drop it in the “www/js” directory of your application.

jQuery Mobile does not ship with a version of jQuery, so it is up to us to get that. Head over to http://jquery.com/download/and download the latest version of jQuery. Drop it into the “www/js” directory, next to your jQuery Mobile directory, as seen below:

Note the jquery.js file in the www/js directory

Link JQM to PhoneGap

Looking at the default www/index.html page that is created by the PhoneGap application, we see the following:

Note line 39, calling the ‘initialize’ method of the app object, seen in index.js below

The file “www/js/index.js”, which you can use as the starting point for your application

We include these JavaScript files in “www/index.html” in the following manner:

Note highlighted section, and the corresponding lines as noted below.

• Line 41: phonegap.js – this is inserted by PhoneGap and is required when PhoneGap builds, but is not pointing at anything in the “www” directory.
• Line 42: index.js – this is your file where you manipulate the application
• Line 43: jquery.js – the latest version of jQuery, required by jQuery Mobile
• Line 44: jquery.mobile-1.4.0-rc.1.js – the latest version of jQuery Mobile 1.4

Update Application

So now we have jQuery Mobile linked up to our application, and when we fire up the application, it will wait until the device is ready for PhoneGap to start receiving input from the app, and then launch. As you know, when the index.html file is loaded, it will load the jQuery Mobile files and call the “app.initialize()” method, which then waits for the device to be ready. If we look at the image below, I setup an alert to fire when the device is ready:

www/js/index.js

When I run the application in the simulator, the “deviceready” event does fire:

Device-Ready event fires

And when I dismiss the alert, our jQuery Mobile app is ready to start listening for more events:

PhoneGap + jQuery Mobile 1.4 App running

Conclusion

As we can see, it is quite simple to get jQuery Mobile running inside the PhoneGap application. This gives us quite a powerful application with a lot of functionality and—if we do it right—a native looking application. All you need now is to use your imagination and creativity to create any app you want to.