0
关于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,260

Published on

Published in: Technology, Art & Photos
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
6,260
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
83
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Transcript of "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
  1. A particular slide catching your eye?

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

×