flex中toolTip汇总

1.toolTip换行符

<mx:Button id="btn1" toolTip="在工具条提示中 使用换行符"/>

2.设定工具条提示的样式

<mx:Style>  
    ToolTip  
    {  
        fontSize:19;  
        color:#FF6699;  
    }  
</mx:Style>

3.设定工具提示宽度

<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;  
        }  
        ]]>  
</mx:Script>

4. 使用工具条提示事件
toolTipCrate
toolTipEnd
toolTipHide
toolTipShow
toolTipShown
toolTipStart

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">  
<mx:Script>  
    <![CDATA[  
        import mx.events.ToolTipEvent;  
        import flash.media.sound;  
        [Embed(source="demo.mp3")]  
        private var beepSound:Class;  
        private var myClip:Sound;  
        public function init():void  
        {  
            TooTip.maxWidth=100;  
        }  
  
        public function playSoune():void  
        {  
            myClip.play();  
        }  
  
        public function myListener(event:ToolTipEvent):void  
        {  
            playSoune();  
        }  
          
        public function init():void  
        {  
            lbl.addEventListener(ToolTipEvent.TOOL_TIP_SHOW,myListener);  
            myClip=new beepSound();  
        }  
        ]]>  
</mx:Script>  
<mx:Label id="lbl" toolTip="demo ToolTip" text="mouse over here" />

5. ToolTip Manager
ToolTip Manager 类用来管理toolTip属性,包含在mx.managers包中
使用ToolTip Manager 延迟工具条显示的时间,在工具条上使用行为效果
建立动态的工具条提示，使用自定义的工具条提示

公共属性
    currentTarget : displayObject
当前显示工具提示的 UIComponent；如果未显示工具提示，则为 null。 ToolTipManager
    currentToolTip : IToolTip
当前可见的 ToolTip 对象；如果未显示 ToolTip 对象，则为 null。 ToolTipManager
    enabled : Boolean
如果为 true，则当用户将鼠标指针移至组件上方时，ToolTipManager 会自动显示工具提示。 ToolTipManager
    hideDelay : Number
自工具提示出现时起，Flex 要隐藏此提示前所需等待的时间量（以毫秒为单位）。 ToolTipManager
    hideEffect : IAbstractEffect
隐藏工具提示时播放的效果；如果工具提示在消失时不应显示任何效果，则为 null。 ToolTipManager
   prototype : Object
对类或函数对象的原型对象的引用。 Object
    scrubDelay : Number
在 Flex 再次等待 showDelay 持续显示工具提示之前，用户在各控件间移动鼠标时可以花费的时间（以毫秒为单位）。 ToolTipManager
    showDelay : Number
当用户将鼠标移至具有工具提示的组件上方时，Flex 等待 ToolTip 框出现所需的时间（以毫秒为单位）。 ToolTipManager
    showEffect : IAbstractEffect
显示工具提示时播放的效果；如果工具提示在显示时不应显示任何效果，则为 null。 ToolTipManager
    toolTipClass : Class
创建工具提示要用到的类。

1.控制工具条的显示隐藏
ToolTip Manager enabled属性来定义工具条提示状态，默认为true,设定为false就表示禁用
2.延迟工具条的提示时间
showDelay 默认为500毫秒当鼠标在控件之间移动时，flex等待显示工具条提示的时间长度
hideDelay 默认值为10000毫秒如果设定hideDelay属性值为0，flex不显示工具条提示，如果设定为Infinity,flex则一致显示工具提示
直到下一个动作，或者鼠标离开主键
例如：
ToolTipManager.showDelay=0;//立即显示
ToolTipManager.hideDelay=3000;//3s秒后隐藏
3.在工具条上使用动画效果

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="init()">  
<mx:Script>  
    <![CDATA[  
        import mx.managers.ToolTipManager;  
        import mx.events.ToolTipEvent;  
        import flash.media.sound;  
        [Embed(source="demo.mp3")]  
        private var beepSound:Class;  
        private var myClip:Sound;  
        public function init():void  
        {  
            TooTip.maxWidth=100;  
            ToolTipManager.showEffect=fadeIn;  
        }  
        ]]>  
</mx:Script>  
<mx:Label id="lbl" toolTip="demo ToolTip" text="mouse over here" />  
<mx:Fade id="fadeIn" alphaFrom="0" alphaTo="1" duration="1000" />  
<mx:Panel >  
    <mx:Button id="btn" toolTip="demoasdf" />  
</mx:Panel >

4.建立动态工具条体提示
ToolTipManager有两种方法,即：createtoolTip()和destroyToolTip()
建立一个工具条提示对象时,可以定义其属性,样式,事件和效果。
cratetoolTip()方法结构
createtoolTip(text:String,x:Number,y:Number,errorTipBorderStyle:String = null,context:iuiComponent = null):IToolTip
[] 使用指定的文本创建 ToolTip 类的实例，然后在舞台坐标中的指定位置显示此实例。 ToolTipManager
destroyToolTip(toolTip:IToolTip):void
[] 销毁由 createtoolTip() 方法创建的指定 ToolTip。
例如：
<mx:Label id="lbl" toolTip="demo ToolTip" text="mouse over here" />
<mx:Button id="btn1" toolTip="填写的是{lbl.text}"/>
5.建立用户自定义的工具条提示

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >
<mx:Script>
<![CDATA[
import mx.managers.ToolTipManager;
import mx.events.ToolTip;
public var myTip:ToolTip;
public function init():void
{
var s:String ="保存,应用,退出";
myTip=ToolTipManager.createtoolTip(s,10,0)">10) as ToolTip;
myTip.setStyle("backgroundColor",0)">0xFFCC00);
myTip.width=300;
myTip.height=40;
}
public funciton destroyBigTip():void
ToolTipManager.destroyToolTip(myTip);
]]>
</mx:Script>
<mx:Button id="btn" toolTip="test toolTip" rollover="init()" rollOut="destroyBigTip()"/>

