REST Service 的最佳实践，第 2 部分 REST service 化一个数据系统-5
|
- UID
- 1066743
|
REST Service 的最佳实践，第 2 部分 REST service 化一个数据系统-5
有几种方式来定义 widget，清单 3 给出了其中的一种，用来展示一定类型的数据：图书标题，图书作者，图书标号，图书最新最低价格等等。这种方式编写的 viewer 具有一定的普适性和可重用性，只要数据服务提供了这些信息都可以用这个 viewer 来展示。清单 4 给出了另一种 widget 的定义方式。
清单 4. 图书搜索服务 viewer 的 widget 定义文件 21
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
| <iw:iwidget name="amazonSearchViewer" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
iScope="common.iwidget.amazonSearchViewer" allowInstanceContent="true"
supportedModes="view edit" mode="view" lang="en">
<iw:itemSet id="attributes" >
<iw:item id="feedURL" value="" readOnly="false"/>
<iw:itemDescription name="feedURL" type="url.feed.tabular"
description="Customized widget for displaying book list from Amazon"/>
<iw:item id="title" value="" readOnly="false"/>
<iw:item id="view" value="table" readOnly="false"/>
</iw:itemSet>
<iw:resource uri="../styles/common.css" />
<iw:resource uri="amazonSearchViewer.js" />
<iw:content mode="view">
<![CDATA[
<div id="_IWID_serviceNode">
<div id="_IWID_loadingNode"
style="display:none;margin-left:48%;margin-top:40px;height:80px;">
</div>
</div>
]]>
</iw:content>
<iw:content mode="edit">
<![CDATA[
]]>
</iw:content>
</iw:iwidget>
|
清单 4 的 itemSet 只描述了数据源的 FeedURL，而没有更多的关于可配置数据项的描述，这种方式定义的 widget 把对数据的处理隐含在代码里面，局限性比较大，可配置性差，可重用性也差。下面需要写一些 javascript 来处理一个展示的逻辑，如清单 5 所示。负责创建页面元素，并发送 HTTP 请求取回来 feed 的结果。
清单 5. widget 的逻辑代码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
39
40
41
42
| dojo.provide("common.iwidget.amazonSearchViewer");
dojo.declare("common.iwidget.amazonSearchViewer", null, {
title:null,
serviceURL:null,
view:null,
onLoad: function(){
this.domID = "_" + this.iContext.widgetId + "_";
var att = this.iContext.getiWidgetAttributes();
this.title = att.getItemValue("title");
this.serviceURL = att.getItemValue("feedURL");
this.view = att.getItemValue("view");
var loading = dojo.byId(this.domID + "loadingNode");
var innerNode = document.createElement("div");
loading.appendChild(innerNode);
new hyperservice.iwidget.ui.Loading({},innerNode);
},
onView: function(){
var serviceNode = dojo.byId(this.domID + "serviceNode");
var innerNode = document.createElement("div")
serviceNode.appendChild(innerNode)
//fetch the feed,
var self = this;
var loadCallbackFunc = function(feed){
new iwidget.ui.FeedListViewer
({feed:feed,viewTitle:feed.title,serviceInstance:self.serviceURL,
selectedItemViewer:"common.ui.AmazonSearchListViewerItem"},innerNode);
}
var errorCallbackFunc = function(data){
console.error("failed to fetch a feed with url:"+self.serviceURL);
console.error(data)
}
feedFetcher.fetch(this.serviceURL, loadCallbackFunc,errorCallbackFunc);
}
}
});
|
|
|
|
|
|
|
