Phone gap 12 things you should know

12 things you should know

Mark Dong 董龙飞 Adobe Developer Evangelist

weibo.com/donglongfei weibo.com/javascriptdev

1. Why?

Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

http://mobilehtml5.org/

MOBILE HTML ？

Web App

or

Hybrid App or

Native App

Apps are for loyalty, Mobile web is for discovery.

from the report “implementing your mobile strategy” by dotMobi

2. What is PhoneGap?


Interface to access native features

Wrap your web app and deploy

PhoneGap plugin


3. What it is not？


JavaScript Framework

IDE Tools


4. Where it is from?


!  2008: iPhoneDevCamp

!  “bridging the gap between the web and the iphone SDK”

! PhoneGap : it is like AIR for the Iphone (2008-9-18, Nitobi blog)


5. Open source


CallBack 更名为 Apache Cordova


http://incubator.apache.org/cordova/

6 . Across platforms



7. Packaging



IDE + SDK + PhoneGap


public class CirclesActivity extends DroidGap {

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/circles.html"); }}

Native Wrapper with PhoneGap Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

PhoneGap Build

Compile in the cloud


8. Accessing native features

9. The nature


JS Native


Native Web Control Plugins FFI

JavaScript/CSS/HTML5 Non Web Tech


Native Web Control

Browser ： full functions Chrome removed No top bar

10. Plugin

HTML5项目

phonegap.jar

plugins.xml

AndroidManifest.xml

android activity


In Java

public class callsPGPlugin extends Plugin { // List Actions public static !nal String ACTION="list"; @Override public PluginResult execute(String action, JSONArray data, String callbackId) { PluginResult result=null; if(ACTION.equals(action)){ CallLogAI callLogAI = new CallLogAI(ctx); JSONObject callsHistory=callLogAI.fetchCallLogs(null); Log.d("RESULT=", callsHistory.toString()); result=new PluginResult(Status.OK,callsHistory); }else{ result=new PluginResult(Status.INVALID_ACTION); Log.d("CallsPlugin","Invalidate action:" + action); } return result; }

}

Java定制plugin


注册plugin <?xml version="1.0" encoding="UTF-8"?> <plugins> <plugin name="App" value="com.phonegap.App"/> <plugin name="Geolocation" value="com.phonegap.GeoBroker"/> <plugin name="Device" value="com.phonegap.Device"/> …… <plugin name="Temperature" value="com.phonegap.TempListener"/> <plugin name="FileTransfer" value="com.phonegap.FileTransfer"/> <plugin name="Capture" value="com.phonegap.Capture"/>

<plugin name="CallsHistoryPlugin" value="com.mark.phonegap.plugin.callsPGPlugin" /> </plugins>


In JavaScript


Javascript接口 var CallsListing=function(){}; CallsListing.prototype.list=function(successCallback,failureCallback){

return PhoneGap.exec(successCallback, failureCallback, 'CallsHistoryPlugin', 'list',['test'] );

}; PhoneGap.addConstructor(function(){

PhoneGap.addPlugin("callsListing",new CallsListing); });

window.plugins.callsListing.list(function(r){printResult(r)},function(e){console.log(e)}

);

使用者调用plugin Javascript接口

Wait ⋯

window.plugins.callsListing.list(function(r){printResult(r)},function(e){console.log(e)}

);

CallsListing.prototype.list=function(successCallback,failureCallback){

return PhoneGap.exec(successCallback,failureCallback,'CallsHistoryPlugin','list',['test’]);

};public class callsPGPlugin extends Plugin {

// List Actions public static !nal String ACTION="list"; @Override public PluginResult execute(String

action, JSONArray data, String callbackId) {

<plugin name="CallsHistoryPlugin" value="com.mark.phonegap.plugin.callsPGPlugin" />

11. How？

Android

CallbackServer：XmlHttpRequestsever

WebChromClient： onJsPrompt

addJavaScriptInterface

CallbackServer：XmlHttpRequestsever

WebChromClient：覆盖onJsPrompt

From JS to Native

From Native to JS

CallsListing.prototype.list=function(successCallback,failureCallback){

return PhoneGap.exec(successCallback,failureCallback,'CallsHistoryPlugin','list',['test’]);

};

PhoneGap.exec = function(success, fail, service, action, args) { … var r = prompt(JSON.stringify(args), "gap:"+JSON.stringify([service, action, callbackId, true])); …

Javascript


Droidgap.java public boolean onJsPrompt(WebView view, String url, String message, String defaultValue, JsPromptResult result) { …… String r = pluginManager.exec(service, action, callbackId, message, async); …… }

Pluginmanager.java public String exec(!nal String service, !nal String action, !nal String callbackId, !nal String jsonArgs, !nal boolean async) {

…… cr = plugin.execute(action, args, callbackId); ctx.sendJavascript(cr.toErrorCallbackString(callbackId));

……

}

Java

Pluginmanager.java

ctx.sendJavascript(cr.toErrorCallbackString(callbackId));

CallbackServer.java ： XHR server

PhoneGap.Channel.join(function() { // Start listening for XHR callbacks setTimeout(function() { if (PhoneGap.UsePolling) { PhoneGap.JSCallbackPolling(); } ⋯

Javascript

Java

IOS

JS到Native的通讯

document.location = “gap://Class.method/args”

Native到JS的通讯

UIWebView.stringByEvaluatingJavaScriptFromString

webView =[[UIWebView alloc] initWithFrame:webViewBounds];

实例化UIWebView


12. Debug

a Remote Debugger for web pages or PhoneGap app on mobile devices.


weinre:

weinre

<script src="http://192.168.1.101:8080/target/target-script-min.js#anonymous"> </script>


PhoneGap Debug Server


Mark Dong Adobe Developer Evangelist [email protected]

weibo.com/donglongfei weibo.com/javascriptdev

Technology

Phone gap 12 things you should know