4.4.创建一个合适的编辑器
4.4.1. 问题
我想创建一个合适的编辑器组件，当用户点击文本去有的时候可以进行编辑。
4.4.2. 解决办法
使用Text 组件的click 监听器改变组件的状态来显示一个TextInput。使用TextInput 组件的enter 和focusOut 事件来决定当用户完成了编辑然后返回Text 组件的状态。
4.4.3. 讨论
状态是一个强力和方便的给单一组件添加多种视觉的方法。本节的例子采用两种状态:显示状态和编辑状态。显示状态保留了显示文本值的Label，编辑状态保留了允许用户编辑值的TextInput 组件。
把变量currentState 的属性设置成你希望显示的状态对应的字符串值就可以切换状态了。例如:
currentState = "display";
要保证在点击Enter 按钮后存储用户输入完的值或者在用户点击TextInput 的某个位置后，把焦点设置到TextInput 组件自己身上，就需要在创建组件时监听enter 事件和focusOut 事件来调用changeState 方法实现。
我想创建一个合适的编辑器组件，当用户点击文本去有的时候可以进行编辑。
4.4.2. 解决办法
使用Text 组件的click 监听器改变组件的状态来显示一个TextInput。使用TextInput 组件的enter 和focusOut 事件来决定当用户完成了编辑然后返回Text 组件的状态。
4.4.3. 讨论
状态是一个强力和方便的给单一组件添加多种视觉的方法。本节的例子采用两种状态:显示状态和编辑状态。显示状态保留了显示文本值的Label，编辑状态保留了允许用户编辑值的TextInput 组件。
把变量currentState 的属性设置成你希望显示的状态对应的字符串值就可以切换状态了。例如:
currentState = "display";
要保证在点击Enter 按钮后存储用户输入完的值或者在用户点击TextInput 的某个位置后，把焦点设置到TextInput 组件自己身上，就需要在创建组件时监听enter 事件和focusOut 事件来调用changeState 方法实现。
+展开
当设置组件的currentState为编辑状态时，TextInput的文本会被设置到显示状态中的Label的值里。当用户按了回车键，组件的状态会返回到显示模式，同时从TextInput 传过来的值会被设置到显示状态中的Label里。TextInput 组件的enter事件指明了在组件成为焦点的时候用户是按了回车还是返回键。-XML
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" width="250"
height="40" top="10" currentState="display">
<mx:Script>
<![CDATA[
[Bindable]
private var value:String;
private function changeState(event:Event = null):void
{
if(this.currentState == "display")
{
currentState = "edit";
}
else
{
value = editInput.text;
currentState = "display";
}
}
]]>
</mx:Script>
<mx:states>
<mx:State id="display" name="display">
<mx:AddChild>
<mx:Label text="{value}" id="text" x="{editorValue.x + editorValue.width}" click="changeState()"
minWidth="100" minHeight="20"/>
</mx:AddChild>
</mx:State>
height="40" top="10" currentState="display">
<mx:Script>
<![CDATA[
[Bindable]
private var value:String;
private function changeState(event:Event = null):void
{
if(this.currentState == "display")
{
currentState = "edit";
}
else
{
value = editInput.text;
currentState = "display";
}
}
]]>
</mx:Script>
<mx:states>
<mx:State id="display" name="display">
<mx:AddChild>
<mx:Label text="{value}" id="text" x="{editorValue.x + editorValue.width}" click="changeState()"
minWidth="100" minHeight="20"/>
</mx:AddChild>
</mx:State>
+展开
-XML
<mx:State id="edit" name="edit">
<mx:AddChild>
<mx:TextInput creationComplete="editInput.setFocus()" focusOut="changeState()" id="editInput" x="{editorValue.x + editorValue.width}" text="{value}" minWidth="100" minHeight="20" enter="changeState()"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Label text="Value: " id="editorValue"/>
</mx:Canvas>
<mx:AddChild>
<mx:TextInput creationComplete="editInput.setFocus()" focusOut="changeState()" id="editInput" x="{editorValue.x + editorValue.width}" text="{value}" minWidth="100" minHeight="20" enter="changeState()"/>
</mx:AddChild>
</mx:State>
</mx:states>
<mx:Label text="Value: " id="editorValue"/>
</mx:Canvas>
加支付宝好友偷能量挖...
