How to Use eclipse phonegap to build Android applications

Eclipse is an open-source integrated development environment (IDE) that supports multiple technologies. However, this article focuses on Java support, which is also the "mother tongue" of Android applications ". Android is an open-source mobile operating system released by Google. Android has become an operating system for many smartphones and tablets, including Samsung Galaxy series phones and tablets, Amazon Kindle Fire tablets, Barnes and Noble Nook tablets, and many other devices produced by many manufacturers. Phonegap is an open-source application platform that allows you to use HTML and JavaScript to create locally installed mobile applications.

Install eclipse

The first step to establish a phonegap Application Development Environment on Android is to download and install Eclipse IDE.

Use phonegap for Android Development (available in windows, OS X, or Linux. There are currently many different eclipse installation packages. Although phonegap can be used together with other package configurations, it is recommended to use the eclipse classic package, which contains the phonegap application development entry and various tools required for use.

1. Visit the eclipse download page to download the eclipse classic package for your operating system. Eclipse download is an archive file that contains the development environment.

2. Extract the archive file to your local disk and remember its location.

3. After extraction, you only need to double-click the eclipse application to start eclipse without any installation steps.

Install android

After downloading and installing eclipse, You need to configure your own environment to use the Google Android development tool. This process involves two steps. First, download and install the android SDK. Then, install the ADT plug-in for eclipse.

Download and configure the android SDK

The first step to configure the android tool on your system is to download the android SDK.

1. Visit the android SDK website and download the corresponding version for your operating system.

2. Extract the Downloaded archive file to your local disk and remember its location.

Configure the ADT plug-in for eclipse

Next, you need to install the ADT (Android Development Tool) Plug-in for eclipse. The ADT plug-in must be installed through the eclipse install new software wizard.

1. Start eclipse.

2. Follow the instructions for downloading the ADT plug-in (available on the android Developer SDK page-Eclipse) to perform the operation. These steps will guide you through the entire ADT plug-in installation process.

3. Restart eclipse.

After installing the ADT plug-in and restarting eclipse, You need to configure it to use the android SDK that has been downloaded to the local file system.

1. Follow the instructions on the Developer SDK page-configure eclipse and set the appropriate Android SDK location in the ADT plug-in.

Download and install phonegap

The next step is to download and install phonegap.

1. Visit the phonegap download page and click the orange download link to start the download process.

2. Extract the archive file to the local file system for later use.

You are now ready to create the first Android phonegap project in eclipse.

Note:The procedure is for phonegap 1.5, but the procedure must be applicable to all versions of phonegap, and all versions of phonegap have the same operation.

Create a project in eclipse

Follow these steps to create an android project in Eclipse:

1. Select New> Android project 

After creating a new standard Android project, the project will be updated to use phonegap.

1. In the new Android project dialog box, type the project name and select create new project in workspace

2. Click Next.

1. Select Android 2.2 as the build target and click Next 

Note:When Android 2.2 is selected as the build target, the compiler is configured as the target Android 2.2 SDK, this ensures that your phonegap application runs on devices running Android 2.2 and later operating systems.

1. On the Application Info screen, type the package name of your main Android Application . This will be a namespace logically displaying the package structure, suchCom. yourcompany. yourproject.

2. Click Finish.

Configure the project to use phonegap

In this case, eclipse creates a blank Android project. However, it is not configured to use phonegap. Next, you need to perform the following operations

1. Create an assets/WWW directory and a libs directory in the new Android project. All HTML and JavaScript on the phonegap application interface will reside in the assets/WWW folder.

1. To copy necessary phonegap files to the project, first find the directory for downloading phonegap, and then navigate to the LIB/Android subdirectory 

1. Copy the cordova-1.5.0.js to the assets/WWW directory in the android project.

2. Copy the cordova-1.5.0.jar to the libs directory in the android project.

3. Copy the XML directory to the res directory of the android project 

1. Next, create a file named index.html in the assets/WWW folder. This file will be used as the main entry point for the phonegap application interface

2. In index.html, add the following HTML code as the starting point for user interface development:

<!DOCTYPE HTML>

1. You need to add the cordova-1.5.0.jar Library to the build path for this android project. Right-click the cordova-1.5.0.jar and choose build path> Add to build path

Update Activity Class

Now, you are ready to update the android project to make sure it starts using phonegap.

1. Open the active file of your main application. The name of this file is the same as that of your project, and the word "activity" is added to it. It will be located insrcFolder.

For my project (hellogap), the main Android activity file name is hellogapactivity. Java, which is located in the com. tricedesigns. Hello package specified in the new Android project dialog box.

1. In the main activity classorg.apache.cordova.DroidGapAdd the following import statement:

import org.apache.cordova.DroidGap;

1. Change the base class fromActivityChangeDroidGap; It is located in the class definitionextendsAfter the word:

public class HelloGapActivity extends DroidGap {

1. Replace it with a reference to load the phonegap interface from the locally created assets/www/index.html FilesetContentView()Call a function 

super.loadUrl("file:///android_asset/www/index.html");

Note:In the phonegap project, you can reference a file in the assets directory where the URL reference is file: // android_asset, and then reference the path name of the file. File: // android_asset URI will be mapped to the Assets Directory.

Configure project metadata

Now, you have configured the file in the android project to use phonegap. The last step is to configure the project metadata to run phonegap.

1. First, open the androidmanifest. xml file in your project root. To use the eclipse text editor, right-click the androidmanifest. xml file and select open with> Text Editor

1. In androidmanifest. XML, add the followingsupports-screen XMLNodemanifestChild node of the Root Node

<supports-screens    android:largeScreens="true"    android:normalScreens="true"    android:smallScreens="true"    android:resizeable="true"    android:anyDensity="true"    />

supports-screenThe node identifies the screen size supported by your application. You can adjust the screen and appearance settings by changing the content of this entry. Read the related<supports-screens>,For more information, visit the android developer topic-supports screen elements.

Next, you need to configure permissions for the phonegap application.

1. Copy the following<uses-permission>XML nodes, and paste them as androidmanifest. xml files<manifest>Child node of the root node:

<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" />

<uses-permission>The XML value identifies the features you want to enable for the application. The above code line enables all permissions required for normal operation of all phonegap functions. After the application is built, you may want to delete all permissions that are not actually used. This will delete the security warnings that appear during application installation. Read about Android permissions and<uses-permission>For more information about the element, visit the android developer topic-user permission element.

After the application permission is configured, You need to modify the existing<activity>Code.

1. Find<activity>Node, which is<application>The child node of the XML node. Add the following attributes to<activity>Node:

configChanges="orientation|keyboardHidden" 

1. Next, you needorg.apache.cordova.DroidGapClass to create<activity>Node. Add the following<activity>As an existing Node<activity>The same level of the XML node.

<activity     android:name="org.apache.cordova.DroidGap"     android:label="@string/app_name"     android:configChanges="orientation|keyboardHidden">     <intent-filter></intent-filter> </activity>

Now, you have configured your project to run as an android phonegap project. If you encounter any problems, verify your configuration according to the example provided by the android phonegap getting started website.

Run the application

To start your phonegap application in the android simulator, right-click the project root directory and choose run as> Android Application 

If you have not set any android virtual devices, the system will prompt you to configure an android virtual device. For more information about how to configure the virtual device of the android simulator, visit the android developer's device guide.

Eclipse automatically starts the android simulator instance (if not run), deploys your application for the simulator, and then starts the application 

After running an application in the android simulator, you may want to test it on a physical device. We strongly recommend that you always test your application on a physical device before deploying the application to the production environment. The computing power and appearance settings of physical devices are often different from those of simulators. device testing can expose problems that may not be detected in the simulator environment.

Follow these steps to start your application on a physical Android device:

1. Make sure that the device is connected to your computer through USB.

2. Select Run> run commands 

1. In the run deployments dialog box, select your application under Android Application on the left.

2. Click the target tab and select manual as the deployment target selection mode.

3. When you are ready to start the application, click Run 

In the chooser dialog box of the Android device, you can select the simulator or the connected Android device. All connected Android devices are displayed in this list.

1. Select the device you want to use  and click OK.

Your phonegap application will be installed and started on the device.

Next reading

If you have learned this part, you can start to use phonegap to build a real Android Application. Next, you can read and use the native plug-in extension phonegap for IOS.

Remember to use HTML, CSS, and JavaScript to build a phonegap application for the user interface. In this way, you can use traditional web development technology to easily create applications with superior appearance. For more information about phonegap, refer to the phonegap wiki, join the phonegap Google group or learn more about phonegap.