实例五、News Reader
一、涉及特性
本实例主要涉及数据绑定和组件的编程。数据绑定是在Flash MX 2004中才有的新功能,据称不用编程,只需设置几个组件的属性,就可以实现与服务器端的数据交互功能,也算是一大突破了。另外,由于在实例中没有提供相应的xml文件,所有字段都要手工输入,所以本实例的制作过程显得有些繁琐,请在制作过程中仔细检查每一个字段。
二、制作过程
1、从组件面板中拖一个List组件到场景中,命名为“articles”,设置“multipleSelection”为false,“rowHight”为20。
2、从组件面板中拖一个TextArea组件到场景中,命名为“title”,各种参数设置不变。
3、从组件面板中拖一个Label组件到场景中,命名为“author”,设置“text”为空。
4、从组件面板中拖两个TextArea组件到场景中,分别命名为“desc”和“link”,都设置“text”为空。
5、从组件面板中拖一个XMLConnector组件到场景中,命名为“feed”,设置参数如下:“URL”为“http://www.macromedia.com/go/devnet_rss”,“direction”为receive。
6、用文本工具在场景中输入几处文字,此时的效果如图1所示。
7、选取“feed”组件,选取“Component Inspector”中的Schema面板,在results字段下面增加如下的子字段:field name为RDF,data type为object,storage type为complex。
8、在RDF字段下面增加如下的子字段:A、field name为xmlns,data type为string,storage type为attribute;B、field name为dc,data type为string,storage type为attribute;C、field name为rdf,data type为string,storage type为attribute;D、fieldname为channel,data type为object,storage type为Complex;E、field name为item,data type为Array,storage type为array。
9、在Channel字段下面增加如下的子字段:A、field name为about,data type为string,storage type为attribute;B、field name为title,data type为string,storage type为simple;C、field name为link,data type为string,storage type为simple;D、field name为description,data type为string,storage type为simple;E、field name为date,data type为string,storage type为simple;F、field name为language,data type为string,storage type为simple;G、field name为items,data type为object,storage type为complex。
10、在Channel字段的items子字段下面增加子字段:field name为seq,data type为object,storage type为complex;在seq字段下面增加子字段:field name为li,data type为Array,storage type为array;在li字段下面增加子字段:field name为[n],data type为int,storage type为simple;在[n]字段下面增加子字段:field name为resource,data type为string,storage type为attribute。
11、回到RDF字段下面,在item字段下面增加如下子字段:field name为[n],data type为object,storage type为complex;在[n]字段下面增加如下的子字段:A、field name为about,data type为string,storage type为attribute;B、field name为title,data type为string,storage type为simple;C、field name为link,data type为string,storage type为simple;D、field name为description,data type为string,storage type为simple;E、field name为creator,data type为string,storage type为simple;F、field name为subject,data type为string,storage type为simple;G、field name为date,data type为string,storage type为simple;H、field name为type,data type为string,storage type为simple。此时的Schema面板如图2所示。
12、选取“feed”组件,选取“Component Inspector”中的Bindings面板,点击“Add Bindings”按钮,添加一个“results.RDF.item”字段,点击“Bound to”按钮,在弹出的对话框中选取“List”,设置“formatter”为“Rearrange Field”,设置“formatter option”为“label='< creator>: < title>'”。
13、同样在“feed”的Bingdings面板,点击“Add Bindings”按钮,添加一个“results.RDF.item.[n].title”字段,点击“Bound to”按钮,在弹出的对话框中选取“Text Area< title>”,设置“Index of item”为articles : selected Index。
14、点击“Add Bindings”按钮,添加一个“results.RDF.item.[n].link”字段,点击“Bound to”按钮,在弹出的对话框中选取“Text Area< link>”,设置“Index of item”为articles : selected Index。
15、点击“Add Bindings”按钮,添加一个“results.RDF.item.[n].creator”字段,点击“Bound to”按钮,在弹出的对话框中选取“Text< author>”,设置“Index of item”为articles : selected Index。
16、点击“Add Bindings”按钮,添加一个“results.RDF.item.[n].description”字段,点击“Bound to”按钮,在弹出的对话框中选取“Text Area< desc>”,设置“Index of item”为articles : selected Index。此时的Bindings面板如图3所示。
17、在Time Line中增加一层,命名为Action,在此层的Action面板上增加下面的语句:
/* Copyright 2003 Macromedia, Inc. All rights reserved.
The following is Sample Code and is subject to all restrictions
on such code as contained in the End User License Agreement
accompanying this product.
*/
function bindingExecuted() {
articles.selectedIndex = 0;
articles.refreshDestinations();
}
articles.addEventListener("bindingExecuted", this);
feed.trigger();
上面这些语句是为articles组件增加侦听鼠标动作的语句,让feed开始通讯。
三、实际用途
本实例主要涉及的是数据绑定功能,用途相当广泛,主要用来与服务器端的数据交互。以前相对繁琐的编程实现,现在只要设定几个组件的属性即可实现相应的功能。注意本实例中只涉及在Flash端的实现,没有涉及在服务器端的实现。
另外,7-11步可以通过导入一个xml文件来实现,但系统提供的帮助文件中没有相应的xml文件,只能手工输入,因此显得有点复杂。