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.
关于PhoneGap的12件事       Mark Dong 董龙飞       Adobe Developer Evangelist       weibo.com/donglongfei       weibo.com/javascrip...
1. PhoneGap是什么?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
访问移动设备本地特性    phoneGap plugin    打包HTML5 App, 部署到多种平台Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
2. PhoneGap不是什么?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
JavaScriptFramework IDE Tools    Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
3. 起源Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
!    始于2008年 旧金山的     iPhoneDevCamp!    “bridging the gap     between the web and the     iphone SDK”!    PhoneGap : it’s ...
4 . PhoneGap在不同平台的本地特性    Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
5. 开源?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
CallBack Cordova更名为Apache      Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
http://incubator.apache.org/cordova/
6. 打包Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
针对不同平台的IDE + SDKAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
PhoneGap Build                                                      Compile in the cloudAdobe 董龙飞 weibo.com/donglongfei we...
7. 访问本地功能
8. 什么是PhoneGapAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
JS                                                      Native     Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
JavaScript/CSS/HTML5                                             Not Web Tech   Native Web Control                        ...
Native Web Control  Browser : full functions  Chrome removed  No top bar
FFI      Foreign Function InterfaceAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
PhoneGap AppWeb App                                        Mobile OS     Hardware             FFI   PhoneGap Plugins   OS ...
PhoneGap架构                                    PhoneGap             Web App                Native API           PhoneGap Pl...
Native Web Control   全功能浏览器   没有边框
public class CirclesActivity 	     	     	extends DroidGap {	    	    @Override	    public void onCreate(Bundle savedInsta...
9. 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...
小结
window.plugins.callsListing.list(	        	function(r){printResult(r)},	        	function(e){console.log(e)}	   );	  Calls...
10. 如何实现JS与本地API的交互
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...
11. debug
wein     re
Weinre配置为Server,开发者使用Chrome/Safari开发工具来远程调试移动应用       Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
<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
12. 路线图
1.X (2011)    Performance , W3C compatible ,易用性2.0 (2012)     Calendar, Message ,Bluetooth, Audio/Video
Mark DongDeveloper Evangelistdong@adobe.comweibo.com/donglongfeiweibo.com/javascriptdev
PhoneGap:你应该知道的12件事
PhoneGap:你应该知道的12件事
PhoneGap:你应该知道的12件事
Upcoming SlideShare
Loading in …5
×

PhoneGap:你应该知道的12件事

6,730 views

Published on

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

PhoneGap:你应该知道的12件事

  1. 1. 关于PhoneGap的12件事 Mark Dong 董龙飞 Adobe Developer Evangelist weibo.com/donglongfei weibo.com/javascriptdev
  2. 2. 1. PhoneGap是什么?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  3. 3. 访问移动设备本地特性 phoneGap plugin 打包HTML5 App, 部署到多种平台Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  4. 4. 2. PhoneGap不是什么?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  5. 5. JavaScriptFramework IDE Tools Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  6. 6. 3. 起源Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  7. 7. !  始于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) Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  8. 8. 4 . PhoneGap在不同平台的本地特性 Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  9. 9. Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  10. 10. 5. 开源?Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  11. 11. CallBack Cordova更名为Apache Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  12. 12. http://incubator.apache.org/cordova/
  13. 13. 6. 打包Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  14. 14. Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  15. 15. 针对不同平台的IDE + SDKAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  16. 16. PhoneGap Build Compile in the cloudAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  17. 17. 7. 访问本地功能
  18. 18. 8. 什么是PhoneGapAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  19. 19. JS Native Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  20. 20. JavaScript/CSS/HTML5 Not Web Tech Native Web Control FFI Plugins Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  21. 21. Native Web Control Browser : full functions Chrome removed No top bar
  22. 22. FFI Foreign Function InterfaceAdobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  23. 23. PhoneGap AppWeb App Mobile OS Hardware FFI PhoneGap Plugins OS APIJavaScript Native API 传感器 CSS 图形处理 浏览器 Native Web View OS API HTML 网络 …
  24. 24. PhoneGap架构 PhoneGap Web App Native API PhoneGap Plug-ins HTML5+JavaScript+CSS3 摄像头 运动传感器 设备信息 指南针 GPS 通知HTML5 PhoneGap API JS API 网络状态 … Native Web View 定制plugin (WebView、UIWebView…) OS API OS API Mobile OS
  25. 25. Native Web Control 全功能浏览器 没有边框
  26. 26. 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
  27. 27. 9. 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. 小结
  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. 10. 如何实现JS与本地API的交互
  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. 11. debug
  47. 47. wein re
  48. 48. Weinre配置为Server,开发者使用Chrome/Safari开发工具来远程调试移动应用 Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
  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. 12. 路线图
  52. 52. 1.X (2011) Performance , W3C compatible ,易用性2.0 (2012) Calendar, Message ,Bluetooth, Audio/Video
  53. 53. Mark DongDeveloper Evangelistdong@adobe.comweibo.com/donglongfeiweibo.com/javascriptdev

×