Flex 自定义ToolTip并动态创建应用
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
大千世界,就等着你的发掘!