Tải bản đầy đủ - 0 (trang)
Chapter 10. Creating Android Apps with PhoneGap

Chapter 10. Creating Android Apps with PhoneGap

Tải bản đầy đủ - 0trang

Installing PhoneGap

Web developers are used to installing JavaScript libraries in a jiffy by including a simple

script tag at the top of an HTML page. Installing PhoneGap and the other associated

applications and files is a more laborious process. Some of the required elements may

already be installed on your system, but this chapter assumes that a clean install of all

elements is required. Here’s a breakdown of the steps involved:

1. Install the Java Development Kit (JDK). This differs from the Java Runtime Environment (JRE) that is typically installed on systems. The JRE allows Java programs

to be run on a system, while the JDK contains all the resources for actually developing Java applications (and also contains the JRE). Remember, PhoneGap is actually a native Android Java application, and that’s why Java development must

be enabled on your system.

2. Install the Android Software Development Kit (SDK) for windows. This download

enables you to install all the desired Android platform versions, tools, and utilities,

including a virtual device manager and an Android device emulator that allows you

to test applications without actually having the device hardware.

3. Install the Eclipse Integrated Development Environment (IDE). This is the preferred IDE for Java and includes a code editor, debugger, project organization facilities, and many other tools for making Java application development easier.

4. Install the Android Development Tools (ADT) plug-in for Eclipse. This leverages

Eclipse’s Java development tools and turns it into an Android IDE with everything

that you need for full-blown Android development.

5. Install PhoneGap itself. This is by far the smallest download!

Installing the Java JDK

You can find the latest Java JDK on the Oracle website at http://www.oracle.com/tech

network/java/javase/downloads/index.html. This address may change in the future, but

just search for “download java jdk” in Google, and you should be fine.

Click the leftmost Java link to download the JDK (Figure 10-1). Select the platform

required (e.g., Windows), and agree to the terms of the license agreement. The download filename will be presented as a link (e.g., jdk-6u24-windows-i586.exe), and is approximately 75 MB in size (as opposed to about 15 MB for the JRE; this is one way to

check whether you are downloading the correct file). Once the file has downloaded,

simply double-click it to install.

232 | Chapter 10: Creating Android Apps with PhoneGap


Figure 10-1. Downloading the Java JDK

Installing the Android SDK

To download the Android SDK, visit http://developer.android.com/sdk/index.html.

For Windows systems, the recommended file to download is the Windows installer

version (installer_r10-windows.exe at this writing). This will install the base software

tools for Android development, aka the Android SDK Manager (ASM). The ASM includes its own tools for installing and managing updates of the desired Android platforms and other components (Figure 10-2). The full suite of Android platforms and

components can take a while to download in the ASM, but you only need to do it once,

downloading updates as and when they become available.

In addition to the regular Windows application window you expect, the ASM opens a

command-line window (aka DOS box). No need to panic; this is normal. The ASM is

actually a convenient Windows wrapper for a suite of Android command-line tools

that you can use if desired. In fact, all Android development can be done with a basic

text editor and the Android command-line tools, but the Eclipse environment and associated extras can make life a lot easier.

If, when you try to install the ASM, it pops up a message saying that the Java JDK is

not found (even though it definitely has been installed), click the back button in the

message dialog and try again. This is a workaround for a bug in the ASM installer that

can bring up the “JDK not found” message incorrectly.

Installing PhoneGap | 233


Figure 10-2. Windows Android SDK Manager

Installing Eclipse

Eclipse is a popular programming IDE for many programming languages, and is the

recommended choice for Android development. Augmented with the Eclipse Android

plug-in, it provides all the tools required to work with Android projects, including those

using PhoneGap.

Eclipse comes in several flavors for various programming languages and platforms. We

are interested in the Android recommended version, Eclipse Classic (Figure 10-3),

which is the Java development version and can be downloaded from http://www.eclipse


Being a Java application itself, Eclipse will not create any Windows registry entries,

program groups, or shortcut icons. It runs entirely from its installation directory via

the eclipse.exe file. You can create your own shortcut icon to this executable file if


If you are serious about full-blown application development or wish to augment

PhoneGap with additional capabilities, there is a huge amount of resources relating to

Eclipse development. The following link is a good starting point: http://www.eclipse


234 | Chapter 10: Creating Android Apps with PhoneGap


Figure 10-3. Eclipse Classic is the one we want

Installing Android Development Tools

Eclipse would be nothing without its plug-ins, and virtually every programming language has an Eclipse plug-in. The plug-ins add language-specific functionality to Eclipse

such as syntax highlighting, class browsing, debugging facilities, and much more.

There is no reason why you couldn’t do Android development with the regular Java

language version of Eclipse, but the most efficient Android development environment

is provided by the ADT plug-in.

You can find further information about installing the ADT Eclipse plug-in at http://


The ADT is actually installed from within Eclipse rather than a separate application.

There are a few steps involved to install the ADT:

1. Start Eclipse, and then select Help→Install New Software.

2. Click the Add button.

Installing PhoneGap | 235


3. In the Add Repository dialog box that appears, enter ADT Plugin for the name and

the following URL for the location: https://dl-ssl.google.com/android/eclipse/. Click

OK. The “Work with:” entry should now read “ADT Plugin – https://dl-ssl.google


If you encounter problems downloading the ADT plug-in, try using http:// instead

of https:// for the location.

