移动应用开发 PhoneGap + JQuery + Dreamweaver


移动应用开发 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组件

Page One

Page Footer

Page Two

Content

Page Footer

Page
home

PIE

Page Footer

jquery."ot.js 1 2 准备div:interactive $(function () { var data=[]; var series = Math."oor(Math.random()*5)+5; for( var i = 0; i
返回

LIST

Page Footer

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}, …… ]; 数据 “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 …… 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) { 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 dong@adobe.com weibo.com/donglongfei
还剩53页未读

继续阅读

下载pdf到电脑,查找使用更方便

pdf的实际排版效果,会与网站的显示效果略有不同!!

需要 15 金币 [ 分享pdf获得金币 ] 5 人已下载

下载pdf

pdf贡献者

linwh1984

贡献于2012-05-30

下载需要 15 金币 [金币充值 ]
亲,您也可以通过 分享原创pdf 来获得金币奖励!
下载pdf