Error Tips
Error tips是ToolTip类的一个实例。它可以从errorTip类选择器来获得styles. 他们经常出现在Flex的验证机制中用来显示警告信息。但是你也可以利用errorTip的style定义来创建自己的验证警告机制。
Error tips的风格定义在default.css这个文件中。它指定了以下默认的设置：
.errorTip { color: #FFFFFF;
fontSize: 9;
fontWeight: "bold";
shadowColor: #000000;
borderColor: #CE2929;
borderStyle: "errorTipRight";
paddingBottom: 4;
paddingLeft: 4;
paddingRight: 4;
paddingTop: 4; }
你可以重写这些sytle来建立自己的定义的error tips显示风格。
xmlns:mx="" verticalGap="20">
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;
private var errorTip:ToolTip;
private var myError:String;
private function validateEntry(type:String, event:Object):void {
if (errorTip) {
resetApp();
}
// NOTE: Validation logic would go here.
switch(type) {
case "ssn":
myError="Use SSN format (NNN-NN-NNNN)";
break;
case "phone":
myError="Use phone format (NNN-NNN-NNNN)";
break;
}
// Use the target's x and y positions to set position of error tip.
trace("event.currentTarget.width" + event.currentTarget.width);
trace("event.currentTarget.x" + event.currentTarget.x);
errorTip = ToolTipManager.createToolTip(
myError, event.currentTarget.x + event.currentTarget.width,
event.currentTarget.y) as ToolTip;
// Apply the errorTip class selector.
errorTip.setStyle("styleName", "errorTip");
}
private function resetApp():void {
if (errorTip) {
ToolTipManager.destroyToolTip(errorTip);
errorTip = null;
}
}
]]>
id="ssn" enter="validateEntry('ssn',event)"/>
id="phone" enter="validateEntry('phone',event)"/>
text="Press the enter key after entering text in each text input."/>
id="b1" label="Reset" click="resetApp()"/>
另外一种使用error tips的方法就是设置errorString属性。它会调用ToolTipManager创建一个ToolTip实例并且吧errorTip的风格运用到那个ToolTip中而不需要添加额外的代码。
xmlns:mx="" verticalGap="20">
import mx.controls.ToolTip;
import mx.managers.ToolTipManager;
private var errorTip:ToolTip;
private var myError:String;
private function validateEntry(type:String, event:Object):void {
// NOTE: Validation logic would go here.
switch(type) {
case "ssn":
myError="Use SSN format";
break;
case "phone":
myError="Use phone format";
break;
}
event.currentTarget.errorString = myError;
}
]]>
id="ssn" enter="validateEntry('ssn',event)"/>
id="phone" enter="validateEntry('phone',event)"/>
当调用createToolTip（）方法时你还可以通过指定errorTipBorderStyle的属性值来制定ToolTipManger所创建的error tip。
xmlns:mx="">
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;
public var myTip:ToolTip;
private function createBigTip(event:Event):void {
var myError:String = "These buttons let you save, exit, or continue with the current
operation.";
// By setting the fourth argument to a non-null value,
// this ToolTip is created as an error tip.
myTip = ToolTipManager.createToolTip(
myError,
event.currentTarget.x + event.currentTarget.width,
event.currentTarget.y,
"errorTipRight"
) as ToolTip;
}
private function destroyBigTip():void {
ToolTipManager.destroyToolTip(myTip);
}
]]>
Panel {
paddingLeft: 5;
paddingRight: 5;
paddingTop: 5;
paddingBottom: 5;
}
title="ToolTips" rollOver="createBigTip(event)" rollOut="destroyBigTip()">
label="OK" toolTip="Save your changes and exit."/>
label="Apply" toolTip="Apply changes and continue."/>
label="Cancel" toolTip="Cancel and exit."/>
关于Reskinning ToolTips请自行参考development guide.
