[转]flex ToolTip专题

http://nianshi.iteye.com/blog/743808

1 创建ToolTips

    每一个可视化的Flex组件都继承了UIComponent类（它实现了IToolTipManagerClient接口）来支持toolTip属性。这个属性从UIComponent类继承而来。你设置了toolTip的属性为一个文本内容，当鼠标移动到该组件上方的时候，这些文字信息就会被显示。
    你也可以在ActionScript中来设置toolTip.
    假如你没有在一个容器中定义ToolTip, 则容器的子组件将显示容器的ToolTip。举个例子，比如你添加了一个button到一个Panel容器中，而这个容器包含了一个ToolTip，当鼠标移动到这个Panel时用户将看到这个Panel 容器的ToolTip内容。当用户移动鼠标指针到这个button控件时候，Panel容器的ToolTip将继续显示。当然你可以通过设置button 的ToolTip的属性值来重写容器Panel的ToolTip 内容。
TabNavigator容器却在它的子(children)上使用ToolTip。假如你添加ToolTip到TabNavigator的一个子版面中，当鼠标移动到那个版面的tab的上方的时候，ToolTip将被显示出来，而不是鼠标移动到那个版面本身上的时候显示ToolTip信息。假如你添加了ToolTip到TabNavigator容器中，除非ToolTip在那个版面被重写否则不可能当鼠标移动到tab或者版面上都显示 ToolTip信息。同样在以下的控件中也是类似的效果。
Accordion
ButtonBar
LinkBar
TabBar
ToggleButtonBar

2 设置ToolTip风格


    你可以通过CSS语法或者mx.style.StyleManager类来改变ToolTip的内容和外框(Box)的显示风格。默认的风格设置定义在framework.swc文件中的default.css的文件中。
Java代码

   1. <mx:Style> 
   2. ToolTip { 
   3. fontFamily: "Arial"; 
   4. fontSize: 19; 
   5. fontStyle: "italic"; 
   6. color: #FF6699; 
   7. backgroundColor: #33CC99; 
   8. } 
   9. </mx:Style> 

<mx:Style>
ToolTip {
fontFamily: "Arial";
fontSize: 19;
fontStyle: "italic";
color: #FF6699;
backgroundColor: #33CC99;
}
</mx:Style>



要使用StyleManager类来设置ToolTip风格，要使用setStyle()这个函数，比如：
Java代码

   1. private function setToolTipStyle():void { 
   2. StyleManager.getStyleDeclaration("ToolTip").setStyle("fontStyle","italic"); 
   3. StyleManager.getStyleDeclaration("ToolTip").setStyle("fontSize","19"); 
   4. StyleManager.getStyleDeclaration("ToolTip").setStyle("fontFamily","Arial"); 
   5. StyleManager.getStyleDeclaration("ToolTip").setStyle("color","#FF6699"); 
   6. StyleManager.getStyleDeclaration("ToolTip").setStyle("backgroundColor","#33CC99"); 
   7. } 

private function setToolTipStyle():void {
StyleManager.getStyleDeclaration("ToolTip").setStyle("fontStyle","italic");
StyleManager.getStyleDeclaration("ToolTip").setStyle("fontSize","19");
StyleManager.getStyleDeclaration("ToolTip").setStyle("fontFamily","Arial");
StyleManager.getStyleDeclaration("ToolTip").setStyle("color","#FF6699");
StyleManager.getStyleDeclaration("ToolTip").setStyle("backgroundColor","#33CC99");
}



ToolTip使用可继承的全局的styles。比如你通过StyleManager在全局的选择器上（global selector）设置了ToolTip的fontWeight属性:
Java代码

   1. private function setToolTipStyle():void { 
   2. StyleManager.getStyleDeclaration("global").setStyle("fontWeight","bold"); 
   3. } 

private function setToolTipStyle():void {
StyleManager.getStyleDeclaration("global").setStyle("fontWeight","bold");
}