6.使用错误信息提示工具条

    As代码   
   
 
  
 <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" >  
 <mx:Script>  
     <![CDATA[  
         import mx.managers.ToolTipManager;  
         import mx.events.ToolTip;  
         public var errorTip:ToolTip;  
     private function validatefun(type:String,event:Object):void  
     {  
         errorTip=" demo test ";  
         errorTip=ToolTipManager.createtoolTip(errorTip,event.currentTarget.x,event.currentTarget.y) as ToolTip;  
         errorTip.setStyle("styleName","errorTip");  
     }  
 <mx:TextInput id="txt" enter="validatefun('demo',event)" />  

7.重写工具条皮肤
ToolTip皮肤存在mx.skins.ToolTipBorder.as文件中
当然需要重写的时候就可以 ToolTipBorder 类继承的类就可以了
例如:

Java代码

package

{
import mx.skins.RectangularBorder;
public class MyToolTipBorder extends RectangularBorder
public function MyToolTipBorder()
{
super();
}
override protected function updatedisplayList(unscaledWidth:Number,
unscaledHeight:Number):void
override public function layoutBackgroundImage():void {
}
}mxml中使用
<mx:Style>
ToolTip
borderSkin:ClassReference("MyToolTipBorder");
</mx:Style>

自定义皮肤参见：http://demojava.iteye.com/blog/1175446
自定义DateGird Item ToolTip
效果图：

自定义ToolTip renderers.MenuToolTipRenderer as 实现接口 IMenuItemRenderer,IDataRenderer,IListItemRenderer

Xml代码

package renderers

import flash.events.Event;
import flash.events.MouseEvent;
import flash.text.TextFieldAutoSize;
import mx.controls.Alert;
import mx.controls.LinkButton;
import mx.controls.Menu;
import mx.controls.listClasses.IListItemRenderer;
import mx.controls.menuClasses.IMenuItemRenderer;
import mx.core.EdgeMetrics;
import mx.core.IDataRenderer;
import mx.core.UIComponent;
import mx.core.UITextField;
import mx.events.FlexEvent;
public class MenuToolTipRenderer extends UIComponent implements IMenuItemRenderer, IDataRenderer, IListItemRenderer
private var textField:UITextField;
private var clickText:LinkButton;
public function get measuredTypeIconWidth():Number//类型图标（单选/复选）的宽度
return 33;
public function get measuredBranchIconWidth():Number//分支图标的宽度
public function get measuredIconWidth():Number//图标的宽度
//-------------------------------------------------------------------------
public function MenuToolTipRenderer()
super();
this.addEventListener(FlexEvent.DATA_CHANGE, renderComponent);
this.setStyle("cornerRadius", 5);
this.maxWidth = 250;
// Internal variable for the property value.
private var _menu:Menu;
public function get menu():Menu
return _menu;
public function set menu(value:Menu):void
_menu = value;
private var _data:Object;
[Bindable("dataChange")]
public function get data():Object {
return _data;
public function set data(value:Object):void {
_data = value;
dispatchEvent(new FlexEvent(FlexEvent.DATA_CHANGE));
private function get borderMetrics():EdgeMetrics
return EdgeMetrics.EMPTY;
private function renderComponent(event:FlexEvent):void
if(_data != null && _data != "null")
textField.htmlText = data.label;
invalidateProperties();
invalidateSize();
invalidatedisplayList();
private function buttonClick(event:Event):void
mx.controls.Alert.show("button click");
override protected function createChildren():void
super.createChildren();
// Create the TextField that displays the tooltip text.
if (!textField)
textField = new UITextField();
textField.autoSize = TextFieldAutoSize.LEFT;
textField.mouseEnabled = false;
textField.multiline = true;
textField.selectable = false;
textField.wordWrap = true;
textField.styleName = this;
addChild(textField);
override protected function measure():void
super.measure();
var bm:EdgeMetrics = borderMetrics;
var leftInset:Number = bm.left + getStyle("paddingLeft");
var topInset:Number = bm.top + getStyle("paddingTop");
var rightInset:Number = bm.right + getStyle("paddingRight");
var bottomInset:Number = bm.bottom + getStyle("paddingBottom");
var widthSlop:Number = leftInset + rightInset;
var heightSlop:Number = topInset + bottomInset;
textField.wordWrap = false;
if (textField.textWidth + widthSlop > this.maxWidth)
textField.width = this.maxWidth - widthSlop;
measuredWidth = textField.width + widthSlop;
measuredHeight = textField.height + heightSlop;
thisthis.parent.parent.height = this.parent.height = this.height = measuredHeight + 25;
thisthis.parent.parent.width = this.parent.width = this.width = measuredWidth;
createAdditionalContent(measuredWidth, measuredHeight);
private function createAdditionalContent(measuredWidth:Number, measuredHeight:Number):void
clickText = new LinkButton();
clickText.label = "More Info";
clickText.width = 70;
clickText.height = 18;
clickText.setStyle("fontSize", 9);
clickText.setStyle("color", "blue");
clickText.buttonMode = true;
clickText.visible = true;
clickText.y = measuredHeight;
clickText.x = measuredWidth - clickText.width - 8;
clickText.addEventListener(MouseEvent.CLICK, dispatchClick);
addChild(clickText);
private function dispatchClick(e:Event):void
this.dispatchEvent(new Event("buttonClicked", true))
}
}

相关推荐