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 实例的效果:
另一个关于itemsChangeEffect 的例子,这是一个使用Sequence 标签来创建一个当List组件的数据被改变时就触发的事件序列:
当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/mxml" width="400" height="900" top="20" left="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="0xccccff" fadeOutDuration="2000"
id="glow"/>
<mx:List width="300" itemsChangeEffect="{glow}"
dataProvider="{dp}" editable="true" labelField="name"/>
<mx:Button click="addItem()" label="add item"/>
<mx:List width="300" itemsChangeEffect="{glow}"
dataProvider="{dp}" editable="true" labelField="name"/>
</mx:VBox>
<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="0xccccff" fadeOutDuration="2000"
id="glow"/>
<mx:List width="300" itemsChangeEffect="{glow}"
dataProvider="{dp}" editable="true" labelField="name"/>
<mx:Button click="addItem()" label="add item"/>
<mx:List width="300" itemsChangeEffect="{glow}"
dataProvider="{dp}" editable="true" labelField="name"/>
</mx:VBox>
另一个关于itemsChangeEffect 的例子,这是一个使用Sequence 标签来创建一个当List组件的数据被改变时就触发的事件序列:
+展开
-XML
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="900" top="20" left="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="18" blurYFrom="18" blurXTo="0"
blurYTo="0" duration="300"
filter="addItem"/>
</mx:Parallel>
</mx:Sequence>
<mx:List width="300" itemsChangeEffect="{itemsChangeEffect}"
dataProvider="{dp}" editable="true" labelField="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>
<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="18" blurYFrom="18" blurXTo="0"
blurYTo="0" duration="300"
filter="addItem"/>
</mx:Parallel>
</mx:Sequence>
<mx:List width="300" itemsChangeEffect="{itemsChangeEffect}"
dataProvider="{dp}" editable="true" labelField="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>
加支付宝好友偷能量挖...