flex ToolTip专题

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的文件中。

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

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

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属性:

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

3 ToolTip事件的使用


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

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

<?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这个属性值。

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的初始值。

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)的效果：

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

<?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属性。这个属性值在运行前是未知的。

<?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()方法有以下的一些参数：

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

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

destroyToolTip(toolTip:IToolTip):void 

<?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容器等。

<?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这个文件中。它指定了以下默认的设置：

.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 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>

评论

1 楼 wfzhanga 2011-09-24  

楼主整理的不错，能不能把代码传上去啊。
如果方便请帮我传一下啊，我email:   [e-mail]
万分感谢....