How to make app using phonegap in eclipse

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.
  1. Expand the AndroidPhoneGap project tree view, as shown in Figure 10:
    Figure 10. Android project with PhoneGap library
    Android project with PhoneGap library
  2. Create the directory \assets\www. Also create the directory \libs if it doesn't already exist.
  3. Unzip the PhoneGap download and locate the Android subdirectory.
  4. 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.
  1. Select Project > Properties > Java Build Path > Libraries > Add JARs….
  2. Add phonegap-1.0.0.jar by navigating to it in the project, as shown in Figure 11:
Figure 11. Adding PhoneGap JAR
Adding PhoneGap JAR
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
Figure 12. Android emulator
Screenshot of Android emulator and message 'This is PhoneGap 1.0.0 running on Android 2.2!'
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
How to make app using phonegap in eclipse How to make app  using phonegap in eclipse Reviewed by D Kshetri on 12:58 PM Rating: 5

No comments:

Powered by Blogger.