phone gap 12 things you should know
Post on 06-May-2015
9.854 Views
Preview:
DESCRIPTION
TRANSCRIPT
12 things you should know
Mark Dong 董龙飞 Adobe Developer Evangelist
weibo.com/donglongfei weibo.com/javascriptdev
1. Why?
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
http://mobilehtml5.org/
MOBILE HTML ?
Web App
or
Hybrid App or
Native 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
Interface to access native features
Wrap your web app and deploy
PhoneGap plugin
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
3. What it is not?
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
JavaScript Framework
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 for the Iphone (2008-9-18, Nitobi blog)
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
5. Open source
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
CallBack 更名为 Apache Cordova
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
http://incubator.apache.org/cordova/
6 . Across platforms
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
7. Packaging
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
IDE + SDK + PhoneGap
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
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
PhoneGap Build
Compile in the cloud
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
8. Accessing native features
9. The nature
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
JS Native
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
Native Web Control Plugins FFI
JavaScript/CSS/HTML5 Non Web Tech
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
Native Web Control
Browser : full functions Chrome removed No top bar
10. Plugin
HTML5项目
phonegap.jar
plugins.xml
AndroidManifest.xml
android activity
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
In Java
public class callsPGPlugin extends Plugin { // List Actions public static !nal 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
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
注册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
In JavaScript
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
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); });
window.plugins.callsListing.list(function(r){printResult(r)},function(e){console.log(e)}
);
使用者调用plugin Javascript接口
Wait ⋯
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 !nal String ACTION="list"; @Override public PluginResult execute(String
action, JSONArray data, String callbackId) {
<plugin name="CallsHistoryPlugin" value="com.mark.phonegap.plugin.callsPGPlugin" />
11. How?
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), "gap:"+JSON.stringify([service, action, callbackId, true])); …
Javascript
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
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(!nal String service, !nal String action, !nal String callbackId, !nal String jsonArgs, !nal boolean async) {
…… cr = plugin.execute(action, args, callbackId); ctx.sendJavascript(cr.toErrorCallbackString(callbackId));
……
}
Java
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(); } ⋯
Javascript
Java
IOS
JS到Native的通讯
document.location = “gap://Class.method/args”
Native到JS的通讯
UIWebView.stringByEvaluatingJavaScriptFromString
webView =[[UIWebView alloc] initWithFrame:webViewBounds];
实例化UIWebView
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
12. Debug
a Remote Debugger for web pages or PhoneGap app on mobile devices.
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
weinre:
weinre
<script src="http://192.168.1.101:8080/target/target-script-min.js#anonymous"> </script>
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
PhoneGap Debug Server
Adobe 董龙飞 weibo.com/donglongfei weibo.com/javascriptdev
Mark Dong Adobe Developer Evangelist dong@adobe.com
weibo.com/donglongfei weibo.com/javascriptdev
top related