Archive

Posts Tagged ‘phonegapinandroid’

PhoneGap in Android(Eclipse)

July 8th, 2010

Prerequisites for System -

1.Java JDK 1.6
2.Eclipse
3.Android sdk package
4.ADT Plug-in for Eclipse with required Android sdk components.
5.Download and unzip Apache ANT and add it to your PATH(if eclipse doesn’t provide you).
6.Download and install Ruby(http://www.ruby-lang.org/en/downloads/), only for windows/linux user,mac OS already has an installed Ruby.

Steps for installing phone-gap-

1.download the latest framework version of PhoneGap from http://github.com/phonegap/phonegap-android.

2.After downloading ‘phonegap-phonegap-android-{dc58c67}’ zip or tar file,unzip and rename it as ‘phonegap-android’ folder.

3.Run the ruby command in ‘phonegap-android’ folder as -

  • To run the command directly in folder -ruby .\droidgap “[android_sdk_path]” [name] [package_name] “[www]” “[path]“
  • To run the command in command prompt(terminal) -ruby ./droidgap “[android_sdk_path]” [name] [package_name] “[www]” “[path]“

parameter description-

  • android_sdk_path -The path to your Android SDK install.
  • name -The name of your application.
  • package_name -The name of your package (For example: com.wissen.sample)
  • www -The path to your www folder. (Where is your HTML, CSS and JS files is all ready present just like copy from iphone app.)
  • path -The path to generate the application. (can not be inside any Eclipse workspace)

You should get a message in your terminal saying completed,which create complete Android application having src,assets,res and AndroidManifest.xml,including lib contain phonegap.jar file which can be use further in your application.

4.Opening the phonegap project in eclipse -
Open the ‘New Android Project’ window in eclipse and select checkbox ‘Create Project form existing source’,given the path of project which is just created by using ruby command and fill up the all necessary information as we fill up for normal android project,press finish to open the application in eclipse.

5.Right click on phonegap.jar under the libs folder and go to Buildpath-> Add to build path.

6.Select proper minimum sdk version in AndroidManifest.xml file.

7.Click on run button in eclipse or using right click on project in package explorer,select Run As Android Application, after successful run,you will see the html content on your android emulator.

Now Easy steps to do further phonegap applications-

1.Create new simple android project in eclipse as shown in following picture-

before

2.Under the android ‘assets‘ folder create new folder ‘www‘ from new menu or right click and new option,like shown in following picture,

before

3.Create new file ‘index.html’ in www folder(you can create html,css and js files here),you can copy phonegap.js file from phonegap framework to access natives in your application, following picture show you the whole idea,

before

4.Write html code in index file for example like this-

before

5.Now Create new folder ‘libs‘ in a project and copy the ‘phonegap.jar‘ file from downloaded phonegap framework or copy from the project which is created using command ‘ruby ./droidgap’ and paste the ‘phonegap.jar’ file under the ‘libs’ folder,like this

before

6.Right click on phonegap.jar under the libs folder and go to Buildpath-> Add to the build path.

7.Open the main activity java class and main class will extends DroidGap instead of extends Activity ,import package com.phonegap.DroidGap from phonegap.jar,                                       like this-import com.phonegap.DroidGap;

8.Also instead of setContentView(R.layout.main);,used super.loadUrl(“file:///android_asset/www/index.html”); , now your activity file must look like this-

before

9.Run the application from the play like image of tool bar or right click on project select Run as Android Application.

before

10.After successful run, project output will look like this-

before

Android, Android API, Android Tools , , ,