Flex3工具显示(ToolTips)教程(4)

使用Error Tips< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />

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显示风格。

<?xml version="1.0"?>

<!-- tooltips/ErrorTipStyle.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20">

<mx:Script><![CDATA[

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;

}

}

]]></mx:Script>

<mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/>

<mx:TextInput id="phone" enter="validateEntry('phone',event)"/>

<mx:Label text="Press the enter key after entering text in each text input."/>

<mx:Button id="b1" label="Reset" click="resetApp()"/>

</mx:Application>

另外一种使用error tips的方法就是设置errorString属性。它会调用ToolTipManager创建一个ToolTip实例并且吧errorTip的风格运用到那个ToolTip中而不需要添加额外的代码。

<?xml version="1.0"?>

<!-- tooltips/ErrorString.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20">

<mx:Script><![CDATA[

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;

}

]]></mx:Script>

<mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/>

<mx:TextInput id="phone" enter="validateEntry('phone',event)"/>

</mx:Application>

当调用createToolTip（）方法时你还可以通过指定errorTipBorderStyle的属性值来制定ToolTipManger所创建的error tip。

<?xml version="1.0"?>

<!-- tooltips/CreatingErrorTips.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script><![CDATA[

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);

}

]]></mx:Script>

<mx:Style>

Panel {

paddingLeft: 5;

paddingRight: 5;

paddingTop: 5;

paddingBottom: 5;

}

</mx:Style>

<mx:Panel title="ToolTips" rollOver="createBigTip(event)" rollOut="destroyBigTip()">

<mx:Button label="OK" toolTip="Save your changes and exit."/>

<mx:Button label="Apply" toolTip="Apply changes and continue."/>

<mx:Button label="Cancel" toolTip="Cancel and exit."/>

</mx:Panel>

</mx:Application>

关于Reskinning ToolTips请自行参考development guide.