Crossplatform mobile app development example with PhoneGap, JQuery Mobile and HTML5


Goal of this example

There are two ways to create mobile app for multiple platforms :

  1. Create a native application for every target platform
  2. Create a single cross platform application (usually in HTML5)

Both options has it’s pros and cons, the requirements and the nature of the project should define which option fits better. Here are a few facts :

Native Cross platform
Native UI components Yes No, but can be mimiced
Native features Yes Crossplatform API provided for GPS, WIFI, Camera, Accelerometer, Orientation, File, etc. Other features can be accessed through plugins
Performance Hardware is the only limit Acceptable for basic features, 3D of visual effects can be slow
Ease of development Code change needs to be deployed into device or emulator that takes some time Code can be tested in a browser instantly without deployment
Device compatibility Needs to explicitly handle multiple screen sizes, newer components cannot be used on older devides Compatibility with multiple devices, easy to test multiple screen sizes, no dependency on specific platform versions
Technology Java, Objective-C, etc.. HTML5, Javascript
Tools Native WYSWYG GUI Builders, profilers HTML WYSWYG GUI Builders, HTML Editors, no profiler

Technology Used

  • PhoneGap 2.7.0
  • JQuery Mobile 1.3.1
  • Ripple Emulator

How does this work?

Phonegap provides two things :

  1. A browser window embedded into a native application
  2. Javascript API to access native features like GPS, Accelerometer, etc in a cross platform way

What Phone gap does not provide :

  1. UI components : Phonegap applications are written in HTML5, how the actual HTML is built is transparent for Phonegap. It can be hand written or using a library like JQuery Mobile
  2. Access to platform specific features, like Android statusbar, etc. This can be still accessed by writing a plugin for them

Structure of the project

Even though the actual application is cross platform the “frame” is a native application, so it can be installed into an actual phone. Phonegap provides a convinient way to create these “frame” projects. It is well documented in their guides. This example uses the Android frame, all the application pages are under assets/www and index.html is the start page. This application has three pages to demo three features :

  • HTML5 Canvas animation
  • Basic form
  • Form processing

Additionally there is an example to handle a native menu button event :

function onDeviceReady() {
    document.addEventListener("menubutton", onMenuKeyDown, false);
}

// Handle the menu button
function onMenuKeyDown() {
    $.mobile.changePage( "#dialogPage", { role: "dialog" } );
}

Useful tools

Codiqa

codiqa

The www.jquerymobile.com page includes a WYSWYG editor. The generated HTML can be diplayed or even downloaded. Codiqa offers even more sophisticated versions of this on their own website www.codiqa.com

Ripple emulator

ripple

The big advantage of creating HTML5 mobile app is that it can be tested in a browser without deployment. But this only works as far as hardware features are not used. This can be solved by the ripple emulator that is shipped as a chrome plugin. It can emulate, accelerometer, location, network and most of the phonegap API calls. It can be downloaded from here

Apache tomcat

JQuery mobile uses Ajax that is not working with local files under Chrome Opera and some other browsers. Ripple also requires files to be accessed from http:// and not from file:// to overcome this problem a web server like apache tomcat can be installed. The document root can point to the project’s assets/www folder so no deployment is needed to the web server but still the files can be accessed through http.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: