`

app.js 的完整源代码如下。请注意，您需要用自己的钥匙替换。可以从[code.google.com/apis/maps/documentation/places](http://code.google.com/apis/maps/documentation/places)获取 API 密钥。

`var mapdata = null;

var cachedData = null;

var currentBusinessData = null;

/**

* Fetch the details of a place/business. This function is called before user

navigates to details page

* @param {Object} reference

*/

function fetchDetails(entry) {

currentBusinessData = null;

\(.mobile.showPageLoadingMsg();

var detailsUrl =

"https://maps.googleapis.com/maps/api/place/details/json?reference=" + entry.reference + "&sensor=true&key=";

\)("#name").html("");

\(("#address").html("");

\)("#phone").html("");

\(("#rating").html("");

\)("#homepage").attr("href", "");

$.getJSON(detailsUrl, function (data) {

if (data.result) {

currentBusinessData = data.result;

isFav(currentBusinessData, function (isPlaceFav) {

console.log(currentBusinessData.name + " is fav

" + isPlaceFav);

if (!isPlaceFav) {

\(("#add").show();

\)("#remove").hide();

} else {

\(("#add").hide();

\)("#remove").show();

}

\(("#name").html(data.result.name);

\)("#address").html(data.result.formatted_address);

\(("#phone").html(data.result.formatted_phone_number);

\)("#rating").html(data.result.rating);

$("#homepage").attr("href", data.result.url);

});

}

}).error(function (err) {

console.log("Got Error while fetching details of Business " + err);

}).complete(function () {

$.mobile.hidePageLoadingMsg();

});

}

//-------------------------------

/**

* Called to initiate Map page

*/

function initiateMap() {

$("#map").live("pagebeforecreate", function () {

try {

\(('#map_canvas').gmap({

'center': mapdata,

'zoom': 12,

'callback': function (map) {

\)(cachedData.results).each(function (index, entry) {

\(('#map_canvas').gmap('addMarker', {

'position': new

google.maps.LatLng(entry.geometry.location.lat, entry.geometry.location.lng),

'animation': google.maps.Animation.DROP

}, function (map, marker) {

\)('#map_canvas').gmap('addInfoWindow', {

'position': marker.getPosition(),

'content': entry.name

}, function (iw) {

$(marker).click(function () {

iw.open(map, marker);

map.panTo(marker.getPosition());

});

});

});

});

}

});

console.log("Map initialized");

} catch (err) {

console.log("Got error while initializing map " + err);

}

});

}

//--------------------------------------------------------------------------------

/**

* Called to bind the "Add to Favorite" Button

*/

function initiateFavButton() {

$("#removefav").click(function () {

try {

if (currentBusinessData != null) {

removeFromFavorite(currentBusinessData);

\(("#add").show();

\)("#remove").hide();

}

} catch (err) {

console.log("Got Error while removing " + currentBusinessData.name + " error

" + err);

}

});

$("#addfav").click(function () {

try {

if (currentBusinessData != null) {

addToFavorite(currentBusinessData);

\(("#add").hide();

\)("#remove").show();

}

} catch (err) {

console.log("Got Error while adding " + currentBusinessData.name + " error "

err);

}

});

}

//--------------------------------------------------------------------------------------

/**

* Called each time before user navigates to Favorites

*/

function initiateFavorites() {

$("#fav").live("pagebeforeshow", function () {

var db = window.openDatabase("Favorites", "1.0", "Favorites", 200000);

try {

db.transaction(function (tx) {

tx.executeSql('SELECT * FROM Favorite', [], function (tx, results) {

$("#fav-list").html("");

if (results != null && results.rows != null) {

for (var index = 0; index < results.rows.length;

index++) {

var entry = results.rows.item(index)

" + entry.name +" vicinity:" +

entry.vicinity + "

";

var liElem = $(document.createElement('li'));

\(("#fav-

list").append(liElem.html(htmlData));

\)(liElem).bind("tap", function (event) {

event.stopPropagation();

fetchDetails(entry);

return true;

});

}

$("#fav-

list").listview('refresh');

}

}, function (error) {

console.log("Got error fetching Favorites " + error.code + " " +

error.message);

});

});

} catch (err) {

console.log("Got error while reading Favorites " + err);

}

});

}

//--------------------------------------------------------------------------------

/**

* Ensure we have the table before we use it

* @param {Object} tx

*/

function ensureTableExists(tx) {

tx.executeSql('CREATE TABLE IF NOT EXISTS Favorite (id unique,

reference, name,address,phone,rating,icon,vicinity)');

}

//-----------------------------------------------------------------------

/**

* Add current business data to Favorite

* @param {Object} data

*/

function addToFavorite(data) {

var db = window.openDatabase("Favorites", "1.0", "Favorites", 20000000);

db.transaction(function (tx) {

ensureTableExists(tx);

var id = (data.id != null) ? ('"' + data.id + '"') : ('""');

var reference = (data.reference != null) ? ('"' + data.reference + '"') :

('""');

var name = (data.name != null) ? ('"' + data.name + '"') : ('""');

var address = (data.formatted_address != null) ? ('"' + data.formatted_address +

'"') : ('""');

var phone = (data.formatted_phone_number != null) ? ('"' +

data.formatted_phone_number + '"') : ('""');

var rating = (data.rating != null) ? ('"' + data.rating + '"') : ('""');

var icon = (data.icon != null) ? ('"' + data.icon + '"') : ('""');

var vicinity = (data.vicinity != null) ? ('"' + data.vicinity + '"') : ('""');

var insertStmt = 'INSERT INTO Favorite (id,reference,

name,address,phone,rating,icon,vicinity) VALUES (' + id + ',' + reference + ',' + name +

',' + address + ',' + phone + ',' + rating + ',' + icon + ',' + vicinity + ')';

tx.executeSql(insertStmt);

}, function (error) {

console.log("Data insert failed " + error.code + " " + error.message);

}, function () {

console.log("Data insert successful");

});

}

//----------------------------------------------------------------------------------

/**

* Remove current business data from Favorite

* @param {Object} data

*/

function removeFromFavorite(data) {

try {

var db = window.openDatabase("Favorites", "1.0", "Favorites", 20000000);

db.transaction(function (tx) {

ensureTableExists(tx);

var deleteStmt = "DELETE FROM Favorite WHERE id

= '" + data.id + "'";

console.log(deleteStmt);

tx.executeSql(deleteStmt);

}, function (error) {

console.log("Data Delete failed " + error.code + " " + error.message);

}, function () {

console.log("Data Delete successful");

});

} catch (err) {

console.log("Caught exception while deleting Favorite " + data.name);

}

}

//--------------------------------------------------------------------

/**

*

* @param {Object} reference

* @return true if place is Favorite else false

*/

function isFav(data, callback) {

var db = window.openDatabase("Favorites", "1.0", "Favorites", 200000);

try {

db.transaction(function (tx) {

ensureTableExists(tx);

var sql = "SELECT * FROM Favorite where id='" + data.id + "'";

tx.executeSql(sql, [], function (tx, results) {

var result = (results != null && results.rows != null &&

results.rows.length > 0);

callback(result);

}, function (tx, error) {

console.log("Got error in isFav error.code =" + error.code + "

error.message = " + error.message);

callback(false);

});

});

} catch (err) {

console.log("Got error in isFav " + err);

callback(false);

}

}

//-------------------------------------------------------------------------------

/**

* Binding Search button handler to go and fetch place results

*/

function initiateSearch() {

\(("#search").click(function () {

try {

\).mobile.showPageLoadingMsg();

navigator.geolocation.getCurrentPosition(function (position) {

var radius = $("#range").val() * 1000;

mapdata = new

google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var url =

"https://maps.googleapis.com/maps/api/place/search/json?location=" +

position.coords.latitude + "," + position.coords.longitude + "&radius=" + radius +

"&name=" + \(("#searchbox").val() + "&sensor=true&key=";

\).getJSON(url, function (data) {

cachedData = data;

$("#result-

list").html("");

try {

$(data.results).each(function (index, entry) {

" + entry.name +

" vicinity:" + entry.vicinity + "

";

var liElem = $(document.createElement('li'));

$("#result-list").append(liElem.html(htmlData));

$(liElem).bind("tap", function (event) {

event.stopPropagation();

fetchDetails(entry);

return true;

});

});

$("#result-list").listview('refresh');

} catch (err) {

console.log("Got error while putting search result on result

page " + err);

}

\(.mobile.changePage("list");

\).mobile.hidePageLoadingMsg();

}).error(function (xhr, textStatus, errorThrown) {

console.log("Got error while fetching search result : xhr.status=" +

xhr.status);

}).complete(function (error) {

$.mobile.hidePageLoadingMsg();

});

}, function (error) {

console.log("Got Error fetching geolocation " + error);

});

} catch (err) {

console.log("Got error on clicking search button " + err);

}

});

}

//--------------------------------------------------------------

function bind() {

initiateMap();

initiateFavorites();

initiateSearch();

initiateFavButton();

}

//---------------------------------------------------

function onDeviceReady() {

$(document).ready(function () {

bind();

});

}

document.addEventListener("deviceready", onDeviceReady);

//-------------------------

The complete source of the app.css is as follows

map, .map-content, #map_canvas {

width: 100%;

height: 100%;

padding: 0;

}

map_canvas {

height: min-height: 100%;

}`

jQueryMobile 的优点

jQueryMobile 是一个面向移动应用开发人员的易于使用的 JavaScript UI 框架。jQueryMobile 最好的部分是它的声明式 UI 编程。使用 HTML 标签来创建 UI，并添加“数据角色”页面来将 HTML 标签注释为页面、页眉、页脚、内容、列表和按钮，这使得快速编程 UI 布局变得非常容易。

jQueryMobile 的另一个优点是页面的概念。页面在 HTML 页面中被声明为 div。此外，jQueryMobile 内置了导航部分和历史管理部分。这消除了添加历史管理部分的麻烦。

虽然 jQueryMobile 为小部件和工具栏提供了很好的支持，但是这些的编程方面需要开发人员进行 DOM 操作。

jQueryMobile 最大的优势在于它建立在健壮的 jQuery 核心框架之上。jQueryMobile 的另一个优势是它支持 iOS、Android、BlackBerry、HP WebOS、诺基亚/Symbian、Windows Mobile、Opera Mobile/Mini、Firefox mobile 以及所有现代桌面浏览器。

jQueryMobile 为移动和平板应用提供了触摸事件。jQueryMobile 也提供了很好的主题支持。在主题之间切换就像改变 HTML 标签的属性一样简单。

jQueryMobile 的缺点

jQueryMobile 是一个非常好的轻量级框架，使用 jQuery 来操作 DOM 允许用户以一种简单的方式构建应用。然而，随着应用复杂性的增加，以及对数据模型和相应视图的需求，用 jQueryMobile 编程更多的是用 JavaScript 实现自己的 MVC 框架。

简而言之，当您的应用很复杂时，jQueryMobile 很难使用。缺乏 MVC 框架甚至模型和 JavaScript 视图，使得 jQueryMobile 中的 JavaScript UI 编程与 Sencha Touch 等其他框架相比非常痛苦。

结论

如果移动应用相当简单，jQueryMobile 是一个很好的 JavaScript 移动 UI 开发框架。随着您的移动应用 UI 的复杂性增加，用 jQueryMobile 编程将变得更加繁琐。

五、使用 PhoneGap 和 Sencha Touch

Sencha Touch 是一家名为“ExtJS”的公司的产品。“ExtJS”是 Ajax RIA 世界中一家受欢迎的公司，它提供了一个丰富的、经过打磨的 JavaScriptui 框架，名为“ExtJS”。该公司的热门产品有“ExtJS”JavaScript UI 框架，“Ext-GWT”，GWT UI 框架(Ext js 的 GWT 计数器部分)，以及“Sencha Touch”移动端 JavaScript 库。

“ExtJS”公司最近更名为“Sencha”。因此，虽然名称是新的，但是“Sencha Touch”库中的内容是基于多年来使用 JavaScript 构建 UI 的经验。

如果你熟悉“ExtJS”，你会注意到“ExtJS”和“Sencha Touch”有很多相似之处，尤其是在基础类。然而，“Sencha Touch”是专为移动应用设计的。

为什么要用 Sencha Touch？

Sencha Touch 允许您为 iPhone、Android 和 BlackBerry 开发基于浏览器的应用，具有原生的外观和感觉。还有，Sencha Touch 是基于 HTML5 的。

Sencha Touch 为您提供以下优势:

触摸优化的丰富小部件集，以及支持点击、双击、滑动、点击并按住、挤压并旋转、滑动和手势的触摸事件。

新时代网络标准 HTML5 和 CSS3。

与 PhoneGap 集成。

支持 iOS、Android 和黑莓，以及这些设备的原生主题

对 Ajax、JSONP 和 Yahoo！查询语言(YQL)，以及支持本地存储来支持小部件。

总之，Sencha Touch 是目前移动应用开发最好的 JavaScript ui 库之一。如果你没有从事过 ExtJS，那么学习曲线一开始可能会有点陡。

煎茶触摸的优点

Sencha Touch 的优点远远超过缺点。首先，Sencha Touch 基于 web 标准，如 HTML5 和 CSS3，而不是基于任何专有技术。Sencha Touch 的社区支持也很好。商业使用是免费的。

你可以在 Sencha Touch 中构建一个应用，它可以检测我们是在平板电脑上还是在手机上，并且你可以编写代码来使相同的应用以不同的方式工作。例如，看看厨房的水槽。当您在平板电脑和移动设备上查看它时，您将会看到该示例根据实际情况进行了自我调整。

小部件集相当丰富。用 JavaScript 构建整个小部件确保了与用户的高度交互性。你有更多的控制权。

Sencha Touch 的性能很好，并且随着每个版本的发布而不断改进。此外，随着更新版本的 iOS 和 Android 操作系统的发布，这些操作系统附带的 webkit 在性能上也有所提高。

有对国际化的支持，有像网格和传送带这样的小部件，它们是非常新时代的可视化辅助工具。

煎茶触摸的缺点

Sencha Touch 最大的缺点是它的学习曲线。使用 Sencha Touch，您很少使用任何预渲染的 HTML。一切都是通过 JavaScript 添加到 DOM 中的。对一些人来说，这可能是观念上的转变。

如果你的应用仅仅是几个带有导航的页面，视图主要是列表视图、表单和工具栏，那么 Sencha Touch 就太过了。

下载 Sencha Touch

从 Sencha 的网站-[www.sencha.com/products/touch/](http://www.sencha.com/products/touch/)下载 Sencha 触摸库。一旦你下载并解压 sdk，你会看到如图 5-1 所示的结构。

图 5-1。 森查摸目录结构

集成 Sencha 和 PhoneGap

让我们从将 Sencha Touch 与 PhoneGap 项目集成开始。本章将假设它是针对 Android 平台的。其他平台的步骤类似。

参考第二章和第三章为你的目标平台设置 PhoneGap 项目。

如图 5-2 所示，从 Sencha Touch sdk 中，您需要添加以下文件:

将 sencha-touch.js JavaScript 文件添加到 www/lib。

将 resources/css 文件夹添加到 www/lib

将所有应用代码放在一个名为 app/app.js 的文件中，这将是我们的主 JavaScript 文件。

出于本章和示例的考虑，请从 sencha-touch-1 . 1 . 0/examples/map 文件夹中复制 icon.png、phone_startup.png 和 tablet_startup.png。

图 5-2。 PhoneGap 和 Sencha Touch 项目结构

使用 Sencha Touch 构建本地搜索应用

本地搜索应用的要求类似于我们在第五章中的要求。用户通过关键字输入搜索，从他/她的当前位置搜索范围，用户获得列表视图中列出的本地位置。用户可以点击其中一个项目，并查看该地方的详细信息。在详细信息屏幕上，用户可以选择将该地点放入他/她的收藏夹列表(存储在应用数据库中以供离线访问)。用户还可以在地图视图中看到搜索结果。

最后但同样重要的是，用户可以点击收藏夹按钮(星形图标)来查看他/她的收藏夹列表。

让我们开始构建应用。请记住，Sencha Touch 相当大，本章将带您浏览该应用所需的 Sencha Touch API 的子集。

初始化煎茶触摸

第一步是确保 index.html 有 Sencha 触摸库，PhoneGap 库，和 CSS 链接。注意我们的身体是空的。这是因为，在 Sencha Touch 中，我们用 JavaScript 构建整个 ui。注意，我们包含了以下 JavaScript 和样式表。

Sencha Touch 样式表

谷歌地图 JavaScript

我们的应用 JavaScript

`

Local Search

`

现在让我们转到 app . js。PhoneGap 应用是在函数 Ext.setup()中设置的。根据经验，记住所有 Sencha Touch 函数都采用 JSON 结构作为配置。

我们将对 Ext.setup 进行同样的操作。我们将为应用提供一些图标，以及手机闪屏和平板电脑闪屏。但这些都不是我们想在本章重点讨论的部分。

这里最重要的部分是 onReadyfunction()。这就好比 jQuery 的文档就绪，PhoneGap 的设备就绪功能。我们可以在这个函数中开始绘制 Sencha Touch 的 UI。

Ext.setup({ tabletStartupScreen: 'tablet_startup.png', phoneStartupScreen: 'phone_startup.png', icon: 'icon.png', glossOnIcon: false, onReady: function () { //Sencha Touch framework has initialized here. //Create Panels and bind event handlers. } });

创建布局(应用框架)

下一步是将一个面板声明为主面板。为此，我们将创建一个新面板(new Ext。Panel())并在其配置 JSON 中，我们将声明以下内容:

布局:“卡片”-布局是卡片布局，这意味着它是一叠卡片，我们一次只展示一张卡片

full screen:true–指定此面板将占用 100%的可用宽度和高度，并自动将其自身绘制到页面上

items: [searchPanel，tabResultPanel，favourites，result detail panel]–要添加到此面板的子组件数组。由于我们使用的是“卡片”布局，它将一次显示一个子组件。我们的主面板中有四个子面板:searchPanel、tabResultPanel、favourites 和 resultDetailPanel。searchPanel 和 tabResultPanel 的声明方式与 mainPanel 相同。默认情况下，searchPanel 是可见的卡片，而其他面板隐藏在 searchPanel 后面

docket items:[]–用于声明停靠的小部件，通常用于工具栏按钮。

dockedItems 内部有一个由 JSON 表示声明的工具栏。这个工具栏有两个按钮和一个分隔它们的间隔。

对于主页按钮，我们使用图标:“主页”

对于最喜欢的按钮，我们使用图标:“星形”

对于这两个按钮，我们都声明了一个处理程序，当单击按钮时会调用这个处理程序。

`//Main Panel with CardLayout

var mainPanel = new Ext.Panel({

layout: 'card',

fullscreen: true,

items: [searchPanel, tabResultPanel, favorites, resultDetailPanel],

dockedItems: [{

xtype: 'toolbar',

title: 'Local Search',

dock: 'top',

items: [{

iconMask: true,

ui: 'round',

iconCls: 'home',

handler: function () {

}

}, { xtype: 'spacer'

}, {

iconMask: true,

ui: 'round',

iconCls: 'star',

handler: function () {}

}]

}]

});`

在没有任何子部件的情况下，图 5-3 显示了该面板的外观。

图 5-3。 带工具栏按钮的主应用面板

接下来，我们声明搜索面板。搜索面板有一个文本框，用户可以在其中输入搜索关键字，并有一个范围选择器，允许用户选择他/她的搜索范围。最后，搜索面板有一个带有搜索按钮的工具栏。声明如下:

**var searchPanel = new Ext.form.FormPanel({** ** layout: 'fit',** ** fullscreen: true,** ** scroll: 'vertical',** ** standardSubmit: false,** ** //Adding form field** ** items: [{** `** xtype: 'fieldset',**

** title: 'Local Search',**

** items: [{**

** xtype: 'textfield',**

** name: 'search',**

** label: ‘Search',**

** value: ‘Pizza',**

** userClearIcon: true,**

** autoCapitalize: false**

** }, {**

** xtype: 'sliderfield',**

** name: 'range',**

** label: 'Range (0-10 Kms)',**

** value: 5,**

** minValue: 0,**

** maxValue: 10**

** }]**

** }],**

** //Docking a toolbar at bottom**

** dockedItems: [{**

** xtype: 'toolbar',**

** dock: 'bottom',**

** items: [{**

** xtype: 'spacer'**

** }, {**

** text: 'Search',**

** iconCls: 'search',**

** title: 'Search',**

** iconMask: true,**

** ui: 'confirm',**

** handler: function () {**

** }**

** }]**

** }]**

});`

图 5-4 显示了搜索面板的显示方式。

图 5-4。 应用搜索面板

当用户进行搜索时，用户会看到两个视图。

显示搜索结果的列表视图

显示搜索结果的地图视图

这两个视图都封装在选项卡面板中。我们将选项卡面板声明如下:

`var tabResultPanel = new Ext.TabPanel({

** layout: 'fit',**

** tabBar: {**

** dock: 'bottom',**

** layout: {**

** pack: 'center'**

** }**

** },**

** items: [result, map],**

});`

没有任何子面板的选项卡面板如图 5-5 所示。请注意，我们在配置 JSON 中定义了将选项卡栏放置在两个选项卡“result”和“map”的底部。默认情况下，将选择“结果”选项卡。当我们创建“结果”和“映射”对象时，我们将为这两个选项卡定义标签和图标。

图 5-5。 搜索结果面板带标签

现在，我们将看到当用户进行搜索时如何显示搜索结果。在本章的后面部分，我们将会谈到如何使用 AJAX 调用。

出于本章的考虑，假设您有一个来自 Google place 服务器的 JSON，如下所示:

{ "status": "OK", "results": [{ "name": "Zaaffran Restaurant - BBQ and GRILL, Darling Harbour", "vicinity": "Darling Drive, Darling Harbour, Sydney", "types": ["restaurant", "food", "establishment"], "geometry": { "location": { "lat": -33.8712950, "lng": 151.1984770 } }, "icon": "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png", "reference": "CpQBiwAAANM1CkdWcBxiExHinloJpp7kX2D3nyb_D0qoQ_-RuBhq9cwJKYvU8- sRJUaXF4U2kET_OH3Oh3Yz4tf5_6gBgcsFAPyRappCrJ5WksvMkXrT5lA7q9U_S0ZI0u3mrsvTtXnTDMKlBMywE_ 5Yy6lbshqPIatWZ6QkPZBNdmkifyN3vM7H2vL- 300iY6EoartWuxIQNckbM0Bs4D946thThmKOsBoUCmGgFrtYgtO0CIUc79fQi3waO0w", "id": "677679492a58049a7eae079e0890897eb953d79b" }, { "name": "Toros Restaurant Darling Harbour", "vicinity": "Murray Street, Sydney", "types": ["restaurant", "food", "establishment"], "geometry": { "location": { "lat": -33.8714080, "lng": 151.1975410 } }, "icon": "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png", "reference": "CoQBdQAAALFujBuIMYXsG8Qlus2zSHeikZQNCsSbeII0-55zkhCiArbPkACXRU- CcLZbeKsXaBpoBNH5iyYJg6Nquct2LTE127X4CD1YtKpozmbjZpyCRFrJ_V5DI4IDGLCWeY_8NMxznbiqb9prR8m XJoAKv7jNz6KEMxAuGLRAXbi7G6CYEhBeR6Ur-x2ABlS3pKXsKXLvGhRWFzL3Q5TO0xe-gm_LJm9cgtzYJw", "id": "aefbc59325ffd5f3e93d67932375d20d143289de" }, { "name": "Strike Bowling Bar Darling Harbour", "vicinity": "Sydney", "types": ["restaurant", "food", "establishment"], "geometry": { "location": { "lat": -33.8662990, "lng": 151.2016580 } }, "icon": "http://maps.gstatic.com/mapfiles/place_api/icons/restaurant-71.png", "reference": "CoQBeAAAAO-prCRp9Atcj_rvavsLyv- DnxbGkw8QyRZb6Srm6QHOcww6lqFhIs2c7Ie6fMg3PZ4PhicfJL7ZWlaHaLDTqmRisoTQQUn61WTcSXAAiCOzcm0 JDBnafqrskSpFtNUgzGAOx29WGnWSP44jmjtioIsJN9ik8yjK7UxP4buAmMPVEhBXPiCfHXk1CQ6XRuQhpztsGhQ U4U6-tWjTHcLSVzjbNxoiuihbaA", "id": "0a4e24c365f4bd70080f99bb80153c5ba3faced8" } ...additional results...], "html_attributions": ["Listings by \u003ca href=\"http://www.yellowpages.com.au/\"\u003eYellow Pages\u003c/a\u003e"] }

现在我们已经看到了 Google places 结果的 JSON 结构，我们将创建面板来显示结果。在本例中，我们扩展了一个组件，并在组件中声明了一个模板(tpl)。

模板化是 Sencha Touch 的一个特性，你可以在标签中声明一个 html。在我们的例子中，我们传递上述 JSON 的结果对象。结果对象实际上是一个数组。在我们的模板代码中，请注意。这是在告诉 Sencha 模板引擎迭代结果中的所有对象。

在 html 的后面部分，您会注意到占位符，如{reference}、{icon}、{name}等。如果你们中的任何一个人使用过 java 的消息格式，你会注意到这是非常相似的。这些{}条目将被 JSON 中相应的数据替换。

{name}将被结果->条目->名称中的名称替换。

为了用数据填充这个面板，我们将调用以下 API:

//This will call the template engine and draw the AJAX's response //result. Here ‘result' is the Component object to show the results //HTML and response.results is the JSON array. result.update(response.results);

现在，让我们看看用来创建结果面板的代码。

`var result = new Ext.Component({

** title: 'Search Result',**

** iconMask: true,**

** iconCls: 'organize',**

** cls: 'timeline',**

** scroll: 'vertical',**

** tpl: ['',**

** '

',**

** '',**

** '', '{name}',**

** '{vicinity}

',**

** '',**

** '',**

** '']**

** listeners: {**

** el: {**

** tap: detailClickHandler,**

** //function which**

** //will handle tap event**

** }**

** }**

});`

注意最后的听众和 el 部分。这告诉 Sencha Touch，我们有兴趣接收关于该组件元素的事件。此外，我们告诉它，我们专门寻找点击事件。这段代码的结果是，每当用户点击结果中列出的任何地方，它都会调用 detailClickHandler 函数。

图 5-6。 搜索结果面板

Sencha Touch 的地图小工具让生活变得简单多了。否则，我们将不得不使用谷歌地图应用编程接口。我们简单地创建一个新的 Ext。映射并给它一些选项。这是制作地图最简单的方法。请注意,“地图”对象将在 AJAX 回调中使用，以在其上添加位置标记。AJAX 调用在“获取地点列表”中有描述。

**var map = new Ext.Map({** ** iconMask: true,** ** iconCls: 'maps',** ** title: 'Map',** ** // Name that appears on this tab** ** mapOptions: {** ** // Used in rendering map** ** zoom: 12** ** }** **});**

图 5-7。地图面板显示地名

接下来是面板，显示一个地方的细节。注意，一旦用户点击搜索条目，应用将从 Google places 服务器获取详细信息。该请求的 JSON 响应如下所示:

{ "status": "OK", "result": { "name": "Google Sydney", "vicinity": "Pirrama Road, Pyrmont", "types": ["establishment"], "formatted_phone_number": "(02) 9374 4000", "formatted_address": "5/48 Pirrama Road, Pyrmont NSW, Australia", "address_components": [{ "long_name": "48", "short_name": "48", "types": ["street_number"] }, { "long_name": "Pirrama Road", "short_name": "Pirrama Road", "types": ["route"] }, { "long_name": "Pyrmont", "short_name": "Pyrmont", "types": ["locality", "political"] }, { "long_name": "NSW", "short_name": "NSW", "types": ["administrative_area_level_1", "political"] }, { "long_name": "2009", "short_name": "2009", "types": ["postal_code"] }], "geometry": { "location": { "lat": -33.8669710, "lng": 151.1958750 } }, "rating": 4.5, "url": "http://maps.google.com/maps/place?cid=10281119596374313554", "icon": "http://maps.gstatic.com/mapfiles/place_api/icons/generic_business-71.png", "reference": "CmRRAAAAUgylGnuntxKOuZy9_c5zxdFi6e491_Fv0m1hks5YkeaH7k1SP9ujAkG4GROr1XCHFnMsDhuEIgQQq2W Wyd33oGRAT8Vwr8rjTWEYEMvCZ1RxTzXSVDZ4gEFqLZcRyAw_EhBS8uZHidMMbYHuf9KHapRyGhQQ1dnf3uMghMR BlXqJE6ygh_a3ag", "id": "4f89212bf76dde31f092cfc14d7506555d85b5c7" }, "html_attributions": [] }

这个想法是以表格的方式向用户显示上述信息。为此，我们将结合使用以下方法:

将上述 JSON 显示为表的一部分的模板

一个按钮，将允许用户添加这个地方作为收藏或删除它作为收藏。

因此，我们使用一个名为 resultDetailPanel 的包装面板。这个面板有一个 vbox 布局(垂直堆叠部件)。第一个子元素是 placeDetailsPanel(见下)，第二个是 button。

该按钮的文本从“添加到收藏夹”变为“从收藏夹中移除”，这取决于用户是否已经将该位置设为收藏夹。应用中为同一定义了一个名为 isFav()的函数。

**var resultDetailPanel = new Ext.Panel({** ** layout: {** ** type: 'vbox',** ** },** ** items: [** ** placeDetailsPanel,** ** {** ** xtype: 'button',** ** text: 'Add to Favorite',** ** handler: function (button, event) {** ** if (button.text == "Add to Favorite") {** ** addCurrentToFav();** ** button.setText("Remove from Favorite");** ** } else {** ** removeCurrentFromFav();** `** button.setText("Add to Favorite");**

** }**

** }**

