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

？MOBILE HTML

http://mobilehtml5.org/

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?


Wrap your web app and deploy

Interface to access native features

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 Cordova
更名为Apache


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

PhoneGap Build
Compile in the cloud


9. The nature


JS Native


JavaScript/CSS/HTML5 Non Web Tech

Native Web Control
FFI Plugins


Native Web Control

Browser ： full functions
Chrome removed
No top bar

android activity

HTML5项目

phonegap.jar

plugins.xml

AndroidManifest.xml


public class callsPGPlugin extends Plugin { Java定制plugin
// List Actions
public static final 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;
}
}

注册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);
});

Javascript接口
使用者调用plugin

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

addJavaScriptInterface

WebChromClient： onJsPrompt

CallbackServer：XmlHttpRequestsever

From Native to JS

WebChromClient：覆盖onJsPrompt

From JS to Native

CallbackServer：XmlHttpRequestsever

Javascript
CallsListing.prototype.list=function(successCallback,fai
lureCallback){
failureCallback,
'list',['test’]);
};

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

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

……
}

Pluginmanager.java Java
ctx.sendJavascript(cr.toErrorCallbackString(callbackId));

CallbackServer.java ： XHR server

PhoneGap.Channel.join(function() {

// Start listening for XHR callbacks
setTimeout(function() { Javascript
if (PhoneGap.UsePolling) {
PhoneGap.JSCallbackPolling();
}
…

实例化UIWebView

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

JS到Native的通讯

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

Native到JS的通讯

UIWebView.stringByEvaluatingJavaScriptFromString


weinre:

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


PhoneGap Debug Server


Mark Dong
Adobe Developer Evangelist
dong@adobe.com
weibo.com/donglongfei
weibo.com/javascriptdev

Phone gap 12 things you should know

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Phone gap 12 things you should know

Similaire à Phone gap 12 things you should know (20)

Dernier

Dernier (20)

Phone gap 12 things you should know