• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Phone gap 12 things you should know
 

Phone gap 12 things you should know

on

  • 10,013 views

World Internet Developers' Summit 2012 (March 6-7, 2012)

World Internet Developers' Summit 2012 (March 6-7, 2012)
Internet Society Hong Kong

Statistics

Views

Total Views
10,013
Views on SlideShare
6,692
Embed Views
3,321

Actions

Likes
1
Downloads
56
Comments
0

10 Embeds 3,321

http://www.isoc.hk 2857
http://isoc.hk 377
http://archive.isoc.hk 71
http://webcache.googleusercontent.com 6
http://cache.baidu.com 3
http://ipv6.isoc.hk 3
http://webcache-exp-test.googleusercontent.com 1
http://translate.googleusercontent.com 1
https://www.google.com.hk 1
https://www.procommons.org.hk 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Phone gap 12 things you should know Phone gap 12 things you should know Presentation Transcript

    • 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 …
    • window.plugins.callsListing.list( function(r){printResult(r)}, function(e){console.log(e)} ); CallsListing.prototype.list=function(success Callback,failureCallback){ return PhoneGap.exec(successCallback, failureCallback, CallsHistoryPlugin, list,[test’]); }; public class callsPGPlugin extends Plugin { // List Actions<plugin name="CallsHistoryPlugin" public static final String ACTION="list";value="com.mark.phonegap.plugin.callsPGPlu @Overridegin" /> public PluginResult execute(String action, JSONArray data, String callbackId) {
    • 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(); }…
    • IOS
    • 实例化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
    • <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 DongAdobe Developer Evangelistdong@adobe.comweibo.com/donglongfeiweibo.com/javascriptdev