SlideShare a Scribd company logo
PhoneGap ,[object Object],[object Object],[object Object],[object Object]
[object Object],[object Object],[object Object]
1.3 Released!
CallBack 更名为  Apache  Cordova
 
Native Web Control 全功能浏览器 没有边框
JS Native
PhoneGap plugin
HTML5 项目 phonegap.jar plugins.xml AndroidManifest.xml android activity
In Java
public class CirclesActivity  extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/index.html"); } } Native Wrapper with PhoneGap
public class callsPGPlugin extends 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; } } Java 定制 plugin
注册 plugin <?xml version= &quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <plugins> <plugin name= &quot;App&quot; value=&quot;com.phonegap.App&quot;/> <plugin name= &quot;Geolocation&quot; value=&quot;com.phonegap.GeoBroker&quot;/> <plugin name= &quot;Device&quot; value=&quot;com.phonegap.Device&quot;/> …… <plugin name= &quot;Temperature&quot; value=&quot;com.phonegap.TempListener&quot;/> <plugin name= &quot;FileTransfer&quot; value=&quot;com.phonegap.FileTransfer&quot;/> <plugin name= &quot;Capture&quot; value=&quot;com.phonegap.Capture&quot;/> <plugin name= &quot;CallsHistoryPlugin&quot; value=&quot;com.mark.phonegap.plugin.callsPGPlugin&quot; /> </plugins>
In JavaScript
Javascript 接口 v ar CallsListing=function(){}; CallsListing.prototype.list=function(successCallback,failureCallback){ return PhoneGap.exec(successCallback,   failureCallback,   'CallsHistoryPlugin',   'list',['test'] ); }; PhoneGap.addConstructor(function(){ PhoneGap.addPlugin(&quot;callsListing&quot;,new CallsListing); });
window.plugins.callsListing.list( function(r){printResult(r)}, function(e){console.log(e)} ); Javascript  调用 plugin
小结
window.plugins.callsListing.list ( function(r){printResult(r)}, function(e){console.log(e)} ); CallsListing.prototype.list=function(successCallback,failureCallback){ return PhoneGap.exec(successCallback, failureCallback, ' CallsHistoryPlugin ', 'list',['test ’ ]); }; public class callsPGPlugin extends Plugin {   // List Actions public static final String  ACTION=&quot;list&quot;; @Override public  PluginResult execute (String action, JSONArray data, String callbackId) { <plugin name= &quot; CallsHistoryPlugin &quot; value=&quot; com.mark.phonegap.plugin.callsPGPlugin &quot; />
Android
CallbackServer : XmlHttpRequestsever  WebChromClient :  onJsPrompt addJavaScriptInterface
CallbackServer : XmlHttpRequestsever  WebChromClient : 覆盖 onJsPrompt From JS to Native From Native to JS
CallsListing.prototype.list=function(successCallback,failureCallback){ return PhoneGap.exec(successCallback, failureCallback, 'CallsHistoryPlugin', 'list',['test ’ ]); }; PhoneGap.exec = function(success, fail, service, action, args) { …  var r = prompt(JSON.stringify(args), &quot;gap:&quot;+JSON.stringify([service, action, callbackId, true])); …
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.java public String exec(final String service, final String action, final String callbackId, final String jsonArgs, final boolean async) { …… cr = plugin.execute(action, args, callbackId); ctx.sendJavascript(cr.toErrorCallbackString(callbackId)); …… }
Pluginmanager.java ctx.sendJavascript(cr.toErrorCallbackString(callbackId)); CallbackServer.java  :  XHR server PhoneGap.Channel.join(function() { // Start listening for XHR  callbacks setTimeout(function() { if (PhoneGap.UsePolling) { PhoneGap.JSCallbackPolling(); } …
IOS
JS 到 Native 的通讯 document .location = “gap://Class.method/args”  Native 到 JS 的通讯 UIWebView.stringByEvaluatingJavaScriptFromString webView =[[UIWebView alloc] initWithFrame:webViewBounds]; 实例化 UIWebView
[object Object],[object Object],[object Object],[object Object]

More Related Content

What's hot

What's hot (20)

Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018Angular for Java Enterprise Developers: Oracle Code One 2018
Angular for Java Enterprise Developers: Oracle Code One 2018
 
FullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + AngularFullStack Reativo com Spring WebFlux + Angular
FullStack Reativo com Spring WebFlux + Angular
 
Serverless Angular, Material, Firebase and Google Cloud applications
Serverless Angular, Material, Firebase and Google Cloud applicationsServerless Angular, Material, Firebase and Google Cloud applications
Serverless Angular, Material, Firebase and Google Cloud applications
 
Gore: Go REPL
Gore: Go REPLGore: Go REPL
Gore: Go REPL
 
Debugging Your PHP Cake Application
Debugging Your PHP Cake ApplicationDebugging Your PHP Cake Application
Debugging Your PHP Cake Application
 
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConfFull-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
Full-Stack Reativo com Spring WebFlux + Angular - FiqueEmCasaConf
 
Flask vs. Django
Flask vs. DjangoFlask vs. Django
Flask vs. Django
 
Flask Introduction - Python Meetup
Flask Introduction - Python MeetupFlask Introduction - Python Meetup
Flask Introduction - Python Meetup
 
Flask
FlaskFlask
Flask
 
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
Full-Stack Reactive with Spring WebFlux + Angular - JConf Colombia 2019
 
Introduction to Griffon
Introduction to GriffonIntroduction to Griffon
Introduction to Griffon
 
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java GirlFull-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
Full-Stack Reativo com Spring WebFlux + Angular - Devs Java Girl
 
groovy & grails - lecture 5
groovy & grails - lecture 5groovy & grails - lecture 5
groovy & grails - lecture 5
 
エラー時にログに出力する情報と画面に表示する情報を分ける #LaravelTokyo
エラー時にログに出力する情報と画面に表示する情報を分ける #LaravelTokyoエラー時にログに出力する情報と画面に表示する情報を分ける #LaravelTokyo
エラー時にログに出力する情報と画面に表示する情報を分ける #LaravelTokyo
 
Retrolambda+bolts
Retrolambda+boltsRetrolambda+bolts
Retrolambda+bolts
 
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
Full-Stack Reactive with Spring WebFlux + Angular - Oracle Code One 2018
 
Refactoring a go project
Refactoring a go projectRefactoring a go project
Refactoring a go project
 
Laravel でやってみるクリーンアーキテクチャ #phpconfuk
Laravel でやってみるクリーンアーキテクチャ #phpconfukLaravel でやってみるクリーンアーキテクチャ #phpconfuk
Laravel でやってみるクリーンアーキテクチャ #phpconfuk
 
Thor - RSLA - 13oct2009
Thor - RSLA - 13oct2009Thor - RSLA - 13oct2009
Thor - RSLA - 13oct2009
 
Presente e Futuro: Java EE.next()
Presente e Futuro: Java EE.next()Presente e Futuro: Java EE.next()
Presente e Futuro: Java EE.next()
 

Similar to Adobe董龙飞:关于PhoneGap的12件事

混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
yangdj
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
yangdj
 
Android Best Practices
Android Best PracticesAndroid Best Practices
Android Best Practices
Yekmer Simsek
 

Similar to Adobe董龙飞:关于PhoneGap的12件事 (20)

PhoneGap
PhoneGapPhoneGap
PhoneGap
 
The 2016 Android Developer Toolbox [MOBILIZATION]
The 2016 Android Developer Toolbox [MOBILIZATION]The 2016 Android Developer Toolbox [MOBILIZATION]
The 2016 Android Developer Toolbox [MOBILIZATION]
 
Introducing PhoneGap to SproutCore 2
Introducing PhoneGap to SproutCore 2Introducing PhoneGap to SproutCore 2
Introducing PhoneGap to SproutCore 2
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
 
Androidaop 170105090257
Androidaop 170105090257Androidaop 170105090257
Androidaop 170105090257
 
Non Conventional Android Programming En
Non Conventional Android Programming EnNon Conventional Android Programming En
Non Conventional Android Programming En
 
Non Conventional Android Programming (English)
Non Conventional Android Programming (English)Non Conventional Android Programming (English)
Non Conventional Android Programming (English)
 
ActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group PresentationActiveWeb: Chicago Java User Group Presentation
ActiveWeb: Chicago Java User Group Presentation
 
Android Best Practices
Android Best PracticesAndroid Best Practices
Android Best Practices
 
XML-Free Programming
XML-Free ProgrammingXML-Free Programming
XML-Free Programming
 
How to code to code less
How to code to code lessHow to code to code less
How to code to code less
 
My java file
My java fileMy java file
My java file
 
The 2016 Android Developer Toolbox [NANTES]
The 2016 Android Developer Toolbox [NANTES]The 2016 Android Developer Toolbox [NANTES]
The 2016 Android Developer Toolbox [NANTES]
 
PhoneGap JavaScript API vs Native Components
PhoneGap JavaScript API vs Native ComponentsPhoneGap JavaScript API vs Native Components
PhoneGap JavaScript API vs Native Components
 
Graphics programming in Java
Graphics programming in JavaGraphics programming in Java
Graphics programming in Java
 
Google App Engine for Java (GAE/J)
Google App Engine for Java (GAE/J) Google App Engine for Java (GAE/J)
Google App Engine for Java (GAE/J)
 
Bring the fun back to java
Bring the fun back to javaBring the fun back to java
Bring the fun back to java
 
Phone gap android plugins
Phone gap android pluginsPhone gap android plugins
Phone gap android plugins
 
AppengineJS
AppengineJSAppengineJS
AppengineJS
 

More from yangdj

磊友科技CTO 赵霏演讲
磊友科技CTO 赵霏演讲磊友科技CTO 赵霏演讲
磊友科技CTO 赵霏演讲
yangdj
 
黎明帝国发布会By黄何
黎明帝国发布会By黄何黎明帝国发布会By黄何
黎明帝国发布会By黄何
yangdj
 
黎明帝国
黎明帝国黎明帝国
黎明帝国
yangdj
 
海豚浏览器CTO刘铁锋:Web App发展现状
海豚浏览器CTO刘铁锋:Web App发展现状海豚浏览器CTO刘铁锋:Web App发展现状
海豚浏览器CTO刘铁锋:Web App发展现状
yangdj
 
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规
yangdj
 
面孔演讲词
面孔演讲词面孔演讲词
面孔演讲词
yangdj
 
面孔网张路:Julia开源框架
面孔网张路:Julia开源框架面孔网张路:Julia开源框架
面孔网张路:Julia开源框架
yangdj
 
微游戏Ceo徐城:HTML5的移动互联网时代
微游戏Ceo徐城:HTML5的移动互联网时代微游戏Ceo徐城:HTML5的移动互联网时代
微游戏Ceo徐城:HTML5的移动互联网时代
yangdj
 
【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结 【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结
yangdj
 
赶集团购开发总结4
赶集团购开发总结4赶集团购开发总结4
赶集团购开发总结4
yangdj
 
Csdn移动电子刊 9月
Csdn移动电子刊 9月Csdn移动电子刊 9月
Csdn移动电子刊 9月
yangdj
 
淘宝无线电子商务数据报告Marked
淘宝无线电子商务数据报告Marked淘宝无线电子商务数据报告Marked
淘宝无线电子商务数据报告Marked
yangdj
 
字霸一点通2003
字霸一点通2003字霸一点通2003
字霸一点通2003
yangdj
 
友盟2011第一季度国内android数据报告
友盟2011第一季度国内android数据报告友盟2011第一季度国内android数据报告
友盟2011第一季度国内android数据报告
yangdj
 
应用汇,Android
应用汇,Android应用汇,Android
应用汇,Android
yangdj
 
百度移动互联网发展趋势报告 2011年q1 (1)
百度移动互联网发展趋势报告 2011年q1 (1)百度移动互联网发展趋势报告 2011年q1 (1)
百度移动互联网发展趋势报告 2011年q1 (1)
yangdj
 
MeeGo战略及产业动态
MeeGo战略及产业动态MeeGo战略及产业动态
MeeGo战略及产业动态
yangdj
 

More from yangdj (20)

磊友科技CTO 赵霏演讲
磊友科技CTO 赵霏演讲磊友科技CTO 赵霏演讲
磊友科技CTO 赵霏演讲
 
黎明帝国发布会By黄何
黎明帝国发布会By黄何黎明帝国发布会By黄何
黎明帝国发布会By黄何
 
黎明帝国
黎明帝国黎明帝国
黎明帝国
 
海豚浏览器CTO刘铁锋:Web App发展现状
海豚浏览器CTO刘铁锋:Web App发展现状海豚浏览器CTO刘铁锋:Web App发展现状
海豚浏览器CTO刘铁锋:Web App发展现状
 
快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规快!快!快! 互联网第一条军规
快!快!快! 互联网第一条军规
 
面孔演讲词
面孔演讲词面孔演讲词
面孔演讲词
 
面孔网张路:Julia开源框架
面孔网张路:Julia开源框架面孔网张路:Julia开源框架
面孔网张路:Julia开源框架
 
微游戏Ceo徐城:HTML5的移动互联网时代
微游戏Ceo徐城:HTML5的移动互联网时代微游戏Ceo徐城:HTML5的移动互联网时代
微游戏Ceo徐城:HTML5的移动互联网时代
 
【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结 【项目分享】赶集移动Web App开发总结
【项目分享】赶集移动Web App开发总结
 
赶集团购开发总结4
赶集团购开发总结4赶集团购开发总结4
赶集团购开发总结4
 
iOS5 开发新特性
iOS5 开发新特性iOS5 开发新特性
iOS5 开发新特性
 
CSDN移动电子刊第三期
CSDN移动电子刊第三期CSDN移动电子刊第三期
CSDN移动电子刊第三期
 
Csdn移动电子刊 9月
Csdn移动电子刊 9月Csdn移动电子刊 9月
Csdn移动电子刊 9月
 
淘宝无线电子商务数据报告Marked
淘宝无线电子商务数据报告Marked淘宝无线电子商务数据报告Marked
淘宝无线电子商务数据报告Marked
 
Csdn移动电子刊第一期
Csdn移动电子刊第一期Csdn移动电子刊第一期
Csdn移动电子刊第一期
 
字霸一点通2003
字霸一点通2003字霸一点通2003
字霸一点通2003
 
友盟2011第一季度国内android数据报告
友盟2011第一季度国内android数据报告友盟2011第一季度国内android数据报告
友盟2011第一季度国内android数据报告
 
应用汇,Android
应用汇,Android应用汇,Android
应用汇,Android
 
百度移动互联网发展趋势报告 2011年q1 (1)
百度移动互联网发展趋势报告 2011年q1 (1)百度移动互联网发展趋势报告 2011年q1 (1)
百度移动互联网发展趋势报告 2011年q1 (1)
 
MeeGo战略及产业动态
MeeGo战略及产业动态MeeGo战略及产业动态
MeeGo战略及产业动态
 

Recently uploaded

Recently uploaded (20)

How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
Designing for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at ComcastDesigning for Hardware Accessibility at Comcast
Designing for Hardware Accessibility at Comcast
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
PLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. StartupsPLAI - Acceleration Program for Generative A.I. Startups
PLAI - Acceleration Program for Generative A.I. Startups
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
Strategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering TeamsStrategic AI Integration in Engineering Teams
Strategic AI Integration in Engineering Teams
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi IbrahimzadeFree and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
Free and Effective: Making Flows Publicly Accessible, Yumi Ibrahimzade
 
IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024IoT Analytics Company Presentation May 2024
IoT Analytics Company Presentation May 2024
 
ECS 2024 Teams Premium - Pretty Secure
ECS 2024   Teams Premium - Pretty SecureECS 2024   Teams Premium - Pretty Secure
ECS 2024 Teams Premium - Pretty Secure
 
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdfWhere to Learn More About FDO _ Richard at FIDO Alliance.pdf
Where to Learn More About FDO _ Richard at FIDO Alliance.pdf
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 

Adobe董龙飞:关于PhoneGap的12件事

  • 1.
  • 2.
  • 4. CallBack 更名为 Apache Cordova
  • 5.  
  • 6. Native Web Control 全功能浏览器 没有边框
  • 9. HTML5 项目 phonegap.jar plugins.xml AndroidManifest.xml android activity
  • 11. public class CirclesActivity extends DroidGap { @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl(&quot;file:///android_asset/www/index.html&quot;); } } Native Wrapper with PhoneGap
  • 12. public class callsPGPlugin extends Plugin { // List Actions public static final String ACTION=&quot;list&quot;; @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(&quot;RESULT=&quot;, callsHistory.toString()); result=new PluginResult(Status. OK,callsHistory); }else{ result=new PluginResult(Status. INVALID_ACTION); Log. d(&quot;CallsPlugin&quot;,&quot;Invalidate action:&quot; + action); } return result; } } Java 定制 plugin
  • 13. 注册 plugin <?xml version= &quot;1.0&quot; encoding=&quot;UTF-8&quot;?> <plugins> <plugin name= &quot;App&quot; value=&quot;com.phonegap.App&quot;/> <plugin name= &quot;Geolocation&quot; value=&quot;com.phonegap.GeoBroker&quot;/> <plugin name= &quot;Device&quot; value=&quot;com.phonegap.Device&quot;/> …… <plugin name= &quot;Temperature&quot; value=&quot;com.phonegap.TempListener&quot;/> <plugin name= &quot;FileTransfer&quot; value=&quot;com.phonegap.FileTransfer&quot;/> <plugin name= &quot;Capture&quot; value=&quot;com.phonegap.Capture&quot;/> <plugin name= &quot;CallsHistoryPlugin&quot; value=&quot;com.mark.phonegap.plugin.callsPGPlugin&quot; /> </plugins>
  • 15. Javascript 接口 v ar CallsListing=function(){}; CallsListing.prototype.list=function(successCallback,failureCallback){ return PhoneGap.exec(successCallback, failureCallback, 'CallsHistoryPlugin', 'list',['test'] ); }; PhoneGap.addConstructor(function(){ PhoneGap.addPlugin(&quot;callsListing&quot;,new CallsListing); });
  • 18. window.plugins.callsListing.list ( function(r){printResult(r)}, function(e){console.log(e)} ); CallsListing.prototype.list=function(successCallback,failureCallback){ return PhoneGap.exec(successCallback, failureCallback, ' CallsHistoryPlugin ', 'list',['test ’ ]); }; public class callsPGPlugin extends Plugin { // List Actions public static final String ACTION=&quot;list&quot;; @Override public PluginResult execute (String action, JSONArray data, String callbackId) { <plugin name= &quot; CallsHistoryPlugin &quot; value=&quot; com.mark.phonegap.plugin.callsPGPlugin &quot; />
  • 20. CallbackServer : XmlHttpRequestsever WebChromClient : onJsPrompt addJavaScriptInterface
  • 21. CallbackServer : XmlHttpRequestsever WebChromClient : 覆盖 onJsPrompt From JS to Native From Native to JS
  • 22. CallsListing.prototype.list=function(successCallback,failureCallback){ return PhoneGap.exec(successCallback, failureCallback, 'CallsHistoryPlugin', 'list',['test ’ ]); }; PhoneGap.exec = function(success, fail, service, action, args) { … var r = prompt(JSON.stringify(args), &quot;gap:&quot;+JSON.stringify([service, action, callbackId, true])); …
  • 23. 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.java public String exec(final String service, final String action, final String callbackId, final String jsonArgs, final boolean async) { …… cr = plugin.execute(action, args, callbackId); ctx.sendJavascript(cr.toErrorCallbackString(callbackId)); …… }
  • 24. Pluginmanager.java ctx.sendJavascript(cr.toErrorCallbackString(callbackId)); CallbackServer.java : XHR server PhoneGap.Channel.join(function() { // Start listening for XHR callbacks setTimeout(function() { if (PhoneGap.UsePolling) { PhoneGap.JSCallbackPolling(); } …
  • 25. IOS
  • 26. JS 到 Native 的通讯 document .location = “gap://Class.method/args” Native 到 JS 的通讯 UIWebView.stringByEvaluatingJavaScriptFromString webView =[[UIWebView alloc] initWithFrame:webViewBounds]; 实例化 UIWebView
  • 27.

Editor's Notes

  1. iPhoneDevCamp
  2. Cordova ( Street)
  3. Init a webview
  4. 建立 Native 到 JS 的通道 建立 JS 到 Native 的通道
  5. Android:  Communication from JavaScript to native is achieved by overriding the JavaScript prompt function in the Android native code and the message passed is much like that used in iOS. We used to useWebView.addJavascriptInterface to add Java objects directly to the JavaScript sandbox but that was causing some devices to crash with Android 2.3. To call JavaScript from native we currently use WebView.loadUrl(”javascript:…”) but that has some problems so we are soon moving over to polling a Java message queue calling a local HTTP server via a long-lived XHR connection.
  6. To communicate from JavaScript to native we call window.location = “gap://Class.method/args” and then intercept the url in native code and parse our the parameters. The class / method is then dynamically loaded / called.  stringByEvaluatingJavaScriptFromString: Returns the result of running a script. Discussion JavaScript execution time is limited to 10 seconds for each top-level entry point. If your script executes for more than 10 seconds, the web view stops executing the script. This is likely to occur at a random place in your code, so unintended consequences may result. This limit is imposed because JavaScript execution may cause the main thread to block, so when scripts are running, the user is not able to interact with the webpage. JavaScript allocations are also limited to 10 MB. The web view raises an exception if you exceed this limit on the total memory allocation for JavaScript.