4.4.創建一個合適的編輯器

2024-04-27 13:51:53

字體：大中小

來源：轉載

供稿：網友

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 方法實現。

-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>