编辑器组件

一个编辑器组件，当用户点击文本可以进行编辑。
当设置组件的currentState为编辑状态时，TextInput的文本会被设置到显示状态中的Label的值里。当用户按了回车键，组件的状态会返回到显示模式，同时从TextInput传过来的值会被设置到显示状态中的Label里。
<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml"
    width="400" height="300" 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>
        <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>