3 ToolTip事件的使用


在ToolTip的生命周期中会触发很多事件，这些事件都是ToolTipEvent类型的。

除了type和target两个属性外，ToolTipEvent对象涉及到了toolTip属性。利用这个属性，就可以通过text属性拿到ToolTip里面的文本内容值。

Java代码

   1. <?xml version="1.0"?> 
   2.  
   3. <!-- tooltips/ToolTipsWithSoundEffects.mxml --> 
   4.  
   5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()"> 
   6. <mx:Script> 
   7. <![CDATA[ 
   8.    import mx.events.ToolTipEvent; 
   9.    import flash.media.Sound; 
  10.    [Embed(source="../assets/sound1.mp3")] 
  11.     private var beepSound:Class; 
  12.     private var myClip:Sound; 
  13.     public function playSound():void { 
  14.       myClip.play(); 
  15.    } 
  16.     
  17.    private function myListener(event:ToolTipEvent):void { 
  18.      playSound(); 
  19.    } 
  20.     private function init():void { 
  21.        myLabel.addEventListener(ToolTipEvent.TOOL_TIP_SHOW,  
  22.        myListener); 
  23.        myClip = new beepSound(); 
  24.     } 
  25. ]]> 
  26. </mx:Script> 
  27.     <mx:Label id="myLabel" toolTip="ToolTip" text="Mouse Over Me"/> 
  28. </mx:Application> 

<?xml version="1.0"?>

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

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="init()">
<mx:Script>
<![CDATA[
   import mx.events.ToolTipEvent;
   import flash.media.Sound;
   [Embed(source="../assets/sound1.mp3")]
    private var beepSound:Class;
    private var myClip:Sound;
    public function playSound():void {
      myClip.play();
   }
  
   private function myListener(event:ToolTipEvent):void {
     playSound();
   }
    private function init():void {
       myLabel.addEventListener(ToolTipEvent.TOOL_TIP_SHOW,
       myListener);
       myClip = new beepSound();
    }
]]>
</mx:Script>
    <mx:Label id="myLabel" toolTip="ToolTip" text="Mouse Over Me"/>
</mx:Application>





4 使用ToolTip 管理器


使用ToolTipManager管理器类能够让你设置基本的ToolTip功能。比如显示延迟，以及控制是否显示ToolTip信息内容。
你可以在程序中激活和停止使用ToolTips. 可以使用enabled这个属性来激活或者停止使用ToolTips，如果停止使用，在鼠标移到到组件上方的时候就不会用ToolTips的框显示出来，不管那个组件是否设置了toolTip这个属性值。
Java代码

   1. if (ToolTipManager.enabled) { 
   2.     ToolTipManager.enabled = false; 
   3. } else { 
   4.     ToolTipManager.enabled = true; 
   5. } 

if (ToolTipManager.enabled) {
    ToolTipManager.enabled = false;
} else {
    ToolTipManager.enabled = true;
}



延迟时间是来来衡量某一时间发生前所消耗的时间。比如，在用户移动鼠标指针到组件的上方，在ToolTip显示之前有一个简短的延迟。这就给那些不想看到ToolTip内容的用户足够的时间，在看到ToolTip信息之前把鼠标移开。

ToolTipManager 可以允许你设置这个ToolTip显示延迟的时间的长度，以及ToolTip在屏幕上显示的事件长度。你还可以设置ToolTips之间的延迟时间。

你可以在ActionScript的代码块中设置ToolTipManager的这些属性值：showDealy,hideDelay和 scrubDelay。具体的功能描述请参考官方的develop guide。以下是一个例子利用Application k控制的初始化方法来设置ToolTip的初始值。

Java代码

   1. private function initApp():void { 
   2. ToolTipManager.enabled = true;// Optional. Default value is true. 
   3. ToolTipManager.showDelay = 0;// Display immediately. 
   4. ToolTipManager.hideDelay = 3000; // Hide after 3 seconds of being viewed. 
   5. } 

