Flex3—工具提示(ToolTips)教程
作者：一路风尘 Email:feixianyexin@163 日期：2008-5-28
目录
ToolTips 简介 (1)
创建ToolTips (2)
设置ToolTip风格 (4)
设置ToolTips宽度 (6)
ToolTip事件的使用 (7)
同NavBar控件使用ToolTips (8)
使用ToolTip 管理器 (9)
激活和停止ToolTips (9)
设置显示延迟时间 (10)
使用ToolTip视觉效果 (11)
使用动态的ToolTip (11)
创建自定义ToolTips (13)
放置自定义的ToolTips (15)
使用Error Tips (19)
ToolTips 简介
fontweight属性boldToolTips 是很多桌面程序的一个标准特征。当用户在这些组件元素的上方移动的时候所显示的信息将使得这个应用程序更容易被用户所接受和使用。以下这张图片显示了当用户移动鼠标到按钮上所显示的ToolTip文字信息。
当用户把鼠标指针移开这些组件或者点击这些组件的时候，ToolTip 的显示信息都会消失。加入鼠标指针仍然提留在这些组件上，Tooltip 最终也会消失。默认的行为设置是只显示一次ToolTip内容。
你可以设置当鼠标指针移到组件上到显示Tooltip内容信息的时间。
同时你还可以设置ToolTip消失的时间。
假如你在一个容器中定义了一个ToolTip，ToolTipManager将显示父(parent’s)的ToolTip假如其子没有设置ToolTip.
创建ToolTips
每一个可视化的Flex组件都继承了UIComponent类（它实现了IToolTipManagerClient接口）来支持toolTip属性。这个属性从UIComponent类继承而来。你设置了toolTip的属性为一个文本内容，当鼠标移动到该组件上方的时候，这些文字信息就会被显示。以下就是一个设置了按钮的toolTip属性的例子：
<?xml version="1.0"?>
<!-- l -->
<mx:Application xmlns:mx="www.adobe/2006/mxml">
<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/> </mx:Application>
你也可以在ActionScript中来设置toolTip性质。比如以下就是创建一个button来设置按钮toolTip属性的例子。
<?xml version="1.0"?>
<!-- l -->
<mx:Application xmlns:mx="www.adobe/2006/mxml">
<mx:Script><![CDATA[
public function createNewButton(event:MouseEvent):void {
var myButton:Button = new Button();
myButton.label = "Create Another Button";
myButton.addEventListener(MouseEvent.CLICK, createNewButton);
addChild(myButton);
}
]]></mx:Script>
<mx:Button id="b1" label="Create Another Button" click="createNewButton(event);"/>
</mx:Application>
假如你没有在一个容器的子（child）中定义ToolTip, ToolTipManager 将显示它父(parenet)的ToolTip。举个例子，比如你添加了一个button 到一个Panel容器中，而这个容器包行了一个ToolTip，当鼠标移动到这个Panel时用户将看到这个Panel 容器的ToolTip内容。当用户移动鼠标指针到这个button控件时候，Panel容器的ToolTip将继续显示。当然你可以通过设置子（child）的ToolTip的属性值来重写容器的ToolTip 内容。以下就是一个关于这方面继承的例子：
<?xml version="1.0"?>
<!-- l -->
<mx:Application xmlns:mx="www.adobe/2006/mxml">
<mx:VBox toolTip="VBOX">
<mx:Button id="b1" label="Button 1" toolTip="BUTTON"/>
<mx:Button id="b2" label="Button 2"/>
</mx:VBox>
</mx:Application>
当鼠标移动到button b1的时候，显示BUTTON，而当指针移动到button b2的时候，则显示VBOX.
TabNavigator容器却在它的子(children)上使用ToolTip。假如你添加ToolTip到TabNavigator的一个子版面中，当鼠标移动到那个版面的tab 的上方的时候，ToolTip将被显示出来，而不是鼠标移动到那个版面本身上的时候显示ToolTip信息。假如你添加了ToolTip到TabNavigator 容器中，除非ToolTip在那个版面被重写否则不可能当鼠标移动到tab 或者版面上都显示ToolTip信息。同样在以下的控件中也是类似的效果。
¾Accordion
¾ButtonBar
¾LinkBar
¾TabBar
¾ToggleButtonBar
虽然很长的信息提示阅读起来不是很方便，但是ToolTip信息的长度没有收到限制。当显示的信息超过了ToolTip设置的长度，文本信息就会被显示在下一行。你可以在ToolTip文本中添加(line breaks)，在ActionScript中，你可以使用\n换行符；在MXML中，你可以使用
来控制换行的操作。以下就是一个使用上述的两个方法的来控制换行的例子：
<?xml version="1.0"?>
<!-- l -->
<mx:Application xmlns:mx="www.adobe/2006/mxml"
initialize="doSomething(event)">
<mx:Script><![CDATA[
public function doSomething(event:Event):void {
// Use the \n to force a line break in ActionScript.
}
]]></mx:Script>
<mx:Button id="b1" label="Clear" width="100"/>
<!-- Use
to force a line break in MXML tags. -->
<mx:Button id="b2" label="Submit" width="100" toolTip="Click this button
to submit
the form."/>
</mx:Application>
在ToolTip内容的设置上有很多弹性的。你可以通过运用styles(CSS)来改变你程序中的ToolTips. 将下来介绍如何设置ToolTip文本和外框（box）的styles.
设置ToolTip风格
你可以通过CSS语法或者mx.style.StyleManager类来改变
ToolTip的内容和外框(Box)的显示风格。默认的风格设置定义在framework.swc文件中的default.css的文件中。你可以利用类型选择器中的<mx:Style>标签来重写默认的风格。以下就是关于利用CSS语法来改写ToolTip风格的例子：
<?xml version="1.0"?>
<!-- l -->
<mx:Application xmlns:mx="www.adobe/2006/mxml">
<mx:Style>
ToolTip {
fontFamily: "Arial";
fontSize: 19;
fontStyle: "italic";
color: #FF6699;
backgroundColor: #33CC99;
}
</mx:Style>
<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>
</mx:Application>
要使用StyleManager类来设置ToolTip风格，要使用setStyle()这个函数，比如：
<?xml version="1.0"?>
<!-- l -->
<mx:Application xmlns:mx="www.adobe/2006/mxml"
creationComplete="setToolTipStyle()">
<mx:Script><![CDATA[
import mx.styles.StyleManager;
private function setToolTipStyle():void {
}
]
]></mx:Script>
<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>
</mx:Application>
ToolTip使用可继承的全局的styles。比如你通过StyleManager在
全局的选择器上（global selector）设置了ToolTip的fontWeight属性:
<?xml version="1.0"?>
<!-- l -->
<mx:Application xmlns:mx="www.adobe/2006/mxml"
creationComplete="setToolTipStyle()">
<mx:Script><![CDATA[
import mx.styles.StyleManager;
private function setToolTipStyle():void {
}
]]></mx:Script>
<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>
</mx:Application>
设置在Application object上的style可以运用在所有的UI对象中，但是，ToolTip并没有继承设置在Application Object上的风格设置。所以小心使用global selector.
设置ToolTips宽度
你可以通过更改maxWidth这个属性来改变ToolTip框的宽度。这个属性是静态的，所以当你设置的时候，你是设置所有的ToolTip框，你不能在ToolTip类的实力上设置次属性。
maxWidth这个属性制定了ToolTip框最大的显示宽度(pixels为单位的)。比如设置其为100个piexels
<?xml version="1.0"?>
<!-- l -->
<mx:Application xmlns:mx="www.adobe/2006/mxml" creationComplete="init()">
<mx:Script><
发表评论