After max+phonegap

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

Technology

After max+phonegap