Flex实现自定义ToolTip 动态加载
来源:互联网 发布:淘宝的运营模式是商户 编辑:程序博客网 时间:2024/05/18 22:16
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>
..