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

创建自定义ToolTips

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

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

createToolTip()方法有以下的一些参数：

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

text即显示文本，x,y表示显示的坐标。errorToolTipBorderStyle设置了error tip指针的位置。这个参数是可选的。createTollTip()方法返回了一个ToolTip对象，这个对象实现了IToolTip接口。所以你必须使用类型转换：

?       使用as关键字：myTip = ToolTipManager.createToolTip(s,10,10) as ToolTip;

?       使用类型转换：myTip = ToolTip(ToolTipManager.createToolTip(s,10,10));

Flex显示ToolTip直到你销毁它。你不能一次显示好多个ToolTip，因为那样的话会混淆用户。

你可以使用destroyTollTip（）方法来销毁之前指定的ToolTip对象。该方法：destroyToolTip(toolTip:IToolTip):void

参数toolTip就是你要销毁的ToolTip 对象了。举例：当用户移动鼠标到Panel容器（包含了三个按钮，）就会创建了一个自定义的ToolTip。每个按钮都有自己的ToolTip。而大的那个ToolTip只有你把鼠标移开Panel容器时候才消失。

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

放置自定义的ToolTips

当你使用ToolTipManager创建一个自定义的ToolTip时，你可以制定它的坐标位置。即在createToolTip（）方法中设置x,y的属性值。这个坐标值是相对的，比如（0，0）对应的是程序界面的左上角。

有些时候，你不知道要不ToolTip放在那个位置，你只想把它放在相对某个目标组件的某个位置。这样的情况下，你可以使用那个目标组件的位置来计算x,y的坐标值。比如你想把ToolTip放在一个组件的右边，那么你就可以设置ToolTip’s的x坐标等于目标组件的x坐标加上目标组件的宽度，可能还需要加上一些偏移量等。Y坐标就等于目标组件的y坐标。即同水平位置。

要计算ToolTip的x坐标的其中一个方式是利用事件处理器。事传递到事件处理器件对象包含了目标组件的x坐标和其宽度。举例：ToolTip显示在TextInput组件的右边，且含有10piexels的偏移量。

<?xml version="1.0"?>

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

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

horizontalAlign="center" height="100" width="300">

<mx:Script>

<![CDATA[

import mx.controls.ToolTip;

import mx.managers.ToolTipManager;

private var tip:ToolTip;

private var s:String;

private function showTip(event:Object):void {

s="My ToolTip";

// Position the ToolTip to the right of the current target.

tip = ToolTipManager.createToolTip(s,

event.currentTarget.x + event.currentTarget.width + 10,

event.currentTarget.y)

as ToolTip;

}

private function destroyTip(event:Object):void {

ToolTipManager.destroyToolTip(tip);

}

]]>

</mx:Script>

<mx:TextInput id="a"

width="100"

focusIn="showTip(event)"

focusOut="destroyTip(event)"

/>

<mx:TextInput id="b"

width="100"

focusIn="showTip(event)"

focusOut="destroyTip(event)"

/>

</mx:Application>

之前的这个例子所创建的目标组建的ToolTIip并没有包含在任何一个容器中。而我们一般情况下，组件都会放入到某个容器当中，比如VBox,或者HBox。在这种情况下，你在事件处理器存取的坐标就是相对那个容器的而不是相对整个应用程序界面的。但是，ToolTipManager期望一个全局的坐标来放置ToolTIip，这就可能造成ToolTIip位置不是你所期待的。

解决的方法：你可以使用contentToGloabal()方法来把事件处理器拿到的局部坐标转换为全局坐标。所有UIComponent的自己的组件都含有这个方法。它取相对目标组件放入的那个容器的一个点作为参数，返回一个相对整个布局的一个点。举例：

<?xml version="1.0"?>

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

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

horizontalAlign="center" height="250" width="400">

<mx:Script>

<![CDATA[

import mx.controls.ToolTip;

import mx.managers.ToolTipManager;

private var tip:ToolTip;

private var s:String;

private function showTipA(event:Object):void {

s="My Tip A";

tip = ToolTipManager.createToolTip(s,

event.currentTarget.x + event.currentTarget.width + 10,

event.currentTarget.y

) as ToolTip;

}

private function showTipB(event:Object):void {

s="My Tip B";

var pt:Point = new Point(

event.currentTarget.x,

event.currentTarget.y);

// Call this method to convert the object's

// coordinates inside its container to the stage's

// global coordinates.

pt = event.currentTarget.contentToGlobal(pt);

tip = ToolTipManager.createToolTip(s,

pt.x + event.currentTarget.width + 10,

pt.y

) as ToolTip;

}

private function destroyTip(event:Object):void {

ToolTipManager.destroyToolTip(tip);

}

]]>

</mx:Script>

<!-- A ToolTip at the top level. -->

<!-- The event handler for this ToolTip does not use any special

logic to account for whether the ToolTip is inside a container.

But this ToolTip is not inside a container so it positions itself

normally. -->

<mx:TextInput id="a"

text="Good ToolTip placement"

width="175"

focusIn="showTipA(event)"

focusOut="destroyTip(event)"

/>

<mx:VBox >

<!-- A ToolTip inside a container. -->

<!-- The event handler for this ToolTip accounts for the control

being inside a container and positions the ToolTip using the

contentToGlobal() method. -->

<mx:TextInput id="b"

text="Good ToolTip placement"

width="175"

focusIn="showTipB(event)"

focusOut="destroyTip(event)"

/>

<!-- A ToolTip inside a container. -->

<!-- The event handler for this ToolTip does not use any special

logic to account for whether the ToolTip is inside a container.

As a result, it positions itself using coordinates that are relative

to the container, but that are not converted to global coordinates. -->

<mx:TextInput id="c"

text="Bad ToolTip placement"

width="175"

focusIn="showTipA(event)"

focusOut="destroyTip(event)"

/>

</mx:VBox>

</mx:Application>