使用 Dojo 将业务流程扩展到移动领域（3）使用 Dojo 构建动态任务列表
|
- UID
- 1066743
|
使用 Dojo 将业务流程扩展到移动领域（3）使用 Dojo 构建动态任务列表
使用 Dojo 构建动态任务列表在这一阶段，依据当前用户未完成的任务数量来动态构建用户界面。清单 4 给出了一段简单的 HTML 代码，我们将动态修改它来插入任务项。请注意，在清单 1 中，在从主要视图过渡到任务列表视图时，会调用 getTaskList() 方法，以便在一开始就自动填充该列表。
清单 4. 任务列表的 HTML 代码1
2
3
4
5
6
7
8
9
10
11
| <div data-dojo-type="dojox.mobile.View" id="TaskListView"
data-dojo-props="selected:false">
<h1 data-dojo-type="dojox.mobile.Heading"
data-dojo-props="label:'My tasks',back:'Back',moveTo:'MainView'">
<div data-dojo-type="dojox.mobile.ToolBarButton"
style="float: right;" onClick="getTaskList();">Refresh</div>
</h1>
<div data-dojo-type="dojox.mobile.RoundRectList" id="taskItems">
</div>
<div id="taskListStatus" class="itemText"></div>
</div>
|
Business Process Manager REST API 用于填充 taskItems div 标记。然后会分析结果（以 JSON 结构的形式返回），并使用这些结果动态添加任务项，将这些任务项作为新节点，如清单 5 中所示。
清单 5. 填充任务列表的 JavaScript 函数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
38
| <script type="text/javascript">
function getTaskList() {
var xhrArgs = {
url: getServerBase() + "/rest/bpm/wle/v1/tasks/query/IBM.DEFAULTALLTASKSLIST_75?
interactionFilter=ASSESS_AND_WORK_ON",
preventCache : true,
handleAs: "json",
user : "admin", /* should be handled differently */
password : "admin",
load: function(jsonData) {
var items = dijit.byId("taskItems");
items.destroyDescendants();
if(jsonData.data.size==0) {
dojo.byId("taskListStatus").innerHTML = "No task waiting";
} else {
dojo.byId("taskListStatus").innerHTML = "";
for(var i=0; i<jsonData.data.size; i++) {
var taskItem = jsonData.data.items;
var item = new dojox.mobile.ListItem({
moveTo: "TaskDetailsView",
transition: "slide",
label: taskItem.NAME,
rightText: taskItem.TKIID,
});
items.addChild(item);
item.on("click", function() {getTaskDetails(taskItem.TKIID);});
}
}
},
error: function(error, ioargs) {
dojo.byId("taskListStatus").innerHTML = "Bad reply,status:" +
ioargs.xhr.status + ": reason:" + ioargs.xhr.statusText;
}
}
dojo.byId("taskListStatus").innerHTML = "Loading tasks...";
var deferred = dojo.xhrGet(xhrArgs);
}
</script>
|
在 getTaskList() 函数的末尾可以看到，在每个新项上，通过 dojo/on API 添加了一个事件处理函数，可使用该函数捕获每一行上更进一步的 onClick 事件，以便显示正确的任务细节页面。任务细节页面是使用相同方式构建的，清单 6 展示了如何结合使用 REST API 和作为参数给出的任务 ID。
清单 6. 加载任务细节页面的 JavaScript 函数摘录1
2
3
4
5
| var xhrArgs = {
url: getServerBase() + "/rest/bpm/wle/v1/task/"+taskId+"?parts=all",
preventCache : true,
handleAs: "json",
...
|
|
|
|
|
|
|
