Dojo 离线技术应用：支持离线功能的 Web 编辑器-3
|
- UID
- 1066743
|
Dojo 离线技术应用：支持离线功能的 Web 编辑器-3
客户端开发客户端界面设计Moxie 离线编辑器的界面主要有四个部分：
- 状态显示：显示当前的动作状态，如加载文件，保存文件等。
- 文件显示：包括两部分，一个是文件名输入框，显示当前编辑的文件名，用户也可以修改名字将当前编辑器的内容保存为另一个文件。文件列表显示已保存的所有文件名，用户可以通过选择文件名来加载不同的文件内容。
- 离线 widget：离线库提供的 UI widget，用来显示当前程序的状态，如在线，离线，上传、下载等。使用该控件只需将父元素的 id 设置为"dot-widget"即可，Dojo 离线库在初始化时会查找 id 为"dot-widget"的元素并将离线 widget 作为子元素加入到该元素中。
- 编辑器：显示和输入文件内容。
图 2. Moxie 客户端界面 初始化Moxie 客户端的初始化和一般的离线应用程序一样，主要分为 4 步，即设置应用程序名字供离线 widget 使用；调用 slurp 函数保存网页相关的离线资源；通过 dojo.connect 将 Moxie 的初始化函数与离线库加载事件绑定，即 dojox.off.ui 的 onLoad 事件，该事件标志 Dojo 离线库已经初始化完毕，Moxie 可以开始进行初始化工作；最后调用 Dojo 离线库的初始化函数，程序开始运行。
清单 4.离线库的初始化1
2
3
4
5
6
7
| dojox.off.ui.appName = "Moxie";
dojox.off.files.slurp();
dojo.connect(dojox.off.ui, "onLoad", moxie, moxie.initialize);
dojox.off.initialize();
|
Moxie 应用本身的初始化又可以分为 5 步 , 即：初始化文件名输入框和编辑器的值；设置各元素的事件处理函数，本例设置了在文件名列表框值改变之后调用 directoryChange 函数和在单击保存按钮时调用 save 方法；随后创建数据库；然后再加载已保存的文件名；最后设置程序的离线事件处理器，以响应 onReplay，onSync 等离线事件。
清单 5.Moxie 的初始化1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
| var richTextControl = dijit.byId("storageValue");
// clear out old values
dojo.byId("storageKey").value = "";
richTextControl.setValue("Click Here to Begin Editing");
// initialize our event handlers
var directory = dojo.byId("directory");
dojo.connect(directory, "onchange", this, this.directoryChange);
dojo.connect(dojo.byId("saveButton"), "onclick", this, this.save);
// create our database
this._createDb();
// load and write out our available keys
this._loadKeys();
// setup our offline handlers
this._initOfflineHandlers();
|
加载文件列表
开发离线程序与普通 web 应用不同之处在于需要随时考虑在线与离线两种情况并分别进行处理。在线的情况下加载文件列表会调用服务器端的服务获取文件列表，而离线时则从本地数据库读取文件列表。程序的在线或离线状态可以通过查询 dojox.off.isOnline 来获取。
设置离线事件处理器
一般来说应用状态由离线变为在线时，我们需要将在离线时所做的操作重新执行一遍将所做的改动更新到服务器上，另外还要从服务器上下载最新的数据来与服务器保持同步。重新执行离线操作的事件是 dojox.off.sync.actions 对象的 onReplay 事件，下载最新数据的事件是 dojox.off.sync 对象的 onSync 事件，Dojo 离线库会自动检测应用的状态，在适当的时机触发相应的事件，开发人员只需实现处理的函数并与事件绑定即可。值得注意的是 finished 类型的 onSync 事件，这个事件是在上传、下载等事件结束之后触发的，我们可以在这个事件里更新应用的界面。
清单 6.设置离线事件处理器1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
| _initOfflineHandlers: function(){
// setup what we do when we are replaying our action
// log when the network reappears
dojo.connect(dojox.off.sync.actions, "onReplay", this, function(action, actionLog){
if(action.name == "save"){
this._save(action.key, action.value);
}
});
// handle syncing
dojo.connect(dojox.off.sync, "onSync", this, function(type){
// setup how we download our data from the server
if(type == "download"){
this._downloadData();
}else if(type == "finished"){
// refresh our UI when we are finished syncing
this._printAvailableKeys();
}
});
}
|
|
|
|
|
|
|
