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

时间: 2024-10-16 22:04:44

Flex 自定义ToolTip并动态创建应用的相关文章

flex中toolTip汇总 转

1.toolTip换行符 <mx:Button id="btn1" toolTip="在工具条提示中 使用换行符"/> 2.设定工具条提示的样式 [javascript] view plaincopy <mx:Style> ToolTip { fontSize:19; color:#FF6699; } </mx:Style> 3.设定工具提示宽度 [javascript] view plaincopy <mx:Applica

Flex自定义组件开发 - jackyWHJ

一般情况下需要组件重写都是由于以下2个原因: 1.在FLEX已有组件无法满足业务需求,或是需要更改其可视化外观等特性时,直接进行继承扩展. 2.为了模块化设计或进一步重用,需要对FLEX组件进行组合. 而Flex组件开发有2种方式: AS方式和MXML方式.对于上述第一个原因我一般采用AS方式,通过继承 UIComponent来开发,而针对原因2我一般使用的是 MXML方式.本文主要讲的是AS开发方式. 重写一个组件依次调用的方法 : 1)Constructor构造方法,初始化属性,默认值 在这

Android编程动态创建视图View的方法

在Android开 发中,在Activity中关联视图View是一般使用setContentView方法,该方法一种参数是使用XML资源直接创 建:setContentView (int layoutResID),指定layout中的一个XML的ID即可,这种方法简单.另一个方法是 setContentView(android.view.View),参数是指定一个视图View对象,这种方法可以使用自定义的视图类. 在一些场合中,需要对View进行一些定制处理,比如获取到Canvas进行图像绘制,

BroadcastReceiver接收电量变化的广播-------在代码中动态创建接受者

本例为动态创建广播接收者即不是在AndroidManifest.xml文件中定义的广播接收着 代码: 1 package com.qf.broadcastreceiver01; 2 3 import android.app.Activity; 4 import android.app.AlertDialog; 5 import android.content.BroadcastReceiver; 6 import android.content.Context; 7 import android

ansible通过cmdb资产接口动态创建hosts列表

前言: 在自动化.批量化操作主机的时候,有时候咱们需要定义主机组. 比如,saltstack的group组,及salt -N参数 ,在ansible下的自己搞定ansible的主机组.有些麻烦,要知道,你既然选择了用saltstack.ansible这类的集群操作工具,如果你再选择把几十个多到几百个手动地,一个个地把主机组及相关联的主机写入配置,是不是显得很1+1. 这里简单说下我的一些个方法,首先可以避免这些个配置的写入,在产生minion的id的时候,就给他一个完美又规范的主机域名. 比如,

winform用户控件、动态创建添加控件、timer控件、控件联动

用户控件:(1) 相当于自定义的一个panel 里面可以放各种其他控件,并可以在后台一下调用整个此自定义控件. 使用方法:在项目上右键.添加.用户控件,之后用户控件的编辑与普通容器控件类似.如果要在后台往窗体中添加, 将其实例化,然后添加到想要添加的容器的Control集合中. 动态创建添加控件: 配合上面的用户控件,实现类似QQ界面的打开自动加载好友昵称和签名 public Form1() { InitializeComponent(); //将当前登陆的账号的全部好友信息取出来 List<A

JavaScript DOM 图片库---动态创建图片

<ul id="imgShowList"> <li><a href="image/1 (1).jpg" title="image/1 (1).jpg">图片1</a></li> <li><a href="image/1 (2).jpg" title="image/1 (2).jpg">图片2</a></li

c# Chart 服务器端动态创建ChartArea

1 aspx <x:ContentPanel ShowBorder="true" ShowHeader="false" ID="ContentPanel1" runat="server" > <asp:Chart ID="ChartData" runat="server" Width="1600px" Height="600px"

MFC动态创建控件及添加消息响应

MFC动态创建控件及添加消息响应 分类: 控件技术2013-01-24 14:12 7020人阅读 评论(0) 收藏 举报 转载地址:http://blog.csdn.net/luy3728000/article/details/8193918 动态控件是指在需要时由Create()创建的控件,这与预先在对话框中放置的控件是不同的. 一.创建动态控件: 为了对照,我们先来看一下静态控件的创建. 放置静态控件时必须先建立一个容器,一般是对话框,这时我们在对话框编辑窗口中,从工具窗口中拖出所需控件放