Setup Steps: PhoneGap: Inserting into Eclipse on Windows

Wednesday, March 27, 2013

PhoneGap: Inserting into Eclipse on Windows

1) Download and unzip.

2) Copy the following structure only:

3) In Eclipse, Create New Android Application.

4) Accept Configuration.

5) Accept Launcher Configuration.

6) Create Blank Activity.

7) Set Activity Name.

8) Test.

9) First create a new folder called www and a new file called index.html. both in the project folder assets.

10) Go back now to the PhoneGap structure

11) Copy now the point 1) 2) and 3) in the project structure the way you see bellow.

12) Prepare the Activity-Class
In the eclipse locate the src-folder and open the MainActivity.java class in it and change it that way you'll see bellow: (I leave the comments so you can see what I've changed)

import org.apache.cordova.DroidGap;

import android.os.Bundle;
import android.view.Menu;

public class MainActivity extends /* Activity */DroidGap {

    // @Override
    // protected void onCreate(Bundle savedInstanceState) {
    // super.onCreate(savedInstanceState);
    // setContentView(R.layout.activity_main);
    // }

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        super.loadUrl("file:///android_asset/www/index.html");
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }

}

13) Content of Index.html

copy paste this HTML-Code into the index.html file we've created in the assets-folder.


<!DOCTYPE HTML>
<html>

  <head>
    <title>First App</title>

  <script src="cordova-2.2.0.js"></script>
  <script>

     function onLoad(){
          document.addEventListener("deviceready",
onDeviceReady, true);

     }
     function onDeviceReady(){
navigator.notification.alert("PhoneGap is working!!");

     }


  </script>


  </head>


  <body onload="onLoad();">


       <h1>Welcome to PhoneGap</h1>


       <h2>Edit assets/www/index.html</h2>


  </body>


</html>

14) Prepare the Manifest-File before launching
In the manifest file called AndroidManifest.xml make sure you have inserted the following code in it:(Tip: in order to not do it all by hand, look at C:\development\phonegap-2.2.0\lib\android\example\AndroidManifest.xml and copy/paste it from there.)

15) Running the App

Select your MainActivity.java file and run it as Android application. (make sure you've an AVD installed as we have seen in the post How to install PhoneGap on Windows) If everything goes well you'll see that picture bellow. Thats all. From here you can now develop your app further.

16) Alternative Setup

Ok there is a even better way to do this.(I've shown all steps first so we do not overwhelm us with to much stoff) Delete the folder www in the eclipse project. Then look into PhoneGap directory C:\development\phonegap-2.2.0\lib\android\example\assets There you'll encounter a sample structure. Just copy it into assets folder like i did bellow instead of doing it by hand. It should look like this if you run it: