混搭移动开发:PhoneGap+JQurey+Dreamweaver

  • 5,395 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
5,395
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
125
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. 移动应用开发PhoneGap + JQuery + Dreamweaver
  • 2. very much!
  • 3. But, less than 7yue
  • 4. MOBILE HTML
  • 5. Web App orHybrid App orNative App
  • 6. ?MOBILE HTML http://mobilehtml5.org/
  • 7. 摄像头 设备API Web font 音视频运动传感器 部件 图形、图像、特效指南针设备信息 CSS 3 GPS 通知 JavaScript网络状态 HTML标记和语义 …
  • 8. 浏览器摄像头 设备API Web font 音视频运动传感器 部件 图形、图像、特效指南针设备信息 CSS 3 GPS 通知 JavaScript网络状态 HTML标记和语义 …
  • 9. Native Wrapper 浏览器摄像头 设备API Web font 音视频运动传感器 部件 图形、图像、特效指南针设备信息 CSS 3 GPS 通知 JavaScript网络状态 HTML标记和语义 …
  • 10. Native WrapperPhoneGap WebView 摄像头 设备API Web font 音视频运动传感器 部件 图形、图像、特效 指南针 设备信息 CSS 3 GPS 通知 JavaScript 网络状态 HTML标记和语义 …
  • 11. Web App & Hybrid App 使用HTML + JavaScript + CSS3 开发的移动应用 (基于浏览器+可安装的)
  • 12. Framework? Tools?
  • 13. JQuery mobile (http://jquerymobile.com/)创建面向现代智能移动设备的 跨平台UI框架
  • 14. 构建于JQuery Core跨平台(iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian,Windows Phone 7, MeeGo, Opera Mobile/Mini, FirefoxMobile, Kindle, Nook, 所有现代浏览器)HTML5标记配置轻量级模块化架构触摸和鼠标事件支持强大的主题框架统一的、可扩充的UI组件
  • 15. <body><div data-role="page" id="page"> <div data-role="header"> <h1>Page One</h1> Page </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>
  • 16. 准备div:interactive<div data-role="page" id="page2" > <div data-role="header" id="page2Header" data-position="fixed" > 1 <a href="#page1" data-role="button" data-icon="home">home</a> <h1>PIE</h1> </div>2 <div data-role="content"> <div id="interactive" class="graph" ></div> </div> <div data-role="footer" data-position="fixed" id="page2Footer"> <h4>Page Footer</h4> </div></div> jquery.flot.js
  • 17. 准备数据$(function () { var data=[]; var series = Math.floor(Math.random()*5)+5; for( var i = 0; i<series; i++) { data[i] = { label: "Series"+(i+1), data: Math.floor(Math.random()*100)+1 } }… jquery.flot.js
  • 18. $.plot($("#interactive"), data, 使用Jquery plugin { plot在interactive series: { div上绘制 pie: { show: true, innerRadius: 0.4 } }, grid: { hoverable: false, clickable: true }, legend: { show: false } }); $("#interactive").bind("plotclick", pieClick);}); jquery.flot.js
  • 19. listview<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>
  • 20. 数据var itemData = [ {imgURL: "images/flowing-rock.jpg" , label: "Series1", desc: 10, price: 120, stock:1200}, {imgURL: "images/grass-blades.jpg" , label: "Series2", desc: 30, price: 220, ck:200}, …… ];
  • 21. “itemrenderer”<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>
  • 22. 使用Jquery plugin: tmpl 构var newsList = $( "#listAfterMax" ); 建listnewsList.empty();$( "#newsItem" ).tmpl( itemData).appendTo( newsList );newsList.listview( "refresh" );
  • 23. My Stupid Demo
  • 24. MORE… http://www.markus-falk.com/mobile-frameworks-comparison-chart/
  • 25. MORE… http://www.markus-falk.com/mobile-frameworks-comparison-chart/ http://www.markus-falk.com/mobile-frameworks-comparison-chart/
  • 26. PhoneGap
  • 27. 使用HTML5、CSS3、JavaScript构建APP访问移动设备本地特性phoneGap plugin打包部署到多种平台
  • 28. 打包
  • 29. 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
  • 30. 在dreamweaver中构建
  • 31. PhoneGap : Build
  • 32. PhoneGap Build Compile in the cloud
  • 33. PhoneGap plugin
  • 34. 定制PhoneGap Plugin (IOS 和 Android)一个JavaScript与匹配的Java一个JavaScript与匹配的.h和.m
  • 35. PhoneGap如何工作?
  • 36. PhoneGap架构 Web App PhoneGap Plug-ins HTML5+JavaScript+CSS3 摄像头 运动传感器 设备信息 指南针 GPS 通知HTML5 PhoneGap API JS API 网络状态 … PhoneGap Native API HTML Engine 定制plugin (WebView、UIWebView…) OS API OS API Mobile OS
  • 37. android activityHTML5项目phonegap.jarplugins.xmlAndroidManifest.xml
  • 38. 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
  • 39. public class callsPGPlugin extends Plugin { Java定制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; }}
  • 40. 注册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>
  • 41. 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);});
  • 42. Javascript 调用plugin window.plugins.callsListing.list( function(r){printResult(r)}, function(e){console.log(e)} );
  • 43. 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<plugin name="CallsHistoryPlugin" public static final String ACTION="lisvalue="com.mark.phonegap.plugin.callsPGPlu @Override public PluginResult execute(Stringgin" /> action, JSONArray data, String callbackId) {
  • 44. PhoneGap的 小秘密
  • 45. addJavaScriptInterfaceWebChromClient: onJsPromptCallbackServer:XmlHttpRequestsever
  • 46. 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]));…
  • 47. 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.javapublic String exec(final String service, final String action, final String callbackId, finalString jsonArgs, final boolean async) { …… cr = plugin.execute(action, args, callbackId); ctx.sendJavascript(cr.toErrorCallbackString(callbackId)); ……}
  • 48. Pluginmanager.java ctx.sendJavascript(cr.toErrorCallbackString(callbackId)); CallbackServer.java : XHR serverPhoneGap.Channel.join(function() { // Start listening for XHR callbacks setTimeout(function() { if (PhoneGap.UsePolling) { PhoneGap.JSCallbackPolling(); }…
  • 49. Appcelerator Titanium Native? JavaScriptCore Mozilla Rhino
  • 50. Mark DongDeveloper Evangelistdong@adobe.comweibo.com/donglongfei