SlideShare a Scribd company logo
1 of 27
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件事

After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
yangdj
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
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
 
After max+phonegap
After max+phonegapAfter max+phonegap
After max+phonegap
 
混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver混搭移动开发:PhoneGap+JQurey+Dreamweaver
混搭移动开发:PhoneGap+JQurey+Dreamweaver
 
Androidaop 170105090257
Androidaop 170105090257Androidaop 170105090257
Androidaop 170105090257
 
Non Conventional Android Programming (English)
Non Conventional Android Programming (English)Non Conventional Android Programming (English)
Non Conventional Android Programming (English)
 
Non Conventional Android Programming En
Non Conventional Android Programming EnNon Conventional Android Programming En
Non Conventional Android Programming En
 
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

Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Victor Rentea
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Safe Software
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
WSO2
 

Recently uploaded (20)

Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost SavingRepurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
Repurposing LNG terminals for Hydrogen Ammonia: Feasibility and Cost Saving
 
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot ModelMcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
Mcleodganj Call Girls 🥰 8617370543 Service Offer VIP Hot Model
 
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
Modular Monolith - a Practical Alternative to Microservices @ Devoxx UK 2024
 
Vector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptxVector Search -An Introduction in Oracle Database 23ai.pptx
Vector Search -An Introduction in Oracle Database 23ai.pptx
 
Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)Introduction to Multilingual Retrieval Augmented Generation (RAG)
Introduction to Multilingual Retrieval Augmented Generation (RAG)
 
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemkeProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
ProductAnonymous-April2024-WinProductDiscovery-MelissaKlemke
 
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers:  A Deep Dive into Serverless Spatial Data and FMECloud Frontiers:  A Deep Dive into Serverless Spatial Data and FME
Cloud Frontiers: A Deep Dive into Serverless Spatial Data and FME
 
Artificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : UncertaintyArtificial Intelligence Chap.5 : Uncertainty
Artificial Intelligence Chap.5 : Uncertainty
 
[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf[BuildWithAI] Introduction to Gemini.pdf
[BuildWithAI] Introduction to Gemini.pdf
 
Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...Apidays New York 2024 - The value of a flexible API Management solution for O...
Apidays New York 2024 - The value of a flexible API Management solution for O...
 
Architecting Cloud Native Applications
Architecting Cloud Native ApplicationsArchitecting Cloud Native Applications
Architecting Cloud Native Applications
 
MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024MINDCTI Revenue Release Quarter One 2024
MINDCTI Revenue Release Quarter One 2024
 
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
Apidays New York 2024 - The Good, the Bad and the Governed by David O'Neill, ...
 
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
Apidays New York 2024 - Accelerating FinTech Innovation by Vasa Krishnan, Fin...
 
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWEREMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
EMPOWERMENT TECHNOLOGY GRADE 11 QUARTER 2 REVIEWER
 
MS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectorsMS Copilot expands with MS Graph connectors
MS Copilot expands with MS Graph connectors
 
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
Navigating the Deluge_ Dubai Floods and the Resilience of Dubai International...
 
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdfRising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
Rising Above_ Dubai Floods and the Fortitude of Dubai International Airport.pdf
 
Strategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a FresherStrategies for Landing an Oracle DBA Job as a Fresher
Strategies for Landing an Oracle DBA Job as a Fresher
 
How to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected WorkerHow to Troubleshoot Apps for the Modern Connected Worker
How to Troubleshoot Apps for the Modern Connected Worker
 

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.