首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

REST Service 的最佳实践,第 2 部分 REST service 化一个数据系统-6

REST Service 的最佳实践,第 2 部分 REST service 化一个数据系统-6

在清单 5 中创建 FeedListViewer 的时候有一个参数是 selectedItemViewer,用来设置具体的关于数据的展示内容部分,具体的实现代码如清单 6 所示。
清单 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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
dojo.provide("common.ui.AmazonSearchListViewerItem")

dojo.declare("common.ui.AmazonSearchListViewerItem", [dijit._Widget, dijit._Templated],{

imgSrc:null,
entry:null,
serviceInstance:null,

//dojoattachpoint
imgNode:null,
itemDetailNode:null,

titleNode:null,
authorNode:null,
manufacturerNode:null,
//priceMessageNode:null,
priceNode:null,
ASINnode:null,
ratingNode:null,
averageRatingNode:null,
averageRatingNode:null,

constructor:function(){
this.entry = null;
},

postCreate:function(){
this.createLiveText();
},

createLiveText:function()
{
if(!this.entry){
return;
}
var foundPriceElement = false;

this.imgNode.src = this.imgNode;

var contextRow = {}
dojo.forEach(this.entry.dataitemRows,function(dataitem){ //using xpath
                                                      // as dataitem identifier
contextRow[dataitem.xpath] = dataitem.value;
})

dojo.forEach(this.entry.dataitemRows,dojo.hitch(this,function(dataitem){
if(dataitem.name.indexOf("image")!=-1){
this.imgNode.src = dataitem.value
}else if(dataitem.name.toLowerCase()=="title"){
this.titleNode.innerHTML = "<span>"+dataitem.value+"</span>"

}else if(dataitem.name.toLowerCase()=="author"){
this.authorNode.innerHTML = "<span>"+dataitem.value+"</span>"

}else if(dataitem.name.toLowerCase()=="manufacturer"){
this.manufacturerNode.innerHTML = "<span>"+dataitem.value+"</span>"

}else if(dataitem.name.toLowerCase() == "lowestnewprice"){
foundPriceElement = true;
if(dataitem.value!=""){
    this.priceNode.innerHTML = "<span>"+dataitem.value+"</span>"
    this.priceNode.style.display = "inline"

}else{
this.priceNode.style.display = "none"
}
}else if(dataitem.name.toLowerCase() == "asin"){
this.ASINnode.innerHTML = "<span>"+dataitem.value+"</span>"

}else if(dataitem.name.toLowerCase() == "averagerating"){
var ratio=parseFloat(dataitem.value);
if(Math.floor(ratio)==Math.ceil(ratio))
{
dojo.addClass(this.ratingNode,"stars");
}
var count=0-(5-Math.floor(ratio))*18;
var style=count+"px";
dojo.style(this.ratingNode,{
backgroundPosition:style
});
this.averageRatingNode.innerHTML="<span>("+dataitem.value+")</span>";

     if(!foundPriceElement){
//this.priceMessageNode.style.display = "none"
this.priceNode.style.display = "none"
}
}))

}
});

.stars{
Background:transparent url(sample/imapges/star.png) no-repeat scroll 0 0;
}




具体的 viewer 的展示效果如图 12 所示。
图 12. 亚马逊图书搜索数据服务的 viewer按照此种方法,开发人员可以快速的开发用来展示各种各样类型数据的 widget。
返回列表