Home > Advanced, FLEX > Prompt TextInput with ignore text

Prompt TextInput with ignore text

There are cases in which we need more than text input, which should let the user to notify with some custom text  in text input whenever it is empty. i.e. prompt text input. But there are special cases in which we should even treat some text as empty and should show the prompt text in text input. I went through this need when my client asked me to show a prompt text in text input whenever it is zero. We could restrict zero in text input by using conditional expression in text property, provided we must ensure wherever we are setting the text input.

So i have decided to extend the text input component so that i could restrict zero in one place called set text(value : String) method. when i wanted to implement, i needed prompt text input and i asked myself why should not i do that too. I went ahead did at last.

You can find the implemented component code below which allows you to set ignore text (the text you want to treat as empty text) and you can also enable/disable the prompt text input. If it is disabled, it would function as normal text input.

Click here to download sample application

package
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	import flash.events.FocusEvent;

	import mx.controls.TextInput;
	import mx.utils.StringUtil;
	[Style(name="promptStyleName", type="String")]
	public class PromptIgnoreTextInput extends TextInput
	{
		[Bindable] private var textEmpty : Boolean;
		public function PromptIgnoreTextInput()
		{
			super();
			this.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
			this.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
			this.addEventListener(Event.CHANGE, handleChange);
		}
		[Bindable] private var _prompt : String;
		public function set prompt(value : String):void
		{
			_prompt = value;
		}
		public function get prompt():String
		{
			return _prompt;
		}
		[Bindable] private var _ignoreText : String;
		public function set ignoreText(value : String):void
		{
			_ignoreText = value;
		}
		public function get ignoreText():String
		{
			return _ignoreText;
		}
		[Bindable] private var _enablePrompt : Boolean;
		public function set enablePrompt(value : Boolean):void
		{
			_enablePrompt = value;
		}
		public function get enablePrompt():Boolean
		{
			return _enablePrompt;
		}
		override public function set text(value:String):void
		{
			value = StringUtil.trim(value);
			if(value != null && value != "")
			{
				if(value == ignoreText)
				{
					textEmpty = true;
				}
				else
				{
					textEmpty = false;
				}
			}
			else
			{
				textEmpty = true;
			}

			super.text = value;
			invalidateDisplayList();
		}
		override public function get text():String
		{
			return super.text;
		}
		override protected function updateDisplayList(unscaledWidth:Number,
		unscaledHeight:Number):void
		{
			if(_enablePrompt)
			{
				if(textEmpty && !isCurrentlyFocussed())
				{
					super.text = prompt;
					this.styleName = getStyle("promptStyleName");
				}
				else if(textEmpty && isCurrentlyFocussed())
				{
					super.text = "";
					this.styleName = "";
				}
				else
				{
					this.styleName = "";
				}
			}
			super.updateDisplayList(unscaledWidth, unscaledHeight);
		}
		protected function isCurrentlyFocussed():Boolean
		{
			var focussedComponent : DisplayObject;
			focussedComponent = focusManager.getFocus() as DisplayObject;
			if(focussedComponent)
			{
				if(focussedComponent == this || this.contains(focussedComponent))
					return true;
			}
			return false;
		}
		protected function handleFocusIn(event : FocusEvent):void
		{
			invalidateDisplayList();
		}
		protected function handleFocusOut(event : FocusEvent):void
		{
			text = super.text;
			invalidateDisplayList();
		}
		protected function handleChange(event : Event):void
		{
			textEmpty = (super.text.length == 0 || super.text == _ignoreText) ?
			            true : false;
		}

	}
}

Please let me know if you find any problem or have any suggestion about this component so that i could refine this code when i find time. Thank you for reading this post.

About these ads
  1. keith thompson
    November 25, 2009 at 2:22 am | #1

    After fighting with andy mcintosh’s flex 4 skinned promting text input, and not being able to get it to work.

    I found yours and after a few tweaks, I got it to work in flex 4 beta 2.

    I made the prompt enabled by default and also the isEmpty set to true by default made a big difference, email me if below is too hard to capture

    package
    common.components{
    import flash.events.Event;
    import flash.events.FocusEvent;

    import mx.utils.StringUtil;

    import spark.components.TextInput;

    [Style(name="promptStyleName", type="String")]
    public class PromptIgnoreTextInput extends TextInput {
    [Bindable]
    private var textEmpty:Boolean = true;

    public function PromptIgnoreTextInput() {
    super();
    this.addEventListener(FocusEvent.FOCUS_IN, handleFocusIn);
    this.addEventListener(FocusEvent.FOCUS_OUT, handleFocusOut);
    this.addEventListener(Event.CHANGE, handleChange);
    }

    [Bindable]
    private var _prompt:String;
    public function set prompt(value:String):void {
    _prompt = value;
    }

    public function get prompt():String {
    return _prompt;
    }

    [Bindable]
    private var _ignoreText:String;
    public function set ignoreText(value:String):void {
    _ignoreText = value;
    }

    public function get ignoreText():String {
    return _ignoreText;
    }

    [Bindable]
    private var _enablePrompt:Boolean = true;
    public function set enablePrompt(value:Boolean):void {
    _enablePrompt = value;
    }

    public function get enablePrompt():Boolean {
    return _enablePrompt;
    }

    override public function set text(value:String):void {
    value = StringUtil.trim(value);
    if (value != null && value != “”) {
    if (value == ignoreText) {
    textEmpty = true;
    }
    else {
    textEmpty = false;
    }
    }
    else {
    textEmpty = true;
    }

    super.text = value;
    invalidateDisplayList();
    }

    override public function get text():String {
    return super.text;
    }

    override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
    if (_enablePrompt) {
    if (textEmpty && !isCurrentlyFocused()) {
    super.text = prompt;
    this.styleName = getStyle(“promptStyleName”);
    }
    else if (textEmpty && isCurrentlyFocused()) {
    super.text = “”;
    this.styleName = “”;
    }
    else {
    this.styleName = “”;
    }
    }
    super.updateDisplayList(unscaledWidth, unscaledHeight);
    }

    private var focused:Boolean;

    protected function isCurrentlyFocused():Boolean {
    return focused;
    }

    protected function handleFocusIn(event:FocusEvent):void {
    focused = true;
    invalidateDisplayList();
    }

    protected function handleFocusOut(event:FocusEvent):void {
    focused = false;
    text = super.text;
    invalidateDisplayList();
    }

    protected function handleChange(event:Event):void {
    textEmpty = (super.text.length == 0 || super.text == _ignoreText) ? true : false;
    }

    }
    }

  2. October 20, 2010 at 11:42 am | #2

    Thank you for this example.
    I noticed that prompts are not present when first loading flex screen.
    What I added is an override of the initialize() method, in which the text input will dispatch a FOCUS_OUT event.
    This solved the problem, I wish there will not be negative impact on fonctionalities.
    Please add to the PromptIgnoreTextInput class the flowing overridden function:

    /* Overriding initialize() method */
    override public function initialize():void {
    super.initialize();
    this.dispatchEvent(new FocusEvent(flash.events.FocusEvent.FOCUS_OUT));
    }

  3. ganesh
    November 26, 2010 at 7:34 am | #3

    Thanks for the code bro… It was of great help. Your efforts is appreciated. :-)

  4. Gar
    March 24, 2011 at 4:40 am | #4

    Ah won’t work if displayAsPassword is true..

  1. January 13, 2010 at 12:05 am | #1

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Follow

Get every new post delivered to your Inbox.

%d bloggers like this: