本文作者:Mizarli
文章出处:ultrashock
本文译者:egoldy
英文原版链接为:http://www.ultrashock.com/tutorials/flashmx2004/databinding.php
创世之初...
创世之初上帝创造了天空和大地。当时大地是无定形的、方块的,所以上帝创造了Flash并发现它用起来还不错。那是第一天的事了。到了第四天,上帝已经不满足于普通的动画了,所以他引入了ActionScript。到了第五天,上帝摒弃了旧式的ActionScript并重新开始构建,但仅仅是使AS更规范了些。到了第六天,AS得到了补充并且上帝创造了组件。后来,上帝发现组件很孤独就创造了数据流,通过它,组件可以被绑定在一起,分享数据综合的乐趣。第七天,上帝打算休息了,但在发明了Flash甚至更好的是在创作环境中整合了数据绑定功能和整齐的组件构架。
那么,什么是数据绑定呢?
也许你已经认识到:数据绑定对于Flash来说已经不是新特性了,但是自从加强了对FlashMX的改善后,已经有了极大的提高。简单地说,数据绑定是一种简单的方法——不费太多功夫,就可以把你的数据捆绑在一起。你可以协调不同用UI(user interface)组件的属性,甚至可以通过数据组件把它们与服务器端的数据相连。数据绑定不需要懂得复杂的AS或者懂得操作XML,而是把这项操作减小到用简单的“点击”操作就能完成。数据绑定是快速应用程序开发(RAD)的一个关键的特性也是原型开发的利器。
点对点(point-and-click)数据绑定本质上是通过运行时数据绑定应用程序接口(API)实现的。假如在你的影片里包含了需要的资源,你也可以通过脚本来访问它。这仅仅需要复制公用库里的数据绑定类符号(Data Binding Classes),可以在Flash菜单中找到它:
窗口——其他面板——公用库——类。这是最好的方法,如果你仅需要建立到动态内容的绑定或者仅仅喜欢在代码环境下工作。然而,我们现在关注的是可视化的界面。
在开始之前,在这里请先下载源文件并解压缩到一个新目录中。
寻找你的方向
开始吧!让我们来看看用来实现数据绑定的新面板。开始时会有点心慌,但我们将很快适应它。我已经把它们布置好了,以组件面板开始,结束于组件检查器中的“架构标签”。别多想,继续学习!
组件面板
组件检查器:参数标签
组件检视面板:绑定标签
组件检视面板:架构标签
基本的组件
既然组件面板让我们有点慌乱,那就从这开始学习吧。我们要建立一个非常简单的在两个单选按钮(CheckBox)之间的绑定,像这样:
CheckBoxes.fla
单点每个单选按钮时,你会发现另外一个也发生了同样的变化。这就是我们要达到的目的。
1、 从组件面板拖拽出两个单选按钮,分别给这两个实例命名为checkBox1和checkBox2 ;
2、 打开组件面板的“绑定”标签,然后选择checkBox1,这时的面板应该是空的,因为还没有建立任何绑定;
3、 点击“+”按钮,会弹出“添加绑定”面板;
4、 我们要绑定的是已选的checkBox的selected属性,所以点击名为“selected:Boolean”即可,然后点击“OK”;
5、在绑定标签下显示了一个新建的绑定。现在我们把它和其他对象连接起来。双击参数列表中的“bound to”参数的空白区(会有“绑定到”窗口弹出),通过选择“组件路径”checkBox2的“架构位置” selected属性,完成绑定,如下所示:
6、 好了,测试你的影片吧!
尽管看起来不错,但是还不是很严密的。有一个面板我们还没看到。最使人烦乱的“架构”标签。组件的架构标签是对组件数据结构的一个概括。在一个单选按钮的情况下,是最简单的,默认为一个属性——决定它是被选中还是未被选中。你可以看到“selected”字样显示在刚建立的单选按钮的列表里。源文件名为CheckBoxes.fla
架构
使用架构面板,我们不会受限制于默认条件。我们可以在这加入新的属性,并且这些属性是可控的有用的。通常这不用做太多,因为属性并不意味任何东西,但事实上你可以建立更多的组件属性来提供数据绑定。
第二个例子,我们要绑定两个单选按钮,不过这次绑定一个组件的“可用”属性,用它来激活另一个组件。:
CheckBoxes_enabled.fla
注意选择或者取消选择单选按钮1可以激活或不激活单选按钮2。这更有用处。你可以用这样的功能,在表单中根据用户的选择来激活或者不激活表单中的其他部分。让我们开始吧。
1、 开始前去掉例1中已绑定的选项,选择任何一个单选按钮,然后选择绑定标签,单击“-”按钮;
2、 选择组件实例“checkBox2”,点击架构标签,点击“+”增加一个新属性;
3、 在架构面板下会有很多信息显示出来,但是别担心,本例中不需要太多的设置。仅仅设置“field name”参数为“enabled”,“data type”参数为“Boolean”。
4、 现在象前面所做的一样,建立帮定。不过这回是绑定单选按钮1的“selected”属性到单选按钮2的“enabled”属性上,测试一下!
是不是目前所有的数据都是基于XML呢?
是的!所以要熟悉它,否则就有被淘汰的可能!除XML以外其他的方法都会在数据绑定上遇到困难!接下来,我们将引入XML架构,然后从外部的XML文件移植数据做菜单条,用XMLConnector组件。
首先你应该知道菜单条组件,实际上有许多XML驱动的组件(比如菜单、菜单条、目录树),只是XML节点的名字被忽略了,仅仅使用了XML的属性。下面就是一个XML文件例子:
代码:
<menu>
<menu-title label="file">
<menu-item label="load" />
<menu-item label="save" />
<menu-item label="print" />
</menu-title>
<menu-title label="edit">
<menu-item label="cut" />
<menu-item label="copy" />
<menu-item label="paste" />
<menu-item label="sub-menu">
<menu-item label="nothing here" />
</menu-item>
</menu-title>
</menu>
xmlMenu.swf文件演示