private function initApp():void {
ToolTipManager.enabled = true;// Optional. Default value is true.
ToolTipManager.showDelay = 0;// Display immediately.
ToolTipManager.hideDelay = 3000; // Hide after 3 seconds of being viewed.
}



你可以使用自定义的视觉效果或者标准的Flex效果。你可以设置ToolTipManager的showEffect或者hideEffect属性值来定义当ToolTip显示或者隐藏是所触发的效果。

以下就是使用退出(Fade)的效果：
Java代码

   1. <?xml version="1.0"?> 
   2. <!-- tooltips/FadeInToolTips.mxml --> 
   3.  
   4.  
   5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="600" 
   6. initialize="app_init();"> 
   7. <mx:Script><![CDATA[ 
   8. import mx.managers.ToolTipManager; 
   9. public function app_init():void { 
  10. ToolTipManager.showEffect = fadeIn; 
  11. } 
  12. ]]></mx:Script> 
  13. <mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"/> 
  14. <mx:Button id="b1" label="Click Me" toolTip="This is a ToolTip that fades in."/> 
  15. </mx:Application> 

<?xml version="1.0"?>
<!-- tooltips/FadeInToolTips.mxml -->


<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="600" height="600"
initialize="app_init();">
<mx:Script><![CDATA[
import mx.managers.ToolTipManager;
public function app_init():void {
ToolTipManager.showEffect = fadeIn;
}
]]></mx:Script>
<mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000"/>
<mx:Button id="b1" label="Click Me" toolTip="This is a ToolTip that fades in."/>
</mx:Application>



你不仅可是使用ToolTips静态的显示文本信息的功能，还可以使用ToolTips动态的绑定组件中的内容来动态显示ToolTips信息。这样可以让你ToolTips成为用户界面的一部分。给用户给多的个性化的体验。

你可以使用{}绑定ToolTips的值到另外一个组件的文本内容。以下的例子就是插入TextInput控件的文本值到按钮控件的ToolTips值。

Java代码

   1. <?xml version="1.0"?> 
   2. <!-- tooltips/BoundToolTipText.mxml --> 
   3.  
   4. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
   5. <mx:TextInput id="txtTo" width="300"/> 
   6. <mx:Button label="Send" toolTip="Send e-mail to {txtTo.text}"/> 
   7. </mx:Application> 

<?xml version="1.0"?>
<!-- tooltips/BoundToolTipText.mxml -->

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:TextInput id="txtTo" width="300"/>
<mx:Button label="Send" toolTip="Send e-mail to {txtTo.text}"/>
</mx:Application>



另外一个方法就是获取ToolTips的toolTipShow事件处理来改变text属性值。以下就是一个通过 myToolTipChanger方法来监听按钮控件的toolTipShow事件，然后在这个方法内修改了 ToolTipManager.currentToolTip.text属性。这个属性值在运行前是未知的。

Java代码

   1. <?xml version="1.0"?> 
   2.  
   3. <!-- tooltips/DynamicToolTipText.mxml --> 
   4.  
   5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" initialize="initApp()"> 
   6.  
   7. <mx:Script><![CDATA[ 
   8. import mx.managers.ToolTipManager; 
   9. import mx.controls.ToolTip; 
  10. import mx.events.ToolTipEvent; 
  11. public function initApp():void { 
  12. b1.addEventListener(ToolTipEvent.TOOL_TIP_SHOW, myToolTipChanger) 
  13. } 
  14. public function myToolTipChanger(event:ToolTipEvent):void { 
  15. // Pass the value of myName in to your application in some way. 
  16. // For example, as a flashVar variable. 
  17. ToolTipManager.currentToolTip.text = "Click the button, " + 
  18. Application.application.parameters.myName; 
  19. } 
  20. ]]>  
  21. </mx:Script> 
  22.  
  23. <mx:Button id="b1" label="Click Me" toolTip="Click the button."/> 
  24. </mx:Application> 

