Logo Icon Logo
A Crowd-sourced Cookbook on Writing Great Android® Apps
GitHub logo Twitter logo OReilly Book Cover Art

Creating a Platform-Independent Application Using PhoneGap/Cordova

Author: Shraddha Shravagi
Published? true
FormatLanguage: WikiFormat

Problem:

You want an application to run on different platforms like iOS, Android, BlackBerry, Bada, Symbian, Windows etc.

Solution:

PhoneGap is an open source mobile development framework. If you plan to develop an application for multiple platforms, phoneGap is one good solution, so much so that Oracle and BlackBerry, among others, either endorse it or base products upon it. PhoneGap does not use traditional platform GUI controls, but rather you write a web page with buttons - made to approximate the native look by careful use of CSS - and phoneGap runs this "mobile app" for you.

PhoneGap was written by Nitobi, a small company which was recently (Fall 2011) acquired by Adobe Systems Inc. Adobe has donated the source code to the Adobe Software Foundation, where its development continues, briefly under the name "Callback" and now under the name "Cordova".

Discussion:

We will start with an Android application. We don't use the normal Android layouts; instead we create HTML and javascript files, which can run on different platforms. In fact, the app is mostly a "mobile web app" that is packaged as an Android app! We keep minimal code in the Activity since such code would have to be rewritten for each platform.

Here are the steps for a basic phoneGap application.

1, Create a new Android application.

2. Download the phonegap.zip from the link. Copy the phonegap-version.jar from Android folder of the phonegap library. and add it to lib folder and of course to the project's build path.

3. Create a new folder in assets folder e.g., www.

4. Copy the phonegap-1.0.0.js and jquery.min.js files into assets/www.

5. Create a new file helloworld.html in the assets/www folder.

6. In the body of this HTML page, add

<h1> Hello World </h1>

You can add all your HTML/jQuery mobile code here. E.g.: to add a button

<a data-role="button" data-icon="grid" data-theme="b" onClick="showAlert()">
 Click Me!!!</a>

7. Create a new file helloresponse.js in the assets/www folder. In this Javascript file you can add all your jQuery mobile and Javascript code

function showAlert(){
	alert('Hello World from PHONE GAP using Javascript!!! ');
}

8. In your main Activity file, import com.phonegap.DroidGap; Then change extends Activity to extends DroidGap.

9. In the Activity's onCreate() method, pass the URI of your HTML file into the DroidGap loadUrl method, so that the HTML file will be invoked.

The Java code should look like this, no more:

import com.phonegap.DroidGap;

public class HomeScreen extends DroidGap {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
      
        //set the URL from assets which is to be loaded.
        super.loadUrl("file:///android_asset/www/helloworld.html");    
    }
}

That's all. You should be able to run the application.

Download the attached code for some more great jQuery mobile examples.

See Also:

The old web site is still up at http://phonegap.com/. The new web site is http://cordova.apache.org. The O'Reilly book Building Android Apps with HTML, CSS and JavaScript gives a phoneGap-centric coverage of these "background" technologies as well as more information on phoneGap development.

Download:

The source code for this project can be downloaded from http://www.filefactory.com/file/c0b1732/n/HelloDemoPhoneGap.zip .

Download:

The source code for this project is in the Android Cookbook repository, http://github.com/IanDarwin/Android-Cookbook-Examples/,in the subdirectory PhoneGapDemo.
No records found.