Embed Size (px)
DESCRIPTION
An introduction to using PhoneGap to creative native applications using Sencha Touch
Citation preview
James Pearce Sr Director, Developer Relations @ jamespearce [email protected]
Creating and distributing mobile web applications
with PhoneGap
Web appsare the future
Native appsare the present
Native Web
Cross-platform ✘ ✔
Linkable ✘ ✔
Discoverable ✔ ✘
Device APIs ✔ ✘
Native Web Hybrid
Cross-platform ✘ ✔ ✔
Linkable ✘ ✔ ✔
Discoverable ✔ ✘ ✔
Device APIs ✔ ✘ ✔
What is a hybrid app?
UIWebViewWebView
A simple hybrid application
HTMLCSS
JSStores
PhoneGaphttp://phonegap.com
MIT
+
UIWebViewWebView
A PhoneGap application
HTMLCSS
JSStores
JS APIs
PhoneGap APIsAccelerometerTap into the device’s motion sensor.
CameraCapture a photo using the device's camera.
CompassObtain the direction that the device is pointing.
ContactsWork with the devices contact database.
DeviceGather device specific information.
EventsHook into native events through JavaScript.
FileHook into native file system through JavaScript.
GeolocationMake your application location aware.
MediaRecord and play back audio files.
NetworkQuickly check the network state.
NotificationVisual, audible, and tactile device notifications.
StorageHook into the device’s native storage options.
Getting Startedwith iOS
http://phonegap.com
$> ./xcode4.sh seattlebars .
http://sencha.com/x/b9
@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
Getting Startedwith Android
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"); }}
How it works
Using aSencha Touch
Application
$> rm -r www $> ln -s myapp www
Don’t symlink theentire SDK, thanks
Don’t symlink yoursource control
NB these are now in the symlink dir
Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: false, ...
<aside>
</aside>Pacifist
+ =
$> rm -r assets/www $> ln -s myapp assets/www
So we’re done, right?
No.
UsingDevice APIs
AccelerometerTap into the device’s motion sensor.
CameraCapture a photo using the device's camera.
CompassObtain the direction that the device is pointing.
ContactsWork with the devices contact database.
DeviceGather device specific information.
EventsHook into native events through JavaScript.
FileHook into native file system through JavaScript.
GeolocationMake your application location aware.
MediaRecord and play back audio files.
NetworkQuickly check the network state.
NotificationVisual, audible, and tactile device notifications.
StorageHook into the device’s native storage options.
That’s what this was for
but...
Androidphonegap.js
iOSphonegap.js
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"); }}
Alter entry points
<!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.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> ...
index_a.html
deviceready event
document.addEventListener( "deviceready", onDeviceReady, false);
function onDeviceReady() { // Now safe to use the PhoneGap API}
Avoiding race conditionsdocument.addEventListener( "deviceready", app.mainLaunch, false);
Ext.regApplication({ name: "app", launch: function() { this.launched = true; this.mainLaunch(); }, mainLaunch: function() { if (!device || !this.launched) {return;} ... }});
http://docs.phonegap.com
Cameranavigator.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
Final thoughts
Plugins
http://pmuellr.github.com/weinre/
Hybrid appsXcode + EclipseNative wrapper
Native APIs
James Pearce Sr Director, Developer Relations @ jamespearce [email protected]
