FB LIKE JACKER

《Enyo框架之旅》第四部分:显示数据

2011 年Mar月 31 日由 发布 | 类别: Enyo开发, 实用webOS开发教程, 开发者社区 | Tags: , , ,

 

为了能够显示我们请求的结果我们首先要找一个地方存储Service返回的数据。

我们要在FeedReader.js中创建一个方法。重构从VFlexBox继承的方法inher-ited。

代码如下:

create: function() {
this.inherited(arguments);
this.results = [];
}

this.inherited(arguments)调用了VFlexBox对象的父类继承的方法。

之后我们又创建了一个results的空数组。我们要把Service返回的数据存放到这里。

每次当新的对象被实例化的时候,都会调用create方法,不同的对象都会有自己的results数据。

 

现在让我们修改代码使得results的数据在窗口中显示出来。

并且修改gotFeedFailure方法,在返回失败的时候能有相关的显示。

gotFeed: function(inSender, inResponse) {
	 		    this.results = inResponse.query.results.item;
	},
gotFeedFailure: function(inSender, inResponse) {
				   console.log("got failure from getFeed");
		}

显示内容是由一个新的组件来完成的(用enyo的话说,叫做控件)。

我们将它添加到代码中,如下所示:

components: [
	    {name: "getFeed", kind: "WebService",
	    	   onSuccess: "gotFeed",
		   onFailure: "gotFeedFailure"},
	    {kind: "PageHeader", content: "Enyo FeedReader"},
	    {kind: "RowGroup", caption: "Feed URL", components: [
	    	   {kind: "FancyInput",
		   	  components: [
			  	      {kind: "Button", caption: "Get Feed", onclick: "btnClick"}
			  ],
			  value: "http://www.phonekr.com/feed"
		   }
	    ]},
	    {kind: "Scroller", flex: 1, components: [
	    	   {name: "list", kind: "VirtualRepeater", onGetItem: "getListItem",
		   	  components: [
			  	      {kind: "Item", layoutKind: "VFlexLayout", components: [
				      	     {name: "title", kind: "Divider"},
					     {name: "description"}
				      ]}
			  ]
		   }
	    ]}
]

我们新创建的Scroller控件包含一个人名为list的VirtualRepeater的类型的控件,此控件中又包含若干名为Item的小条目控件。

当我们显示来自Service的内容的时候,Item会根据一定的格式显示这些数据。

我们使用Divider类型的title显示rss在要的标题,使用description显示简单的摘要。

如果我们要在VirtualRepeater中添加新的Item,需要调用getListItem方法。

getListItem方法负责填充Item的标题和描述的内容。

getListItem: function(inSender, inIndex) {
	     			var r = this.results[inIndex];
	     			if (r) {
	     			   this.$.title.setCaption(r.title);
				   this.$.description.setContent(r.description);
				   return true;
				}
	     }

一般来说,Scroller控件是一个很大的信息容器,他可以使用VirtualRepeater的触动屏幕“滑动”功能浏览相应的条目。

flex参数的功能是指定Scroller的布局充满整个VFlexBox剩余的空间。

flex参数的在enyo框架的意义于在CSS3中flex的意义相似。

 

最后,我们要获取feed的实时发布情况,所以要对gotFeed函数中添加以下的代码:

gotFeed: function(inSender, inResponse) {
this.results = inResponse.query.results.item;
this.$.list.render();
}

效果图见下方:

 

声明:此教程有翻译不得当的地方欢迎指出!不吝赐教!

开发环境的构架请参照:搭建Enyo开发环境的教程感谢@911boyV

前几节可以到:enyo开发栏目去查看

锋客网phonekr出品

锋客网开发小组组员redshiftkeying

 

« [Hero] 简述CyanogenMod, Cronos, Elelinux, gapps等
[kernel for HTC Hero] 2.6.35 – Las Venturas – 0.4 »

About webOS新闻组

锋客网创始人,90后一名.接触webOS的时间很短,但是喜欢的也特别深,现用机型Pixi+.就一句了?翻滚吧!webOS!

» has written 102 posts

锋客的朋友们

  • 少数派
  • 煮机网

签订契约成为机油吧!

Buy me a coffee~ ;-)

Buy me a coffee~ ;-)
閃開│讓專業的來 沒辦法│我這個人就是太正直了