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

ToolTips 简介< xmlnamespace prefix ="o" ns ="urn:schemas-microsoft-com:office:office" />

ToolTips 是很多桌面程序的一个标准特征。当用户在这些组件元素的上方移动的时候所显示的信息将使得这个应用程序更容易被用户所接受和使用。以下这张图片显示了当用户移动鼠标到按钮上所显示的ToolTip文字信息。

当用户把鼠标指针移开这些组件或者点击这些组件的时候，ToolTip的显示信息都会消失。加入鼠标指针仍然提留在这些组件上，Tooltip最终也会消失。默认的行为设置是只显示一次ToolTip内容。

你可以设置当鼠标指针移到组件上到显示Tooltip内容信息的时间。同时你还可以设置ToolTip消失的时间。

假如你在一个容器中定义了一个ToolTip，ToolTipManager将显示父(parent’s)的ToolTip假如其子没有设置ToolTip.

创建ToolTips

每一个可视化的Flex组件都继承了UIComponent类（它实现了IToolTipManagerClient接口）来支持toolTip属性。这个属性从UIComponent类继承而来。你设置了toolTip的属性为一个文本内容，当鼠标移动到该组件上方的时候，这些文字信息就会被显示。以下就是一个设置了按钮的toolTip属性的例子：

<?xml version="1.0"?>

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

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

<mx:Button id="b1" label="Click Me" toolTip="This Button does nothing."/>

</mx:Application>

你也可以在ActionScript中来设置toolTip性质。比如以下就是创建一个button来设置按钮toolTip属性的例子。

你也可以在ActionScript中来设置toolTip性质。比如以下就是创建一个button来设置按钮toolTip属性的例子。

<?xml version="1.0"?>

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

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

<mx:Script><![CDATA[

public function createNewButton(event:MouseEvent):void {

var myButton:Button = new Button();

myButton.label = "Create Another Button";

myButton.toolTip = "Click this new button to 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"?>

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

<mx:Application xmlns:mx="http://www.adobe.com/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中，你可以使用&#13来控制换行的操作。以下就是一个使用上述的两个方法的来控制换行的例子：

<?xml version="1.0"?>

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

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

initialize="doSomething(event)">

<mx:Script><![CDATA[

public function doSomething(event:Event):void {

// Use the \n to force a line break in ActionScript.

b1.toolTip = "Click this button \n to clear the form.";

}

]]></mx:Script>

<mx:Button id="b1" label="Clear" width="100"/>

<!-- Use &#13; to force a line break in MXML tags. -->

<mx:Button id="b2" label="Submit" width="100" toolTip="Click this button &#13; 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"?>

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

<mx:Application xmlns:mx="http://www.adobe.com/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"?>

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

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

creationComplete="setToolTipStyle()">

<mx:Script><![CDATA[

import mx.styles.StyleManager;

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

}

]]></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"?>

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

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

creationComplete="setToolTipStyle()">

<mx:Script><![CDATA[

import mx.styles.StyleManager;

private function setToolTipStyle():void {

StyleManager.getStyleDeclaration("global").setStyle("fontWeight","bold");

}

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