読者です 読者をやめる 読者になる 読者になる

TEPPEI STUDIO

ENJOY RESTRICTION

validateエラー時の赤いツールチップを隠す

※仕事仲間にバレてしまいましたが・・・

本業の方で実装する必要があった、validateエラー時の赤いツールチップを隠すコンポーネントの作成ですが、思った以上に苦労しました。(僕じゃないですが)
それにしても、こういうニーズって珍しいんですかね。プロパティひとつで出ないようにしてくれりゃいいのに。

ってことで、実装方法ご紹介です。

店長さん、JACKさん、掲載させていただきます

package custom
{
	import mx.controls.TextInput;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import mx.events.ValidationResultEvent;

	public class HideBalloonTextInput extends TextInput
	{
		private var _errString:String = "";
		private var _bkThemeColor:uint;
		
		public function HideBalloonTextInput():void
		{
			super();
		}
		
		override public function initialize():void
		{
			super.initialize();
			this._bkThemeColor = this.getStyle("themeColor");
		}
		
		override public function get errorString():String
		{
			return "";
		}
		
		override public function set errorString(value:String):void
		{
			trace("errorString:" + value);
			super.errorString = value;
			this._errString = value;
		}
		
		override public function validationResultHandler(event:ValidationResultEvent):void
		{
			super.validationResultHandler(event);
			
			if(event.type == ValidationResultEvent.INVALID)
			{
				_bkThemeColor = this.getStyle("themeColor");
				this.setStyle("themeColor",0xff0000);
			}
			else
			{
				this.setStyle("themeColor",_bkThemeColor);
				this.errorString = "";
			}
			
		}
		
	}//end of class
}//end of package

以下、動作検証アプリです。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="vertical" 
	xmlns:custom="custom.*">
	
	<mx:StringValidator 
		source="{hbtxi1}" 
		property="text" 
		required="true" 
		valid="validLbl1.text='valid'" 
		invalid="validLbl1.text='invalid'"/>

	<mx:StringValidator 
		source="{hbtxi2}" 
		property="text" 
		required="true" 
		valid="validLbl2.text='valid'" 
		invalid="validLbl2.text='invalid'"/>

	
	<mx:HBox width="500" horizontalAlign="left">
		<custom:HideBalloonTextInput id="hbtxi1" toolTip="HideBalloonTextInput"/>
		<mx:Label id="validLbl1"/>
	</mx:HBox>

	<mx:HBox width="500" horizontalAlign="left">
		<custom:HideBalloonTextInput id="hbtxi2" toolTip="HideBalloonTextInput"/>
		<mx:Label id="validLbl2"/>
	</mx:HBox>

	
</mx:Application>