4. Select the checkbox near Developer Tools and click Next. Eclipse will check the

remote ADT files and display a review of the downloads it will perform. Click Next

again, accept the terms of the license agreement, and then click Finish. The download and installation will begin. If an “unsigned file” warning appears, just click

OK to continue.

5. Finally, restart Eclipse. You’re ready for Android development.

All that remains is to install PhoneGap itself.

Installing PhoneGap

PhoneGap isn’t actually installed; it just contains a few files that we need to include in

this project. You can download Android PhoneGap from http://www.phonegap.com/


Click the Download button for the PhoneGap .zip file, which is approximately 4.5 MB.

Extract the file to a directory, ready for inclusion in our project.

Creating a PhoneGap Project in Eclipse

Now that everything has been downloaded and installed, it’s time to create a PhoneGap

project in Eclipse that’s ready for testing on the Android emulator or on a real Android


1. Start Eclipse and select File→New→Project.

2. Select Android Project from the New Project dialog.

3. In the New Android Project dialog, enter the details as shown in Figure 10-4. Your

default location will be the same as your Eclipse workspace, but you can change

this if desired. Choose an Android version that is compatible with one of your

virtual Android devices or a real Android device. The package name follows the

usual Java rules of package naming—typically, a reverse domain name that is

guaranteed unique so it does not conflict with other Java packages.

4. Go to the root directory of the project and create two new directories: /libs

and /assets/www. (Note that the assets directory already exists.)

5. Copy phonegap.js from the Android directory in the extracted PhoneGap directory

to /assets/www.

236 | Chapter 10: Creating Android Apps with PhoneGap


6. Copy phonegap.jar from the Android directory in the extracted PhoneGap directory to /libs.

After you’ve created the two directories and copied phonegap.jar and phonegap.js,

the project in Eclipse should be structured within the Package Explorer as shown in

Figure 10-5.

Figure 10-4. The New Android Project dialog

Creating a PhoneGap Project in Eclipse | 237


Figure 10-5. Project layout in Eclipse

Altering the App.java File

Double-click the App.java file and replace its content with the following code:

package com.phonegap.tilepic;

import android.app.Activity;

import android.os.Bundle;

import com.phonegap.*;

public class App extends DroidGap {

/** Called when the activity is first created. */


public void onCreate(Bundle savedInstanceState) {





238 | Chapter 10: Creating Android Apps with PhoneGap


At this point, Eclipse might highlight a few errors. This is because it does not currently

know about the PhoneGap Java library in the /libs folder.

To fix this, right-click the /libs folder in the Package Explorer, and then select Build

Path→Configure Build Path.

When the “Properties for TilePic” dialog appears, click the Libraries tab, and then click

the Add JARs button. This brings up a JAR Selection dialog box that allows you to

select the PhoneGap JAR file (Figure 10-6).

Figure 10-6. Selecting the PhoneGap library for inclusion

Altering the AndroidManifest.xml File

Next, replace the AndroidManifest.xml file content with the following code:

package="com.phonegap.helloworld" android:versionCode="1"


android:normalScreens="true" android:smallScreens="true"

android:resizeable="true" android:anyDensity="true" />

Creating a PhoneGap Project in Eclipse | 239


android:name="android.permission.CAMERA" />

android:name="android.permission.VIBRATE" />

android:name="android.permission.ACCESS_COARSE_LOCATION" />

android:name="android.permission.ACCESS_FINE_LOCATION" />

android:name="android.permission.ACCESS_LOCATION_EXTRA_COMMANDS" />

android:name="android.permission.READ_PHONE_STATE" />

android:name="android.permission.INTERNET" />

android:name="android.permission.RECEIVE_SMS" />

android:name="android.permission.RECORD_AUDIO" />

android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

android:name="android.permission.READ_CONTACTS" />

android:name="android.permission.WRITE_CONTACTS" />

android:name="android.permission.WRITE_EXTERNAL_STORAGE" />

android:name="android.permission.ACCESS_NETWORK_STATE" />



Creating and Testing a Simple Web Application

We can now create a simple web application to test on the emulator or an actual Android device.

Right-click the assets/www folder in the Package Explorer, select New→File, and create

a file called index.html. Right-click index.html in the Package Explorer, and select Open

With→Text Editor.

240 | Chapter 10: Creating Android Apps with PhoneGap


Add the following code into the file:

TilePic Test

TilePic Test

Click the top-level TilePic folder in the Package Explorer, and then right-click and select

Run As→Android Application. Eclipse will now run the application on either the emulator or, if connected, an actual Android device. The application will display the text

“TilePic Test.” Well done—you have just created your first PhoneGap Android


Testing the TilePic Application

To run the full TilePic puzzle game as a native application, copy all the TilePic web

application files to the assets/www folder. The index.html test file created earlier will be

overwritten with the TilePic index.html file. The assets/www should contain the files

and folders as shown in Figure 10-7.

Run and test TilePic by clicking the top-level TilePic folder in the Package Explorer,

then right-clicking and selecting Run As→Android Application.

Creating a PhoneGap Project in Eclipse | 241


Figure 10-7. Complete TilePic project and file assets

242 | Chapter 10: Creating Android Apps with PhoneGap


Tài liệu bạn tìm kiếm đã sẵn sàng tải về

Chapter 10. Creating Android Apps with PhoneGap

Tải bản đầy đủ ngay(0 tr)