Flex 自定義ToolTip並動態創建應用
阿新 • • 發佈：2017-12-08
繪制矩形 controls raw rri 系統 colors flex div else
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
Flex 自定義ToolTip並動態創建應用