<?xml version="1.0"?>

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

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

<mx:Script><![CDATA[
import mx.managers.ToolTipManager;
import mx.controls.ToolTip;
import mx.events.ToolTipEvent;
public function initApp():void {
b1.addEventListener(ToolTipEvent.TOOL_TIP_SHOW, myToolTipChanger)
}
public function myToolTipChanger(event:ToolTipEvent):void {
// Pass the value of myName in to your application in some way.
// For example, as a flashVar variable.
ToolTipManager.currentToolTip.text = "Click the button, " +
Application.application.parameters.myName;
}
]]>
</mx:Script>

<mx:Button id="b1" label="Click Me" toolTip="Click the button."/>
</mx:Application>



ToolTipmanger 有两个方法可以让你自定义ToolTips。这两个方法是createToolTip()和destoryToolTip()。即用来创建和销毁 ToolTips对象。当你创建一个ToolTip对象，你可以自定义它的显示效果，类型，事件等。
createToolTip()方法有以下的一些参数：

Java代码

   1. createToolTip(text:String, x:Number, y:Number, errorTipBorderStyle:String, context:IUIComponent):IToolTip 

createToolTip(text:String, x:Number, y:Number, errorTipBorderStyle:String, context:IUIComponent):IToolTip



你可以使用destroyTollTip（）方法来销毁之前指定的ToolTip对象。该方法：
Java代码

   1. destroyToolTip(toolTip:IToolTip):void  

destroyToolTip(toolTip:IToolTip):void



Java代码

   1. <?xml version="1.0"?> 
   2.  
   3. <!-- tooltips/CreatingToolTips.mxml --> 
   4. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
   5. <mx:Script><![CDATA[ 
   6.  
   7. import mx.managers.ToolTipManager; 
   8. import mx.controls.ToolTip; 
   9. public var myTip:ToolTip; 
  10.  
  11. private function createBigTip():void { 
  12. var s:String = "These buttons let you save, exit, or continue with the current 
  13. operation." 
  14. myTip = ToolTipManager.createToolTip(s,10,10) as ToolTip; 
  15. myTip.setStyle("backgroundColor",0xFFCC00); 
  16. myTip.width = 150; 
  17. myTip.height = 200; 
  18. } 
  19.  
  20. private function destroyBigTip():void { 
  21. ToolTipManager.destroyToolTip(myTip); 
  22. } 
  23. ]]></mx:Script> 
  24. <mx:Style> 
  25. Panel { 
  26. paddingLeft: 5; 
  27. paddingRight: 5; 
  28. paddingTop: 5; 
  29. paddingBottom: 5; 
  30. } 
  31. </mx:Style> 
  32. <mx:Panel title="ToolTips" rollOver="createBigTip()" rollOut="destroyBigTip()"> 
  33. <mx:Button label="OK" toolTip="Save your changes and exit."/> 
  34. <mx:Button label="Apply" toolTip="Apply changes and continue."/> 
  35. <mx:Button label="Cancel" toolTip="Cancel and exit."/> 
  36. </mx:Panel> 
  37. </mx:Application> 

<?xml version="1.0"?>

<!-- tooltips/CreatingToolTips.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():void {
var s:String = "These buttons let you save, exit, or continue with the current
operation."
myTip = ToolTipManager.createToolTip(s,10,10) as ToolTip;
myTip.setStyle("backgroundColor",0xFFCC00);
myTip.width = 150;
myTip.height = 200;
}

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()" 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>




当然你也可以通过扩展已存在的控件并且实现IToolTip接口来实现自定义的ToolTip,比如Panel 或者VBox容器等。

