Flex 自定义ToolTip并动态创建应用

Posted 2020-10-17 『天堂有路』

Flex中，如果给组件设置了toolTip属性值，则当鼠标移动到该组件上时，会自动出现tip提示，默认样式是黄色背景，且只能显示普通文本。

 

我们可以继承系统的ToolTip来实现自己的toolTip组件替换，并实现如下功能：

1、提示文本可以使用html文本（还可以显示图片）

2、提示背景使用自定义皮肤（渐变，边框，半透明背景）

 

上一张实际应用中的效果图：

 

 

一、 自定义提示组件 HtmlToolTip.as

package controller
{
	import mx.controls.ToolTip;
	
	public class HtmlToolTip extends ToolTip
	{
		override protected function commitProperties():void{
			super.commitProperties();
			//转化为HTML文本
			textField.htmlText = text;
		}
		
//		override protected function createChildren():void{
//			//设置边框样式
//			this.setStyle("borderSkin",HtmlToolBorder);
//			this.setStyle("backgroundColors",[0x006699, 0xAEB4E6]);
//			this.setStyle("borderColor",0x5965CC);
//			super.createChildren();
//		}
	}
}

　　我没有对原有的边框样式做更改所以注释掉了一部分代码。如果需要更改还需要建一个类： HtmlToolBorder.as（ 提示组件皮肤）代码如下：

package controller
{
	import flash.display.GradientType;
	
	import mx.skins.halo.ToolTipBorder;

	//ToolTipBorder是默认的边框样式
	public class HtmlToolBorder extends ToolTipBorder{
		override protected function updateDisplayList(unscaledWidth:Number,
													  unscaledHeight:Number):void{
			
			var borderThickness:Number = this.getStyle("borderThickness");
			var borderColor:Number     = this.getStyle("borderColor");
			var backgroundColors:Array = this.getStyle("backgroundColors");
			var backgroundAlpha:Number = this.getStyle("backgroundAlpha");
			
			super.updateDisplayList(unscaledWidth, unscaledHeight);
			
			var w:Number = this.width;
			var h:Number = this.height;
			//清除原背景图形
			this.graphics.clear();
			//用渐变绘制背景
			this.graphics.beginGradientFill(GradientType.LINEAR,backgroundColors,[1.0,0.5],[0,255]);
			//绘制矩形
			this.graphics.drawRect(0,0,w,h);
			this.graphics.endFill();
			this.alpha = backgroundAlpha;   
			
			//绘制边框
			this.graphics.lineStyle(borderThickness,borderColor,1);
			this.graphics.moveTo(0,0);
			this.graphics.lineTo(w,0);
			this.graphics.lineTo(w,h);
			this.graphics.lineTo(0,h);
			this.graphics.lineTo(0,0);
		}
	}
}

　　准备工作完成。

二、应用

　　首先定义一个function：

public static function get_tooltip_msg(n:Object,kind:int):String{
			var Msg:String = "";		
			Msg = "Mote ID: "+n.Moteid_ID;
			if((kind==15||(kind&8)))
				Msg +=(SensingDataFormat.temperature(n)==\'N/A\'?\'\':("<br/>Temp.: " +SensingDataFormat.temperature(n)));
			if((kind==15||(kind&4)))
				Msg +=(SensingDataFormat.humidity(n)==\'N/A\'?\'\':("<br/>Hum.: " +SensingDataFormat.humidity(n)));
			if((kind==15||(kind&2)))
				Msg +=(SensingDataFormat.light(n)==\'N/A\'?\'\':("<br/>Light: " +SensingDataFormat.light(n)));
			if((kind==15||kind&1))
				Msg +=((SensingDataFormat.co2(n)==\'N/A\'|| SensingDataFormat.type(n)==\'N/A\')?\'\':("<br/><font color=\'#ff0000\' size=\'13\' face=\'Microsoft YaHei\'>"+SensingDataFormat.type(n)+": " +SensingDataFormat.co2(n)+"</font>"));
			return Msg;
		}

　这个方法是包装了数据格式，里面含有html代码。Flex的htmlText 自行百度 一大把，然后怎么在代码中应用呢，参见下面的代码：

protected function startShow_clickHandler(event:MouseEvent):void//show tooltips
			{
				
				for(var e:Object in moteIDMap){
					var i:Image  = e as Image;
					var Msg:String = getMsgByMoteID(moteIDMap[i]);
					
					if(moteToolTipMap[i]==null){					
						
						if((dataT.width-i.x)<100){
							//moteToolTipMap[i] =  ToolTipManager.createToolTip(Msg, i.x-10,i.y+30,null,i) as ToolTip;
							moteToolTipMap[i] = new HtmlToolTip(); 
							moteToolTipMap[i].x = i.x-10;
							moteToolTipMap[i].y = i.y+30
							
						}else{
							//moteToolTipMap[i] =  ToolTipManager.createToolTip(Msg, i.x+30,i.y,null,i) as ToolTip;
							moteToolTipMap[i] = new HtmlToolTip();
							moteToolTipMap[i].x = i.x+30;
							moteToolTipMap[i].y = i.y
						}
						moteToolTipMap[i].text = Msg;
						moteToolTipMap[i].setStyle("styleName", "errorTip");
						moteToolTipMap[i].setStyle("fontSize", "12");
						moteToolTipMap[i].setStyle("backgroundColors",[0x006699, 0xAEB4E6]);
						moteToolTipMap[i].setStyle("borderColor",0x5965CC);
						
					}else{
						
						moteToolTipMap[i].move(i.x+i.width,i.y);	
						moteToolTipMap[i].text = Msg;
					}
					moteToolTipMap[i].depth=3;
					dataT.addElement(moteToolTipMap[i]);
					
					//moteMsgMap[i] = msg;
				}
			}

我们不用 ToolTipManager.createToolTip(Msg, i.x-10,i.y+30,null,i) as ToolTip; 这个方法来创建ToolTip 而是
moteToolTipMap[i] = new HtmlToolTip(); new 了一个我们继承的ToolTip对象，然后把对应的位置 x,y以及text 放进去
这样效果就出来了

　　

 

原文出自：www.hangge.com  转载请保留原文链接：http://www.hangge.com/blog/cache/detail_686.html