12 things you should know       Mark Dong 董龙飞       Adobe Developer Evangelist       weibo.com/donglongfei       weibo.com...
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/...
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  ...
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 savedInsta...
PhoneGap Build                                                      Compile in the cloudAdobe 董龙飞 weibo.com/donglongfei we...
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                        ...
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/javascr...
In Java
public class callsPGPlugin extends Plugin {                       Java定制plugin          // List Actions         public sta...
注册plugin<?xml version="1.0" encoding="UTF-8"?><plugins>  <plugin name="App" value="com.phonegap.App"/>  <plugin name="Geol...
In JavaScriptAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
Javascript接口var CallsListing=function(){};CallsListing.prototype.list=function(successCallback,failureCallback){        re...
Javascript接口使用者调用plugin window.plugins.callsListing.list(	     	function(r){printResult(r)},	     	function(e){console.log...
Wait …
window.plugins.callsListing.list(	        	function(r){printResult(r)},	        	function(e){console.log(e)}	   );	  Calls...
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(successCal...
Java    Droidgap.java    public boolean onJsPrompt(WebView view, String url, String message, String    defaultValue, JsPro...
Pluginmanager.java                                       Java      ctx.sendJavascript(cr.toErrorCallbackString(callbackId)...
IOS
实例化UIWebView webView =[[UIWebView alloc] initWithFrame:webViewBounds];JS到Native的通讯  document.location = “gap://Class.metho...
12. Debug
weinre:  a Remote Debuggerfor web pages orPhoneGap app onmobile devices.        Adobe 董龙飞 weibo.com/donglongfei weibo.com/...
wein     re
<script src="http://192.168.1.101:8080/target/target-script-min.js#anonymous"></script>                Adobe 董龙飞 weibo.com...
PhoneGap Debug Server           Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
Mark DongAdobe Developer Evangelistdong@adobe.comweibo.com/donglongfeiweibo.com/javascriptdev
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
×

Phone gap 12 things you should know

9,929

Published on

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,929
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
59
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Phone gap 12 things you should know

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

    Clipping is a handy way to collect important slides you want to go back to later.

×