5.3.为List的内容变更添加特效

5.3.1 问题
当list 的数据被改变的时候为list 添加显示效果
5.3.2 解决方法
创建一个效果序列并将它们传递给List 组件的itemsChangeEffect 属性
5.3.3 讨论
数据改变时效果是flex 3 新增的很强大的效果,对于之前的版本,你可以写数据改变时效果并分发和注册事件和事件侦听,但是伴随着flex 3 新增itemsChangeEffect 属性,List 组件和任何继承ListBase 的类都可以在它的dataProvider 改变时分发事件,然后该事件触发所有传递给List 中新的itemsChangeEffect 属性的效果或效果序列.

由于dataChange 事件是由List 的dataProvider 触发的,设置一个类似List 组件的dataProvider 的数组意味着该数组被改变时itemsChangeEffect 事件不会被分发。记住,事件被改变时不分发事件,对于ArrayCollection 类,当事件被改变时仍然会分发事件,类似继承自EventDispatcher 并设置成分发事件一样,当一个设置方法被调用来改变潜在的数组对象的值简单地将itemsChangeEffect 设置为一个2 秒淡出的DefaultListEffect 的实例,下面这个例子是当List 被改变时应用一个mx.effects.Glow 实例的效果:

+展开
-XML
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxmlwidth="400height="900top="20left="20">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
//note that for this example to work, the dataprovider
//must be an array collection
[Bindable]
private var dp:ArrayCollection = new ArrayCollection([{name:"John Smith" ,position:"developer" }
, {name:"Ellen Smith" , position:"manager" }
, {name:"James Smith" , position:"accountant" }
, {name:"Jane Smith" , position:"designer" }]);
private function addItem():void {
dp.addItem({name:"Jim Smith" , position:"Janitor" });
}

]]>
</mx:Script>
<mx:DefaultListEffect color="0xccccfffadeOutDuration="2000"
id="glow"/>

<mx:List width="300itemsChangeEffect="{glow}"
dataProvider="{dp}editable="truelabelField="name"/>

<mx:Button click="addItem()label="add item"/>
<mx:List width="300itemsChangeEffect="{glow}"
dataProvider="{dp}editable="truelabelField="name"/>

</mx:VBox>

另一个关于itemsChangeEffect 的例子,这是一个使用Sequence 标签来创建一个当List组件的数据被改变时就触发的事件序列:
+展开
-XML
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxmlwidth="400height="900top="20left="20">
<mx:Script>
<![CDATA[
import mx.collections.ArrayCollection;
import mx.effects.easing.*;
[Bindable]
private var dp:ArrayCollection = new  ArrayCollection([{name:"John Smith", Position:"developer" }
, {name:"Ellen Smith" , position:"manager" }, {name:"James Smith" ,
position:"accountant" }, {name:"Jane Smith" , position:"designer" }]);

]]>
</mx:Script>
<mx:Sequence id="itemsChangeEffect">
<mx:WipeDown duration="500"/>
<mx:Parallel>
<mx:Move
duration="750"
easingFunction="{Elastic.easeOut}"
perElementOffset="20"/>

<mx:RemoveItemAction
startDelay="400"
filter="removeItem"/>

<mx:AddItemAction
startDelay="400"
filter="addItem">

</mx:AddItemAction>
<mx:Blur
startDelay="410"
blurXFrom="18blurYFrom="18blurXTo="0"
blurYTo="0duration="300"
filter="addItem"/>

</mx:Parallel>
</mx:Sequence>
<mx:List width="300itemsChangeEffect="{itemsChangeEffect}"
dataProvider="{dp}editable="truelabelField="name"/>

<mx:Button click="{dp.addItem({name:'Jim Smith' , position:'Janitor' });}label="add item"/>
<mx:Button click="{dp.removeItemAt(3)}label="remove item"/>
<mx:Button click="{dp.setItemAt(dp.getItemAt(1), 2)}label="change item"/>
</mx:VBox>

加支付宝好友偷能量挖...


评论(0)网络
阅读(68)喜欢(0)flash/flex/fcs/AIR