PhoneGap

Final Touches &

Recap Session
This you should already know by now

PhoneGap is a framework that bridges HTML to native.

“Develop once, deploy everywhere” principle.

Freedom to use any modern HTML5 front-end library.

How does it work?

Text

Your code is written entirely in JavaScript, Cordova

libraries will convey messages to the native engine.
Plug-ins

Extend the built-in Web App

functionality with custom
plug-ins
PhoneGap JS Plugin
Delegate heavyweight data
processing to native code

Create background services PhoneGap Native Plugin

Debugging PhoneGap Apps

Browser inspector window

Ripple and emulate.phonegap.com

Using your phone SDK’s emulator (Xcode, Eclipse… etc)

Directly on the device for true performance benchmarks

Creating the native
Using the target platform tool chain
installers

. iOS - http://phonegap.com/start#ios-x4
. Android - http://phonegap.com/start#android
. Blackberry - http://phonegap.com/start#blackberry
. Windows Phone - http://phonegap.com/start#wp
. WebOS - http://phonegap.com/start#webos
. Symbian - http://phonegap.com/start#symbian

Using PhoneGap Build - a cloud service by Adobe

Using PhoneGap Build Service

Its a cloud service http://build.phonegap.com

Supports: iOS, Android, Blackberry, WebOS, Windows

Phone 7, and Symbian

Does not support custom plugins (without a hack)

You supply a signing certificate, upload your files or provide

a Git link, compile then download a device executable
PhoneGap Configuration
Android
Android SDK (OS X, *nix)
Make sure you have installed java VM

Install the Android SDK from developer.android.com/sdk

Move the adt-bundle tree to any folder of your choice

Edit your ~/.bash_profile file to the adt-bundle to your path

variable. For instance:

export
PATH=${PATH}:/myfolder/adt-bundle/sdk/platform-
tools:/myfolder/adt-bundle/sdk/tools
Android SDK (Windows 7)
Make sure you have both java and ant installed on your
system

Open the Start menu, right-click Computer and choose

Properties

Click on Advanced System Settings on the left and go to

Environment Variables

Edit your PATH variable and append the adt-bundle

location as per the below:

;C:\myfolder\adt-bundle\sdk\platform-tools;C:\
myfolder\adt-bundle\tools
Android Project Creation

$ cordova create hello com.example.hello “HelloWorld”

$ cd hello

$ cordova platform add android

$ cordova build
 Android Project Modification

Make sure you have both Eclipse

and Android development plugin
installed from install sources

Launch Eclipse, select New Project

and choose Android Project from
Existing Code
 Android Project Modification

Make sure you have both Eclipse

and Android development plugin
installed from install sources

Launch Eclipse, select New Project

and choose Android Project from
Existing Code
 Android Deploy to Emulator

Run android on your command-line

From within Eclipse, click on this icon

 Android Deploy to Emulator

Once open, the Android SDK

Manager with display various
runtime libraries
 Android Deploy to Emulator

Choose Tools → Manage AVDs, then

choose any device in the resulting
dialog box
 Android Deploy to Emulator

Click on Create AVD, optionally you

may want to rename it, then click OK
to accept the changes
 Android Deploy to Emulator
The created AVD then appears in the
Android Virtual Devices list.

To start the emulator, select the AVD

and click Start

. Now you can use the following

cordova command-line to deploy
your App on the emulator:

$ cordova emulate android

PhoneGap Configuration
iOS
iOS SDK (OS X only)

Make sure you have installed the latest Xcode from the App
Store

From Xcode menu, select Preferences then Downloads, from

Components, select Command Line Tools
iOS Project Creation

$ cordova create hello com.example.hello “HelloWorld”

$ cd hello

$ cordova platform add iOS

$ cordova prepare # or cordova create

 iOS Project Modification
Launch Xcode, select iPhone Simulator from the scheme menu
 iOS Project Deploy to Emulator

Click on Run on the left side of the

Scheme, this will build the project and
launch it using the emulator.
 iOS Common Problems
Deprecation warnings
 iOS Common Problems
Missing headers? Select “unique”
PhoneGap API Configuration
config.xml

Controls many aspects of your App

Placed in the top-level web folder along with app’s home

page (with exception to Android which saves it in an assets
folder)

Can be affected by your CLI commands

Core configurations
Global preferences

Full screen:
<preferencename="Fullscreen" value="true" />

Device orientation:
<preferencename="Orientation" value="landscape" />

options: default, landscape, portrait

Multi-platform Preferences

Disallow overscroll
<preferencename="DisallowOverscroll" value="true"/>

Background color
<preferencename="BackgroundColor" value=“0xff0000ff"/>

Hide keyboard from accessory bar

<preferencename="HideKeyboardFormAccessoryBar"
value="true"/>
The <feature> element

<featurename="Device">
        <paramname="android-package"value="org.apache.cordova.device.Device"/>
    </feature>
<featurename="Device">
        <paramname="ios-package"value="CDVDevice"/>
    </feature>
Whitelist
Restricted by W3C for security reasons

Can be overridden in config.xml

Examples:

. http://google.com/*

. http://maps.google.com/*

. http://*.google.com/*

. http://www.google.com/mobile/*

. *://google.com/*
Whitelist in Android, iOS and WP7 / 8

<access origin="http://google.com/*" />

Whitelist in Blackberry 10

<access origin="http://google.com" subdomains="false" />