现在只需要单击 Synchronize 按钮，所有的离线数据就都会被放到现代化、可伸缩的 JSON 存储系统当中！这很棒，但到目前为止，我们还没有任何关于这个过程的反馈——
这是在幕后发生的。要想解决这个问题，请放置一个信息条，一旦同步过程完毕，该信息 条就会显示出来。
首先，在按钮栈之上添加一个“info”div 元素：
...
<div id="info"></div>
<ul class="buttons">
<li><a class="changeview" href="#alltasks">Show All Tasks</a></li>
<li><a class="changeview" href="#add">Add New</a></li>
<li class="changeview"><a href="#" class="synchronize">synchronize</a></li>
</ul>
然后为该 div 添加一些样式：
#info {
margin: 8px 6px 2px 6px;
padding: 6px 14px;
background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0,
#71D90F), color-stop(0.7, #529E0B));
-webkit-border-radius: 4px;
color: white;
display: none;
}
注意 display:none 属性，它确保直到出现理想的显式显示时，该 div 才会显示出来。
为了显示通知消息，我们需要对 activateMain 函数进行一些修改以便同步过程开始时 会显示一些信息。
activateMain: function() {
TODOLIST.Storage.getMostImportantTask(function(task) { if (task) {
...
jQuery("#main .synchronize").u nbind().click(function() {
TODOLIST.Storage.synchron izeTasks(function(updateCount) {
$("#info")
.html("Completed : " + updateCount + " task(s) have been synchroni zed !")
.show();
});
});
}
...
});
}
这里所做的就是更新 info div HTML。现在，当同步过程完成时，信息条就会显 示出来，如图 5-2 所示。
既然我们可以确保同步过程能够进行，那现在就需要一个客户端界面，它会从在线存 储解决方案中读取数据。
5.4 开发桌面界面
构建 Web 应用的一个好处在于你可以轻松地以各种不同的 Web 格式访问数据——比 如说，平板设备和更标准的桌面浏览器。首先，我们将注意力放在后者，看看如何将存储 解决方案连接到“常规的”桌面 Web 应用上。
从现有的移动界面创建桌面界面要比从现有的桌面 Web 应用创建移动界面简单多 了。为了证实这一点，看看各种移动应用界面是如何影响桌面应用的用户界面吧。最近 更新的 Twitter Web 界面就是移动用户界面影响到桌面界面以实现更好的用户体验的一 个例子。
因为我们只有单向的同步，因此桌面应用是只读的(由于构建桌面界面并非本书所讨论 的范畴，因此我们尽量简化)。如果回到之前科学家搜集数据的那个示例，那么就要考虑将 桌面应用作为其同事(想要了解他的最新发现)的报表工具。
通过本节的介绍，你应该知道构建一个依赖于健壮和标准的 Web 技术的移动 Web 应 用可以将其特性扩展到其他 Web 引擎，特别是桌面 Web 界面，比如说笔记本或桌面系统 上的浏览器。
我们所要做的第一件事就是从基于云的存储解决方案中获取到所存储的数据。
5.4.1 查询 jsonengine 实例
你已经看到使用 REST API 插入数据是多么的简单。与之类似，通过 REST API，使用 HTTP GET 也 可 以 查 询 数 据 。 首 先 需 要 创 建 一 个 新 的 HTML 页 面 — 称 之 为 todolist-readonly.html。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Tasks page</title>
<link rel="stylesheet" media="screen" href="todolist-readonly.css" />
<script type="text/javascript" src="../../js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
// get all the posts and show them
$(function() {
$.get("/_je/tasks", { sort: "_createdAt.desc" }, function (result) { var rowsHtml = '';
for (var ii = 0; ii <result.length; ii++) { rowsHtml += '<tr>' +
'<td>' + result[ii].name + '</td>' +
'<td>' + result[ii].description + '</td>' + '<td>' + result[ii].due + '</td>' +
'</tr>';
<h1>Current tasks stored in jsonengine</h1>
<table id="taskTable">
<thead>
<tbody />
</table> 调用(使用 jQuery html 函数)替换掉表格的 body(tbody)。虽然可以追加找到的每一行，但尽 量少地更新 HTML 可以提升应用的速度。虽然在这种小页面中效果并不明显，但这却是一 个好习惯。
完成了 HTML 页面后，还要向 todolist-readonly.css 样式表中添加一些基本的样式：
table, td {
border: 1px solid #666666;
width: 100%;
} td {
width:33%;
padding: 2px;
}
接下来转到新建的页面，如图 5-3 所示。
图 5-3 显示了同步任务的桌面应用
如你所见，离线数据库中的所有数据现在都处于在线状态——至少位于服务器上；我 们并没有将应用上传到云上。在这之前，需要向存储解决方案添加一些安全保障；如果不 这么做，那么每个人都可以访问该桌面网页了。幸好，jsonengine 带有一个安全的管理页 面，你可以设定存储文档的访问级别，如图 5-4 所示。
图 5-4 jsonengine 安全管理页面
我们可以在这里添加 JSON “tasks”文档并将读取级别设为“protected”，这样使用 Google 账号或 OpenID 账号连接的用户就只能查看数据了。
5.4.2 将应用部署到云中
现在是时候让应用上线以便全世界都能使用你的移动应用了。但首先需要一个 Google 账号(或是 Gmail 账号)。获取账号之后，就可以通过登录 https:// appengine. google.com 访问 Google App Engine 了。你可以在上面创建新的应用，选择应用标识符(这也是访问应 用的 URL)还有标题。在上传应用之前，必须要确保应用标识符与本地应用中定义的相匹 配。为了做到这一点，打开 war/webing/appengine-web.xml 文件，查看下面这行：
<application>jsonengine</application>
使用方才选择的应用 ID 替换掉 jsonengine。现在就可以部署应用了——进入 Google App Engine SDK 的 bin 目录，输入如下命令(在 Windows 上)：
appcfg.cmd update location/to/you/war/folder 在 Mac 和 Linux 上输入如下命令：
appcfg.sh update location/to/you/war/folder
在提示框中输入 Google 用户名与密码。如果上传过程成功，那么就会看到消息“Update
completed successfully. ”。 就 是 这 些 ！ 我 们 的 应 用 现 在 已 经 在 云 中了 — 请 访 问 页面 http://my-appid.appspot.com/snippets/05/todolist-readonly.html
5.5 小结
到目前为止，我们已经实现了一些有趣的内容：我们的移动 Web 应用拥有很强大的特 性，可以离线存储数据，也可以将数据同步到在线环境中。使用强大的在线存储机制为移 动应用同步离线数据是个非常新颖且颇为创新性的概念。
现在我们所需的是能与原生应用竞争的一些特性。第 6 章将会添加一些有趣的用户界 面元素并处理离线的情况。