• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Adobe董龙飞:关于PhoneGap的12件事
 

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

on

  • 4,264 views

 

Statistics

Views

Total Views
4,264
Views on SlideShare
2,687
Embed Views
1,577

Actions

Likes
2
Downloads
62
Comments
0

7 Embeds 1,577

http://www.webapptrend.com 923
http://mobile.51cto.com 641
http://zhuaxia.com 7
http://new.51cto.com 2
http://cache.baidu.com 2
http://www.zhuaxia.com 1
http://translate.googleusercontent.com 1
More...

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

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
  • iPhoneDevCamp
  • Cordova ( Street)
  • Init a webview
  • 建立 Native 到 JS 的通道 建立 JS 到 Native 的通道
  • Android:  Communication from JavaScript to native is achieved by overriding the JavaScript prompt function in the Android native code and the message passed is much like that used in iOS. We used to useWebView.addJavascriptInterface to add Java objects directly to the JavaScript sandbox but that was causing some devices to crash with Android 2.3. To call JavaScript from native we currently use WebView.loadUrl(”javascript:…”) but that has some problems so we are soon moving over to polling a Java message queue calling a local HTTP server via a long-lived XHR connection.
  • To communicate from JavaScript to native we call window.location = “gap://Class.method/args” and then intercept the url in native code and parse our the parameters. The class / method is then dynamically loaded / called.  stringByEvaluatingJavaScriptFromString: Returns the result of running a script. Discussion JavaScript execution time is limited to 10 seconds for each top-level entry point. If your script executes for more than 10 seconds, the web view stops executing the script. This is likely to occur at a random place in your code, so unintended consequences may result. This limit is imposed because JavaScript execution may cause the main thread to block, so when scripts are running, the user is not able to interact with the webpage. JavaScript allocations are also limited to 10 MB. The web view raises an exception if you exceed this limit on the total memory allocation for JavaScript.

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

  • PhoneGap
    • Mark Dong
      • Developer Evangelist
      • [email_address]
      • weibo.com/donglongfei
    • 始于 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)
  • 1.3 Released!
  • CallBack 更名为 Apache Cordova
  •  
  • Native Web Control 全功能浏览器 没有边框
  • JS Native
  • PhoneGap plugin
  • HTML5 项目 phonegap.jar plugins.xml AndroidManifest.xml android activity
  • In Java
  • 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
  • public class callsPGPlugin extends 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; } } Java 定制 plugin
  • 注册 plugin <?xml version= &quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <plugins> <plugin name= &quot;App&quot; value=&quot;com.phonegap.App&quot;/> <plugin name= &quot;Geolocation&quot; value=&quot;com.phonegap.GeoBroker&quot;/> <plugin name= &quot;Device&quot; value=&quot;com.phonegap.Device&quot;/> …… <plugin name= &quot;Temperature&quot; value=&quot;com.phonegap.TempListener&quot;/> <plugin name= &quot;FileTransfer&quot; value=&quot;com.phonegap.FileTransfer&quot;/> <plugin name= &quot;Capture&quot; value=&quot;com.phonegap.Capture&quot;/> <plugin name= &quot;CallsHistoryPlugin&quot; value=&quot;com.mark.phonegap.plugin.callsPGPlugin&quot; /> </plugins>
  • In JavaScript
  • Javascript 接口 v ar CallsListing=function(){}; CallsListing.prototype.list=function(successCallback,failureCallback){ return PhoneGap.exec(successCallback, failureCallback, 'CallsHistoryPlugin', 'list',['test'] ); }; PhoneGap.addConstructor(function(){ PhoneGap.addPlugin(&quot;callsListing&quot;,new CallsListing); });
  • window.plugins.callsListing.list( function(r){printResult(r)}, function(e){console.log(e)} ); Javascript 调用 plugin
  • 小结
  • 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 final String ACTION=&quot;list&quot;; @Override public PluginResult execute (String action, JSONArray data, String callbackId) { <plugin name= &quot; CallsHistoryPlugin &quot; value=&quot; com.mark.phonegap.plugin.callsPGPlugin &quot; />
  • 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), &quot;gap:&quot;+JSON.stringify([service, action, callbackId, true])); …
  • 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 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(); } …
  • IOS
  • JS 到 Native 的通讯 document .location = “gap://Class.method/args” Native 到 JS 的通讯 UIWebView.stringByEvaluatingJavaScriptFromString webView =[[UIWebView alloc] initWithFrame:webViewBounds]; 实例化 UIWebView
    • Mark Dong
      • Developer Evangelist
      • [email_address]
      • weibo.com/donglongfei