Flex实现自定义ToolTip 动态加载

uule

浏览: 6349935 次
性别:
来自: 一片神奇的土地

最近访客更多访客>>

wangenbao1

hyjqdy

逆光下的轮廓

taominghua

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Flex

Flex中实现自定义ToolTip，也很简单，只要按如下三个步骤即可：

1.容器类实现mx.core.IToolTip接口，如下：

<?xml version="1.0" encoding="utf-8"?>
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml"
    implements="mx.core.IToolTip"
    width="240"
    alpha=".2"
    borderThickness="2"
    backgroundColor="#A4A4A4"
    dropShadowEnabled="true"
    borderColor="black"
    borderStyle="solid"
    roundedBottomCorners="true"
    cornerRadius="10"
    horizontalAlign="center"
    height="80"
verticalAlign="middle">

<mx:Script><![CDATA[
        [Bindable]
        public var staName:String = "";

        [Bindable]
        public var percentage:String = "";

        // Implement required methods of the IToolTip interface; 接口需要实现的方法必须写！
        public var _text:String;

[Bindable]
        public function get text():String {
            return _text;
        }
        public function set text(value:String):void {
        }
    ]]></mx:Script>

<mx:HBox x="0" y="0" width="100%" height="100%" verticalAlign="top">
  <mx:Label text="{staName}" width="30%" id="lbl_staName" textAlign="center"/>
  <mx:Image width="30%" source="@Embed(source='../../../../Images/fltIcon.PNG')" horizontalAlign="right"/>
  <mx:Label text="{percentage}" width="20%" id="lbl_percentage" textAlign="center"/>
</mx:HBox>
</mx:Panel>

2.要实现动态加载ToolTip，需要设置ToolTip载体控件的事件，例如：

    var tmpDisplay:DisplayObject= this.getChildByName(s) as DisplayObject;

             //绑定提示卡
          tmpDisplay.toolTip=" "; //注意一定要设置此属性否则无法显示

//可只用第一个ToolTipEvent.TOOL_TIP_CREATE
tmpDisplay.addEventListener(ToolTipEvent.TOOL_TIP_CREATE,function (event:ToolTipEvent):void{createCustomTip('邯郸','80%',event)});
tmpDisplay.addEventListener(ToolTipEvent.TOOL_TIP_SHOW,function (event:ToolTipEvent):void{positionTip(event)});
tmpDisplay.addEventListener(ToolTipEvent.TOOL_TIP_END,function (event:ToolTipEvent):void{onToolTipEnd(event)});

3.完成ToolTip创建、显示、销毁的三个方法：

      //创建提示卡
         private function createCustomTip(staName:String, percentage:String, event:ToolTipEvent):void {
            stt.styleName="StationToolTipStyle1";
            stt.staName = staName;
            stt.percentage=percentage;
            event.toolTip = stt;
         }

         //确定位置此方法完成显示坐标的设置，如果设置不正确可能会引发频繁调用
         private function positionTip(event:ToolTipEvent):void{
             //由于诸多点都放在了Canvas之上所以要受Canvas坐标影响使用localToGlobal方法做转换
             var objSource:DisplayObject=event.currentTarget as DisplayObject;
             var pt:Point = new Point();
            pt.x = 0;
            pt.y = 0;
            pt = objSource.localToGlobal(pt); //受Canvas坐标影响使用localToGlobal方法做转换
             event.toolTip.x=pt.x + objSource.width+ 10;
              event.toolTip.y=pt.y-objSource.height/2;

/*如果没有Canvas(也就是父容器)影响的话可以直接设置坐标

event.toolTip.x=event.currentTarget .x + event.currentTarget .width+ 10;
event.toolTip.y=event.currentTarget .y-event.currentTarget .height/2;

              */
         }

         //隐藏后销毁
         private function onToolTipEnd(event:ToolTipEvent):void
      {
          var ttip:StationToolTip = event.toolTip as StationToolTip;
         ToolTipManager.destroyToolTip(ttip);
           ttip = null;
      }

用此三招，建立动态绑定的自定义ToolTip，无往而不胜！

来源：http://blog.csdn.net/ozzy_003/article/details/6058880

可参考：UIComponent研究

示例2（自己例子）：

效果图：

if(label !=null && label != ""){
				line.toolTip=" ";		
				line.addEventListener(ToolTipEvent.TOOL_TIP_CREATE, createCustomTip);
			}

private function createCustomTip(event:ToolTipEvent):void
		{			
			var line:SequenceLine=event.target as SequenceLine;
			var tip:SuperToolTip=new SuperToolTip();
			tip.title="服务基本信息";
			if (line.data != null) 
			{
				tip.bodyData=line.data;
			}
			
			event.toolTip=tip;
		}

SuperToolTip.mxml:

<?xml version="1.0"?>
<!-- tooltips/ToolTipComponents/PanelToolTip.mxml (tos.mxml)-->
<mx:Panel xmlns:mx="http://www.adobe.com/2006/mxml" implements="mx.core.IToolTip" width="350" height="150" horizontalScrollPolicy="off" verticalScrollPolicy="off" styleName="viewSuperToolTip">
	<mx:Style>
		.viewSuperToolTip{
		borderColor: #DDDDDD;
		borderAlpha: 1;
		borderThicknessLeft: 1;
		borderThicknessTop: 1;
		borderThicknessBottom: 1;
		borderThicknessRight: 1;
		roundedBottomCorners: true;
		headerColors: #FFFFCF, #FFFFCF;
		footerColors: #FFFFCF, #FFFFCF;
		backgroundColor: #FFFFCF;
		dropShadowEnabled: false;
		shadowDistance: 0;
		shadowDirection: center;
		dropShadowColor: #96baeb;
		cornerRadius: 5;
		titleStyleName: "panelTitle";
		headerHeight: 22;
		}
		.panelTitle {
		fontSize: 12;
		fontWeight: bold;
		color:#2c5c9e;
		}
	</mx:Style>
	<mx:Script>
		<![CDATA[
			[Bindable]
			private var _bodyData:Object=new Object();

			public var _text:String;

			public function get text():String
			{
				return _text;
			}

			public function set text(value:String):void
			{
				this._text=value;

			}

			public function get bodyData():Object
			{
				return _bodyData;
			}

			public function set bodyData(bodyData:Object):void
			{
				this._bodyData=bodyData;

			}
		]]>
	</mx:Script>
	<mx:Label width="100%" height="5"/>
	<mx:Label text="{'英文名：'+_bodyData.serviceNameEn}" width="100%" fontSize="12"/>
	<mx:Label text="{'中文名：'+bodyData.serviceNameCN}" width="100%" fontSize="12"/>
	<mx:Label text="{'提供方：'+bodyData.providerAppName} ({bodyData.providerAppCode})" width="100%" fontSize="12"/>
	<mx:Label text="{'消费方：'+bodyData.consumerAppName} ({bodyData.consumerAppCode})" width="100%" fontSize="12"/>
</mx:Panel>