** }],**

** dockedItems: [{**

** xtype: 'toolbar',**

** dock: 'bottom',**

** items: [{**

** ui: 'round',**

** text: 'Back',**

** handler: function () {}**

** }]**

** }]**

});`

这是以表格形式显示 JSON 结果的面板。它使用相同的模板。模板是 html 模板，它有由{ < >}表示的占位符。使用模板代码，占位符由实际值替换:

**var placeDetailsPanel = new Ext.Panel({** ** tpl: ['

** '

{formatted_phone_number}',**

** '',**

** '',**

** '',**

** '',**

** 'Rating',**

** '',**

** '',**

** '{rating}',**

** '',**

** '',**

** '',**

** '',**

** 'Home Page',**

** '',**

** '',**

** 'Home Page',**

** '',**

** '',**

** ''**

** ]**

});`

位置细节面板如图 5-8 中的所示。

图 5-8。 地点详情面板

现在我们已经了解了如何在收藏夹中添加或删除地点，让我们来看看列出用户收藏地点的面板。是的，这个面板与结果面板非常相似。唯一的区别是结果面板被赋予了来自 Google places 服务器的 JSON，而收藏夹面板被赋予了来自数据库的 JSON。

`var favorites = new Ext.Component({

** title: 'Favotites',**

** iconMask: true,**

** iconCls: 'organize',**

** cls: 'timeline',**

** scroll: 'vertical',**

** tpl: ['',**

** '

',**

** '',**

** '',**

** '{name}',**

** '{vicinity}

',**

** '',**

** '',**

** ''],**

** listeners: {**

** el: {**

** tap: detailClickHandler,**

** }**

** }**

});`

图 5-9。 最喜欢的地方面板

面板之间的切换

随着您探索更多的应用代码，您将需要从一个面板切换到另一个面板。这是我们在主面板上使用“卡片”布局的主要原因。

为了在卡片布局中从一个面板切换到另一个面板，我们将使用下面的代码。注意 mainPanel 的 items 中提供的小部件的第一个参数索引号。第二个论点是动画效果。

mainPanel.setActiveItem(0, "slide"); mainPanel.setActiveItem(1, {type: 'slide', direction: 'right'});

此外，主面板拥有工具栏。我们需要改变这个工具栏的标题，让用户知道他在哪里。这是使用以下代码完成的:

mainPanel.dockedItems.items[0].setTitle('Details');

获取地点列表

当用户点击搜索面板上的搜索按钮时，我们需要调用 Ajax 来获取 Google places 的结果。下面的函数展示了如何在 Sencha Touch 和 PhoneGap 中进行同样的操作。

步骤很简单。

从 PhoneGap 获取地理位置

在 getcurrentPosition 的成功调用中，通过调用 Ext.ajax.request(url，successCallback，failureCallback)来发起 Ajax 调用

在 Ext.ajax.request 的 successCallback 中，会得到 JSON 字符串。

将这个 JSON 字符串转换成 JSON 对象

通过调用 result.update(obj.results)填充结果面板；

在谷歌地图上填充市场

