PhoneGap: Hybrid Application Framework
Fil Maj, Adobe Systems
Who's This?
Fil Maj
Vancouver, Canada
Master Exploder at Adobe Systems, eh
I Used To Live In Italy
Beautiful country, people and culture. Thank you for having me!
Io sono Transformer!
Dov'รจ la birra?
HTML5 in the Real World
Web vs. Native
Native apps are kicking web's ass
APIs like accelerometer, compass, contacts, etc.
BUT! Geo is here. Accelerometer is next. W3C DAP group leading the way.
PhoneGap
MIT license, as open as it gets!
Acquired by Adobe in November 2011
Apache Cordova
PhoneGap -> Cordova as Chrome -> WebKit
Write Apps With Web Tech
Deploy To Six Platforms
Augment The Web With Native APIs
Get at those sensors!
Full API docs available at docs.phonegap.com
Example: Accelerometer
function onSuccess(acceleration) {
console.log('Acceleration X: ' + acceleration.x + '\n' +
'Acceleration Y: ' + acceleration.y + '\n' +
'Acceleration Z: ' + acceleration.z + '\n' +
'Timestamp: ' + acceleration.timestamp + '\n');
};
function onError(e) {
console.log('Error! ' + e.message);
};
var options = {frequency:100}; // get updates every 100 ms
navigator.accelerometer.watchAcceleration(onSuccess, onError, options);
Deploy To App Stores
PhoneGap/Cordova "wraps" your web assets into a native binary.
PhoneGap Core Beliefs
http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/
- The web solved cross platform.
- All technology deprecates with time.
Anyone, at any time, can publish anything from anywhere. That is the stuff of revolutions, and our evolution as a species.
PhoneGap Goals
http://phonegap.com/2012/05/09/phonegap-beliefs-goals-and-philosophy/
- The web as a first-class development platform.
- The ultimate purpose of PhoneGap is to cease to exist.
Progress
Web-based SDKs for mobile platforms + apps are here, more are coming
BlackBerry WebWorks
Others Aren't Into The Web As Much
PhoneGap Is Not A Silver Bullet
Will not wash your dishes.
Write Once, Debug Everywhere
Hardcore 3D Shit
Web tech is probably not the best choice for this problem.
But! BlackBerry 6+ supports WebGL...
PhoneGap API Finite
PhoneGap Plugins!
JavaScript
Native Code
Unified JavaScript Layer
http://github.com/apache/incubator-cordova-jsThe Bridge
var exec = cordova.require('cordova/exec');
exec(function(){}, function(){},
'MyClass', 'MyMethod',
["arguments", "here", 1]
);
Plugin Class Mapping
- Android:
res/xml/plugins.xml - iOS:
www/Cordova.plist - BlackBerry:
www/plugins.xml
<plugin
name="Accelerometer"
value="org.apache.cordova.AccelListener"
/>
<key>Plugins</key>
<dict>
<key>Accelerometer</key>
<string>CDVAccelerometer</string>
Native Code!
YAY!
Each project has a native Plugin interface that you need to use
Android
Java! Who is excited?!
Cordova has a AbstractPluginFactoryManager class (org.apache.cordova.api.AbstractPluginFactoryManager)
Then you define a PluginFactoryManager class
You can then access the PluginFactory class
Then you can create Plugins! Yus!
...
KIDDING!
That was my Java joke, har har
Android Plugins
Cordova has a Plugin abstract class (org.apache.cordova.api.Plugin)
You extend the Plugin class with your own Plugin
You implement a special method:
public abstract PluginResult execute(String action, JSONArray args, String callbackId);
Android, cont.
Synchronous Execution
public PluginResult execute(String action, JSONArray args, String callbackId) {
return new PluginResult(PluginResult.Status.OK, "<3");
}
public PluginResult execute(String action, JSONArray args, String callbackId) {
return new PluginResult(PluginResult.Status.ERROR, "you're a bad boy");
}
Android, cont.
Asynchronous Execution
// Call the JavaScript success callback for this plugin.
// This can be used if the execute code for the plugin is asynchronous
public void success(PluginResult pluginResult, String callbackId) {
this.webView.sendJavascript(pluginResult.toSuccessCallbackString(callbackId));
}
public PluginResult execute(String action, JSONArray args, String callbackId) {
this.callbackId = callbackId;
PluginResult r = new PluginResult(PluginResult.Status.NO_RESULT);
r.setKeepCallback(true);
return r;
}
private void someNativeInvocation() {
this.success(new PluginResult(PluginResult.Status.OK, "we did it!"),
this.callbackId);
}
BlackBerry Plugins
MOAR JAVA!
Good news: identical to Android
iOS Plugins
Cordova has a CDVPlugin class
You extend the Plugin class with your own Plugin
NO execute method
action parameter directly invokes methods with a specific signature
- (void)MyMethod:(NSArray*)arguments
withDict:(NSDictionary*)options;
iOS Plugins, cont.
CDVPlugin provides success and error methods
- (void)MyMethod:(NSArray*)arguments withDict:(NSDictionary*)options {
NSString* callbackId = [arguments objectAtIndex:0];
CDVPluginResult* result = [CDVPluginResult resultWithStatus:CDVCommandStatus_OK
messageAsString:@"hi"];
[self success:result callbackId:callbackId];
}
Demo Time?
Embed PhoneGap
Brand spankin' new: Use PhoneGap as a component in a larger native app
On iOS, this is called Cleaver
http://github.com/apache/incubator-cordova-ios/guides
On Android: CordovaWebView
http://github.com/apache/incubator-cordova-android/tree/CordovaWebView
Grazie, eh
