This is the basics on creating a HelloWorld using PhoneGap, Cordova and Eclipse (provided by ADT).
I have downloaded and extracted:
- Android Development Toolkit (ADT): adt-bundle-windows-x86_64-20130729.zip
- Phonegap kit: phonegap-2.9.0.zip
Note: ADT provides the Eclipse IDE.
In order to start development, an Android project is created in Eclipse.
Step 1: Create an Android Project
Open Eclipse (Its in the ADT/eclipse folder) and choose File ->New ->Android Application Project
Application Name: Hello World (This is the name that will appear in the Play Store)
Project Name: HelloWorld (This is the name used by Eclipse to separate each project)
Package Name: com.example.HelloWorld
Select the default option for the remainder screens.
Step 2: Insert the Android/PhoneGap Libraries
In the project, left click on assets and create a new folder: www
Open the extracted PhoneGap/lib/android folder and do the following;
- Copy PhoneGap/lib/android/cordova.js to Project's assets/www folder
- Copy PhoneGap/lib/android/cordova-2.9.0.jar to Project's libs folder
- Copy PhoneGap/lib/android/xml folder to Project's res folder
In the Project's lib/cordova-2.9.0.jar right click and choose Build Path ->Add to Build Path
Step 3: Create the starting page
In assets/www folder, create the text file index.html with following contents
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="cordova.js">
</script>
</head>
<body>
<h1>Hello PhoneGap</h1>
</body>
</html>
Step 4: Configure to load the index.html
Edit the Project's src/com.example.HelloWorld/MainActivity.java
Before the first import statement, add
import org.apache.cordova.*;
Change extends Activity
to extends DroidGap
or to extends PhoneGap
Change setContentView(R.layout.activity_main);
to
super.loadUrl("file:///android_asset/www/index.html");
Step 5: Configure Android specific configurations
Edit the AndroidManifest.xml (if unsure where, just place it before the
Activity Application tag)
<uses-permission android:name="android.permission.READ_PHONE_STATE" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_CONTACTS" />
<uses-permission android:name="android.permission.WRITE_CONTACTS" />
Edit the Activity tag by adding configChanges
<activity
android:name="com.tboxmy.simpledisplay.MainActivity"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden|screenSize" >
Step 6: Test the application
Right click the project name and choose Run As ->Android Application
Unless you have a fast machine with huge RAM, some waiting time is required for the Application to start, after the Android Emulator starts.
