4.4.創(chuàng)建一個(gè)合適的編輯器

2024-04-27 13:51:53

字體：大中小

供稿：網(wǎng)友

4.4.1. 問題
我想創(chuàng)建一個(gè)合適的編輯器組件，當(dāng)用戶點(diǎn)擊文本去有的時(shí)候可以進(jìn)行編輯。
4.4.2. 解決辦法
使用Text 組件的click 監(jiān)聽器改變組件的狀態(tài)來顯示一個(gè)TextInput。使用TextInput 組件的enter 和focusOut 事件來決定當(dāng)用戶完成了編輯然后返回Text 組件的狀態(tài)。
4.4.3. 討論
狀態(tài)是一個(gè)強(qiáng)力和方便的給單一組件添加多種視覺的方法。本節(jié)的例子采用兩種狀態(tài):顯示狀態(tài)和編輯狀態(tài)。顯示狀態(tài)保留了顯示文本值的Label，編輯狀態(tài)保留了允許用戶編輯值的TextInput 組件。
把變量currentState 的屬性設(shè)置成你希望顯示的狀態(tài)對應(yīng)的字符串值就可以切換狀態(tài)了。例如:
currentState = "display";
要保證在點(diǎn)擊Enter 按鈕后存儲(chǔ)用戶輸入完的值或者在用戶點(diǎn)擊TextInput 的某個(gè)位置后，把焦點(diǎn)設(shè)置到TextInput 組件自己身上，就需要在創(chuàng)建組件時(shí)監(jiān)聽enter 事件和focusOut 事件來調(diào)用changeState 方法實(shí)現(xiàn)。

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