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.
Pingback: Why I’m Doing PhoneGap | Ryan Stewart – Mountaineer Coding()
Pingback: Sample App: Mobile jQuery without jQuery Mobile()
Pingback: jQuery Mobile “Getting Started” Application()
Pingback: How to Build Application using jQuery Mobile & PhoneGap | CS5 Design()
Pingback: How to Build Application using jQuery Mobile & PhoneGap | uxstats()
Pingback: Come costruire un’applicazione usando jQuery Mobile & PhoneGap - sastgroup.com()
Pingback: Come costruire un’applicazione usando jQuery Mobile & PhoneGap | buonaguida.com()
Pingback: How to Build Application using jQuery Mobile & PhoneGap | PHP Ocean()
Pingback: Using $.each() within $.getJSON()
Pingback: Sviluppare applicazioni dinamiche per mobile | openbrain()
Pingback: 5 ways to learn how to make stuff for fun | Tammy Butow()
Pingback: 5 ways to learn how to make stuff for fun | Tammy Butow()
Pingback: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | Easy jQuery | Free Popular Tips Tricks Plugins API Javascript and Themes()
Pingback: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | PHP Developer Resource()
Pingback: Page not found()
Pingback: Using Backbone.js with jQuery Mobile | Christophe Coenraets()
Pingback: Using Backbone.JS with jQuery Mobile | Appliness()
Pingback: Helpful Developer Resources - Part 1 « Development AdvantageDevelopment Advantage()
Pingback: Create Your First Mobile App with PhoneGap Build – Using the Notification API | Flippin' Awesome()
Pingback: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap - Tech Forum Network()
Pingback: Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Programación de Dispositivos Móviles()
Pingback: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | Ask Programming & Technology()
Pingback: Three great phoneGap tutorials » VC-TEL Team Blog()
Pingback: Un completo ejemplo de Phonegap, jQueryMobile, PHP, MySQL, JSon… | Centro Inca()
Pingback: 4 Best PhoneGap Tutorials | Mobile Dev Resources()
Pingback: JQM & Domino Data Service (2) | Kwintessential Notes()
Pingback: jQuery Mobile “Getting Started” Application | whatabout()
Pingback: Creating templated/persistant header/footer template in jQuery Mobile and PhoneGap | Some Cordova Questions and Answers()
Pingback: Structuring a PhoneGap jQuery Mobile Application | Some Cordova Questions and Answers()
Pingback: Wich mobile development open source Framework should I use? [closed] | Some Cordova Questions and Answers()
Pingback: JQuery移动电子书开发 – Coder Zone()
Pingback: cordova - Creación de plantilla/persistente de encabezado/pie de página de la plantilla en jQuery Mobile y PhoneGap()
Pingback: cordova - Creazione basata su modelli/persistente intestazione/piè di pagina del modello in jQuery Mobile e PhoneGap()