Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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

4,435 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

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

  1. 1. PhoneGap <ul><li>Mark Dong </li></ul><ul><ul><li>Developer Evangelist </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>weibo.com/donglongfei </li></ul></ul>
  2. 2. <ul><li>始于 2008 年 旧金山的 iPhoneDevCamp </li></ul><ul><li>“ bridging the gap between the web and the iphone SDK” </li></ul><ul><li>PhoneGap : it’s like AIR for the Iphone (2008-9-18, Nitobi blog) </li></ul>
  3. 3. 1.3 Released!
  4. 4. CallBack 更名为 Apache Cordova
  5. 6. Native Web Control 全功能浏览器 没有边框
  6. 7. JS Native
  7. 8. PhoneGap plugin
  8. 9. HTML5 项目 phonegap.jar plugins.xml AndroidManifest.xml android activity
  9. 10. In Java
  10. 11. public class CirclesActivity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl(&quot;file:///android_asset/www/index.html&quot;); } } Native Wrapper with PhoneGap
  11. 12. 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) { PluginResult result=null; if( ACTION.equals(action)){ CallLogAI callLogAI = new CallLogAI(ctx); JSONObject callsHistory=callLogAI.fetchCallLogs(null); Log. d(&quot;RESULT=&quot;, callsHistory.toString()); result=new PluginResult(Status. OK,callsHistory); }else{ result=new PluginResult(Status. INVALID_ACTION); Log. d(&quot;CallsPlugin&quot;,&quot;Invalidate action:&quot; + action); } return result; } } Java 定制 plugin
  12. 13. 注册 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>
  13. 14. In JavaScript
  14. 15. 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); });
  15. 16. window.plugins.callsListing.list( function(r){printResult(r)}, function(e){console.log(e)} ); Javascript 调用 plugin
  16. 17. 小结
  17. 18. 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; />
  18. 19. Android
  19. 20. CallbackServer : XmlHttpRequestsever WebChromClient : onJsPrompt addJavaScriptInterface
  20. 21. CallbackServer : XmlHttpRequestsever WebChromClient : 覆盖 onJsPrompt From JS to Native From Native to JS
  21. 22. 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])); …
  22. 23. 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)); …… }
  23. 24. 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(); } …
  24. 25. IOS
  25. 26. JS 到 Native 的通讯 document .location = “gap://Class.method/args” Native 到 JS 的通讯 UIWebView.stringByEvaluatingJavaScriptFromString webView =[[UIWebView alloc] initWithFrame:webViewBounds]; 实例化 UIWebView
  26. 27. <ul><li>Mark Dong </li></ul><ul><ul><li>Developer Evangelist </li></ul></ul><ul><ul><li>[email_address] </li></ul></ul><ul><ul><li>weibo.com/donglongfei </li></ul></ul>

×