Book Image

PhoneGap 3 Beginner's Guide

By : Giorgio Natili
Book Image

PhoneGap 3 Beginner's Guide

By: Giorgio Natili

Overview of this book

<p>You don’t have to know complex languages like Objective C to compete in the ever-growing mobile market place. The PhoneGap framework lets you use your web development skills to build HTML and JavaScript-based mobile applications with native wrappers that run on all the major mobile platforms, including Android, iOS, and Windows Phone 8.</p> <p>"PhoneGap 3 Beginner's Guide" will help you break into the world of mobile application development. You will learn how to set up and configure your mobile development environment, implement the most common features of modern mobile apps, and build rich, native-style applications. The examples in this book deal with real use case scenarios, which will help you develop your own apps, and then publish them on the most popular app stores.</p> <p>Dive deep into PhoneGap and refine your skills by learning how to build the main features of a real world app.</p> <p>"PhoneGap 3 Beginner's Guide" will guide you through the building blocks of a mobile application that lets users plan a trip and share their trip information. With the help of this app, you will learn how to work with key PhoneGap tools and APIs, extend the framework’s functionality with plug-ins, and integrate device features such as the camera, contacts, storage, and more. By the time you’re finished, you will have a solid understanding of the common challenges mobile app developers face, and you will know how to solve them.</p>
Table of Contents (22 chapters)
PhoneGap 3 Beginner's Guide
Credits
Foreword
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Time for action - installing ADT into Eclipse


In order to install ADT into Eclipse it's enough to perform the following steps:

  1. Start Eclipse then navigate to Help | Install New Software.

  2. Click on Add in the top-right corner.

  3. In the Add Repository dialog that appears, enter ADT Plugin in the Name field and the following URL for the Location field: https://dl-ssl.google.com/android/eclipse/.

  4. When the installation completes, restart Eclipse.

What just happened?

Once the Eclipse installation is properly configured it's possible to create a new project using the appropriate wizard.

Next, define the application name, the packaging, the Android SDK to use in order to build the app and the minimum SDK.

The wizard lets you define the application icons, i.e., the icons end users will see in the mobile device when using the app.

An important step when creating an Android project based upon PhoneGap is to select the option to start with a blank activity and configure it properly. An activity is a single, focused thing that the user can do. Almost all activities interact with the user, so the Activity class takes care of creating a window in which it's possible to place the UI of the application. Make sure the activity doesn't inherit from anything—i.e., leave the Hierarchical Parent field blank.

Tip

Always edit the Title field in order to show the appropriate name of your app when installing, running, and uninstalling it.

It's very important to have PhoneGap in the Eclipse workspace or be aware of the path to reach the PHONEGAP_ROOT folder in order to use the files required to run the app.

In the root directory of the project create two new directories: /libs and assets/www.

Place a copy of the cordova-2.x.y.jar and cordova-2.x.y.js into these directories, the files are located in the PHONEGAP_ROOT/lib/android folder. Copy the xml folder inside the project res folder.

Verify that cordova-2.x.y.jar is listed in the Build Path of the project. Right-click on the /libs folder and go to Build Paths | Configure Build Path. Then, in the Libraries tab, add cordova-2.x.y.jar to the project.

In order to run and debug the application, the Main file of the project should look like the following code snippet:

package com.gnstudio.samples.cordova.hello;
import android.os.Bundle; 
import org.apache.cordova.*;
public class MainActivity extends DroidGap{
    @Override
    public void onCreate(Bundle savedInstanceState){
        super.onCreate(savedInstanceState);
        super.loadUrl(Config.getStartUrl());
    }
}

The Main file by default contains the override of the default Android menu function. It can be safely removed because it's not needed at all.

Tip

In order to correctly load a file into the WebView, Internet permission is required. In order to enable it add the following tag to the AndroidManifest.xml file <uses-permission android:name="android.permission.INTERNET" />.