`var fetchFromGoogle = function () {

** var keyword = searchPanel.items.items[0].items.items[0].value;**

** var range = searchPanel.items.items[0].items.items[1].value * 1000;**

** navigator.geolocation.getCurrentPosition(**

** function (position) {**

** var lat = position.coords.latitude;**

** var lng = position.coords.longitude;**

** map.update({**

** latitude: lat,**

** longitude: lng**

** });**

** var googlePlaceUrl = 'https://maps.googleapis.com/maps/api/place/search/json?location='**

** + lat + ',' + lng + '&radius=' + range + '&types=food&name=' + keyword + '&sensor=true&key=API_Key';**

** //Note that you will need to replace the API_Key with your own key. You //can get API Key from **

** //http://code.google.com/apis/maps/documentation/places/**

** Ext.Ajax.request({**

** url: googlePlaceUrl,**

** success: function (response, opts) {**

** var obj = Ext.decode(response.responseText);**

** result.update(obj.results);**

** var data = obj.results;**

** for (var i = 0, ln = data.length; i < ln; i++) { // Loop to add points to the map**

** var place = data[i];**

** if (place.geometry && place.geometry.location) {**

** var position = new google.maps.LatLng(place.geometry.location.lat, place.geometry.location.lng);**

** addMarker(place.name, place.reference, position); // Call addMarker function with new data**

** } }**

** },**

** failure: function (response, opts) {**

** console.log('server-side failure with status code ' + response.status);**

** }**

** }, function (err) {**

** console.log('Failed to get geo location from phonegap ' + err);**

** });**

** })**

** }**`

取件地点详情

从 Google places 服务器获取地点信息甚至更容易。你需要的东西甚至更少。

通过调用 Ext.ajax.request(url，successCallback，failureCallback)启动 Ajax 调用

在 Ext.ajax.request 的 successCallback 中，会得到 JSON 字符串。

将这个 JSON 字符串转换成 JSON 对象

通过调用 placedetailspanel . update(obj . result)填充结果面板；

此外，我们将通过调用 isFav()函数来检查这个地方是否是收藏夹

如果这个地方是一个收藏，我们将这个按钮重命名为“从收藏中删除”

否则，我们将该按钮重命名为“添加到收藏夹”

`var cachedDetails = null;

/**

** * Ensure we have the table before we use it**

** * @param {Object} tx**

** /*

var ensureTableExists = function (tx) {

** tx.executeSql('CREATE TABLE IF NOT EXISTS Favourite (id unique, reference,**

** name,address,phone,rating,icon,vicinity)');**

}

/**

** * Add currentDetails to DB**

** /*

var addCurrentToFav = function () {

** addToFavorite(cachedDetails);**

}

/**** * Remove currentDetails from DB**

** /*

var removeCurrentFromFav = function () {

** removeFromFavorite(cachedDetails);**

}

/**

** * Add current business data to favourite**

** * @param {Object} data**

** /*

var addToFavorite = function (data) {

** var db = window.openDatabase("Favourites", "1.0", "Favourites", 20000000);**

** db.transaction(function (tx) {**

** ensureTableExists(tx);**

** var id = (data.id != null) ? ('"' + data.id + '"') : ('""');**

** var reference = (data.reference != null) ? ('"' + data.reference + '"') : ('""');**

** var name = (data.name != null) ? ('"' + data.name + '"') : ('""');**

** var address = (data.formatted_address != null) ? ('"' + data.formatted_address + '"') : ('""');**

** var phone = (data.formatted_phone_number != null) ? ('"' + data.formatted_phone_number + '"') : ('""');**

** var rating = (data.rating != null) ? ('"' + data.rating + '"') : ('""');**

** var icon = (data.icon != null) ? ('"' + data.icon + '"') : ('""');**

** var vicinity = (data.vicinity != null) ? ('"' + data.vicinity + '"') : ('""');**

** var insertStmt = 'INSERT INTO Favourite (id,reference,**

** name,address,phone,rating,icon,vicinity) VALUES**

** (' + id + ',' + reference + ',' + name + ',' + address + ','**

** + phone + ',' + rating + ',' + icon + ',' + vicinity + ')';**

** tx.executeSql(insertStmt);**

** }, function (error) {**

** console.log("Data insert failed " + error.code + " " + error.message);**

** }, function () {**

** console.log("Data insert successful");**

** });**

}

/**

** * Remove current business data from favourite**

** * @param {Object} data**

** /*

var removeFromFavorite = function (data) {

** try {**

** var db = window.openDatabase("Favourites", "1.0", "Favourites", 20000000); db.transaction(function (tx) {**

** ensureTableExists(tx);**

** var deleteStmt = "DELETE FROM Favourite WHERE id = '" + data.id + "'";**

** console.log(deleteStmt);**

** tx.executeSql(deleteStmt);**

** }, function (error) {**

** console.log("Data Delete failed " + error.code + " " + error.message);**

** }, function () {**

** console.log("Data Delete successful");**

** });**

** } catch (err) {**

** console.log("Caught exception while deleting favourite " + data.name);**

** }**

}

/**

** ***

** * @param {Object} reference**

** * @return true if place is favourite else false**

** /*

var isFav = function (data, callback) {

** var db = window.openDatabase("Favourites", "1.0", "Favourites", 200000);**

** try {**

** db.transaction(function (tx) {**

** ensureTableExists(tx);**

** var sql = "SELECT * FROM Favourite where id='" + data.id + "'";**

** tx.executeSql(sql, [], function (tx, results) {**

** var result = (results != null && results.rows != null && results.rows.length > 0);**

** callback(result);**

** }, function (tx, error) {**

** var fetchDetails = function (reference) {**

** placeDetailsPanel.update({**

** name: "",**

** formatted_address: "",**

** formatted_phone_number: "",**

** rating: "",**

** url: ""**

** });**

** Ext.Ajax.request({**

** url: 'https://maps.googleapis.com/maps/api/place/details/json?reference='**

** + reference + '&sensor=true&key=API_Key',**

** success: function (response, opts) {**

** var obj = Ext.decode(response.responseText);**

** //global variable to store the current place cachedDetails = obj.result;**

** isFav(obj.result, function (result) {**

** if (result) {**

** resultDetailPanel.items.items[1].setText("Remove from Favorite");**

** } else {**

** resultDetailPanel.items.items[1].setText("Add to Favorite");**

** }**

** placeDetailsPanel.update(obj.result);**

** });**

** },**

** failure: function (response, opts) {**

** console.log('server-side failure with status code ' + response.status);**

** }**

** })**

** }**

** console.log("Got error in isFaverror.code =" + error.code + "**

** error.message = " + error.message);**

** callback(false);**

** });**

** });**

** } catch (err) {**

** console.log("Got error in isFav " + err);**

** callback(false);**

** }**

** }**`

从数据库中存储和检索收藏夹

该应用的最后一个重要部分是定义函数来完成以下任务:

向收藏表添加位置

从收藏夹表中移除一个位置

检查某个位置是否已经在收藏表中

从收藏夹表中获取所有条目。

为了在各种函数调用之间传递位置条目，我们在该应用中所做的是声明一个名为 cachedDetails 的变量。当我们在显示地点细节的页面中时，我们在 cachedDetails 中缓存当前地点。cachedDetails 用于将一个位置添加到收藏夹，将其从收藏夹中删除，以及检查它是否已经是用户收藏夹的一部分。

`var cachedDetails = null;

/**

** * Ensure we have the table before we use it**

** * @param {Object} tx**

** /*

var ensureTableExists = function (tx) {

** tx.executeSql('CREATE TABLE IF NOT EXISTS Favourite (id unique, reference,**

** name,address,phone,rating,icon,vicinity)');**

}

/**

** * Add currentDetails to DB**

** /*

var addCurrentToFav = function () {

** addToFavorite(cachedDetails);**

}

/**

** * Remove currentDetails from DB**

** /*

var removeCurrentFromFav = function () {

** removeFromFavorite(cachedDetails);**

}

/**

** * Add current business data to favourite**

** * @param {Object} data**

** /*

var addToFavorite = function (data) {

** var db = window.openDatabase("Favourites", "1.0", "Favourites", 20000000);**

** db.transaction(function (tx) {**

** ensureTableExists(tx);**

** var id = (data.id != null) ? ('"' + data.id + '"') : ('""');**

** var reference = (data.reference != null) ? ('"' + data.reference + '"') : ('""');**

** var name = (data.name != null) ? ('"' + data.name + '"') : ('""');**

** var address = (data.formatted_address != null) ? ('"' + data.formatted_address + '"') : ('""');**

** var phone = (data.formatted_phone_number != null) ? ('"' + data.formatted_phone_number + '"') : ('""');**

** var rating = (data.rating != null) ? ('"' + data.rating + '"') : ('""');**

** var icon = (data.icon != null) ? ('"' + data.icon + '"') : ('""');**

** var vicinity = (data.vicinity != null) ? ('"' + data.vicinity + '"') : ('""');**

** var insertStmt = 'INSERT INTO Favourite (id,reference,**

** name,address,phone,rating,icon,vicinity) VALUES**

** (' + id + ',' + reference + ',' + name + ',' + address + ',' + phone**

** + ',' + rating + ',' + icon + ',' + vicinity + ')'; tx.executeSql(insertStmt);**

** }, function (error) {**

** console.log("Data insert failed " + error.code + " " + error.message);**

** }, function () {**

** console.log("Data insert successful");**

** });**

}

/**

** * Remove current business data from favourite**

** * @param {Object} data**

** /*

var removeFromFavorite = function (data) {

** try {**

** var db = window.openDatabase("Favourites", "1.0", "Favourites", 20000000);**

** db.transaction(function (tx) {**

** ensureTableExists(tx);**

** var deleteStmt = "DELETE FROM Favourite WHERE id = '" + data.id + "'";**

** console.log(deleteStmt);**

** tx.executeSql(deleteStmt);**

** }, function (error) {**

** console.log("Data Delete failed " + error.code + " " + error.message);**

** }, function () {**

** console.log("Data Delete successful");**

** });**

** } catch (err) {**

** console.log("Caught exception while deleting favourite " + data.name);**

** }**

}

/**

** ***

** * @param {Object} reference**

** * @return true if place is favourite else false**

** /*

var isFav = function (data, callback) {

** var db = window.openDatabase("Favourites", "1.0", "Favourites", 200000);**

** try {**

** db.transaction(function (tx) {**

** ensureTableExists(tx);**

** var sql = "SELECT * FROM Favourite where id='" + data.id + "'"; tx.executeSql(sql, [],**

** function (tx, results) {**

** var result = (results != null && results.rows != null && results.rows.length > 0);**

** callback(result);**

** },**

** function (tx, error) {**

** console.log("Got error in isFaverror.code =" + error.code + "**

** error.message = " + error.message);**

** callback(false);**

** });**

** });**

** } catch (err) {**

** console.log("Got error in isFav " + err);**

** callback(false);**

** }**

}`

这包括应用的布局部分，如何从 Google places 服务器填充数据，以及如何导航和使用数据库。

请参考下面列出的完整示例，以了解事件是如何处理的。

1。index.html

`

Sencha Touch Layout

`

2。app.js

`Ext.setup({

tabletStartupScreen: 'tablet_startup.png',

phoneStartupScreen: 'phone_startup.png',

icon: 'icon.png',

glossOnIcon: false,

onReady: function () {

var lastPanelId = 0;

var SEARCHPAGE = 0;

var TABPAGE = 1;

var FAVPAGE = 2;

var DETAILSPAGE = 3;

var cachedDetails = null;

var searchPanel = newExt.form.FormPanel({

layout: 'fit',

fullscreen: true,

scroll: 'vertical',

standardSubmit: false,

//Adding form field

items: [{

xtype: 'fieldset',

title: 'Local Search',

items: [{

xtype: 'textfield',

name: 'search',

label: 'Search',

value: 'Pizza',

useClearIcon: true,

autoCapitalize: false

}, {

xtype: 'sliderfield',

name: 'range',

label: 'Range (0-10 Kms)',

value: 5,

minValue: 0,

maxValue: 10

}]

}] //Docking a toolbar at bottom dockedItems: [{

xtype: 'toolbar',

dock: 'bottom',

items: [{

xtype: 'spacer'

}, {

text: 'Search',

iconCls: 'search',

title: 'Search',

iconMask: true,

ui: 'round',

ui: 'confirm',

handler: function () {

lastPanelId = TABPAGE;

fetchFromGoogle();

mainPanel.dockedItems.items[0].setTitle('Search Results');

mainPanel.setActiveItem(lastPanelId);

}

}]

}]

});

var detailClickHandler = function (event) {

var reference = event.getTarget(".place").id;

fetchDetails(reference);

mainPanel.dockedItems.items[0].setTitle('Details');

mainPanel.setActiveItem(DETAILSPAGE, "slide");

}

var result = new Ext.Component({

title: 'Search Result',

iconMask: true,

iconCls: 'organize',

cls: 'timeline',

scroll: 'vertical',

tpl: ['',

'

',

'',

'',

'{name}',

'

{vicinity}

', '', '', ''

],

listeners: {

el: {

tap: detailClickHandler,

delegate: '.place'

}

}

});

var favorites = new Ext.Component({ title: 'Favotites',

iconMask: true,

iconCls: 'organize',

cls: 'timeline',

scroll: 'vertical',

tpl: ['',

'

',

'',

'',

'{name}',

'{vicinity}

',

'',

'',

''],

listeners: {

el: {

tap: detailClickHandler,

delegate: '.place'

}

}

});

var map = new Ext.Map({

iconMask: true,

iconCls: 'maps',

title: 'Map',

// Name that appears on this tab

fullscreen: true,

mapOptions: { // Used in rendering map

zoom: 12

}

});

var tabResultPanel = new Ext.TabPanel({

layout: 'fit',

tabBar: {

dock: 'bottom',

layout: {

pack: 'center'

}

},

items: [result, map],

});

var placeDetailsPanel = new Ext.Panel({

//layout: 'fit',

tpl: ['

',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'',

'Business Details', '',

'Name',

'',

'{name}',

'',

'Address',

'',

'{formatted_address}',

'',

'Phone',

'',

'{formatted_phone_number}',

'',

'Rating',

'',

'{rating}',

'',

'Home Page',

'',

'Home Page',

''

]

});

var resultDetailPanel = new Ext.Panel({

layout: {

type: 'vbox',

},

items: [

placeDetailsPanel,

{

xtype: 'button',

text: 'Add to Favorite',

handler: function (button, event) { if (button.text == "Add to Favorite") {

addCurrentToFav();

button.setText("Remove from Favorite");

} else {

removeCurrentFromFav();

button.setText("Add to Favorite");

}

}

}],

dockedItems: [{

xtype: 'toolbar',

dock: 'bottom',

items: [{

ui: 'round',

text: 'Back',

handler: function () {

if (lastPanelId == 0) {

mainPanel.dockedItems.items[0].setTitle('Home Page');

} else if (lastPanelId == 1) {

mainPanel.dockedItems.items[0].setTitle('Search Results');

} else if (lastPanelId == 2) {

fetchFromDB();

mainPanel.dockedItems.items[0].setTitle('Favourites');

} else if (lastPanelId == 3) {

//Shouldn't happen

mainPanel.dockedItems.items[0].setTitle('Details');

}

mainPanel.setActiveItem(lastPanelId, {

type: 'slide',

direction: 'right'

});

}

}]

}]

});

//Main Panel with CardLayout

var mainPanel = new Ext.Panel({

layout: 'card',

fullscreen: true,

items: [searchPanel, tabResultPanel, favorites, resultDetailPanel],

dockedItems: [{

xtype: 'toolbar',

title: 'Local Search',

dock: 'top',

items: [{

iconMask: true,

ui: 'round',

iconCls: 'home',

handler: function () { lastPanelId = SEARCHPAGE;

mainPanel.dockedItems.items[0].setTitle('Home Page');

mainPanel.setActiveItem(lastPanelId, "slide");

}

}, {

xtype: 'spacer'

}, {

iconMask: true,

ui: 'round',

iconCls: 'star',

handler: function () {

fetchFromDB();

lastPanelId = FAVPAGE;

mainPanel.dockedItems.items[0].setTitle('Favourites');

mainPanel.setActiveItem(lastPanelId, "slide");

}

}]

}]

});

// These are all Google Maps APIs

var addMarker = function (name, reference, position) {

var marker = new google.maps.Marker({

map: map.map,

position: position,

clickable: true,

optimized: true,

title: name

});

google.maps.event.addListener(marker, 'click', function () {

fetchDetails(reference);

mainPanel.dockedItems.items[0].setTitle('Details');

mainPanel.setActiveItem(DETAILSPAGE, "slide");

});

};

var fetchFromGoogle = function () {

var keyword = searchPanel.items.items[0].items.items[0].value;

var range = searchPanel.items.items[0].items.items[1].value * 1000;

navigator.geolocation.getCurrentPosition(

function (position) {

var lat = position.coords.latitude;

var lng = position.coords.longitude; map.update({

latitude: lat,

longitude: lng

});

var googlePlaceUrl = 'https://maps.googleapis.com/maps/api/place/search/json?location='

+ lat + ',' + lng + '&radius=' + range + '&types=food&name=' + keyword + '&sensor=true&key=API_Key';

//Note that you will need to replace the API_Key with your own key. You

//can get API Key from //http://code.google.com/apis/maps/documentation/places/

Ext.Ajax.request({

url: googlePlaceUrl,

success: function (response, opts) {

var obj = Ext.decode(response.responseText);

result.update(obj.results);

var data = obj.results;

for (var i = 0, ln = data.length; i < ln; i++) { // Loop to add points to the map

var place = data[i];

if (place.geometry && place.geometry.location) {

var position = new google.maps.LatLng(place.geometry.location.lat, place.geometry.location.lng);

addMarker(place.name, place.reference, position); // Call addMarker function with new data

}

}

},

failure: function (response, opts) {

console.log('server-side failure with status code ' + response.status);

}

}, function (err) {

console.log('Failed to get geo location from phonegap ' + err);

});

})

}

var fetchFromDB = function () {

var db = window.openDatabase("Favourites", "1.0", "Favourites", 200000);

try {

db.transaction(function (tx) {

tx.executeSql('SELECT * FROM Favourite', [], function (tx, results) {

var arr = [];

for (var i = 0; i < results.rows.length; i++) { var data = results.rows.item(i)

arr[i] = data;

}

favorites.update(arr);

}, function (error) {

console.log("Got error fetching favourites " + error.code + " " + error.message);

});

});

} catch (err) {

console.log("Got error while reading favourites " + err);

}

}

var fetchDetails = function (reference) {

placeDetailsPanel.update({

name: "",

formatted_address: "",

formatted_phone_number: "",

rating: "",

url: ""

});

Ext.Ajax.request({

url: 'https://maps.googleapis.com/maps/api/place/details/json?reference=' + reference + '&sensor=true&key=API_Key',

success: function (response, opts) {

var obj = Ext.decode(response.responseText);

cachedDetails = obj.result;

isFav(obj.result, function (result) {

if (result) {

resultDetailPanel.items.items[1].setText("Remove from Favorite");

} else {

resultDetailPanel.items.items[1].setText("Add to Favorite");

}

placeDetailsPanel.update(obj.result);

});

},

failure: function (response, opts) {

console.log('server-side failure with status code ' + response.status);

}

})

} /**

* Ensure we have the table before we use it

* @param {Object} tx

*/

var ensureTableExists = function (tx) {

tx.executeSql('CREATE TABLE IF NOT EXISTS Favourite (id unique, reference, name,address,phone,rating,icon,vicinity)');

}

var addCurrentToFav = function () {

addToFavorite(cachedDetails);

}

var removeCurrentFromFav = function () {

removeFromFavorite(cachedDetails);

}

/**

* Add current business data to favourite

* @param {Object} data

*/

var addToFavorite = function (data) {

var db = window.openDatabase("Favourites", "1.0", "Favourites", 20000000);

db.transaction(function (tx) {

ensureTableExists(tx);

var id = (data.id != null) ? ('"' + data.id + '"') : ('""');

var reference = (data.reference != null) ? ('"' + data.reference + '"') : ('""');

var name = (data.name != null) ? ('"' + data.name + '"') : ('""');

var address = (data.formatted_address != null) ? ('"' + data.formatted_address + '"') : ('""');

var phone = (data.formatted_phone_number != null) ? ('"' + data.formatted_phone_number + '"') : ('""');

var rating = (data.rating != null) ? ('"' + data.rating + '"') : ('""');

var icon = (data.icon != null) ? ('"' + data.icon + '"') : ('""');

var vicinity = (data.vicinity != null) ? ('"' + data.vicinity + '"') : ('""');

var insertStmt = 'INSERT INTO Favourite (id,reference, name,address,phone,rating,icon,vicinity) VALUES (' + id

+ ',' + reference + ',' + name + ',' + address + ',' + phone + ',' + rating + ',' + icon + ',' + vicinity + ')';

tx.executeSql(insertStmt);

}, function (error) {

console.log("Data insert failed " + error.code + " " + error.message);

}, function () {

console.log("Data insert successful");

});

} /**

* Remove current business data from favourite

* @param {Object} data

*/

var removeFromFavorite = function (data) {

try {

var db = window.openDatabase("Favourites", "1.0", "Favourites", 20000000);

db.transaction(function (tx) {

ensureTableExists(tx);

var deleteStmt = "DELETE FROM Favourite WHERE id = '" + data.id + "'";

console.log(deleteStmt);

tx.executeSql(deleteStmt);

}, function (error) {

console.log("Data Delete failed " + error.code + " " + error.message);

}, function () {

console.log("Data Delete successful");

});

} catch (err) {

console.log("Caught exception while deleting favourite " + data.name);

}

}

/**

*

* @param {Object} reference

* @return true if place is favourite else false

*/

var isFav = function (data, callback) {

var db = window.openDatabase("Favourites", "1.0", "Favourites", 200000);

try {

db.transaction(function (tx) {

ensureTableExists(tx);

var sql = "SELECT * FROM Favourite where id='" + data.id + "'";

tx.executeSql(sql, [], function (tx, results) {

var result = (results != null && results.rows != null && results.rows.length > 0);

callback(result);

}, function (tx, error) {

console.log("Got error in isFaverror.code =" + error.code + " error.message = " + error.message);

callback(false);

});

});

} catch (err) {

console.log("Got error in isFav " + err);

callback(false); }

}

}

});`

