Phone gap 12 things you should know

  • 9,656 views
Uploaded on

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

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

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
9,656
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
56
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