移动应用开发PhoneGap + JQuery + Dreamweaver
very much!
But,   less than 7yue
MOBILE HTML
Web App    orHybrid App    orNative App
?MOBILE HTML               http://mobilehtml5.org/
摄像头        设备API     Web font    音视频运动传感器        部件           图形、图像、特效指南针设备信息               CSS 3 GPS 通知              Java...
浏览器摄像头        设备API     Web font    音视频运动传感器        部件           图形、图像、特效指南针设备信息               CSS 3 GPS 通知              J...
Native Wrapper                   浏览器摄像头        设备API      Web font      音视频运动传感器        部件             图形、图像、特效指南针设备信息    ...
Native WrapperPhoneGap              WebView  摄像头             设备API      Web font    音视频运动传感器              部件              ...
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, FirefoxMo...
<body><div data-role="page" id="page">        <div data-role="header">        <h1>Page One</h1>                           ...
准备div:interactive<div data-role="page" id="page2" >    <div data-role="header" id="page2Header" data-position="fixed" >   ...
准备数据$(function () {      var data=[];      var series = Math.floor(Math.random()*5)+5;      for( var i = 0; i<series; i++)...
$.plot($("#interactive"), data,                                                使用Jquery plugin          {                 ...
listview<div data-role="page" id="page3">  <div data-role="header">    <a href="#page4" data-role="button" data-icon="back...
数据var itemData = [       {imgURL: "images/flowing-rock.jpg" ,            label: "Series1",            desc: 10,           ...
“itemrenderer”<script id="newsItem" type="text/x-jquery-tmpl">  <li data-messageId="${label}" class="newsItem">          <...
使用Jquery                                           plugin: tmpl 构var newsList = $( "#listAfterMax" );            建listnews...
My Stupid Demo
MORE…   http://www.markus-falk.com/mobile-frameworks-comparison-chart/
MORE…   http://www.markus-falk.com/mobile-frameworks-comparison-chart/                      http://www.markus-falk.com/mob...
PhoneGap
使用HTML5、CSS3、JavaScript构建APP访问移动设备本地特性phoneGap plugin打包部署到多种平台
打包
public class CirclesActivity 	     	     	extends DroidGap {	    	    @Override	    public void onCreate(Bundle savedInsta...
在dreamweaver中构建
PhoneGap : Build
PhoneGap Build   Compile in the cloud
PhoneGap plugin
定制PhoneGap Plugin    (IOS 和 Android)一个JavaScript与匹配的Java一个JavaScript与匹配的.h和.m
PhoneGap如何工作?
PhoneGap架构             Web App                                      PhoneGap Plug-ins        HTML5+JavaScript+CSS3        ...
android activityHTML5项目phonegap.jarplugins.xmlAndroidManifest.xml
public class CirclesActivity 	     	     	extends DroidGap {	    	    @Override	    public void onCreate(Bundle savedInsta...
public class callsPGPlugin extends Plugin {                       Java定制plugin          // List Actions         public sta...
注册plugin<?xml version="1.0" encoding="UTF-8"?><plugins>  <plugin name="App" value="com.phonegap.App"/>  <plugin name="Geol...
Javascript接口var CallsListing=function(){};CallsListing.prototype.list=function(successCallback,failureCallback){        re...
Javascript 调用plugin    window.plugins.callsListing.list(	        	function(r){printResult(r)},	        	function(e){consol...
window.plugins.callsListing.list(	        	function(r){printResult(r)},	        	function(e){console.log(e)}	   );	  Calls...
PhoneGap的  小秘密
addJavaScriptInterfaceWebChromClient: onJsPromptCallbackServer:XmlHttpRequestsever
CallsListing.prototype.list=function(successCallback,failureCallback){	      	return PhoneGap.exec(successCallback,	      ...
Droidgap.java    public boolean onJsPrompt(WebView view, String url, String message, String    defaultValue, JsPromptResul...
Pluginmanager.java      ctx.sendJavascript(cr.toErrorCallbackString(callbackId));          CallbackServer.java : XHR serve...
Appcelerator Titanium        Native?        JavaScriptCore        Mozilla Rhino
Mark DongDeveloper Evangelistdong@adobe.comweibo.com/donglongfei
After max+phonegap
After max+phonegap
After max+phonegap
After max+phonegap
Upcoming SlideShare
Loading in …5
×

After max+phonegap

0 views

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
0
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
8
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

After max+phonegap

  1. 1. 移动应用开发PhoneGap + JQuery + Dreamweaver
  2. 2. very much!
  3. 3. But, less than 7yue
  4. 4. MOBILE HTML
  5. 5. Web App orHybrid App orNative App
  6. 6. ?MOBILE HTML http://mobilehtml5.org/
  7. 7. 摄像头 设备API Web font 音视频运动传感器 部件 图形、图像、特效指南针设备信息 CSS 3 GPS 通知 JavaScript网络状态 HTML标记和语义 …
  8. 8. 浏览器摄像头 设备API Web font 音视频运动传感器 部件 图形、图像、特效指南针设备信息 CSS 3 GPS 通知 JavaScript网络状态 HTML标记和语义 …
  9. 9. Native Wrapper 浏览器摄像头 设备API Web font 音视频运动传感器 部件 图形、图像、特效指南针设备信息 CSS 3 GPS 通知 JavaScript网络状态 HTML标记和语义 …
  10. 10. Native WrapperPhoneGap WebView 摄像头 设备API Web font 音视频运动传感器 部件 图形、图像、特效 指南针 设备信息 CSS 3 GPS 通知 JavaScript 网络状态 HTML标记和语义 …
  11. 11. Web App & Hybrid App 使用HTML + JavaScript + CSS3 开发的移动应用 (基于浏览器+可安装的)
  12. 12. Framework? Tools?
  13. 13. JQuery mobile (http://jquerymobile.com/)创建面向现代智能移动设备的 跨平台UI框架
  14. 14. 构建于JQuery Core跨平台(iOS, Android, Blackberry, Palm WebOS, Nokia/Symbian,Windows Phone 7, MeeGo, Opera Mobile/Mini, FirefoxMobile, Kindle, Nook, 所有现代浏览器)HTML5标记配置轻量级模块化架构触摸和鼠标事件支持强大的主题框架统一的、可扩充的UI组件
  15. 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. 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. 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. 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. 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. 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. 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. 22. 使用Jquery plugin: tmpl 构var newsList = $( "#listAfterMax" ); 建listnewsList.empty();$( "#newsItem" ).tmpl( itemData).appendTo( newsList );newsList.listview( "refresh" );
  23. 23. My Stupid Demo
  24. 24. MORE… http://www.markus-falk.com/mobile-frameworks-comparison-chart/
  25. 25. MORE… http://www.markus-falk.com/mobile-frameworks-comparison-chart/ http://www.markus-falk.com/mobile-frameworks-comparison-chart/
  26. 26. PhoneGap
  27. 27. 使用HTML5、CSS3、JavaScript构建APP访问移动设备本地特性phoneGap plugin打包部署到多种平台
  28. 28. 打包
  29. 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. 30. 在dreamweaver中构建
  31. 31. PhoneGap : Build
  32. 32. PhoneGap Build Compile in the cloud
  33. 33. PhoneGap plugin
  34. 34. 定制PhoneGap Plugin (IOS 和 Android)一个JavaScript与匹配的Java一个JavaScript与匹配的.h和.m
  35. 35. PhoneGap如何工作?
  36. 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. 37. android activityHTML5项目phonegap.jarplugins.xmlAndroidManifest.xml
  38. 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. 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. 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. 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. 42. Javascript 调用plugin window.plugins.callsListing.list( function(r){printResult(r)}, function(e){console.log(e)} );
  43. 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. 44. PhoneGap的 小秘密
  45. 45. addJavaScriptInterfaceWebChromClient: onJsPromptCallbackServer:XmlHttpRequestsever
  46. 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. 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. 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. 49. Appcelerator Titanium Native? JavaScriptCore Mozilla Rhino
  50. 50. Mark DongDeveloper Evangelistdong@adobe.comweibo.com/donglongfei

×