Your SlideShare is downloading. ×
0
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Phone gap 12 things you should know
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Phone gap 12 things you should know

9,884

Published on

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

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

Published in: Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
9,884
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
59
Comments
0
Likes
1
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  1. 12 things you should know Mark Dong 董龙飞 Adobe Developer Evangelist weibo.com/donglongfei weibo.com/javascriptdev
  2. 1. Why?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  3. ?MOBILE HTML http://mobilehtml5.org/
  4. Web App orHybrid App orNative App
  5. Apps are for loyalty, Mobile web is for discovery. from the report “implementing your mobile strategy” by dotMobi
  6. 2. What is PhoneGap?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  7. Wrap your web app and deploy Interface to access native features PhoneGap pluginAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  8. 3. What it is not?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  9. JavaScriptFramework IDE Tools Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  10. 4. Where it is from?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  11. !  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
  12. 5. Open sourceAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  13. CallBack Cordova更名为Apache Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  14. http://incubator.apache.org/cordova/
  15. 6 . Across platformsAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  16. Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  17. 7. PackagingAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  18. Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  19. IDE + SDK + PhoneGapAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  20. 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
  21. PhoneGap Build Compile in the cloudAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  22. 8. Accessing native features
  23. 9. The natureAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  24. JS Native Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  25. JavaScript/CSS/HTML5 Non Web Tech Native Web Control FFI Plugins Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  26. Native Web Control Browser : full functions Chrome removed No top bar
  27. 10. Plugin
  28. android activityHTML5项目phonegap.jarplugins.xmlAndroidManifest.xml Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  29. In Java
  30. 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
  31. 注册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
  32. In JavaScriptAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  33. 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);});
  34. Javascript接口使用者调用plugin window.plugins.callsListing.list( function(r){printResult(r)}, function(e){console.log(e)} );
  35. Wait …
  36. 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) {
  37. 11. How?
  38. Android
  39. addJavaScriptInterfaceWebChromClient: onJsPromptCallbackServer:XmlHttpRequestsever
  40. From Native to JS WebChromClient: 覆盖onJsPromptFrom JS to Native CallbackServer:XmlHttpRequestsever
  41. 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
  42. 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)); ……}
  43. 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(); }…
  44. IOS
  45. 实例化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
  46. 12. Debug
  47. weinre: a Remote Debuggerfor web pages orPhoneGap app onmobile devices. Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  48. wein re
  49. <script src="http://192.168.1.101:8080/target/target-script-min.js#anonymous"></script> Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  50. PhoneGap Debug Server Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  51. Mark DongAdobe Developer Evangelistdong@adobe.comweibo.com/donglongfeiweibo.com/javascriptdev

×