Tuesday, 3 December 2013

First Application of PhoneGap in android

First Download phone gap
-visit phone gap download page and click on orange download link to begin download process
-extract to your local file system[example download PhoneGap 1.5 and extract]

If you have installed adt bundle in pc then follow these steps
-create one android project using new android project
-after giving project name and location click next
-select build target ex android 2.2
-click next and in next screen give package name
-click finish

Configure the project to use PhoneGap

At this point, Eclipse has created an empty Android project. However, it has not yet been configured to use PhoneGap. You'll do that next.
  1. Create an assets/www directory and a libs directory inside of the new Android project. All of the HTML and JavaScript for your PhoneGap application interface will reside within the assets/www folder (see Figure 5).
Figure 5. New project directories.
Figure 5. New project directories.
  1. To copy the required files for PhoneGap into the project, first locate the directory where you downloaded PhoneGap, and navigate to the lib/android subdirectory (see Figure 6).
Figure 6. The PhoneGap lib/android directory.
Figure 6. The PhoneGap lib/android directory.
  1. Copy cordova-1.5.0.js to the assets/www directory within your Android project.
  2. Copy cordova-1.5.0.jar to the libs directory within your Android project.
  3. Copy the xml directory into the res directory within your Android project (see Figure 7).
Figure 7. Copied resources.
Figure 7. Copied resources.
  1. Next, create a file named index.html in the assets/www folder. This file will be used as the main entry point for your PhoneGap application's interface.
  2. In index.html, add the following HTML code to act as a starting point for your user interface development:
<!DOCTYPE HTML> <html> <head> <title>PhoneGap</title> <script type="text/javascript" charset="utf-8" src="cordova-1.5.0.js"></script> </head> <body> <h1>Hello PhoneGap</h1> </body> </html>
  1. You will need to add the cordova-1.5.0.jar library to the build path for the Android project. Right-click cordova-1.5.0.jar and select Build Path > Add To Build Path (see Figure 8).
Figure 8. Adding cordova-1.5.0.jar to the build path.
Figure 8. Adding cordova-1.5.0.jar to the build path.

Update the Activity class

Now you are ready to update the Android project to start using PhoneGap.
  1. Open your main application Activity file. This file will have the same name as your project, followed by the word "Activity". It will be located under the src folder in the project package that you specified earlier in this process.
For my project, which I named HelloGap, the main Android Activity file is named HelloGapActivity.java, and is located in the package com.tricedesigns.hello, which I specified in the New Android Project dialog box.
  1. In the main Activity class, add an import statement for org.apache.cordova.DroidGap:
import org.apache.cordova.DroidGap;
  1. Change the base class from Activity to DroidGap ; this is in the class definition following the word extends :
public class HelloGapActivity extends DroidGap {
  1. Replace the call to setContentView() with a reference to load the PhoneGap interface from the localassets/www/index.html file, which you created earlier (see Figure 9).
super.loadUrl("file:///android_asset/www/index.html");
Note: In PhoneGap projects, you can reference files located in the assets directory with a URL referencefile:///android_asset, followed by the path name to the file. The file:///android_asset URI maps to the assets directory.
Figure 9. Updates to the main Activity class.
Figure 9. Updates to the main Activity class.

Configure the project metadata

You have now configured the files within your Android project to use PhoneGap. The last step is to configure the project metadata to enable PhoneGap to run.
  1. Begin by opening the AndroidManifest.xml file in your project root. Use the Eclipse text editor by right-clicking the AndroidManifest.xml file and selecting Open With > Text Editor (see Figure 10).
Figure 10. Opening AndroidManifest.xml.
Figure 10. Opening AndroidManifest.xml.
  1. In AndroidManifest.xml, add the following supports-screen XML node as a child of the root manifest node:
<supports-screens android:largeScreens="true" android:normalScreens="true" android:smallScreens="true" android:resizeable="true" android:anyDensity="true" />
The supports-screen XML node identifies the screen sizes that are supported by your application. You can change screen and form factor support by altering the contents of this entry. To read more about <supports-screens>, visit the Android developer topic on the supports-screen element.
Next, you need to configure permissions for the PhoneGap application.
  1. Copy the following <uses-permission> XML nodes and paste them as children of the root <manifest> node in the AndroidManifest.xml file:
<uses-permission android:name="android.permission.CAMERA" /> <uses-permission android:name="android.permission.VIBRATE" /> <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.READ_PHONE_STATE" /> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.RECEIVE_SMS" /> <uses-permission android:name="android.permission.RECORD_AUDIO" /> <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" /> <uses-permission android:name="android.permission.READ_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_CONTACTS" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" /> <uses-permission android:name="android.permission.GET_ACCOUNTS" /> <uses-permission android:name="android.permission.BROADCAST_STICKY" />
The <uses-permission> XML values identify the features that you want to be enabled for your application. The lines above enable all permissions required for all features of PhoneGap to function. After you have built your application, you may want to remove any permissions that you are not actually using; this will remove security warnings during application installation. To read more about Android permissions and the <uses-permission> element, visit the Android developer topic on the uses-permission element..
After you have configured application permissions, you need to modify the existing <activity> node.
  1. Locate the <activity> node, which is a child of the <application> XML node. Add the following attribute to the <activity> node:
android:configChanges="orientation|keyboardHidden"
  1. Next, you need to create a second <activity> node for the org.apache.cordova.DroidGap class. Add the following <activity> node as a sibling of the existing <activity> XML node:
<activity android:name="org.apache.cordova.DroidGap" android:label="@string/app_name" android:configChanges="orientation|keyboardHidden"> <intent-filter></intent-filter> </activity>
At this point, your project is configured to run as a PhoneGap project for Android. If you run into any issues, verify your configuration against the example provided at the PhoneGap getting started site for Android.

Running the applicationTo launch your PhoneGap application in the Android emulator, right-click the project root, and select Run As > Android Application (see Figure 11).

Figure 11. Launching the Android application.
Figure 11. Launching the Android application.
If you don't have any Android virtual devices set up, you will be prompted to configure one. To learn more about configuring Android emulator virtual devices, visit the Android developer guide for devices.
Eclipse will automatically start an Android emulator instance (if one is not already running), deploy your application to the emulator, and launch the application (see Figure 12).

you can refer this link for more details:
http://www.adobe.com/devnet/html5/articles/getting-started-with-phonegap-in-eclipse-for-android.html

 for ubuntu users please check the following link:
http://www.liberiangeek.net/2013/02/install-android-sdk-adt-bundle-in-ubuntu-12-10-quantal-quetzal/
http://forum.xda-developers.com/showthread.php?t=2302780
http://stackoverflow.com/questions/14924063/phonegap-getting-started-with-android-on-linux
http://jnelson.in/phonegap/how-to-setup-phonegap-on-linux-for-android/jacob-nelson
http://psydrake.tumblr.com/post/39908525042/quick-tutorial-android-phonegap-development-on-linux

Posted by at No comments:
Subscribe to: Posts (Atom)