Java代码

   1. <?xml version="1.0"?> 
   2.  
   3. <!-- tooltips/ToolTipComponents/PanelToolTip.mxml --> 
   4.  
   5. <mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" 
   6. implements="mx.core.IToolTip" 
   7. width="200" 
   8. alpha=".8" 
   9. borderThickness="2" 
  10. backgroundColor="0xCCCCCC" 
  11. dropShadowEnabled="true" 
  12. borderColor="black" 
  13. borderStyle="solid" 
  14. title="feh" 
  15. >  
  16.  
  17. <mx:Script><![CDATA[ 
  18. [Bindable] 
  19. public var bodyText:String = ""; 
  20. // Implement required methods of the IToolTip interface; these 
  21.  
  22. // methods are not used in this example, though. 
  23. public var _text:String; 
  24. public function get text():String { 
  25. return _text 
  26. } 
  27. public function set text(value:String):void { 
  28. } 
  29. ]]></mx:Script> 
  30. <mx:Text text="{bodyText}" percentWidth="100"/> 
  31. </mx:Panel> 

<?xml version="1.0"?>

<!-- tooltips/ToolTipComponents/PanelToolTip.mxml -->

<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
implements="mx.core.IToolTip"
width="200"
alpha=".8"
borderThickness="2"
backgroundColor="0xCCCCCC"
dropShadowEnabled="true"
borderColor="black"
borderStyle="solid"
title="feh"
>

<mx:Script><![CDATA[
[Bindable]
public var bodyText:String = "";
// Implement required methods of the IToolTip interface; these

// methods are not used in this example, though.
public var _text:String;
public function get text():String {
return _text
}
public function set text(value:String):void {
}
]]></mx:Script>
<mx:Text text="{bodyText}" percentWidth="100"/>
</mx:Panel>




5 使用Error Tips


Error tips是ToolTip类的一个实例。它可以从errorTip类选择器来获得styles. 他们经常出现在Flex的验证机制中用来显示警告信息。但是你也可以利用errorTip的style定义来创建自己的验证警告机制。

Error tips的风格定义在default.css这个文件中。它指定了以下默认的设置：

Java代码

   1. .errorTip { color: #FFFFFF; 
   2.   fontSize: 9; 
   3.   fontWeight: "bold"; 
   4.   shadowColor: #000000; 
   5.   borderColor: #CE2929;  
   6.   borderStyle: "errorTipRight"; 
   7.   paddingBottom: 4; 
   8.   paddingLeft: 4; 
   9.   paddingRight: 4; 
  10.   paddingTop: 4;  
  11. } 

.errorTip { color: #FFFFFF;
  fontSize: 9;
  fontWeight: "bold";
  shadowColor: #000000;
  borderColor: #CE2929;
  borderStyle: "errorTipRight";
  paddingBottom: 4;
  paddingLeft: 4;
  paddingRight: 4;
  paddingTop: 4;
}



你可以重写这些sytle来建立自己的定义的error tips显示风格。
Java代码

   1. <?xml version="1.0"?> 
   2.  
   3. <!-- tooltips/ErrorTipStyle.mxml --> 
   4.  
   5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20"> 
   6.  
   7. <mx:Script><![CDATA[ 
   8.  
   9. import mx.controls.ToolTip; 
  10. import mx.managers.ToolTipManager; 
  11.  
  12. private var errorTip:ToolTip; 
  13. private var myError:String; 
  14.  
  15. private function validateEntry(type:String, event:Object):void { 
  16. if (errorTip) { 
  17. resetApp(); 
  18. } 
  19.  
  20. // NOTE: Validation logic would go here. 
  21.  
  22. switch(type) { 
  23. case "ssn": 
  24. myError="Use SSN format (NNN-NN-NNNN)"; 
  25. break; 
  26. case "phone": 
  27. myError="Use phone format (NNN-NNN-NNNN)"; 
  28. break; 
  29. } 
  30.  
  31. // Use the target's x and y positions to set position of error tip. 
  32. trace("event.currentTarget.width" + event.currentTarget.width); 
  33. trace("event.currentTarget.x" + event.currentTarget.x); 
  34. errorTip = ToolTipManager.createToolTip( 
  35. myError, event.currentTarget.x + event.currentTarget.width, 
  36. event.currentTarget.y) as ToolTip; 
  37. // Apply the errorTip class selector. 
  38. errorTip.setStyle("styleName", "errorTip"); 
  39. } 
  40.  
  41. private function resetApp():void { 
  42. if (errorTip) { 
  43. ToolTipManager.destroyToolTip(errorTip); 
  44. errorTip = null; 
  45. } 
  46.  
  47. } 
  48. ]]></mx:Script> 
  49.  
  50. <mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/> 
  51. <mx:TextInput id="phone" enter="validateEntry('phone',event)"/> 
  52. <mx:Label text="Press the enter key after entering text in each text input."/> 
  53.  
  54. <mx:Button id="b1" label="Reset" click="resetApp()"/> 
  55. </mx:Application> 

