Flex 创建一个自定义的TextInput
问题
我需要创建一个自定义的TextInput 组件，包括可以输入文本的多行区域和绑定该组件的输出到一个Text 显示。
解决
使用UIComponent 同时添加一个flash.text.TextField 到这个组件中。然后设置一个可绑定的文本属性，将Text 组件的htmlText 属性绑定到新组件的文本。
讨论
mx.controls.TextInput 组件限制访问到flash.text.TextField 组件内部。如果需要对TextField 进行更完全的访问和控制，简单的把一个TextField 添加到UIComponent 中。提供用来访问TextField 的任何方法都应该被定义在这个组件中。如果需要对TextField 进行完全访问，把TextField 当作一个公共属性定义可能更容易。然而，无论何时，当TextField的属性被访问或者被改变，采用第一种方法通知组件会比较方便。看一下例子:
Code View:
package
{
import flash.events.Event;
import flash.events.TextEvent;
import flash.text.TextField;
import flash.text.TextFieldType;
import mx.core.UIComponent;
public class SpecialTextInput extends UIComponent
{
private var textInput:TextField;
public static var TEXT_CHANGED:String = "textChanged";
public function SpecialTextInput()
{
textInput = new TextField();
textInput.multiline = true;
textInput.wordWrap = true;
textInput.type = flash.text.TextFieldType.INPUT;
textInput.addEventListener(TextEvent.TEXT_INPUT,checkInput);
addChild(textInput);
super();
}
private function checkInput(textEvent:TextEvent):void
{
text = textInput.text;
}
override public function set height(value:Number):void
{
textInput.height = this.height;
super.height = value;
}
override public function set width(value:Number):void
{
textInput.width = this.width;
super.width = value;
}
[Bindable(event="textChanged")]
public function get text():String
{
return textInput.text;
}
public function set text(value:String):void
{
dispatchEvent(new Event("textChanged"));
}
}
}
要使用这个新组件，把Text 的htmlText 属性绑定到新组件的text 属性上去:
Code View:
<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400"
height="300" xmlns:cookbook="*">
<cookbook:SpecialTextInput id="htmlInput" height="200"
width="300"/>
<mx:TextArea htmlText="{htmlInput.text}"/>
</mx:VBox>
