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

设置ToolTips宽度

??? 你可以通过更改maxWidth这个属性来改变ToolTip框的宽度。这个属性是静态的，所以当你设置的时候，你是设置所有的ToolTip框，你不能在ToolTip类的实力上设置次属性。

maxWidth这个属性制定了ToolTip框最大的显示宽度(pixels为单位的)。比如设置其为100个piexels

<?xml version="1.0"?>

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

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

<mx:Script><![CDATA[

import mx.controls.ToolTip;

public function init():void {

ToolTip.maxWidth = 100;

}

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

toolTip="Click this button to create a new one."

/>

</mx:Application>

?

Flex会把ToolTip的文字换行以确保文字显示宽度不会超过设置的宽度值。maxWidth的默认值为300. 假如这个值超过了application的宽度，那么Flex将会剪短ToolTip box中的显示文字。

ToolTip事件的使用

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

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

要在<mx:Script>中使用ToolTipEvent类型的事件，你必须import mx.events.ToolTipEvent 类。以下是一个TOOL_TIP_SHOW事件的例子用来播放mp3文件的：

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

? 同NavBar控件使用ToolTips

NavBar和TabBar子类在data provider中支持ToolTips。 Data provider 数组中可以包含ToolTip来为navigator 项指定toolTip。举个例子：

<?xml version="1.0"?>

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

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

<mx:ButtonBar>

<mx:Object label="OK" toolTip="OK Button ToolTip"/>

<mx:Object label="Cancel" toolTip="Cancel Button ToolTip"/>

</mx:ButtonBar>

</mx:Application>

你也可以通过设置NavBar的toolTipField属性值来指向data provider中提供的toolTip。

<?xml version="1.0"?>

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

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

<mx:ButtonBar toolTipField="myToolTip">

<mx:Object label="OK" myToolTip="OK Button TooTip"/>

<mx:Object label="Cancel" myToolTip="Cancel Button ToolTip"/>

</mx:ButtonBar>

</mx:Application>

使用ToolTip 管理器

使用ToolTipManager管理器类能够让你设置基本的ToolTip功能。比如显示延迟，以及控制是否显示ToolTip信息内容。这些全部包含在mx.managers包里面。当你要使用ToolTipManager的时候必须导入这个类。ToolTipManager这个类同时也包含了涉及当前ToolTip的currentToolTip属性。

激活和停止ToolTips

你可以在程序中激活和停止使用ToolTips. 当你停止使用，在鼠标移到到组件上方的时候就不会用ToolTips的框显示出来，不管那个组件是否设置了toolTip这个属性值。

你可以使用enabled这个属性来激活或者停止使用ToolTips。这个属性为true时为激活状态，false为停止使用状态，默认是true.

<?xml version="1.0"?>

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

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

<mx:Script><![CDATA[

import mx.managers.ToolTipManager;

private function toggleToolTips():void {

if (ToolTipManager.enabled) {

ToolTipManager.enabled = false;

} else {

ToolTipManager.enabled = true;

}

}

]]></mx:Script>

<mx:Button id="b1"

label="Toggle ToolTips"

width="150"

click="toggleToolTips();"

toolTip="Click me to enable/disable tooltips."

/>

</mx:Application>

?

设置显示延迟时间

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

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

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

<?xml version="1.0"?>

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

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

<mx:Script><![CDATA[

import mx.managers.ToolTipManager;

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.

}

]]></mx:Script>

<mx:Button label="Click Me" toolTip="Click this Button to do something."/>

<mx:Button label="Click Me" toolTip="Click this Button to do something else."/>

<mx:Button label="Click Me" toolTip="Click this Button to do a third thing."/>

<mx:Button label="Click Me" toolTip="Click this Button to do the same thing."/>

</mx:Application>

?

使用ToolTip视觉效果

你可以使用自定义的视觉效果或者标准的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>

?

例子当中的默认字体并没有退出的效果，你可以使用嵌入式(embeded)的字体来达到这个效果。

假如你为hideEffect设置了退出的这种效果，用户必须等到鼠标移动到这些组件的上方才能触发效果。如果用户的鼠标在ToolTip对象自动隐藏之前移动到不同的组件，hideToolTip事件就不会被触发。

使用动态的ToolTip

你不仅可是使用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>