FB LIKE JACKER

《Enyo框架之旅》第五部分:多视图界面

2011 年Apr月 2 日由 发布 | 类别: Enyo开发, 实用webOS开发教程 | Tags: , , ,

现在的rss程序只显示摘要,我们需要通过点击来到对应的页面上。

实现这样的功能,我们要为程序添加第二个页面,叫做“视图”。

并且,我们要在页面上添加一个搜索栏,用来搜索内容。

 

现在,我们要整理一下到现在为止修改的FeedReader.js的代码。

修改缩进使其公容易理解,添加相应的注释等等。

观察一下我们到现在为止代码的构造。

enyo框架的代码良好的体现了数据封装带来的良好特性,通过这种封装,我们可以轻视哦那个的调用Service和前台程序进行良好的通信,而不必担心对象通信是从哪里开始的。

(就像FeedReader.js程序一样,他实现了一个前后台协作的简单例子。并且要实现显隐视图的功能。)

 

以下为Search.js的代码:


enyo.kind({
	name: "MyApps.Search",
	kind: enyo.VFlexBox,
	events: {
	onLinkClick: "",
	onSelect: ""
	},
	components: [
		    {name: "getFeed", kind: "WebService",
		    	   onSuccess: "gotFeed",
			   onFailure: "gotFeedFailure"
		    },
		    {kind: "RowGroup", caption: "Feed URL", components: [
		    	   {kind: "FancyInput",
			   	  components: [
				  	      {kind: "Button", caption: "Get Feed", onclick: "btnClick"}
				  ],
				  value: "http://feed.phonekr.com"
			   }
		    ]},
		    {kind: "Scroller", flex: 1, components: [
		    	   {name: "list", kind: "VirtualRepeater", onGetItem: "getListItem",
			   	  components: [
				  	      {kind: "Item", layoutKind: "VFlexLayout",
					      	     components: [
						     		 {name: "title", kind: "Divider"},
								 {name: "description", kind: "HtmlContent",
								 	onLinkClick: "doLinkClick"}
					      ],
					      onclick: "listItemClick"
			   }
				  ]
			    }
		     ]}
	],
		create: function() {
				this.inherited(arguments);
				this.results = [];
				},
		btnClick: function() {
			  var url = "http://query.yahooapis.com/v1/public/yql?q=select%20"
			      + "title%2C%20description%2C%20link%20from%20rss%20where%20url%3D%22"
			      + this.$.fancyInput.getValue() + "%22&format=json&callback=";
			  this.$.getFeed.setUrl(url);
			  this.$.getFeed.call();
			  },
		getListItem: function(inSender, inIndex) {
			  var r = this.results[inIndex];
			  if (r) {
			     this.$.title.setCaption(r.title);
			     this.$.description.setContent(r.description);
			     return true;
			     }
		},
		gotFeed: function(inSender, inResponse) {
			 this.results = inResponse.query.results.item;
		         this.$.list.render();
		},
		gotFeedFailure: function(inSender, inResponse) {
				console.log("got failure from getFeed");
		},
		listItemClick: function(inSender, inEvent) {
			       var feed = this.results[inEvent.rowIndex];
			       this.doSelect(feed);
		}
});

熟悉代码的话,会看的出来以上代码复制于FeedReader.js,并做了一些改动。

现在让我们看一下这些改动。

首先,我们改变了接收feed数据的内容,我们调用API获取了包括标题、简述以及url地址。

其次,我们添加了Item对象的事件处理代码,当我们点击了显示摘要的条目之后,会调用listItemClick方法处理这个事件。

再次,我们对rss条目的描述做了修改,使得对应的rss条目的描述部分具包含了对应的url地址信息。

现在,rss条目描述的信息被定义成为一种HtmlContent对象,并且我们对其定义了一个onLinkClick的事件。

(一个onLinkClick事件是当用户点击HtmlContent对象中的连接时,由HtmlContent生成的一个事件。)

代码onLinkClick: “doLinkClick”的意义是将事件向上层对象转发,即FeedReader对象。

