Adobe董龙飞:关于PhoneGap的12件事

27
PhoneGap Mark Dong Developer Evangelist [email protected] weibo.com/donglongfei

Transcript of Adobe董龙飞:关于PhoneGap的12件事

Page 1: Adobe董龙飞:关于PhoneGap的12件事

PhoneGapPhoneGap

Mark DongDeveloper Evangelist

[email protected]

weibo.com/donglongfei

Page 2: Adobe董龙飞:关于PhoneGap的12件事

始于 2008 年 旧金山的iPhoneDevCamp

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

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

Page 3: Adobe董龙飞:关于PhoneGap的12件事

1.3 R

eleas

ed!

1.3 R

eleas

ed!

Page 4: Adobe董龙飞:关于PhoneGap的12件事

CallBack 更名为 Apache Cordova

Page 5: Adobe董龙飞:关于PhoneGap的12件事
Page 6: Adobe董龙飞:关于PhoneGap的12件事

Native Web ControlNative Web Control

全功能浏览器没有边框

Page 7: Adobe董龙飞:关于PhoneGap的12件事

JSJS NativeNative

Page 8: Adobe董龙飞:关于PhoneGap的12件事

PhoneGap pluginPhoneGap plugin

Page 9: Adobe董龙飞:关于PhoneGap的12件事

HTML5 项目

phonegap.jar

plugins.xml

AndroidManifest.xml

android activity

Page 10: Adobe董龙飞:关于PhoneGap的12件事

In JavaIn Java

Page 11: Adobe董龙飞:关于PhoneGap的12件事

public class CirclesActivity extends DroidGap {

@Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState);

super.loadUrl("file:///android_asset/www/index.html"); }}

Native Wrapper with PhoneGap

Page 12: Adobe董龙飞:关于PhoneGap的12件事

public class callsPGPlugin extends Plugin { // List Actions

public static final String ACTION="list";@Overridepublic 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

Page 13: Adobe董龙飞:关于PhoneGap的12件事

注册 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>

Page 14: Adobe董龙飞:关于PhoneGap的12件事

In JavaScriptIn JavaScript

Page 15: Adobe董龙飞:关于PhoneGap的12件事

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);

});

Page 16: Adobe董龙飞:关于PhoneGap的12件事

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

);

Javascript 调用 plugin

Page 17: Adobe董龙飞:关于PhoneGap的12件事

小结小结

Page 18: Adobe董龙飞:关于PhoneGap的12件事

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 Actionspublic static final

String ACTION="list";@Overridepublic PluginResult

execute(String action, JSONArray data, String callbackId) {

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

Page 19: Adobe董龙飞:关于PhoneGap的12件事

AndroidAndroid

Page 20: Adobe董龙飞:关于PhoneGap的12件事

CallbackServer : XmlHttpRequestsever

WebChromClient : onJsPrompt

addJavaScriptInterface

Page 21: Adobe董龙飞:关于PhoneGap的12件事

CallbackServer : XmlHttpRequestsever

WebChromClient : 覆盖 onJsPrompt

From JS to Native

From Native to JS

Page 22: Adobe董龙飞:关于PhoneGap的12件事

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]));…

Page 23: Adobe董龙飞:关于PhoneGap的12件事

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(final String service, final String action, final String callbackId, final String jsonArgs, final boolean async) {

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

……}

Page 24: Adobe董龙飞:关于PhoneGap的12件事

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(); }…

Page 25: Adobe董龙飞:关于PhoneGap的12件事

IOSIOS

Page 26: Adobe董龙飞:关于PhoneGap的12件事

JS 到 Native 的通讯

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

Native 到 JS 的通讯

UIWebView.stringByEvaluatingJavaScriptFromString

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

实例化 UIWebView

Page 27: Adobe董龙飞:关于PhoneGap的12件事

Mark DongDeveloper Evangelist

[email protected]

weibo.com/donglongfei