结论

如果你正在构建一个相当复杂的移动应用，你应该使用 Sencha Touch。jQueryMobile 适用于较小的、不太复杂的 Ajax 应用。虽然 jQueryMobile 可以用于更复杂的应用，但是您必须自己处理 DOM，这样事情会变得更复杂。

Sencha Touch 性能不错，widget 集丰富。它的一些小部件使用数据存储来与服务器组件对话。你可以在 Sencha Touch 中使用 mvc 设计模式，甚至可以将你的应用分成几个部分。用于改进模块化代码的 js 文件。

六、在 GWT 中使用 PhoneGap

Google Web toolkit (GWT)是 Google 提供的一个框架，可以用来开发基于浏览器的应用。GWT 允许开发人员用 Java 编写代码并生成基于 JavaScript 的应用。

GWT 应用本质上是跨浏览器兼容的，它们是最小和最快的基于浏览器的应用。

本章将重点介绍如何使用 PhoneGap 为手机开发一个 GWT 应用。这些步骤基于 Daniel Kurka 开发的 GWT PhoneGap 库。你可以从[code.google.com/p/gwt-phonegap/](http://code.google.com/p/gwt-phonegap/).下载这个库

如何开发基于 GWT 的应用的知识是必不可少的。如果你是 GWT 应用的新手，你可以访问[code.google.com/webtoolkit/doc/latest/tutorial/index.html](http://code.google.com/webtoolkit/doc/latest/tutorial/index.html)来了解更多关于 GWT 的信息。

为什么使用 GWT 进行用户界面开发？

在我们开始讨论如何一起使用 GWT 和 PhoneGap 之前，让我们首先考虑一下为什么 GWT 是用户界面开发的最佳选择:

GWT 允许开发人员编写基于浏览器的应用，而不必担心跨浏览器问题、JavaScript 中的内存泄漏以及 JavaScript 语言本身。

GWT 允许开发人员用 Java 编写代码，并将用 Java 编写的用户界面和业务逻辑编译成 JavaScript。

GWT 还允许您使用诸如延迟绑定之类的概念(这就像 JavaScript 世界的运行时多态性)。这种方法允许开发人员创建一个应用，该应用可以使用不同的类为移动浏览器提供服务，并使用另一组类为桌面浏览器提供服务。

GWT 确保您可以创建最小和最快的 JavaScripts。

GWT 是一项被许多公司和大部分开发者社区广泛接受的技术。GWT 正在成为大型、复杂的基于 Ajax 的应用的事实上的选择。

除了上述优势，许多轻量级、现成的小部件对于 GWT 来说都是现成的。此外，还有专业的 GWT 库，像 EXT-GWT 和 Smart-GWT，它们使用户界面看起来非常专业和完美。想象一下，您的 Java 开发人员使用他们现有的 Java 技能，按照最佳设计实践轻松编写基于浏览器的应用。GWT 消除了编写基于浏览器的应用的痛苦，同时提供了最好的浏览器应用。

了解 GWT PhoneGap

GWT 提供了一个名为 JavaScript Native Interface (JSNI)的机制，它允许 GWT 包装现有的 JavaScript 库。这种能力允许开发人员用 Java 编写代码，而不必担心底层 JavaScript 函数是如何被调用的。

GWT PhoneGap 是 PhoneGap 库的 GWT 包装器。下一节将演示如何使用 GWT PhoneGap 编写一个 helloworld 应用。

构建 PhoneGap GWT 应用

构建 GWT PhoneGap 应用有两个主要步骤。第一步是建立一个 GWT 项目。一旦您构建了 GWT 项目，开发人员将编译 GWT 项目来创建一个 web 应用(一组 HTMLs 和 JavaScripts)。

第二步是构建一个 Android PhoneGap 应用(使用 PhoneGap 的 0.9.4 版本),并将 GWT web 应用嵌入 PhoneGap 应用中。

构建 GWT 应用

在构建 GWT 应用之前，您需要以下工具:

JDK 1.6 以上

日蚀 3.6 太阳神

Eclipse Google 插件

PhoneGap 0.9.4 库

GWT PhoneGap 0.8 版本库

用于测试的 Chrome 浏览器 12+版本

创建一个新的 web 应用项目(Google web application ),并在向导中填入如图图 6–1 所示的值。您需要选中“使用谷歌网络工具包”，取消选中“使用谷歌应用引擎”

图 6–1。 创建 GWT 项目

为项目创建一个名为“lib”的文件夹。从[code.google.com/p/gwt-phonegap/downloads/detail?name=gwt-phonegap-0.8.jar](http://code.google.com/p/gwt-phonegap/downloads/detail?name=gwt-phonegap-0.8.jar)下载 GWT-PhoneGap 库，并将其复制到应用的 lib 文件夹中。将 gwt-phonegap-0.8.jar 添加到类路径中，方法是右键单击 jar，然后单击“构建路径”——>“添加到构建路径”

现在打开 PhoneGap _ GWT _ hello world . gwt . XML 文件。在该文件中，添加以下条目:

请注意，通过将 user.agent 的 set-property 添加到 safari，GWT 将只为基于 webkit 的浏览器生成 JavaScript。Chrome 浏览器将专门用于这种情况下的测试。

您的 PhoneGap _ GWT _ hello world . gwt . XML 文件现在应该如下所示:

`

`

现在打开 PhoneGap_GWT_Helloworld.html，位于项目的 war 文件夹中，并进行以下更改:

`

Gwt PhoneGap Demo

`

如果您计划在 Android 上运行这个示例，您应该在 phonegap _ gwt _ hello world/phonegap _ gwt _ hello world . no cache . js 标记之后添加以下内容:

现在，打开 src 文件夹中的 PhoneGap_GWT_Helloworld.java，并进行以下更改:

`package com.phonegap.example.gwt.helloworld.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.RootPanel;

/**

* Entry point classes define onModuleLoad().

*/

public class PhoneGap_GWT_Helloworld implements EntryPoint {

/**

* This is the entry point method.

*/

public void onModuleLoad() {

RootPanel.get().add(new Label("GWT PhoneGap Demo"));

}

}`

默认创建的 GWT 项目有一个用于客户端服务器通信的 RPC 组件，这个应用不需要它。因此，您可以从项目中移除以下条目:

客户包里的 GreetingService.java 和 GreetingServiceAsync.java

共享包和服务器包

web.xml 中的任何 servlets

现在，运行 GWT 项目(运行方式-> Web 应用)，您应该会看到如图图 6–2 所示的屏幕。请注意，这个示例将在浏览器中运行，以确保您的 GWT 项目设置正确。

图 6–2。 在 Chrome 浏览器中运行 GWT 项目

下一步是实际利用 PhoneGap API 将 GWT 项目编译成一个 web 应用。

PhoneGap GWT 库的一个好处是，当作为 GWT web 应用启动时，它模仿 PhoneGap 库。该库根据以下指令提供替代功能:

如果在 Android 或 iPhone 上运行，请使用 PhoneGap JavaScript。

否则，使用内部模拟类并给出虚拟值。

首先使用延迟绑定创建 PhoneGap 的对象:

PhoneGap PhoneGap = (PhoneGap)GWT.create(PhoneGap.class);

下一步是在 PhoneGap 框架中注册以下回调:

phonegavailablehandler:当一切正常并且 PhoneGap 被正确初始化时，这个回调就会发生。总之，这是一次成功的回调。

Phonegaptimeouthandler: 当 PhoneGap 没有在给定的时间限制内初始化时，会发生这个回调，可能是由于未能初始化 PhoneGap 框架。简而言之，这是一次失败回调。

最后，您必须通过调用PhoneGap.initializePhoneGap().来初始化 PhoneGap 框架。调用这个 API 将导致上面的一个回调。

主代码将被写成PhoneGapAvailableHandler回调，如下所示。使用 PhoneGap 变量是安全的，因为 PhoneGap 已经被正确初始化。在下面的代码中，您从 PhoneGap 获得设备的处理程序，然后在一个网格(2 列 5 行的表格)中打印设备信息值:

`Device device = phoneGap.getDevice();

Grid grid = new Grid(5, 2);

//Add a row mentioning Name Property of Device

grid.setWidget(0, 0, new Label("Name"));

grid.setWidget(0, 1, new Label(device.getName()));

//Add a row mentioning Platform Property of Device

grid.setWidget(1, 0, new Label("Platform"));

grid.setWidget(1, 1, new Label(device.getPlatform()));

//Add a row mentioning Version Property of Device

grid.setWidget(2, 0, new Label("Version"));

grid.setWidget(2, 1, new Label(device.getVersion()));

//Add a row mentioning Name Property of Device

grid.setWidget(3, 0, new Label("PhoneGapVersion"));

grid.setWidget(3, 1, new Label(device.getPhoneGapVersion()));

//Add a row mentioning Name Property of Device

grid.setWidget(4, 0, new Label("UUID"));

grid.setWidget(4, 1, new Label(device.getUuid()));

grid.setBorderWidth(1);

RootPanel.get().add(grid);`

以下是完整的示例:

`package com.phonegap.example.gwt.helloworld.client;

import com.google.gwt.core.client.EntryPoint;

import com.google.gwt.core.client.GWT;

import com.google.gwt.user.client.Window;

import com.google.gwt.user.client.ui.Grid;

import com.google.gwt.user.client.ui.Label;

import com.google.gwt.user.client.ui.RootPanel;

import de.kurka.phonegap.client.PhoneGap;

import de.kurka.phonegap.client.PhoneGapAvailableEvent;

import de.kurka.phonegap.client.PhoneGapAvailableHandler;

import de.kurka.phonegap.client.PhoneGapTimeoutEvent; import de.kurka.phonegap.client.PhoneGapTimeoutHandler;

import de.kurka.phonegap.client.device.Device;

/**

* Entry point classes define onModuleLoad().

*/

public class PhoneGap_GWT_Helloworld implements EntryPoint {

/**

* This is the entry point method.

*/

public void onModuleLoad() {

final PhoneGap phoneGap = GWT.create(PhoneGap.class);

phoneGap.addHandler(new PhoneGapAvailableHandler() {

public void onPhoneGapAvailable(PhoneGapAvailableEvent event) {

Device device = phoneGap.getDevice();

Grid grid = new Grid(5, 2);

//Add a row mentioning Name Property of Device

grid.setWidget(0, 0, new Label("Name"));

grid.setWidget(0, 1, new Label(device.getName()));

//Add a row mentioning Platform Property of Device

grid.setWidget(1, 0, new Label("Platform"));

grid.setWidget(1, 1, new Label(device.getPlatform()));

//Add a row mentioning Version Property of Device

grid.setWidget(2, 0, new Label("Version"));

grid.setWidget(2, 1, new Label(device.getVersion()));

//Add a row mentioning Name Property of Device

grid.setWidget(3, 0, new Label("PhoneGapVersion"));

grid.setWidget(3, 1, new Label(device.getPhoneGapVersion()));

//Add a row mentioning Name Property of Device

grid.setWidget(4, 0, new Label("UUID"));

grid.setWidget(4, 1, new Label(device.getUuid()));

grid.setBorderWidth(1);

RootPanel.get().add(grid);

}

});

phoneGap.addHandler(new PhoneGapTimeoutHandler() {

public void onPhoneGapTimeout(PhoneGapTimeoutEvent event) {

Window.alert("can not load phonegap");

}

});

phoneGap.initializePhoneGap();

}

}`

您可以使用“run as -> web application”从 Eclipse 运行这个示例，并在浏览器中查找代码。

您将看到图 6–3 中所示的表格。如上所述，当在浏览器中运行代码时，模拟值由 GWT PhoneGap 显示，而不是在 Android 或 iPhone 上。

图 6–3。 在 Chrome 浏览器中运行 GWT PhoneGap 项目

最后一步是将这个项目编译成 web 应用。右键单击项目，选择 Google 选项，然后单击名为“GWT 编译”的菜单选项您将看到如图图 6–4 所示的对话框。单击编译。

图 6–4。 GWT 编译屏幕

编译完成后，在 Eclipse 中刷新您的项目，您应该会看到如图 Figure 6–5 所示的目录结构。在 war 文件夹中，您应该会看到一个 phonegap_gwt_helloworld 文件夹，其中包含许多 HTML 和 JavaScript 文件，如下所示。

图 6–5。 GWT 战争目录结构 GWT 编译后

构建 PhoneGap Android 应用

构建 PhoneGap GWT 应用的最后一步是创建一个 Android PhoneGap 项目，如图 6–6 和图 6–7 所示，然后将 GWT 生成的 web 应用复制到 assets/www 文件夹中。

第一步是创建一个 Android 项目。

图 6–6。 Android 创建项目屏幕

图 6–7。 Android 创建项目屏幕

现在，将 PhoneGap 0.9.4 库注入 Android 项目。

从[phonegap.googlecode.com/files/phonegap-0.9.4.zip](http://phonegap.googlecode.com/files/phonegap-0.9.4.zip)下载 PhoneGap 0.9.4 库。撤消 zip 文件，您将看到如图图 6–8 所示的文件夹结构。

图 6–8。 PhoneGap 0.9.4 目录结构

在 Android 项目文件夹中创建一个 lib 文件夹，在 lib 文件夹中复制 PhoneGap.0.9.4.jar 文件，然后将其添加到 Eclipse 类路径中。(右键单击 jar 文件，转到“构建路径”，然后单击“添加到构建路径”)

下一步是在 assets 文件夹中创建一个 www 文件夹，并将 PhoneGap.0.9.4.js 文件复制到 www 文件夹中。然后，您需要将 GWT 项目中的以下文件复制到同一文件夹中:

PhoneGap_GWT_Helloworld.html

PhoneGap_Gwt_Helloworld.css

phonegap_gwt_helloworld 文件夹

您的文件夹结构现在应该类似于图 6–9 中的示例。编译项目时会生成名为“gwt”的文件夹中的文件。

图 6–9。 使用 Android 的 GWT PhoneGap 项目目录结构

现在您需要修改以下文件:

HelloWorld.java 文件

PhoneGap_GWT_Helloworld.html

此外，您需要检查 HelloWorld.java 文件是否类似于以下内容:

package com.phonegap.gwt.helloworld; import android.os.Bundle; import com.phonegap.DroidGap; public class HelloWorld extends DroidGap { /** Called when the activity is first created. */ @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); super.loadUrl("file:///android_asset/www/PhoneGap_GWT_Helloworld.html"); } }

在 PhoneGap_GWT_Helloworld.html 文件夹中，您需要进行一些代码更改。

首先添加 Android 版 PhoneGap JavaScript 库 0.9.4 版本，如下:

接下来，侦听 deviceready 事件，以确定 PhoneGap 库是否可以使用:

在此将 PhoneGap.available 变量显式设置为 true。这是 Android 平台的必经步骤。

以下是 PhoneGap_gWT_Helloworld.html 的完整源代码:

`

Gwt PhoneGap Demo

`

运行此代码后，仿真器上的屏幕应显示为图 6–10 中的示例。

图 6–10。GWT PhoneGap 应用显示设备信息

与上面的代码一样，您可以编写代码来访问其他 PhoneGap APIs，也可以编写一个通过 PhoneGap 访问本地电话功能的 GWT 应用。

GWT PhoneGap 参考

下面列出了 GWT PhoneGap 项目中使用的文档和源代码的链接。丹尼尔·库尔卡是这个图书馆的作者。

主页—[code.google.com/p/gwt-phonegap/](http://code.google.com/p/gwt-phonegap/)

入门—[code.google.com/p/gwt-phonegap/wiki/GettingStarted](http://code.google.com/p/gwt-phonegap/wiki/GettingStarted)

下载 jar-[gwt-phonegap.googlecode.com/files/gwt-phonegap-0.8.jar](http://gwt-phonegap.googlecode.com/files/gwt-phonegap-0.8.jar)

下载 Javadocs—[gwt-phonegap.googlecode.com/files/gwt-phonegap-0.8-javadoc.jar](http://gwt-phonegap.googlecode.com/files/gwt-phonegap-0.8-javadoc.jar)

源代码—[code.google.com/p/gwt-phonegap/source/browse/](http://code.google.com/p/gwt-phonegap/source/browse/)

当前功能-[code.google.com/p/gwt-phonegap/wiki/Features](http://code.google.com/p/gwt-phonegap/wiki/Features)

七、PhoneGap 模拟器和远程调试

简介

我在开发 PhoneGap 应用时经历的最大痛苦是以下循环:

开发一个 eclipse/xcode 或无关的 IDE

编译二进制可执行文件并将其放在设备/仿真器上

在设备/模拟器上测试 PhoneGap 应用

调整代码并从第 1 步开始重复

显然，这一循环非常耗时且令人沮丧。如果你是一个有经验的 JavaScript 开发人员，这对你来说将是一场噩梦。

JavaScript 开发人员习惯于在以下现代浏览器上使用便捷的工具:

火狐浏览器

旅行队

铬

微软公司出品的 web 浏览器

(注意，对于 iPhone 和 Android 开发，ie 浏览器没什么用。我们建议 iPhone 和 Android 开发使用 Firefox、Safari 或 Chrome。)

这些工具很少是开发人员的扩展。Firefox 有自己的 firebug，这是 javascript/html 调试工具系列的第一款，它不仅允许您调试页面元素(DOM 结构)，还允许您调试脚本、样式表和网络。它还允许您动态地更改这些内容，并立即进行测试。Chrome 和 Safari 自带开发工具。Internet Explorer 也不例外，它有自己的扩展来做类似的事情。

显然，我们在开发 PhoneGap 时需要类似的东西。这里列出我们的两个要求。我们需要以下内容:

使用 PhoneGap 模拟器在浏览器世界中创建和测试 PhoneGap 之外的应用的能力

一旦我们将 PhoneGap 应用部署在某个仿真器或设备上，就可以对其进行调试

本章我们将讨论如何使用 PhoneGap 模拟器和远程调试工具。

Chrome PhoneGap 模拟器–使用 Ripple

Ripple 是一个多平台移动平台模拟器，来自一家名为 tinyHippos 的公司。最近，这家公司被动态研究公司(RIM)收购。Ripple 出现的主要原因是为了减少当今移动 web 开发人员面临的挑战，这些挑战是由移动操作系统世界的巨大碎片化造成的。

Ripple 是一个 Chrome 扩展，提供以下模拟:

语音间隙

Webworks(来自黑莓)

web works-平板电脑-操作系统(来自黑莓)

移动网络

陆军妇女队

歌剧

沃达丰

出于本书的目的，我们将只关注 Ripple 的 PhoneGap 仿真。

安装波纹

Ripple 唯一的先决条件是你需要 Chrome 浏览器。任何支持扩展的版本都可以，不用担心安装哪个版本的 Chrome。但是，我们建议使用最新版本。

打开 Chrome 并访问网站—[ripple.tinyhippos.com](http://ripple.tinyhippos.com)/

您将看到如图图 7–1 所示的页面；你所需要做的就是点击“获取波纹”按钮。

图 7–1。 涟漪首页

这将带您进入图 7–2 中显示的页面。现在点击“安装”

图 7–2。安装 Ripple 作为 Chrome 扩展

正如我们之前提到的，Ripple 是 Chrome 的扩展。点击“安装”进入 Chrome 网上商店。当你点击“添加到 Chrome”时，扩展/插件实际上是从 Chrome 网络商店下载的，并自动安装在你的 Chrome 浏览器中(参见 Figure 7–3)。

图 7–3。 从 Chrome 网上商店安装 Ripple

一旦插件安装完毕，你会看到一个类似于图 7–3 所示的屏幕。

图 7–4。 在 Chrome 上安装波纹

为了验证插件已经正确安装，在 Chrome 中打开一个类似[www.google.com](http://www.google.com)的站点，右键点击页面。如果插件已经正确安装，您应该会看到一个“模拟器”启用/禁用选项。这在图 7–5 中进行了描述。

图 7–5。 在 Chrome 上右击选项打开波纹模拟器

继续点击“模拟器”并选择“启用”如果你看到图 7–6 中的屏幕，你的 Ripple 插件工作正常。要退出该屏幕，只需右击并选择仿真器- >禁用。

图 7–6。 第一次发射涟漪

为 PhoneGap 有效地使用 Chrome

在我们继续在 Chrome 上使用 Ripple 之前。让我们来了解一下 PhoneGap 如何有效地使用 Chrome。PhoneGap 与移动网络应用有相似之处，但在许多方面也有所不同。让我们列出两个主要的区别。

PhoneGap 应用是基于 HTML/JavaScript 的应用，但它们从不被托管。它们被捆绑为本地移动应用的一部分，显示在应用内部的嵌入式浏览器中。这类似于在 Chrome 上从磁盘测试 HTML/JavaScript 应用。Chrome 需要调整以支持从磁盘运行 html/javascript 应用。

PhoneGap 没有任何与之相关联的域名。这就是为什么他们不遵循单一原产地政策。如果您想为 PhoneGap 应用模拟不遵守单一来源策略，该应用由文件系统或本地 web 服务器托管，您需要调整 Chrome 以支持关闭单一来源策略。

为了从本地文件系统测试 PhoneGap 应用，并使其不遵循单一来源策略，您需要使用下面几段中讨论的命令行参数启动 Chrome。

Windows

在 Windows 中，创建一个名为 chrome.cmd 的. cmd 文件，并将以下脚本复制到该文件中。现在使用 chrome.cmd 启动 chrome。

**chrome.exe --disable-web-security** -–allow-file-access-from-files

Mac 和 Linux

在 Mac 上，创建一个名为 chrome.sh 的脚本，并将以下脚本复制到其中。现在用 chrome.sh 启动 chrome。

open "/Applications/Google Chrome.app" --args --disable-web-security -–allow-file-access-from-files

更改 chrome.sh 脚本的权限，使其可执行(需要运行脚本)。

$>chmod +x chrome.sh Run the script from terminal as follows: $>./chrome.sh

利用波纹

现在我们将了解如何使用 Ripple，以及在 Ripple 中运行 PhoneGap 应用需要做哪些更改。

以下是在 Ripple 中使用 PhoneGap 应用的先决条件:

该应用需要是一个没有插件的纯欧米茄应用。

您需要从所有 HTML 文件中删除对 PhoneGap JavaScript 的任何引用。

针对 Ripple 调整您的应用

让我们举一个来自第二章的代码例子。

我们将致力于指南针应用的例子。从这个 URL-[beginingphonegap.googlecode.com/files/compass.png](http://beginingphonegap.googlecode.com/files/compass.png)获取指南针图像。该图像显示在图 7–7 中。

图 7–7。PhoneGap 应用中使用的指南针图像

现在，让我们修改 index.html 文件，如下所示。请注意，我们已经删除了对 phonegap.js 的任何引用。这是目前使用 Ripple 的先决条件。Ripple 正在与 PhoneGap 合作，以消除这种变化。希望在即将发布的版本中，我们会看到这个需求消失。

`

PhoneGap

Compass

Compass Heading

....

Degrees

`

你的应用目录看起来会像图 7–8。它包含应用的所有 HTML、JavaScript 和 CSS 文件。

图 7–8。 指南针 App 的应用目录

用特殊标志启动 Chrome

下一步是用特殊的标志启动 Chrome(就像我们在本章前面开始的那样)。

Start Chrome with --disable-web-security -–allow-file-access-from-files flags.

Chrome 启动后，进入窗口->扩展，找到“Ripple Mobile Environment Emulator”扩展，启用“允许访问文件 URL”复选框(参见图 7–9)。

图 7–9。 允许访问文件的网址为波纹扩展名

在 Chrome 中加载应用

现在在 Chrome 中加载指南针应用。在右上角，您会看到波纹图标。点击该项目，为该应用启用 Ripple。这显示在图 7–10 中。

请注意，因为我们用上述标志启动了 Chrome，这就是 Chrome 能够从本地文件系统加载 HTML 文件的原因。此外，如果 PhoneGap 应用使用 Ajax 加载数据，它也可以在 Chrome 中工作，因为我们已经禁用了单一来源策略。

图 7–10。 在 Chrome 浏览器中加载指南针 app

启用纹波

第一次启用 Ripple 时，您会看到 Figure 7–11。我们需要选择 PhoneGap 选项。

图 7–11。 为指南针 app 启用纹波

玩波纹设置

现在我们已经启用了 Ripple，我们将看到网页已经改变。以前占据整个屏幕的应用现在看起来不同了。这是因为现在 Ripple 是主要应用。Ripple 在 iframe 中加载我们自己的应用，并注入自身来模拟 PhoneGap 环境。在主页上，Ripple 提供了许多控件来改变 PhoneGap 模拟的设备的状态和属性(参见图 7–12)。

图 7–12。Chrome 浏览器中加载的指南针应用启用了 Ripple

用纹波测试应用

测试中的应用是一个 compass 应用。为了测试该应用，我们将使用右下角红色标记的地理和指南针控件(参见图 7–12)。如果我们改变方向，这意味着我们正在模拟用户移动他/她的设备的罗盘方位。

正如您在图 7–13 中看到的，当我们改变航向时，我们可以看到罗盘图像围绕中心旋转。

图 7–13。 用 Ripple 模仿 PhoneGap 的 Compass api

模拟 PhoneGap 只是涟漪的一个角度。Ripple 允许开发人员使用常规的浏览器工具来调试和更改应用的 DOM 和 CSS。在图 7–14 中，我们右击图像并点击“检查元素”然后我们可以检查被检查的 DOM 元素的 css 样式，在我们的例子中是 html img。

图 7–14。 使用 Chrome 的开发者工具查看 HTML DOM 变化

远程调试—debug.phonegap.com

虽然使用 Ripple 来模拟、测试和调试 PhoneGap 应用是可行的，并且非常有帮助，但是没有什么比得上在实际的仿真器或设备上进行调试。

在实际的仿真器或设备上进行调试的问题是，用于显示 PhoneGap 应用的 webkit webview 非常孤立，无法从外部访问。与 Chrome、Firefox 或 Safari 相比，在这些浏览器中，用户可以检查 html 元素。但是在网络视图中运行的应用(HTML/Javascript)比如 PhoneGap 应用不能被检查。

这就是远程调试发挥作用的地方。参见图 7–15 更好地理解这个概念。基本思想是将调试 JavaScript 注入到我们的 PhoneGap 应用中。这打开了一个与 debug.phonegap.com 服务器的通道。然后开发人员在浏览器中打开 debug.phonegap.com 的并检查运行在设备/模拟器上的 PhoneGap 应用。

图 7–15。 远程调试架构

设置远程调试

进行远程调试的第一步是在浏览器中打开[debug.phonegap.com](http://debug.phonegap.com)。在这里你可以提供一个你自己的向导(就像我们一样)或者使用服务器随机分配的向导。

图 7–16。?? 使用debug.phonegap.com调试你的 PhoneGap 应用

在 PhoneGap 应用中注入远程调试

下一步是复制来自[debug.phonegap.com](http://debug.phonegap.com)的 JavaScript 片段，并将其注入到 PhoneGap 应用中。这在下面用下划线表示。

`

PhoneGap

Device Info

Device Name

PhoneGap Version

Mobile Platform

Platform Version

UUID

`

调试和修改 DOM 元素

下一步是在模拟器或设备上启动 PhoneGap 应用。当这个应用启动时，运行在其中的 JavaScript 将与 debug.phonegap.com 服务器通信。然后，我们将为远程调试做好准备(参见图 7–17)。

图 7–17。 在安卓模拟器中加载设备信息应用

最后一步是在浏览器中打开[debug.phonegap.com/client/#begining-phonegap](http://debug.phonegap.com/client/#begining-phonegap)(参见图 7–18)。请记住，我们是从[debug.phonegap.com](http://debug.phonegap.com)网站获得这个 URL 的。

图 7–18。 日志消息显示一个 Android 应用连接到了debug.phonegap.com

现在移动到元素选项卡(参见图 7–19)。在这里，您将能够在 PhoneGap 应用中看到页面的 DOM 元素。

图 7–19。 在上检查 DOM

乐趣不止于此。现在您可以更改 DOM 元素(参见 Figure 7–20)。为此，双击任何 DOM 元素(在我们的例子中是 TD)并手动输入样式部分。在我们的例子中，我们将向包含 0.9.5 文本的 td 添加一个样式“style='background:red '”。现在，我们将切换到运行在模拟器中的 PhoneGap 应用，以查看即将生效的更改。

图 7–20。 在【http://debug.phonegap.com】上改变一个 DOM 属性

现在，包含“0.9.5”的 TD 元素的背景色变为红色(参见图 7–21)。这种调试帮助我们在设备/仿真器上实时调试应用。

图 7–21。 对[debug.phonegap.com](http://debug.phonegap.com)所做的更改反映在一个 Android 模拟器上

与debug.phonegap.com的问题

到目前为止，我们已经看到[debug.phonegap.com](http://debug.phonegap.com)的使用在检查真实设备或仿真器内部运行的内容时非常有用。但是，我们不想使用它，原因如下:

在开发过程中，我们不想使用外部服务器。

我们希望节省带宽并提高调试速度。

注:A Weinre(web Inspectorremote)服务器 powerdebug.phonegap.com。PhoneGap 的人也开发了 Weinre，他们已经很好地记录了它。

安装当地debug.phonegap.com

虽然 Weinre 的安装和部署超出了本书的范围，但是我将以链接的形式给出一些关于如何在本地部署 Weinre 的说明。

Weinre 的文档非常好，如果您遵循它，在本地安装和使用 Weinre 应该没有问题。

访问[phonegap.github.com/weinre/Installing.htm](http://phonegap.github.com/weinre/Installing.htm) l 获取安装文件(参见图 7–22)。

图 7–22。 关于如何安装 Weinre 的说明

访问[phonegap.github.com/weinre/Running.html](http://phonegap.github.com/weinre/Running.html)获取如何运行的说明(参见图 7–23)。

图 7–23。 关于如何运行的说明

结论

当开发 PhoneGap 应用时，使用 iPhone/Android 模拟器来测试代码是非常耗时和令人沮丧的。为了节省时间和精力并简化开发，请使用 Ripple PhoneGap 模拟器。充分利用 Chrome 的开发者工具，加速你的开发。对于远程调试，使用[debug.phonegap.com](http://debug.phonegap.com)或本地安装的 Weinre 服务器。这有助于您了解当应用在 iPhone/Android 模拟器或实际设备上运行时，HTML DOM 实际上发生了什么。

八、使用 PhoneGap 插件

PhoneGap 附带了一组 JavaScript APIs，用于访问原生电话功能，如摄像头、存储、联系人、地理定位等。，构建跨移动应用。如果您想做 PhoneGap API 中没有的事情，您可以利用 PhoneGap 插件。

在任何技术中，重用已经可用并经过测试的特性都是常见的做法。PhoneGap 有很多重要的第三方插件。例如，访问脸书的认证机制、访问用于移动推送通知的第三方服务等。

什么是 PhoneGap 插件？

PhoneGap 插件是 PhoneGap 功能的扩展。它访问手机上的一项功能。插件功能可能只能访问手机的本机功能，也可能提供访问云服务的功能。

任何 PhoneGap 插件都至少包含两个文件:

JavaScript 文件

本地语言文件

插件的 JavaScript 文件是 PhoneGap 应用和 PhoneGap 插件之间的接口。JavaScript 文件使用 JavaScript 函数来访问插件的功能。

PhoneGap 框架使用本地语言文件来与电话交互以访问本地功能。作为插件用户，我们需要将本机代码放入我们的项目结构中。在下一节中，我们将详细研究如何使用这个插件来设置项目。

脸书认证并抓取好友

让我们利用 PhoneGap 插件构建一个小应用，登录到脸书并从脸书获取朋友的信息。

我们的 PhoneGap 应用将使用脸书本地应用通过脸书-PhoneGap 插件为用户执行单点登录(SSO)。

为 Android 设置环境

首先，我们需要为 Android 建立 PhoneGap 项目。请参考第二章为 Android 设置您的项目。一个 Android 项目配置如图图 8–1 所示。

图 8–1。 Eclipse Android 项目配置

从[github.com/davejohnson/phonegap-plugin-facebook-connect/downloads](https://github.com/davejohnson/phonegap-plugin-facebook-connect/downloads)下载脸书连接插件。

脸书连接插件是一个 zip 文件。解压到你喜欢的文件夹里。文件夹结构应类似于图 8–2。

图 8–2。 脸书-连接插件文件夹结构

接下来，您需要执行以下安装步骤:

Register Facebook Plug-in

在 plugins.xml 文件中添加以下 XML 元素作为“plugins”元素的子元素，如 Figure 8–3 所示。您可能需要使用以下命令在 res 文件夹中创建一个 xml 文件夹:

图 8–3。 脸书外挂注册

Include the native part of the plug-in into the project. Copy the libs and src folder from a Facebook-connect-plug-in folder as shown in Figure 8–4 and paste it into the root of our PhoneGap application, i.e., “FaceBookPluginExample”.

图 8–4。 脸书-连接-安卓插件原生文件夹

在项目中包含插件的 JavaScript 部分

有两个 JavaScript 文件需要包含在我们来自脸书的项目中——连接插件。

/www/pg-plugin-fb-connect.js

pg-plugin-fb-connect.js文件在脸书插件的 www 文件夹下。将其复制并粘贴到我们项目的 assets/www 文件夹中。

/lib/facebook_js_sdk.js

facebook_js_sdk.js文件在脸书插件的 lib 文件夹下。将其复制并粘贴到我们项目的 assets/www 文件夹中。

一旦你完成了这三个步骤，你将会看到如图图 8–5 所示的 FaceBookPluginExample 项目结构。

图 8–5。 FaceBookPluginExample 项目结构

初始化脸书连接插件

第一步是确保 index.html 有一个脸书连接库，PhoneGap 库，并且是 CSS 链接的。请注意，我们包含了以下 JavaScript 文件。

JavaScript 语音间隙

脸书插件 JavaScript

脸书 SDK JavaScript

`

` `

`

现在，我们将在 index.html 页面中定义 JavaScript 函数，以登录到脸书并获取好友列表。以下是登录函数的代码片段:

function login() { FB.login(function(response) {…}, { perms: "email" } ); }

login()函数调用脸书 SDK 的登录函数 FB.login()。脸书的 FB.login()有两个参数。第一个是回调 JavaScript 函数，第二个是 JSON 对象，用于指定权限。我们将' function(response){…} '和' { perms: "email" } '传递到 FB.login()。脸书的 FB.login()提示用户登录。成功登录后，它调用回调 JavaScript 函数。回调函数获取“响应”对象来标识登录状态。“perms”用于指定用户权限。你可以在脸书开发者网站上找到更多关于脸书登录 API 和用户权限的细节，网址是 http://developers . Facebook . com/docs/reference/API/permissions。

接下来，我们将看到用于获取好友列表的代码片段。为此，我们将创建一个 JavaScript 函数 getFriendList()。

function getFriendList(){ FB.api('/me/friends', function(response) { if (response.error) { alert(JSON.stringify(response.error)); } else { var friends = document.getElementById('friends'); response.data.forEach(function(item) { var d = document.createElement('div'); d.innerHTML = item.name; data.appendChild(d); }); } }); }

在 getFriendList()函数中，调用了脸书 API FB.api()。第一个参数是脸书提供的图形 API 的路径。在我们的示例中，'/me/friends '用于获取登录用户的朋友列表。第二个参数是接收响应的 JavaScript 回调函数。回调方法中执行以下操作:

使用“response.error”检查响应状态是否成功

如果响应成功，那么 response 中可用的结果数据将被迭代。

为每个项目创建“div”元素，并将其附加到在 index.html 定义的“friends”div 中

接下来，我们将修改 login()函数，以便在成功登录时调用 getFriendList()。

function login() { FB.login( function(response) { if (response.session) { getFriendList(); } else { alert('not logged in'); } }, { perms: "email" } ); }

这里我们检查“response.session”值的成功响应。如果它是有效的，我们就调用 getFriendList()函数。

现在，最后一步是在 PhoneGap 的初始化事件中使用 JavaScript 函数。

document.addEventListener('deviceready', function() { try { /* Initialize the Facebook plug-in. Note that you need to replace the by your Facebook's app_id */ FB.init({ appId: "", nativeInterface:PG.FB }); document.getElementById('data').innerHTML = ""; login(); } catch (e) { alert(e); } }, false);

最后，要运行应用，您需要将脸书的 app_secret 密钥放入 AndroidManifest.xml 文件，如 Figure 8–6 所示。

图 8–6。 脸书 app _ 秘钥

您可以从脸书开发者网站[developers.facebook.com/apps](https://developers.facebook.com/apps).获取脸书应用 id 和应用密码。

在模拟器上将 FacebookPluginExample 作为 Android 应用运行。第一个屏幕将显示脸书登录页面，如图 8–7 所示。

图 8–7。 脸书登录界面

成功登录后，您将看到您的好友列表，如 Figure 8–8 所示。

图 8–8。脸书好友列表

您可以使用 jQueryMobile 或 Sencha Touch 以及脸书 PhoneGap 插件来开发一个有吸引力的脸书应用。此外，您可以通过使用脸书插件调用其他脸书图形 API 来添加更多功能。

C2DM 插件，用于向 PhoneGap 发送移动推送通知

推送通知或服务器推送是从服务器向客户端发送数据的最新方式。您是否注意到 Gmail 是如何接收和显示您收件箱中的新邮件的？你不需要刷新浏览器或者点击一些刷新按钮来发送请求和从服务器接收最新的数据。

最近，轮询是接收通知的一种流行技术。轮询技术定期向服务器发送请求，并用收到的响应刷新 UI。您可以将它视为一个后台进程，它以特定的预定义间隔发送请求，并从服务器接收更新或通知。这种方法有许多已知的缺点。轮询方法的主要缺点是识别合适的间隔来发送请求。如果间隔更短，可能会有不必要的请求和响应行程，从而导致带宽和服务器资源的损失。更长的时间间隔可能达不到轮询的目的，因为在接收通知时可能会有延迟，并且它不再符合发送通知的目的。如果没有新数据可用，这种方法会消耗移动电话的电池。

服务器推送允许服务器向客户端发送通知或更新，而无需等待请求。在推送技术中，客户端没有任何后台进程来发出定期请求。在服务器有更新的任何时候，它都可以将更新推送到所有注册的客户端。如果客户端是一个移动应用，这种技术被称为移动推送。

您的 PhoneGap 应用也可以通过 PhoneGap 插件利用移动推送技术。让我们为 Android 平台创建一个小的 PhoneGap 应用来接收来自 C2DM 服务的推送通知。

为 Android 设置环境

首先，我们需要为 Android 设置 PhoneGap 项目。参考第二章为 Android 设置您的项目。一个 Android 项目配置如图图 8–9 所示。

图 8–9。 Eclipse Android 项目配置

我们将使用 Android 云到设备消息(C2DM)框架进行推送通知。你可以在[code.google.com/android/c2dm/#intro](http://code.google.com/android/c2dm/#intro)了解更多关于 C2DM 服务的信息。

从[github.com/awysocki/C2DM-PhoneGap/downloads](http://github.com/awysocki/C2DM-PhoneGap/downloads)下载 C2DM PhoneGap 插件。C2DM-PhoneGap 插件是一个 zip 文件。解压到你喜欢的文件夹里。文件夹结构应该类似于图 8–10 中的列表。

图 8-10。C2DM-插件文件夹结构

接下来，您需要执行以下安装步骤:

Register C2DMPlug-in

在 plugins.xml 文件中添加以下 XML 元素作为“plugins”元素的子元素，如 Figure 8–11 所示。您可能需要在“res”文件夹下创建一个 xml 文件夹，并从 PhoneGap Android 示例应用中复制 plugins.xml。

图 8–11。 插件注册

Include the native part of the plug-in into the project

从 C2DM-plug-in 文件夹中复制 src 文件夹，如图 8–12 所示，并将其粘贴到我们的 PhoneGap 应用的根目录中，即“MobilePushPluginExample”。

图 8–12。C2DM-插件原生部分

Include the JavaScript part of the plug-in into the project

如 Figure 8–13 所示，从 C2DM-plug-in 文件夹中复制以下文件，并将其粘贴到我们应用的 assets 文件夹中。

C2DMPlugin.js

jquery_1.5.2 最小 js

PG_C2DM_script.js

index.html

注意，即使 index.html 不是插件的一部分，我们也在项目中使用它来节省创建和包含 js 文件的时间。

图 8–13。 JavaScript 部分插件

注意，我们没有包括 Phonegap.0.9.5.js 文件，因为我们使用的是 PhoneGap-1.1.0。我们将对 PhoneGap-1.1.0 进行必要的修改。

最后，我们需要在 AndroidManifest.xml 文件中添加 C2DM 所需的权限。清单文件应该类似于下面的列表:

`

`

完成前三个步骤后，您将看到 MobilePushPluginExample 项目结构，如图 Figure 8–14 所示。

图 8–14。 MobilePushPluginExample 项目结构

修改 PhoneGap 插件-1.1.0

在写这本书的时候，一个 C2DM 插件是基于 PhoneGap 版本 0.9.5 的。要在 PhoneGap-1.1.0 中使用它，我们必须完成一些修改。

C2DMPlugin.jsfiles.

打开 C2DMPlugin.js 并转到以下函数定义:

`PhoneGap.addConstructor(function() {

//Register the javascript plugin with PhoneGap

PhoneGap.addPlugin('C2DM', new C2DM());

//Register the native class of plugin with PhoneGap

PluginManager.addService("C2DMPlugin",

"com.plugin.C2DM.C2DMPlugin");

//alert( "added Service C2DMPlugin");

});`

删除以下行:

//Register the native class of plugin with PhoneGap PluginManager.addService("C2DMPlugin","com.plugin.C2DM.C2DMPlugin");

在 PhoneGap-1.1.0 中，插件必须在 plugin.xml 文件中注册。PhoneGap-1.1.0 中不再提供 PluginManager。我们已经在 plugin.xml 文件中注册了 C2DM-plugin。

现在，修改后的函数如下所示:

`PhoneGap.addConstructor(function() {

//Register the javascript plugin with PhoneGap

PhoneGap.addPlugin('C2DM', new C2DM());

//alert( "added Service C2DMPlugin");

});`

Move C2DMReceiver.java

我们必须将 C2DMReceiver.java 从 com.phonegap.c2dm 包中移到我们的应用项目中，即 org . examples . mobile push plugin . example，为此，将 C2DMReceiver.java 从 com.phonegap.c2dm 包中拖放到 org . examples . mobile push plugin . example 中，如 Figure 8–15 所示。

图 8-15。C2DMReceiver.java所在地

我们还必须修改 index.html 文件中的 PhoneGap 版本，因为我们是从插件文件夹中复制的。为此，在脚本标记中用 phonegap-1.1.0 替换 phonegap.0.9.5.js。

注册 C2DM 服务

前往[code.google.com/android/c2dm/signup](http://code.google.com/android/c2dm/signup)并填写表格以注册发送者。你必须提到 Android 应用的包名和发件人帐户电子邮件以及其他信息。对于我们的应用，包名应该是“org . examples . mobilepushplugin . example ”,我们应该使用 Google 帐户作为发件人帐户电子邮件。我们必须在 PhoneGap 应用中使用发件人帐户电子邮件 id 来注册接收通知的设备。

在 PhoneGap 中使用 C2DM 发送者帐户

C2DM 插件附带了现成的 PhoneGap deviceready 实现。我们必须使用我们的 C2DM 发送者帐户来注册通知设备。

打开 PG_C2DM_script.js 文件，转到 PhoneGap deviceready 事件实现。将“your_c2dm_account@gmail.com”修改为我们的 c2dm 发件人帐户，如图 8–16 所示。

图 8–16。 向 C2DM 发送方帐户注册应用

支持 C2DM 服务的 Android 模拟器

您需要使用目标为“Google API(Google Inc .)-API Level 8”的 AVD (Android 虚拟设备)来运行支持 C2DM 的 Android 应用。请参考第二章从“Android SDK 和 AVD 管理器”创建新的 AVD。

你还必须在模拟器中添加你的谷歌账户。为此，运行模拟器并打开设置，如图 8–17 所示。

图 8–17。 安卓设置选项

转到“帐户和同步”并点击添加帐户。你必须输入你的谷歌帐号和密码。注意，它不是 C2DM 发送者帐户。这是你的谷歌账户，你用它来从你的安卓手机中检索你的电子邮件和其他东西。

现在您已经准备好测试 C2DM 插件了。将 MobilePushPluginExample 作为 Android 应用运行。确保目标模拟器是 Google API 的模拟器。您将在模拟器上看到图 8–18 所示的屏幕。

图 8–18。??【模拟器上的 mobilepushpluginsampleoutput】??

为了理解屏幕上出现的输出，我们将查看 PG_C2DM_script.js 文件中的 devicereadyevent 回调函数。

这里，window.plugins.C2DM.register()调用插件的方法将设备或模拟器注册到 C2DM 服务中。注册成功后，C2DM 服务器返回注册 Id (REGID)。该 REGID 用于推送通知消息。但是等等，我们的设备不应该推送信息。它是一个通知接收器，对吗？在这里，我们必须理解在手机上运行的 PhoneGap 应用和在 Google 上托管的 C2DM 服务之间的应用服务器的角色。

我们用一个例子来了解一下 C2DM 推送的工作原理。假设 MobilePushPluginExample 安装在多部 Android 手机上。现在，每部手机都从 C2DM 服务接收 REGID。本质上，每个 REGID 都是唯一的。在发送 REGID 之前，C2DM 服务存储关于设备和网络的所有必需信息，以便在发送通知时进一步使用。C2DM 向设备发送通知。现在，中间的应用服务器负责识别更新的数据，并要求 C2DM 向实际的移动设备发送通知。为此，我们的服务器必须知道 REGIDs。

通常，支持 C2DM 的移动应用会将 REGID 发送到我们的服务器。服务器存储运行该应用的所有手机的注册 id。一旦服务器决定发送通知，它就使用 REGID 来请求 C2DM 服务这样做。

我们从 C2DM 服务收到了 REGID，这可以在图 8–18 中看到。现在，您可以使用这个 REGID 发送推送通知。您可以使用 Java servlet 或 php 创建服务器端代码来发送消息。要了解有关如何发送推送通知的更多信息，请访问 Android C2DM 网站:[code.google.com/android/c2dm/index.html#push](http://code.google.com/android/c2dm/index.html#push)。

此外，还有一个命令行工具可用于模拟服务器。转到[curl.haxx.se/download.html](http://curl.haxx.se/download.html)并下载特定于平台的 curl 工具。发送通知有两个步骤:

Get the authentication key

在控制台上运行以下命令:

D:\cURL>curl https://www.google.com/accounts/ClientLogin -d Email=-d "Passwd=" -d accountType=GOOGLE -d source=org.examples. mobilepushplugin.example -d service=ac2dm –k

你必须用你注册的谷歌账号和密码替换和。

运行以上命令后，您将获得类似于以下清单的身份验证密钥:

Auth=DQAAAMEAAABrqkqH2KYjDfCD93tndEF7n81lKgf5vczCwELPSXgW6xm_9EACDu0lsJFGud7fNBI HcRV1Q6zUmLwxFFJqosdn1nYYmGah0yu7fpT8vfjNLAVx8hs5aymz9OULg-pzKOyWWa1-6BDci1TBCoP 2q6ZwJqEjzH6rArHSlD9DhruEKBrogjfBAWyeIm2fs9THvEkilSMO2Q8utoqyfG0id9keCQad5QPV7oO vNSe6urKOV4ZWEKxG7KAlXCsjW18u_m2Az6jj7DlUoVD89MeLvX0W

Send the message to your application running on a simulator

要发送通知，我们将使用身份验证密钥，并通过以下 curl 命令注册:

S:\cURL>curl --header "Authorization: GoogleLoginauth=" "https://android.apis.google.com/c2dm/send" -d registration_id=-d “data.message=This is a test message" -d "data.msgcnt=1" -d collapse_key=0 –k

将替换为从步骤 1 接收的认证密钥，并由模拟器上的应用接收 REGID。我们正在向模拟器发送“这是测试消息”文本作为推送通知。

我们将在模拟器上看到我们的应用收到的通知，如图 8–19 所示。

图 8–19。 模拟器上的推送消息

如果您想利用 iPhone-PhoneGap 应用的推送通知服务，您可以使用 PhoneGap 插件，该插件位于:[github.com/urbanairship/ios-phonegap-plugin](https://github.com/urbanairship/ios-phonegap-plugin)。它使用城市飞艇服务来推送移动通知。

结论

PhoneGap 插件动态地扩展 PhoneGap 应用，使其包含越界特性。通过使用插件，PhoneGap 应用几乎可以使用任何本机功能。

插件是 PhoneGap 的好朋友，但社区对插件的支持还处于早期阶段。与此同时，PhoneGap 背后的组织正在使流行的插件成为官方的。然而，插件支持还远远不够完善。这方面的一个例子是尝试为 iPhone 编写一个脸书连接应用。当我们试图在 PhoneGap 1.1.0 中使用这个插件时，我们发现它不起作用。我们还发现包含这个插件非常麻烦。我们猜测，对于即将发布的 PhoneGap 来说，对插件的支持将会得到改善，插件将更容易捆绑并在 PhoneGap 应用中使用。

在本章中，我们只讨论了用于脸书连接和云推送的 Android PhoneGap 插件。出于同样的原因，我们添加了关于 iPhone 插件的指针，这些插件需要改进，才能方便有效地使用。

九、扩展 PhoneGap

到目前为止，我们已经看到 PhoneGap 有两个部分

我们从 PhoneGap 应用中调用的 JavaScript 部分

我们在 PhoneGap 项目中包含的一个本机部分，用于公开本机电话功能。

这两个部分适用于我们希望访问常见电话功能的情况，包括以下内容:

照相机

加速计

文件系统

地理位置

存储服务

然而，我们经常需要超越这些特性。

JavaScript 限制

我们已经看到 JavaScript 在过去十年中性能有所提高；它比五年前快了 100 倍。然而，即使这是真的，有时应用需要做大量的照明，在后台做事情，或者做复杂的操作。出于性能原因，这些最好在本机代码中完成。

例如，如果我们想下载一个多部分文件，它涉及到并行下载文件的不同部分，然后检查其校验和。这一部分最好用 Java 为 Android 编写，用 Objective-C 为 iPhone 编写。

解

如果你还记得第一章的话，我们说过 PhoneGap 是 JavaScript 世界和本地世界之间的桥梁。整个 PhoneGap 框架是基于插件架构的。这意味着 PhoneGap 提供了一种将 JavaScript 函数(以及参数、返回类型和回调)映射到本机代码的机制。

我们可以向 PhoneGap 应用添加本机代码，并使用 JavaScript 轻松公开代码。为此，我们需要两部分

完成繁重工作的本机代码

公开此本机代码的 JavaScript 代码

两者都被 PhoneGap 框架粘合在一起。

建筑

PhoneGap 架构如图 9–1 所示。正如我们所观察到的，PhoneGap 有两个部分:PhoneGap JavaScript 引擎和 PhoneGap 原生引擎。我们将本机代码作为插件添加到 PhoneGap 本机引擎，并将 JavaScript 代码作为插件添加到 PhoneGap JavaScript 引擎。

图 9–1。 PhoneGap 架构

范围

本章重点介绍如何扩展 PhoneGap 功能，以暴露更多的本机代码。

但是，请注意，即使您编写了 PhoneGap 插件，注入插件的唯一方法是将插件源代码添加到您的项目中。目前还没有办法将插件构建到包中，并将包添加到 PhoneGap 项目中。当您使用 PhoneGap build 时，这会阻止您使用自定义插件。

对于这一章，让我们保持插件的本质非常简单。我们称之为 helloworld 插件。我们向插件传递一个名称，然后我们得到一个字符串“Hello ！现在的时间是”。

这样，我们主要关注插件的桥方面。

为 Android 扩展 PhoneGap

首先，我们将插件创建为 Android PhoneGap 应用的一部分，然后将插件提取出来。这是必需的，因为

该插件需要 PhoneGap jar。

我们需要测试插件。

一个插件有两个部分，PhoneGap 框架(桥)的两边各有一个。我们有一个原生部分(一个类扩展插件)和一个使用 PhoneGap 的 JavaScript 框架的 JavaScript 文件。

在我们开始之前，让我们创建一个 Android PhoneGap 项目(参见图 9-2)。第二章中有说明。

图 9–2。 新安卓项目

然后我们需要为 PhoneGap 配置基本的 Android 项目。

更改 MainScreen 类以扩展 DroidGap。

将 PhoneGap jar 添加到类路径中。

将 PhoneGap JavaScript 库添加到 assets/www 文件夹。

Android 项目看起来如图 9–3 所示。

图 9–3。 安卓项目结构

声明插件的本机部分

现在我们为插件添加一个合适的包，比如“org.examples.phonegap..plugins.simpleplugin”然后我们声明一个名为 Simple Plug-in 的类，它扩展了 PhoneGap 的 com.phonegap.api.Plugin 类，如图 Figure 9–4 所示。

图 9–4。 声明插件的原生部分

一旦你点击“完成”按钮，你将得到如下所示的代码

`package org.examples.phonegap.plugins.simpleplugin;

import org.json.JSONArray;

import com.phonegap.api.Plugin;

import com.phonegap.api.PluginResult;

/**

* @author rohit

*

*/

public class SimplePlugin extends Plugin {

/* (non-Javadoc) * @see com.phonegap.api.Plugin#execute(java.lang.String, org.json.JSONArray,

java.lang.String)

*/

@Override

public PluginResult execute(String action, JSONArray data, String callbackId) {

// TODO Auto-generated method stub

return null;

}

}`

当我们扩展com.phonegap.api.Plugin类时，我们必须实现 execute 方法。execute 方法的参数是

动作:要执行的动作。例如，对于基于文件的插件，可以是打开、关闭、读取、写入等。

数据:插件 JavaScript 端传过来的数据。这是从 PhoneGap 的 JavaScript 应用传递到本机代码的数据。例如，对于基于文件的插件，可以是文件名、数据等。

CallbackId :回调 JavaScript 函数时使用。

execute 方法的返回类型是 PluginResult。PluginResult 通常接受一个状态枚举和一个描述原因或更多信息的其他参数。

例如，新的 PluginResult(状态。OK)；

状态枚举有许多值；所有这些都描述如下(名称不言自明)

没有结果

好

类未找到异常

非法访问异常

实例化 _ 异常

格式错误 _URL_EXCEPTION

io _ exception(io _ 异常错误)

无效 _ 操作

JSON _ exception(JSON _ 异常)

错误

下面是 hello 插件的实现，它接受一个名称并返回“Hello ！时间是文本。

`package org.examples.phonegap.plugins.simpleplugin;

import java.util.Date;

import org.json.JSONArray;

import org.json.JSONException;

import com.phonegap.api.Plugin;

import com.phonegap.api.PluginResult;

import com.phonegap.api.PluginResult.Status;

/**

* @author rohit

*

*/

public class SimplePlugin extends Plugin {

public static String ACTION_HELLO="hello";

/*

* (non-Javadoc)

*

* @see com.phonegap.api.Plugin#execute(java.lang.String,

* org.json.JSONArray, java.lang.String)

*/

@Override

public PluginResult execute(String action, JSONArray data, String callbackId) {

PluginResult pluginResult = null;

if (ACTION_HELLO.equals(action)) {

String name = null;

try {

name = data.getString(0);

String result = "Hello " + name + "! The time is "

+ (new Date()).toString();

pluginResult = new PluginResult(Status.OK, result);

return pluginResult;

} catch (JSONException e) {

pluginResult = new PluginResult(Status.JSON_EXCEPTION,

"missing argument name");

}

} else {

pluginResult = new PluginResult(Status.INVALID_

ACTION,

"Allowed actions is hello");

}

return pluginResult;

}

}`

您可以在上面的代码中看到，在处理请求之前，我们显式地检查了一个操作。如果动作不是由插件处理的，我们返回Status.INVALID_ACTION。第二个检查是针对参数的。如果我们在获取第一个字符串参数时得到任何 JSON 异常，我们返回Status.INVALID_JSON。当动作和参数正确时，我们创建一个字符串“Hello < name >！时间是<时间>，用Status.OK返回。

请注意，您不必从这个方法中产生任何线程。您的整个方法可以是同步的。这将不会传递调用该代码的 JavaScript 插件调用。这是由 PhoneGap 内部处理的，这就是为什么我们在 JavaScript 中有成功和失败回调(您将在下一节看到)。

声明插件的 JavaScript 部分

这个插件的 JavaScript 部分是在一个名为 simpleplugin.js 的文件中声明的。

Plug-in Registration

在 PhoneGap 插件的 JavaScript 部分，事情是从调用在 PhoneGap 中添加插件开始的。

PhoneGap.addConstructor(**function**() { // Register the Javascript plug-in with PhoneGap PhoneGap.addPlugin('SimplePlugin', **new** SimplePlugin()); });

插件在/res/xml/plugins.xml 文件中注册。将以下 XML 元素添加为 plugins.xml 文件中“plugins”元素的子元素:

注意:这里我们做了两件事

将 JavaScript 对象注册为名为“SimplePlugin”的插件

将 PhoneGap Java 类注册为名为“SimplePlugin”的服务您可以将此视为类名“org.examples.phonegap.plugins.simpleplugin.Simple Plugin.”的别名

Create the JavaScript object SimplePlugin.

这是通过声明一个 JavaScript 函数来完成的。

var SimplePlugin = function() { }

Add a plug-in function.

在这一步中，我们将添加插件函数，我们的 JavaScript 将调用该函数。在下面的函数中，我们实际上将调用委托给本机 PhoneGap 桥，要求它实际调用“SimplePlugin”服务，即“org.examples.phonegap.plugins.simpleplugin.SimplePlugin”类。此外，我们注册了两个回调:一个是调用成功时的回调，另一个是调用失败时的回调。然后我们声明我们想要调用的动作。您可能还记得，我们的插件类中有处理“hello”服务的代码。最后，记住我们插件类的执行方法需要一个参数JSONArray；在这里，我们将其作为[name]传递。

`SimplePlugin.prototype.hello = function(name, successCallback, failureCallback) {

PhoneGap.exec(

successCallback, // Success Callback

failureCallback, // Failure Callback

‘SimplePlugin’, // Registered plug-in name

‘hello’, // Action

[name] //Argument passed in

);

};`

完整的 JavaScript 文件 simpleplugin.js 如下所示:

`/**

*

* @return Instance of SimplePlugin

* /

var SimplePlugin = function() {

}

/**

* @param name

* The name passed in

* @paramsuccessCallback

* The callback that will be called when simple plugin runs

* successfully

* @paramfailureCallback

* The callback that will be called when simple plugin

* fails

*/

SimplePlugin.prototype.hello = function(name, successCallback, failureCallback) {

PhoneGap.exec(successCallback, // Success Callback

failureCallback, // Failure Callback

'SimplePlugin', // Registered Plug-in name

'hello', // Action

[ name ]); // Argument passed in

};

/**

*

* Register the Simple Listing Javascript plugin.

*/

PhoneGap.addConstructor(function() {

// Register the Javascript plug-in with PhoneGap

PhoneGap.addPlugin('SimplePlugin', new SimplePlugin());

});`

调用插件

是时候测试我们的插件了。为此，我们需要以下内容:

HTML 文件

PhoneGap js 文件

插件 js 文件

插件 Java 文件

您的 Android 项目应该如 Figure 9–5 所示。

图 9–5。 Android PhoneGap 插件项目结构

您的 index.html 文件应该如下所示:

`

PhoneGap

script type="text/javascript" charset="utf-8" src="simpleplugin.js">

Simple Plugin Demo

Enter Name

Output:

Say Hello

`

在这里，您应该注意到插件的调用如下。我们首先传递包含名称的文本，然后注册一个成功的回调和一个失败的回调。

window.plugins.SimplePlugin.hello( text, //success callback function (result) { output.innerHTML = result; }, //failure callback function (err) { output.innerHTML = "Failed to invoke simple plugin"; } );

最后，当我们运行这个 Android 项目时，我们会看到下面的输出，如 Figure 9–6 所示。

图 9–6。Android 上的 PhoneGap 插件输出

分享 Android PhoneGap 插件

就 PhoneGap framework 1 . 1 . 0 版(写这本书时的版本)而言，没有办法打包和共享你的插件。

共享插件的唯一方式是通过

共享 Java 源文件

共享 JavaScript 源文件

自述文件，说明如何使用插件

PhoneGap 插件通常在[github.com/phonegap/phonegap-plugins](https://github.com/phonegap/phonegap-plugins).上传。如果您希望贡献您的工作，您可以与 PhoneGap 团队合作，将您的插件添加到这个存储库中。

为 iPhone 扩展 PhoneGap

PhoneGap 为 XCode 提供插件，用于创建基于 PhoneGap 的应用。在写这本书的时候，PhoneGap 从 0.9.5 版本升级到了 1.1.0 版本。iPhone-PhoneGap 插件框架有一些变化。本章重点介绍 1.1.0 插件开发。

安装 1.1.0 XCode 扩展的步骤:

下载 PhoneGap 1.1.0 zip 并解压。

转到 iOS 文件夹，安装 PhoneGapInstaller.pkg。

安装 PhoneGap 的 1.1.0 XCode 插件后，从 XCode 创建一个基于 PhoneGap 的应用，如图图 9–7 和图 9–8 所示。

图 9–7。 创建新的 iOS PhoneGap 项目

图 9–8。 创建一个新的 iOS PhoneGap 项目

按照第三章中的步骤将 www 文件夹添加到项目中。现在运行项目，并确保您能够看到基于 iPhone PhoneGap 的应用。

声明插件的本机部分

PhoneGap 1.1.0 插件的本机部分需要添加到插件文件夹中。这在图 9–9 中进行了描述。

图 9–9。 iPhone 插件原生部分

在插件文件夹中创建一个 Objective-C 类。让我们把这个类命名为 SimplePlugin。SimplePlugin 扩展了 PGPlugin。SimplePlugin.h 文件如下所示。

`#import

ifdef PHONEGAP_FRAMEWORK

import

else

import "PGPlugin.h"

endif

@interface SimplePlugin :PGPlugin {

}

/**

* Sets the idleTimerDisable property to true so that the idle timeout is disabled

*/

(void) hello:(NSMutableArray)arguments withDict:(NSMutableDictionary)options;

@end`

这里我们声明一个函数名“hello”，它有如下签名:

- (void) hello:(NSMutableArray*)arguments withDict:(NSMutableDictionary*)options;

这个函数不返回任何东西。相反，它需要两个参数

争论

选择

插件或输入(在我们的例子中是名称)的任何参数都使用“参数”传递

现在让我们实现 SimplePlugin 的 hello 函数。在第一个版本中，我们将从插件返回一个字符串“hello world”。此外，我们将解释如何访问传递的参数，以及如何调用成功和失败的回调。

注意插件是从 JavaScript 调用的，如下所示:

window.plugins.SimplePlugin.hello( “Bob”, //success callback function(result){ alert(“plugin returned “+result); }, //failure callback, function(err){ alert(“got error when invoking the plugin”); } );

下面是插件方法的框架代码。

插件可以访问输入参数，在我们的例子中是“Bob”，从 arguments 对象中提取它。注意，arguments 数组中的第一个对象总是 callbackId，用于回调 JavaScript 回调函数。我们可以从索引 1 开始提取实际参数(在我们的例子中，只有“Bob”)。

NSString * name = [arguments objectAtIndex:1];

如果我们有另一个参数，我们将在索引 2 处访问它。

现在让我们关注如何调用成功或失败的 JavaScript 回调函数。这从 PluginResult 对象的声明开始。接下来声明另外两个对象，一个用于 callbackId(帮助我们调用回调函数),另一个是一个字符串，JavaScript 字符串，我们将把它嵌入到 HTML 页面中以实际调用回调。

NSString* jsString = nil; NSString* callbackId = [arguments objectAtIndex:0];

现在让我们来看一下成功和失败条件的代码流。这显示在下面的代码中。

如果一切顺利，我们创建一个状态为 PGCommandStatus_OK 的结果对象。然后我们从结果中创建 jsString 对象，传递 callbackId。最后，我们编写 JavaScript，通过调用[self writeJavascript:jsString]来实际调用成功回调。

在失败的情况下，我们创建一个状态不是 PGCommandStatus_OK 的 PluginResult 对象，并为错误/失败回调创建 jsString。最后，我们使用[self:write JavaScript:jsString]调用错误/失败回调:

`PluginResult* result=nil;

NSString* jsString=nil;

NSString* callbackId=[argumentsobjectAtIndex:0];

if(success){

result=[PluginResultresultWithStatus:PGCommandStatus_OK];

jsString=[resulttoSuccessCallbackString:callbackId];

}

else{

result=[PluginResultresultWithStatus:PGCommandStatus_ILLEGAL_ACCESS_EXCEPTION];

jsString=[resulttoErrorCallbackString:callbackId];

}

[selfwriteJavascript:jsString];`

如果我们希望在调用成功或失败回调时传递数据，我们可以通过在创建 PluginResult 对象时传递一个附加参数来实现。这里我们通过调用 PluginResult 的 resultWithStatus:messageAsString 函数来传递一个字符串。

result = [PluginResultresultWithStatus:PGCommandStatus_OK messageAsString:@”Hello World”];

完整的 SimplePlugin 如下所示。注意，这里我们没有负路径，因此，我们只为成功回调创建 jsString。

`#import "SimplePlugin.h"

@implementation SimplePlugin

(void) hello:(NSMutableArray)arguments withDict:(NSMutableDictionary)options {

PluginResult* result = nil;

NSString* jsString = nil;

NSString* callbackId = [arguments objectAtIndex:0];

NSString* name = [arguments objectAtIndex:1];

NSDate* date = [NSDate date];

NSDateFormatter* formatter = [[[NSDateFormatteralloc] init] autorelease];

//Set the required date format

[formatter setDateFormat:@"yyyy-MM-ddhh:mm:ss"];

//Get the string date

NSString* dateStr = [formatterstringFromDate:date];

NSString* returnStr = [NSStringstringWithFormat:@"Hello %@.The time is %@!",

name,dateStr];

result = [PluginResultresultWithStatus:PGCommandStatus_OK

messageAsString:returnStr];

jsString = [result toSuccessCallbackString:callbackId ];

[selfwriteJavascript:jsString];

}

@end`

只是创造了。h 和。m 文件并将文件放在插件文件夹中是不够的。我们需要向 PhoneGap 框架注册我们的 SimplePlugin。在 Supporting Files 文件夹中的 PhoneGap.plist 文件中添加一个条目就可以做到这一点。

这显示在图 9–10 中。

图 9-10。 注册 PhoneGap 插件

声明插件的 JavaScript 部分

iPhone 插件的 JavaScript 部分和你见过的 Android 不同。

这主要分两步完成

声明一个名为 SimplePlugin 的 JavaScript 类，并向其添加一个方法，在我们的示例中为“hello”。在 hello 函数中，我们将 JavaScript 参数映射到目标插件类和方法。

第二部分是为 SimplePlugin 创建一个方法 install，通过调用 phonegap . add constructor(simple plugin . install)注册 JavaScript 插件；

我们先来关注一下插件的 hello 功能。注意，我们在插件内部调用 PhoneGap.exec 函数。

继 PhoneGap.exec 的签名之后

PhoneGap.exec(<>,<>,<>,<>,<>)

注意我们如何将 hello 函数的第一个参数“name”作为参数数组的一部分传递。successCallback 和 errorCallback 作为 PhoneGap.exec 函数的第一个和第二个参数。插件类和方法名作为第三和第四个参数。

SimplePlugin.prototype.hello = function(name,successCallback, errorCallback) { PhoneGap.exec( successCallback, errorCallback, "SimplePlugin", "hello", [name]); };

JavaScript 部分的完整代码如下所示。

`if (!PhoneGap.hasResource("simpleplugin")) {

PhoneGap.addResource("simpleplugin");

/**

* @returns instance of powermanagement

*/

function SimplePlugin() {};

/**

*

* @param name Given the name, successCallBack gets the string "Hello ! The

time is ."

* @paramsuccessCallback function to be called when the wake-lock was acquired

successfully

* @paramerrorCallback function to be called when there was a problem with acquiring

the wake-lock

*/

SimplePlugin.prototype.hello = function (name, successCallback, errorCallback) {

PhoneGap.exec(successCallback, errorCallback, "SimplePlugin", "hello", [name]);

};

/**

* Register the plug-in with PhoneGap

*/

SimplePlugin.install = function () {

if (!window.plugins) window.plugins = {};

window.plugins.SimplePlugin = new SimplePlugin();

return window.plugins.SimplePlugin;

};

PhoneGap.addConstructor(SimplePlugin.install);

}`

调用插件

为了测试插件，我们将创建一个 PhoneGap 应用，并从那里调用插件。这部分和安卓的一模一样。

你需要遵循这些步骤

包括 PhoneGap 1.1.0 js 文件。

包括 simpleplugin.js 文件。

注册按钮点击调用插件。

注册成功和失败回调以显示结果。

index.html 的完整源代码如下:

`

PhoneGap

Simple Plugin Demo

Enter Name

Output:

Say Hello

`

当您运行 PhoneGap 示例时，您将看到如图 Figure 9–11 所示的应用。

图 9–11。??【PhoneGap】插件输出

共享 iPhone PhoneGap 插件

您需要共享以下文件来共享插件。

SimplePlugin.h

简单插头.m

简单插头.js

将上述文件列表添加到插件文档中。还要记录如何从 JavaScript 调用插件。

为 BlackBerry 扩展 PhoneGap

与 Android 类似，PhoneGap 针对 BlackBerry 的插件有两个部分，分别位于 PhoneGap 框架(桥)的两侧。我们有一个原生部分(一个类扩展 PhoneGap 的插件)和一个使用 PhoneGap 的 JavaScript 框架的 JavaScript 文件。

我们假设您使用的是高于 1.5 版的 BlackBerry WebWorks SDK 版本。

我们假设 BlackBerry WebWorks SDK 安装在 C:\BBWP 上，我们安装了 Java 1.6 SDK 和 Ant，并且在 path 中。我们还假设我们的开发目录是 D:\PhoneGap-Plugin，我们在 D:\ PhoneGap-Plugin \ PhoneGap-1 . 1 . 0 目录中有 PhoneGap SDK。参考第三章回忆 BlackBerry PhoneGap 开发的系统要求。

创建和测试 BlackBerry 插件的步骤如下:

创建插件 Java 文件，并将其转储到 PhoneGap SDK 的框架中。

创建 BlackBerry PhoneGap 项目来测试插件。

然后编译 BlackBerry PhoneGap 项目来编译插件 Java，您将它转储到 PhoneGap SDK 的框架文件夹中。如果出现编译错误，您需要删除您在步骤 2 中创建的项目，修复 Java 文件，并从步骤 2 开始重复。

当插件 Java 文件编译无误时，您就可以转储 JavaScript 插件文件并编写 HTML 页面来使用该插件。

声明插件的本机部分

BlackBerry 插件类与 Android 插件类非常相似。唯一不同的是 BlackBerry 插件类使用 PhoneGap 1.1.0 框架；因此，有几个不同之处。

以下是 BlackBerry 插件类的框架:

`package com.phonegap.plugins;

import com.phonegap.api.Plugin;

import com.phonegap.api.PluginResult;

import java.util.Date;

import com.phonegap.json4j.JSONArray;

public class HelloWorldPlugin extends Plugin {

private static final String ACTION_HELLO="hello";

/**

* Executes the requested action and returns a PluginResult. *

* @param action The action to execute.

* @paramcallbackIdThe callback ID to be invoked upon action completion.

* @paramargsJSONArry of arguments for the action.

* @return A PluginResult object with a status and message.

*/

public PluginResult execute(String action, JSONArray data, String callbackId) {

return null;

}

/**

* Called when the plug-in is paused.

*/

public void onPause() {

}

/**

* Called when the plug-in is resumed.

*/

public void onResume() {

}

/**

* Called when the plug-in is destroyed.

*/

public void onDestroy() {

}

}`

注意，我们不是将这个插件类转储到我们的项目区域，而是转储到 PhoneGap SDK 区域。Figure 9–12 中的屏幕截图显示了我们复制这个插件类的位置。您可能需要创建插件文件夹。

图 9–12。?? 插件的原生部分

这里的主要问题是，在继续之前，您需要在上面的目录中有一个适当的 Java 插件类(它可以编译)。我们会引导你度过这一关。

下一步是创建 BlackBerry WebWorks PhoneGap 项目。

$>D: $>cd d:\PhoneGap-plugin\phonegap-1.1.0 $>ant create -Dproject.path=D:\PhoneGap-Plugin\BB-Plugin-Test

这将向您显示图 9–13 中所示的目录。

图 9–13。 PhoneGap 黑莓项目结构

现在让我们确保我们的插件类是否编译。

$>cd D:\PhoneGap-Plugin\BB-Plugin-Test $>ant build

如果上述步骤在 HelloWorldPlugin 中显示了一些编译错误，您需要

修复那些编译错误。

删除位于 D:\ PhoneGap-Plugin \ b B- Plugin-Test 的项目。

使用 Ant create-D project . path = D:\ PhoneGap-Plugin \ b B- Plugin-Test 重新创建项目。

使用“ant build”检查编译。

现在，您已经解决了编译空白 Java 插件类的问题，让我们在其中放一些代码。

下面是插件类的完整代码(这与 Android 插件非常相似)。我们公开一个名为“hello”的动作，并期望一个名为“name”的参数假设有人用“Rohit”这个名字叫出了“hello”这个动作，我们会返回“Hello Rohit！时间是。”

`package com.phonegap.plugins;

import com.phonegap.api.Plugin;

import com.phonegap.api.PluginResult;

import java.util.Date;

import com.phonegap.json4j.JSONArray;

public class HelloWorldPlugin extends Plugin {

private static final String ACTION_HELLO="hello";

/**

* Executes the requested action and returns a PluginResult.

*

* @param action The action to execute.

* @paramcallbackIdThe callback ID to be invoked upon action completion.

* @paramargsJSONArry of arguments for the action.

* @return A PluginResult object with a status and message.

*/

public PluginResult execute(String action, JSONArray data, String callbackId) {

PluginResult pluginResult=null;

if (ACTION_HELLO.equals(action)) {

String name;

try {

name = data.getString(0);

String result = "Hello " + name

+ "! The time is "

+ (new Date()).toString();

pluginResult =

new PluginResult(PluginResult.Status.OK,

result);

returnpluginResult;

} catch (Exception e) {

pluginResult = new

PluginResult(PluginResult.Status.JSONEXCEPTION,

"missing argument name");

}

} else {

pluginResult =

new PluginResult(PluginResult.Status.INVALIDACTION,

"Allowed actions is hello");

}

return pluginResult;

}

/**

* Called when the plug-in is paused.

*/

public void onPause() {

}

/**

* Called when the plug-in is resumed.

*/

public void onResume() {

}

/**

* Called when the plug-in is destroyed.

*/

public void onDestroy() {

}

}`

请注意，您必须在 PhoneGap 的框架中再次转储修改后的 HelloWorldPlugin.java，如图 9–13 所示。您还必须使用 Ant create-D project . path = D:\ PhoneGap-Plugin \ b B- Plugin-Test 删除并重新创建项目，以测试插件。

声明插件的 JavaScript 部分

同样，插件的 JavaScript 部分与插件的 Android JavaScript 部分非常相似。在这种情况下，我们在函数声明中声明所有内容，并调用它。

(function () { var HelloWorld = function () { return { hello: function (message, successCallback, errorCallback) { PhoneGap.exec(successCallback, errorCallback, 'HelloWorldPlugin', 'hello', [message]); } } }; ` PhoneGap.addConstructor(function () {

// add the plug-in to window.plugins

PhoneGap.addPlugin('simpleplugin', new HelloWorld());

// register the plug-in on the native side

phonegap.PluginManager.addPlugin('HelloWorldPlugin', 'com.phonegap.plugins.HelloWorldPlugin');

});

})();`

第一步是创建一个名为 HelloWorld 的 JavaScript 对象，并在其中声明一个名为“hello”的函数。该函数在内部调用 PhoneGap 注册的服务，该服务又调用实际的本地类。

现在我们有了这个对象，它将从我们的 HTML 中被调用，我们需要将这个对象注册为 PhoneGap JavaScript 插件。我们还需要将服务名“helloworldplugin”映射到类“com . phonegap . plugins . hello world plugin”，所有这些都是在 PhoneGap.addConstructor()调用中完成的。

我们使用 PhoneGap.addPlugin()将“simpleplugin”名称映射到 JavaScript 插件对象。这将插件公开为 windows.plugins.simpleplugin。

然后我们用 phonegap。PluginManager.addPlugin()将服务名映射到实际的 Java 类。

这就完成了我们创建插件的 JavaScript 部分。我们将把这个 JavaScript 放在项目的 www 目录中。

调用插件

为了调用插件，我们修改了项目 www 目录中的 index.html 文件。

这与我们之前为 Android 和 iPhone 所做的非常相似。

下面是用于调用我们的插件的代码片段:

window.plugins.simpleplugin.hello( document.getElementById("name").value, //success callback function (message) { document.getElementById("output").innerHTML = message; }, //failure callback function () { log("Call to plugin failed"); } );

正如我们前面所做的，我们提供名称；在这种情况下，名称来自输入类型文本元素。然后我们提供一个成功回调和一个失败回调。在成功回调中，我们在 id 为“output”的 div 中设置返回值。

以下是 index.html 页面的完整代码:

`

Simple Plugin Demo

Enter Name

Output:

Say Hello

...

`

最后一步是运行 WebWorks BlackBerry 项目。转到命令提示符，转到项目目录，并运行以下命令:

$>ant build load-simulator

这将打开黑莓模拟器，你可以看到我们的应用在里面运行。在文本框中输入一个值，然后点击按钮。您将看到如图图 9–14 所示的结果。

图 9–14。??【PhoneGap】插件输出

共享 BlackBerry PhoneGap 插件

要共享插件，您需要发布两个文件

helloworldplugin.java

helloworld.js

将上述内容添加到关于如何从 JavaScript 调用插件的文档中。

结论

虽然 JavaScript 对于开发跨移动应用来说是一种快速而灵活的语言，但在实现复杂的处理和后台工作时，JavaScript 有某些固有的局限性。有时有必要使用本机代码来执行繁重的工作。

PhoneGap 的架构允许我们扩展其插件，为我们的 PhoneGap 应用引入本机代码。