Creating and Distributing Mobile Web Applications with PhoneGap

James Pearce
Sr Director, Developer Relations

@ jamespearce
jamesp@sencha.com

Creating and distributing
mobile web applications
with PhoneGap

Native Web

Cross-platform ✘ ✔

Linkable ✘ ✔

Discoverable ✔ ✘

Device APIs ✔ ✘

Native Web Hybrid

Cross-platform ✘ ✔ ✔

Linkable ✘ ✔ ✔

Discoverable ✔ ✘ ✔

Device APIs ✔ ✘ ✔

A simple hybrid application

UIWebView
WebView

HTML
CSS Stores
JS

PhoneGap
http://phonegap.com

MIT

A PhoneGap application

UIWebView
WebView

HTML
CSS Stores
JS

JS APIs

PhoneGap APIs
Accelerometer File
Tap into the device’s motion sensor. Hook into native file system through JavaScript.

Camera Geolocation
Capture a photo using the device's camera. Make your application location aware.

Compass Media
Obtain the direction that the device is pointing. Record and play back audio files.

Contacts Network
Work with the devices contact database. Quickly check the network state.

Device Notification
Gather device specific information. Visual, audible, and tactile device notifications.

Events Storage
Hook into native events through JavaScript. Hook into the device’s native storage options.

$> ./xcode4.sh seattlebars .

http://sencha.com/x/b9

How it works
@implementation PhoneGapDelegate
...
+ (NSString*) wwwFolderName {
! return @"www";
}
+ (NSString*) startPage {
! return @"index.html";
}
...
NSString* startPage = [[self class] startPage];
NSURL *appURL = [NSURL URLWithString:startPage];
if(![appURL scheme]) {
appURL = [NSURL fileURLWithPath:[[self class]
pathForResource:startPage]];
}
...
NSURLRequest *appReq = [NSURLRequest requestWithURL:appURL ...];
[webView loadRequest:appReq];

How it works
package com.phonegap.exampleapp;

import android.os.Bundle;
import com.phonegap.*;

public class exampleapp extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
}
}

Using a
Sencha Touch
Application

$> rm -r www
$> ln -s myapp www

Don’t symlink your
source control

Don’t symlink the
entire SDK, thanks

NB these are now
in the symlink dir

Ext.setup({
tabletStartupScreen: 'tablet_startup.png',
phoneStartupScreen: 'phone_startup.png',
icon: 'icon.png',
glossOnIcon: false,
...

<aside>

+ =

Paciﬁst
</aside>

$> rm -r assets/www
$> ln -s myapp assets/www

Accelerometer File
Tap into the device’s motion sensor. Hook into native file system through JavaScript.

Camera Geolocation
Capture a photo using the device's camera. Make your application location aware.

Compass Media
Obtain the direction that the device is pointing. Record and play back audio files.

Contacts Network
Work with the devices contact database. Quickly check the network state.

Device Notification
Gather device specific information. Visual, audible, and tactile device notifications.

Events Storage
Hook into native events through JavaScript. Hook into the device’s native storage options.

Android iOS
phonegap.js phonegap.js

Alter entry points
package com.phonegap.exampleapp;

import android.os.Bundle;
import com.phonegap.*;

public class exampleapp extends DroidGap {
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index_a.html");
}
}

index.html

<!doctype html>
<html>
<head>
<script type="text/javascript" src="app/app.js">
</script>
<script type="text/javascript" src="phonegap.0.9.5.js">
</script>
...

index_a.html

<!doctype html>
<html>
<head>
<script type="text/javascript" src="app/app.js">
</script>
<script type="text/javascript" src="phonegap_a.0.9.5.js">
</script>
...

deviceready event

document.addEventListener(
"deviceready", onDeviceReady, false
);

function onDeviceReady() {
// Now safe to use the PhoneGap API
}

Avoiding race conditions
document.addEventListener(
"deviceready", app.mainLaunch, false
);

Ext.regApplication({
name: "app",
launch: function() {
this.launched = true;
this.mainLaunch();
},
mainLaunch: function() {
if (!device || !this.launched) {return;}
...
}
});

Camera
navigator.camera.getPicture(

function(imageData) {
var img = document.getElementById('img');
img.src = "data:image/jpeg;base64," +
imageData;
},

function (message) {
alert('Failed because: ' + message);
},

{ quality: 50 }

);

File I/O
var paths = navigator.fileMgr.getRootPaths();
var file = paths[0] + "write.txt";

var writer = new FileWriter(file);
writer.onwrite = function () {};
writer.write("Hello Croatia!");

var reader = new FileReader();
reader.onload = function (e) {
alert(e.target.result);
};
reader.readAsText(file);

Contacts

navigator.service.contacts.create(
{
"displayName": "James Pearce",
"organizations": ["Sencha"]
}
).save();

Contacts Demo

http://vimeo.com/23358554

http://pmuellr.github.com/weinre/

Hybrid apps
Xcode + Eclipse
Native wrapper
Native APIs

Creating and Distributing Mobile Web Applications with PhoneGap

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (20)

Similar a Creating and Distributing Mobile Web Applications with PhoneGap

Similar a Creating and Distributing Mobile Web Applications with PhoneGap (20)

Más de James Pearce

Más de James Pearce (20)

Último

Último (20)

Creating and Distributing Mobile Web Applications with PhoneGap