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?

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

Interface to access native features

Wrap your web app and deploy

PhoneGap plugin

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

3. What it is not？

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

JavaScript Framework

IDE Tools

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

4. Where it is from?

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

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

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

5. Open source

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

CallBack 更名为 Apache Cordova

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

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

6 . Across platforms

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

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

7. Packaging

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

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

IDE + SDK + PhoneGap

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

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

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

8. Accessing native features

9. The nature

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

JS Native

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

Native Web Control Plugins FFI

JavaScript/CSS/HTML5 Non Web Tech

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

Native Web Control

Browser ： full functions Chrome removed No top bar

10. Plugin

HTML5项目

phonegap.jar

plugins.xml

AndroidManifest.xml

android activity

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

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

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

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

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

In JavaScript

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

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

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

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

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

12. Debug

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

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

weinre:

weinre

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

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

PhoneGap Debug Server

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

Mark Dong Adobe Developer Evangelist dong@adobe.com

weibo.com/donglongfei weibo.com/javascriptdev