7.11.为项编辑器应用状态和变换
7.11.1. 问题
你需要在用户开始编辑与结束编辑时给itemEditor 加一些effects。
7.11.2. 解决办法
在itemEditor 中创建一个state,当用户开始编辑它的时候,利用Transition 运行一个effect。
7.11.3. 讨论
在用户完成修改后运行一个effect 是很好实现的。使用DefaultListEffect。
DefaultListEffect 定义了一个effect 在用户提交自己的修改之后运行:
原文中有点小错误:List 并没有dataChangeEffect属性,而应该是itemsChangeEffect。
上边的代码只实现了:当用户修改完成后有effect,但是没有实现在开始修改时有effect。为了实现在用户开始修改时有effect 必须有一个itemRenderer,在需要时可以创建itemEditor。itemRenderer 只要完成data 的设置和定义editor 创建时的Transition就好了。当用户修改完成,销毁这个editor 的时候,这个effect 也会运行。
你需要在用户开始编辑与结束编辑时给itemEditor 加一些effects。
7.11.2. 解决办法
在itemEditor 中创建一个state,当用户开始编辑它的时候,利用Transition 运行一个effect。
7.11.3. 讨论
在用户完成修改后运行一个effect 是很好实现的。使用DefaultListEffect。
DefaultListEffect 定义了一个effect 在用户提交自己的修改之后运行:
+展开
-XML
<mx:List xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="300" dataChangeEffect="{baseEffect}" editable="true">
<mx:DefaultListEffect id="baseEffect" color="#ffff00"
fadeInDuration="300" fadeOutDuration="200"/>
</mx:List>
height="300" dataChangeEffect="{baseEffect}" editable="true">
<mx:DefaultListEffect id="baseEffect" color="#ffff00"
fadeInDuration="300" fadeOutDuration="200"/>
</mx:List>
原文中有点小错误:List 并没有dataChangeEffect属性,而应该是itemsChangeEffect。
上边的代码只实现了:当用户修改完成后有effect,但是没有实现在开始修改时有effect。为了实现在用户开始修改时有effect 必须有一个itemRenderer,在需要时可以创建itemEditor。itemRenderer 只要完成data 的设置和定义editor 创建时的Transition就好了。当用户修改完成,销毁这个editor 的时候,这个effect 也会运行。
+展开
-XML
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" currentState="base" width="100" height="20" creationComplete="currentState='init' " focusEnabled="true" backgroundColor="#ffff00">
<mx:Script>
<![CDATA[
[Bindable]
private var _data:Object;
override public function set data(value:Object):void { _data = value; }
override public function get data():Object { return _data; }
//so that the text of the input field can be set when we first start
public function set text(value:String):void { input.text = value; }
//this is needed so that the item editor will return the correct value
//when the list reads that value back
public function get text():String { return input.text; }
]]>
</mx:Script>
<mx:transitions>
<!-- this transition will play when the component is ready
to be displayed -->
<mx:Transition fromState="*" toState="init">
<mx:Fade alphaFrom="0" alphaTo="1" duration="500"
target="{this
}"/>
</mx:Transition>
<mx:Transition fromState="init" toState="*">
<mx:Fade alphaFrom="1" alphaTo="0" duration="500" effectEnd="this
.dispatchEvent(new Event('finishTransition' , true ))" target="{this }"/>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="base"/>
<mx:State name="init"/>
</mx:states>
<mx:TextInput id="input"
creationComplete="input.text = String(_data),
input.setFocus()"/>
</mx:Canvas>
<mx:Script>
<![CDATA[
[Bindable]
private var _data:Object;
override public function set data(value:Object):void { _data = value; }
override public function get data():Object { return _data; }
//so that the text of the input field can be set when we first start
public function set text(value:String):void { input.text = value; }
//this is needed so that the item editor will return the correct value
//when the list reads that value back
public function get text():String { return input.text; }
]]>
</mx:Script>
<mx:transitions>
<!-- this transition will play when the component is ready
to be displayed -->
<mx:Transition fromState="*" toState="init">
<mx:Fade alphaFrom="0" alphaTo="1" duration="500"
target="{this
}"/>
</mx:Transition>
<mx:Transition fromState="init" toState="*">
<mx:Fade alphaFrom="1" alphaTo="0" duration="500" effectEnd="this
.dispatchEvent(new Event('finishTransition' , true ))" target="{this }"/>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="base"/>
<mx:State name="init"/>
</mx:states>
<mx:TextInput id="input"
creationComplete="input.text = String(_data),
input.setFocus()"/>
</mx:Canvas>
加支付宝好友偷能量挖...