Hello World! with PhoneGap, Android and Eclipse

Hi,

Thanks for visiting.

This content has been moved to new domain.
http://developerswing.blogspot.com

Pease use the below URL to view the content:
Hello World! with PhoneGap, Android and Eclipse

Thanks

Hi all! Today I want to show you, how to create Hello World PhoneGap App with Android using Eclipse. If you have some basic knowledge of HTML, CSS and JavaScript you can build the app within a few minutes.

To do this you need the followings : 

1. Eclipse : http://www.eclipse.org/downloads/packages/eclipse-mobile-developers/junosr2 (NOTE : If you donot have Java in your machine please install jdk and jre from http://docs.oracle.com/javase/7/docs/webnotes/install/ or
   http://www.oracle.com/technetwork/java/javase/downloads/index.html)
2. Android SDK : http://developer.android.com/sdk/index.html
3. PhoneGap : http://phonegap.com/download/

Please go to http://developer.android.com/sdk/installing/installing-adt.html  and this will help you to install ADT plugin on Eclipse.

Well Next follow these steps to create a new Android project in Eclipse:

Create a new project on Eclipse : 

Start Eclipse > File > New > Projects… (or press Ctrl+N) > Select ‘Android Application Project’

Now click on Next button and follow the bellow picture sequence

Now click on Finish button.

Configure this project with PhoneGap : 

First add a new folder called www inside assets folder (assets/www) and inside the www folder add a new file called index.html (Right click on assets folder > New > Folder > Folder Name : www and then Right click on www > New > File > File Name : index.html)

Now extract phonegap-2.7.0.zip and go to /phonegap-2.7.0/lib/android/ folder and

1. Copy cordova-2.7.0.jar and paste it to libs folder within your Android project.
2. Copy cordova-2.7.0.js to www folder within your Android project.
3. Copy the xml folder to res folder within your Android project. (See the picture below)

Now open index.html file and add the following code

		PhoneGap

		<h1>Hello World!</h1>


Now go to open MainActivity.java (HelloWorld > src > com.mayukh.helloworld > MainActivity.java) and add the following code
package com.mayukh.helloworld;

import org.apache.cordova.DroidGap;
import android.os.Bundle;

public class MainActivity extends DroidGap {

	/** Called when the activity is first created. */
	@Override
	public void onCreate(Bundle savedInstanceState) {
	     super.onCreate(savedInstanceState);
	     super.loadUrl("file:///android_asset/www/index.html");
	}
}

See the picture below
Now open AndroidManifest.xml (HelloWorld/AndroidManifest.xml  – Right click on AndroidManifest.xml > Open With > Text Editor) and add the following code


See the picture below

Now how to run the app
Right click on your project i.e HelloWorld (NOTE : Before that make sure you have created an Android Virtual Device Manager. To create an AVD please go to the following link http://developer.android.com/tools/devices/managing-avds.html and follow the steps) then click on Run As and then click on Android Application.