移动应用开发 PhoneGap + JQuery + Dreamweaver
very much!
But, less than 7yue
MOBILE HTML
Web App
or
Hybrid App or
Native App
http://mobilehtml5.org/
MOBILE HTML ?
摄像头
运动传感器
指南针
设备信息
GPS
通知
网络状态
⋯
CSS 3
JavaScript
HTML标记和语义
设备API
图形、图像、特效 部件
音视频 Web font
摄像头
运动传感器
指南针
设备信息
GPS
通知
网络状态
⋯
CSS 3
JavaScript
HTML标记和语义
设备API
图形、图像、特效 部件
音视频 Web font
浏览器
摄像头
运动传感器
指南针
设备信息
GPS
通知
网络状态
⋯
CSS 3
JavaScript
HTML标记和语义
设备API
图形、图像、特效 部件
音视频 Web font
浏览器
Native Wrapper
摄像头
运动传感器
指南针
设备信息
GPS
通知
网络状态
⋯
CSS 3
JavaScript
HTML标记和语义
设备API
图形、图像、特效 部件
音视频 Web font
WebView
Native Wrapper
PhoneGap
Web App & Hybrid App
使用 HTML + JavaScript + CSS3
开发的移动应用 (基于浏览器+可安装的)
Framework? Tools?
JQuery mobile (http://jquerymobile.com/)
创建面向现代智能移动设备的 跨平台UI框架
构建于JQuery Core 跨平台 (iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian, Windows Phone 7, MeeGo, Opera Mobile/Mini, Firefox Mobile, Kindle, Nook, 所有现代浏览器)
HTML5标记配置 轻量级 模块化架构 触摸和鼠标事件支持 强大的主题框架 统一的、可扩充的UI组件
<body> <div data-role="page" id="page">
<div data-role="header"> <h1>Page One</h1> </div> <div data-role="content"> <ul data-role="listview"> <li><a href="#page2">Page Two</a></li>
<li><a href="#page3">Page Three</a></li> <li><a href="#page4">Page Four</a></li> </ul> </div> <div data-role="footer"> <h4>Page Footer</h4> </div>
</div> <div data-role="page" id="page2">
<div data-role="header"> <h1>Page Two</h1> </div> <div data-role="content"> Content </div> <div data-role="footer"> <h4>Page Footer</h4> </div>
</div> </body>
Page
<div data-role="page" id="page2" > <div data-role="header" id="page2Header" data-position="!xed" > <a href="#page1" data-role="button" data-icon="home">home</a>
<h1>PIE</h1> </div> <div data-role="content"> <div id="interactive" class="graph" ></div> </div> <div data-role="footer" data-position="!xed" id="page2Footer"> <h4>Page Footer</h4> </div> </div>
jquery."ot.js
1
2
准备div:interactive
$(function () { var data=[]; var series = Math."oor(Math.random()*5)+5; for( var i = 0; i<series; i++) { data[i] = { label: "Series"+(i+1), data: Math."oor(Math.random()*100)+1 } }
…
jquery."ot.js
准备数据
$.plot($("#interactive"), data,
{ series: { pie: { show: true, innerRadius: 0.4 } }, grid: { hoverable: false, clickable: true }, legend: { show: false } });
$("#interactive").bind("plotclick", pieClick);
}); jquery."ot.js
使用Jquery plugin plot在interactive div上绘制
<div data-role="page" id="page3"> <div data-role="header"> <a href="#page4" data-role="button" data-icon="back">返回</a> <h1>LIST</h1> </div> <div data-role="content"> <ul data-role="listview" data-theme="d" id="listAfterMax"
data-inset="true"> </ul> </div> <div data-role="footer"> <h4>Page Footer</h4> </div> </div>
listview
var itemData = [ {imgURL: "images/"owing-rock.jpg" , label: "Series1", desc: 10, price: 120, stock:1200}, {imgURL: "images/grass-blades.jpg" , label: "Series2", desc: 30, price: 220, ck:200}, …… ];
数据
<script id="newsItem" type="text/x-jquery-tmpl"> <li data-messageId="${label}" class="newsItem">
<img src="${imgURL}" class="itemImageWrapper" /> <h3> <a href="#page4" onClick="activeGallery()">${label}</a> </h3>
<p class="subItem"><strong>Price ${price}元 </strong></p> <div class="ui-li-aside"> <p><strong>${stock} 部</strong></p> </div> </li> </script>
“itemrenderer”
var newsList = $( "#listAfterMax" ); newsList.empty(); $( "#newsItem" ).tmpl( itemData).appendTo( newsList ); newsList.listview( "refresh" );
使用Jquery plugin: tmpl 构
建list
My Stupid Demo
http://www.markus-falk.com/mobile-frameworks-comparison-chart/ MORE…
http://www.markus-falk.com/mobile-frameworks-comparison-chart/
http://www.markus-falk.com/mobile-frameworks-comparison-chart/ MORE…
PhoneGap
使用HTML5、CSS3、JavaScript构建APP
访问移动设备本地特性
打包部署到多种平台
phoneGap plugin
打包
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
在dreamweaver中构建
PhoneGap : Build
PhoneGap Build
Compile in the cloud
PhoneGap plugin
一个JavaScript与匹配的Java
一个JavaScript与匹配的.h和.m
定制PhoneGap Plugin (IOS 和 Android)
PhoneGap如何工作?
PhoneGap架构
Mobile OS
Web App
HTML5+JavaScript+CSS3
HTML Engine (WebView、UIWebView⋯)
PhoneGap Plug-ins
摄像头 运动传感器
指南针
设备信息
GPS 通知
网络状态 ⋯
定制plugin
HTML5 API
PhoneGap JS API
OS API OS API
PhoneGap Native API
HTML5项目
phonegap.jar
plugins.xml
AndroidManifest.xml
android activity
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 !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
注册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>
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)}
);
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 !nal String ACTION="list"; @Override public PluginResult execute(String
action, JSONArray data, String callbackId) {
<plugin name="CallsHistoryPlugin" value="com.mark.phonegap.plugin.callsPGPlugin" />
PhoneGap的 小秘密
CallbackServer:XmlHttpRequestsever
WebChromClient: onJsPrompt
addJavaScriptInterface
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])); …
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));
……
}
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(); } ⋯
Appcelerator Titanium
Mozilla Rhino JavaScriptCore
Native?
Mark Dong Developer Evangelist [email protected] weibo.com/donglongfei