最后,请注意onLinkClick和onSelect时间的区别。onSelect事件是当用户在RSS条目区域点击时,由this.doSelect触发的事件。

 

当然, FeedReader.js中的代码也应当做相应的改变,如下:

enyo.kind({
	name: "MyApps.FeedReader",
	kind: enyo.VFlexBox,
	components: [
	    {kind: "PageHeader", content: "Enyo FeedReader"},
	    {name: "pane", kind: "Pane", flex: 1, onSelectView: "viewSelected",
	    	   components: [
		   	       {name: "search", className: "enyo-bg", kind: "MyApps.Search",
			       	      onSelect: "feedSelected", onLinkClick: "linkClicked"},
			       {name: "detail", className: "enyo-bg", kind: "Scroller",
			       	      		components: [
							    {name: "webView", kind: "WebView", className: "enyo-view"}
						]
				}
		   ]
	    }
	],
	create: function() {
		this.inherited(arguments);
		this.$.pane.selectViewByName("search");
	},
	feedSelected: function(inSender, inFeed) {
		      this.$.pane.selectViewByName("detail");
		      this.$.webView.setUrl(inFeed.link);
	},
	linkClicked: function(inSender, inUrl) {
		     this.$.webView.setUrl(inUrl);
		     this.$.pane.selectViewByName("detail");
	},
	viewSelected: function(inSender, inView) {
		      if (inView == this.$.search) {
		      	 this.$.webView.setUrl("");
			}
	},
	backHandler: function(inSender, inEvent) {
		     this.$.pane.back(inEvent);
	}
});

请注意,现在我们使用了一个名为pane的Pane对象来代替原来的界面。

pane中的第二个元素detail也被定义为视图的组件。

(其实就是手机屏幕可以拖拽滑动的显示控件。)

而其中的enyo-bg是显示的CSS样式。

在这里我们可以通过this.$.pane.selectViewByName(viewName)来控制那个视图可见。

当阅读器的实例被建立起来之后,搜索feed的界面首先被显示出来,然后,当我们点击其中一个条目之后,对应的显示界面就被显示出来。

 

虽然在FeedReader.js中的大部分代码已经移植到Search.js中,但是现在新构的FeedReader.js有以下四种方式来显示新的界面。

 

* 当用户在搜索界面下点击了对应的条目onSelect事件被触发,feedSelected方法被调用的流程如下:

-在搜索界面下,一个条目被点击,Search.listItemClick被调用。

-Search.listItemClick事件触发onSelect事件

-FeedReader对象监听到onSelect事件并调用FeedReader.feedSelected事件处理此事件。

-FeedReader.feedSelected切换视图,将url地址传递给名为webView的视图,进行处理。

* 类似的,由onLinkClick事件触发的linkClicked方法也是这样的将url传递给webView的。

相对于数据封装,要注意,FeedReader对象接受的数据来自于onSelect与onLinkClick事件,但是不处理这些事件,将其转交由webView处理。

* viewSelected方法是this.$.pane组件处理onSelectView事件所调用的。如果我们要显示搜索的界面,viewSelected会清除webView界面,将rss条目重新载入。

* 最后,新的backHandler方法方便用户使用后退手势操作退回到原先的界面。(在浏览器上就是Esc按钮。)

 

我们还必须更新一下depends.js文件,以标示出Search.js文件的存在。代码如下:

enyo.depends(
	"source/FeedReader.js",
	"source/Search.js",
	"css/FeedReader.css"
);

以上的修改可以使我们看到如下的改变。

图3和图4

 

 

声明:此教程有翻译不得当的地方欢迎指出!不吝赐教!
开发环境的构架请参照:搭建Enyo开发环境的教程感谢@911boyV
前几节可以到:enyo开发栏目去查看
锋客网phonekr出品
锋客网开发小组组员crubbish4

 

« webOS开源社区刷机终极教程
想要TouchPad的程序?Grapple Mobile 公司正在干这事 »

About webOS新闻组

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

» has written 102 posts

锋客的朋友们

  • 少数派
  • 煮机网

签订契约成为机油吧!

Buy me a coffee~ ;-)

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