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 orHybrid App orNative 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

Wrap your web app and deploy Interface to access native features PhoneGap pluginAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

3. What it is not？Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

JavaScriptFramework 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 sourceAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

CallBack Cordova更名为Apache Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

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

6 . Across platformsAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

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

7. PackagingAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

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

IDE + SDK + PhoneGapAdobe 董龙飞 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 cloudAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

8. Accessing native features

9. The natureAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

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

JavaScript/CSS/HTML5 Non Web Tech Native Web Control FFI Plugins Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

Native Web Control Browser ： full functions Chrome removed No top bar

10. Plugin

android activityHTML5项目phonegap.jarplugins.xmlAndroidManifest.xml Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

In Java

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; }} 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 JavaScriptAdobe 董龙飞 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);});

Javascript接口使用者调用plugin window.plugins.callsListing.list( function(r){printResult(r)}, function(e){console.log(e)} );

Wait …

11. How？

Android

addJavaScriptInterfaceWebChromClient： onJsPromptCallbackServer：XmlHttpRequestsever

From Native to JS WebChromClient：覆盖onJsPromptFrom JS to Native CallbackServer：XmlHttpRequestsever

Javascript CallsListing.prototype.list=function(successCallback,fai lureCallback){ 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])); … Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

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.javapublic String exec(final String service, final String action, final String callbackId, finalString 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 serverPhoneGap.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 Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

12. Debug

weinre: a Remote Debuggerfor web pages orPhoneGap app onmobile devices. Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

wein re

PhoneGap Debug Server Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev

Mark DongAdobe Developer Evangelistdong@adobe.comweibo.com/donglongfeiweibo.com/javascriptdev

http://www.isoc.hk	2693
http://isoc.hk	377
http://archive.isoc.hk	21
http://webcache.googleusercontent.com	6
http://ipv6.isoc.hk	3
http://cache.baidu.com	3
http://translate.googleusercontent.com	1
http://webcache-exp-test.googleusercontent.com	1

Phone gap 12 things you should know

by ISOCHK

Accessibility

Categories

Upload Details

Usage Rights

8 Embeds 3,105

Statistics

Phone gap 12 things you should know Presentation Transcript