If you succesfully installed android SDK bundles, then create simple android project then follows the instruction:
Add the PhoneGap library
You now have a simple Android application. Before you can write a PhoneGap application, you need to add the PhoneGap library. There are two files: a JavaScript file that contains the PhoneGap API called by our application, and a native JAR file containing the native implementation for the PhoneGap API.
- Expand the AndroidPhoneGap project tree view, as shown in Figure 10:
- Create the directory \assets\www. Also create the directory \libs if it doesn't already exist.
- Unzip the PhoneGap download and locate the Android subdirectory.
- Copy the three PhoneGap library files for Android to the following Eclipse project folders:
- Copy phonegap-1.0.0.jar to \libs\phonegap-1.0.0.jar
- Copy phonegap-1.0.0.js to \assets\www\phonegap-1.0.0.js
- Copy xml/plugins.xml to \res\xml\plugins.xml
Even though the PhoneGap JAR file is copied into the project, you also need to add it to the project's build path.
- Select Project > Properties > Java Build Path > Libraries > Add JARs….
- Add phonegap-1.0.0.jar by navigating to it in the project, as shown in Figure 11:
The final step in preparing the example Android application to use PhoneGap is to modify App.java. Because a PhoneGap application is written in HTML and JavaScript, you need to change App.java to load your HTML file using
loadUrl(), as shown in Listing 2. You can edit App.java by double-clicking on App.java in the tree view shown in
Figure 10.
Listing 2. App.java
Package com.ibm.swgs;
import android.os.Bundle;
import com.phonegap.*;
public class App extends DroidGap //Activity
{
/** Called when the activity is first created. */
@Override
public void onCreate(Bundle savedInstanceState)
{
super.onCreate(savedInstanceState);
//setContentView(R.layout.main);
super.loadUrl("file:///android_asset/www/index.html");
}
}
Write the PhoneGap application
You're now ready to start writing the PhoneGap application. For Android, files under the asset directory are referenced using file:///android_asset. As specified in
loadUrl() in Listing 2, you need to create an index.html file under assets/www.
After creating index.hml, enter the contents of Listing 3 below.
Listing 3. index.html
<!DOCTYPE HTML>
<html>
<head>
<title>PhoneGap</title>
<script type="text/javascript" charset="utf-8" src="phonegap-1.0.0.js"></script>
</head>
<body onload='document.addEventListener("deviceready", deviceInfo, false);'>
<script>
function deviceInfo() {
document.write("<h1>This is Phonegap 1.0.0 running on "+device.platform+"
"+device.version+"!</h1>");
}
</script>
</body>
</html>
A brief explanation of index.html is in order. Before calling any PhoneGap APIs, we must wait for the
deviceready event, which indicates that the native portion of PhoneGap has been initialized and is ready. In Listing 3, the
onload callback registers for
deviceready. When it fires, we write out the device's OS and version.
Since PhoneGap uses native features that are protected by permissions, you need to modify AndroidManifest.xml to include these
uses-permission tags. You also need to specify the
support-screens tag, the
android:configChanges property, and the
com.phonegap.DroidGap activity tag, as shown in Listing 4:
Listing 4. AndroidManifest.xml
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.ibm.swgs"
android:versionCode="1"
android:versionName="1.0">
<supports-screens
android:largeScreens="true"
android:normalScreens="true"
android:smallScreens="true"
android:resizeable="true"
android:anyDensity="true"
/>
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
<uses-permission android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />
<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
<application android:icon="@drawable/icon" android:label="@string/app_name">
<activity android:name=".App"
android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity android:name="com.phonegap.DroidGap" android:label="@string/app_name"
android:configChanges="orientation|keyboardHidden">
<intent-filter>
</intent-filter>
</activity>
</application>
</manifest>
Run the application in the Android emulator
The PhoneGap application is now ready to run. Select
Run >
Run As >
Android Application, and you should see something similar to Figure 12
Eclipse automatically builds the application, launches the emulator, and installs and runs it on the emulator.
The emulator can take several minutes to start up. To speed development, keep the emulator running until you are done with your development session. Eclipse will automatically use a running emulator instead of launching a new one.
Get products and technologies
Source:IBM
Posts