<?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中而不需要添加额外的代码。

Java代码

   1. <?xml version="1.0"?> 
   2.  
   3. <!-- tooltips/ErrorString.mxml --> 
   4.  
   5. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalGap="20"> 
   6.  
   7. <mx:Script> 
   8. <![CDATA[ 
   9. import mx.controls.ToolTip; 
  10. import mx.managers.ToolTipManager; 
  11.  
  12. private var errorTip:ToolTip; 
  13. private var myError:String; 
  14.  
  15. private function validateEntry(type:String, event:Object):void { 
  16. // NOTE: Validation logic would go here. 
  17. switch(type) { 
  18. case "ssn": 
  19. myError="Use SSN format"; 
  20. break; 
  21. case "phone": 
  22. myError="Use phone format"; 
  23. break; 
  24. } 
  25. event.currentTarget.errorString = myError; 
  26. } 
  27. ]]> 
  28. </mx:Script> 
  29.  
  30. <mx:TextInput id="ssn" enter="validateEntry('ssn',event)"/> 
  31. <mx:TextInput id="phone" enter="validateEntry('phone',event)"/> 
  32.  
  33. </mx:Application> 

<?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。

Java代码

   1. <?xml version="1.0"?> 
   2. <!-- tooltips/CreatingErrorTips.mxml --> 
   3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> 
   4.  
   5. <mx:Script> 
   6. <![CDATA[ 
   7. import mx.managers.ToolTipManager; 
   8. import mx.controls.ToolTip; 
   9.  
  10. public var myTip:ToolTip; 
  11.  
  12. private function createBigTip(event:Event):void { 
  13. var myError:String = "These buttons let you save, exit, or continue with the currentoperation."; 
  14. // By setting the fourth argument to a non-null value, 
  15. // this ToolTip is created as an error tip. 
  16.  
  17. myTip = ToolTipManager.createToolTip( 
  18. myError, 
  19. event.currentTarget.x + event.currentTarget.width, 
  20. event.currentTarget.y, 
  21. "errorTipRight" 
  22. ) as ToolTip; 
  23. } 
  24.  
  25. private function destroyBigTip():void { 
  26. ToolTipManager.destroyToolTip(myTip); 
  27. } 
  28. ]]> 
  29. </mx:Script> 
  30.  
  31. <mx:Style> 
  32. Panel { 
  33. paddingLeft: 5; 
  34. paddingRight: 5; 
  35. paddingTop: 5; 
  36. paddingBottom: 5; 
  37. } 
  38. </mx:Style> 
  39.  
  40. <mx:Panel title="ToolTips" rollOver="createBigTip(event)" rollOut="destroyBigTip()"> 
  41.  
  42. <mx:Button label="OK" toolTip="Save your changes and exit."/> 
  43. <mx:Button label="Apply" toolTip="Apply changes and continue."/> 
  44. <mx:Button label="Cancel" toolTip="Cancel and exit."/> 
  45.  
  46. </mx:Panel> 
  47. </mx:Application> 

<?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 currentoperation.";
// 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>