Sample Application using jQuery Mobile and PhoneGap

Here is a simple application I built using jQuery Mobile and PhoneGap. Even though the application is simple, it covers some common requirements of mobile applications: database access through JSON services, multi-level master-detail views, parameter passing between views, etc. You can play with the application here, or download the source code below and build it for different mobile platforms (using the PhoneGap tools or the cloud-based build service at http://build.phonegap.com).

Run the Application

Click here to run the application.

• The first view shows a list of employees. The bubble on the right indicates the employee’s number of direct reports. You can filter the list by typing a few characters in the filter box at the top of the screen.
• Tap an employee to view details.
• If the Employee has direct reports (for example James King, Ray Moore, Julie Taylor, and John Williams), tap “View Direct Reports” to see the list.
• If the Employee has a manager (all the employees except James King, the CEO), tap “View Manager” to view the manager details.
• Tap “Email” to send an email to the selected employee using your default mail client.
• When running the application on a phone, you can tap “Call Office”, “Call Cell”, and “SMS” to trigger the corresponding actions.

Download the Source Code

You can download the source code (HTML, JavaScript, CSS, PHP services and SQL script) here.

Code Highlights

• The approach taken in this application is a complete separation of the client and server code: no intermingled HTML and server-side scripts. The client application is made of pure HTML files invoking JSON services using jQuery’s ajax() and getJSON() methods. The services are written in PHP, but you could point to Java, .NET, RoR, or ColdFusion services without any change to the client app.
• jQuery Mobile allows you to code all the pages (views) of your application in a single HTML file or to keep your HTML files separate. Regardless of the approach you choose, the pages will be loaded into a single document at runtime. This is required to support the animated page transitions. (You can explicitly ask for an HTML file to be loaded in a separate document, but you’d lose the animated transition).
• I chose to keep my files separate, because I find it easier to manage non-trivial applications, and most importantly, because this was the best approach to get page navigation to work right in this application (specifically for same page transitions: i.e. transition from Employee to Manager).
• Because the pages are loaded in a single document, you only need to include the .css and .js files in the first page of your application.
• For clarity, I created one .js file per page (employeelist.js, employeedetails.js, and reportlist.js). Since they are all loaded in jQuery Mobile’s single document anyway, it would make more sense to combine them into a single (and minified) .js file for a production application.

PhoneGap

You can use PhoneGap to package this application for different platforms. This version of the application doesn’t use any of the PhoneGap native APIs (GPS, camera, accelerometer, notification, etc). In my next blog post, I’ll show the same application getting the data from a local database (using the PhoneGap database API) as opposed to PHP services.

Updates:

1. I posted a version of the same application built using plain jQuery here.
2. I posted a version of the same application getting data from a local database using the PhoneGap database api here.
3. I posted a simpler version of the same application here.