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:
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:
- jQuery Mobile 1.4 uses a new UI that is much more mobile friendly
- jQuery Mobile 1.4 will be released as a stable version soon, and the previous installation processes (1.3.x) will then become superfluous.
- I have built a professional application using JQM 1.4 RC1, and it is already quite stable.
- 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:
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
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
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:
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
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.