上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。




Validatorを使用せずにツールチップ(エラーヒント)を表示する方法を記載します。

標準のValidatorを使用した場合、エラーのコントロールにマウスオーバーで
ツールチップ(エラーヒント)を表示させることができるが、

マウスオーバーなしにツールチップ(エラーヒント)を表示させる方法はないものか?
と思ってツールチップ(エラーヒント)を生成する処理を作ってみました。


Main.mxml



<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
width="100%" height="100%" creationComplete="init()">

<mx:Script>
<![CDATA[
import mx.controls.Label;
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;

public var nameTip:ToolTip;
public var loginTip:ToolTip;

private var errorMessages:Array = new Array([]);
private var errorMessageToolTips:Array = new Array();

private function init():void{

errorMessages["txtName"] = "名前";
errorMessages["txtPhone"] = "電話番号";
errorMessageToolTips["txtName"];
errorMessageToolTips["txtPhone"];
}

private function createErrorHint(target:TextInput):void {

var toolTipExists:Boolean = errorMessageToolTips.hasOwnProperty(target.name);

if (target.text == "") {
if (toolTipExists) {
(errorMessageToolTips[target.name] as ToolTip).visible = true;
} else {
var pt:Point = new Point(target.x, target.y);
var parent:Object = target.parent;

pt = parent.localToGlobal(pt);

var errorTip:ToolTip = ToolTipManager.createToolTip(
errorMessages[target.name] + "が未入力です。",
(pt.x + target.width + 5 ), pt.y ) as ToolTip;

errorTip.setStyle("styleName", "errorTip");

errorMessageToolTips[target.name] = errorTip;
}
} else {
if (toolTipExists) {
(errorMessageToolTips[target.name] as ToolTip).visible = false;
}
}
}
]]>
</mx:Script>

<mx:TitleWindow>
<mx:Form>
<mx:FormItem label="名前" required="true">
<mx:TextInput id="txtName" width="100" maxChars="30" focusOut="createErrorHint(txtName)" />
</mx:FormItem>
<mx:FormItem label="電話番号" required="true">
<mx:TextInput id="txtPhone" width="100" maxChars="10" focusOut="createErrorHint(txtPhone)" />
</mx:FormItem>
</mx:Form>
</mx:TitleWindow>
</mx:Application>


実行結果は以下のようになります。

少しでも参考になれば応援お願いします。












上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。