`

如何在TWaver Flex中定制Tree的tooltip

阅读更多

如果您显示过Tree的ToolTip,会发现这个tooltip离鼠标太远了;而且也无法跟随鼠标一起移动;最重要的是,如果想动态更改tooltip也很麻烦。


还是自定义ToolTip灵活:
1. 设置tree.toolTipFunction,关闭默认的tooltip

tree.toolTipFunction = function(element:IData):String {
	return null;
}

2. 监听mousemove事件,动态显示、隐藏以及更新tooltip

tree.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {
	handleMouseMove(e);
});
 
3. 由于tree.getTreeDataByMouseEvent方法中,即使鼠标在空白处也有返回值,所以需要特殊处理一下,判断鼠标是否在icon或者text上:

private function showToolTip():Boolean {
	var obj:InteractiveObject = null;
	var mousePoint:Point = new Point(stage.mouseX, stage.mouseY);
	var objects:Array = stage.getObjectsUnderPoint(mousePoint);
	for (var i:int = objects.length-1; i>=0; i--) {
		if (objects[i] is InteractiveObject) {
			obj = objects[i] as InteractiveObject;
			break;
		} else {
			if (objects[i] is Shape && (objects[i] as Shape).parent) {
				obj = (objects[i] as Shape).parent;
				break;
			}
		}
	}
	return obj is UIComponent || obj is UITextField;
}
 
效果如下:



完整代码:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
				xmlns:tw="http://www.servasoftware.com/2009/twaver/flex"
				paddingLeft="0" paddingRight="0" paddingTop="0" paddingBottom="0" backgroundColor="#FFFFFF"
				creationComplete="init()">
	<mx:Script>
		<![CDATA[
			import mx.core.IToolTip;
			import mx.core.UIComponent;
			import mx.core.UITextField;
			import mx.managers.ToolTipManager;

			import twaver.DataBox;
			import twaver.IData;
			import twaver.Link;
			import twaver.Node;
			import twaver.controls.TreeData;

			private var _toolTip:IToolTip;
			private var _lastData:IData = null;
			private var _timer:uint = 0;

			private function init():void {
				var box:DataBox = tree.dataBox;
				tree.toolTipFunction = function(element:IData):String {
					return null;
				};
				tree.addEventListener(MouseEvent.MOUSE_MOVE, function(e:MouseEvent):void {
					handleMouseMove(e);
				});
				tree.callLater2(function():void {
					tree.expandAll();
				});

				var from:Node = new Node();
				from.name = "From";
				from.toolTip = "From";
				from.centerLocation = new Point(100, 100);
				box.add(from);
				var to:Node = new Node();
				to.name = "To";
				to.toolTip = "To";
				to.centerLocation = new Point(300, 400);
				box.add(to);
				var link:Link = new Link(from, to);
				link.name = "Link";
				link.toolTip = "Link";
				box.add(link);
			}

			private function handleMouseMove(e:MouseEvent):void {
				var treeData:TreeData = tree.getTreeDataByMouseEvent(e);
				var data:IData = (showToolTip() && treeData && treeData.data) ? treeData.data : null;
				if(data != null){
					var x:Number = tree.mouseX + 10, y:Number = tree.mouseY + 10;
					if(data != _lastData){
						if(_toolTip != null){
							ToolTipManager.destroyToolTip(_toolTip);
						}
						_toolTip = ToolTipManager.createToolTip(data.toolTip, x, y);
						if(_timer){
							clearTimeout(_timer);
						}
						_timer = setTimeout(function():void {
							_timer = 0;
							if(_toolTip){
								_toolTip.text = "test\n" + _toolTip.text;
							}
						}, 1000);
					}else{
						_toolTip.x = x;
						_toolTip.y = y;
					}

				}else{
					if(_toolTip != null){
						ToolTipManager.destroyToolTip(_toolTip);
					}
					_toolTip = null;
				}
				_lastData = data;
			}

			private function showToolTip():Boolean {
				var obj:InteractiveObject = null;
				var mousePoint:Point = new Point(stage.mouseX, stage.mouseY);
				var objects:Array = stage.getObjectsUnderPoint(mousePoint);
				for (var i:int = objects.length-1; i>=0; i--) {
					if (objects[i] is InteractiveObject) {
						obj = objects[i] as InteractiveObject;
						break;
					} else {
						if (objects[i] is Shape && (objects[i] as Shape).parent) {
							obj = (objects[i] as Shape).parent;
							break;
						}
					}
				}
				return obj is UIComponent || obj is UITextField;
			}
		]]>
	</mx:Script>
	<tw:Tree id="tree" width="30%" height="100%"/>
</mx:Application>
 

完整代码见附件:见原文最下方

 

0
1
分享到:
评论

相关推荐

    twaver flex 中文用户使用手册

    在核心功能部分,手册会详细讲解如何利用Twaver Flex构建图形模型。这包括添加、编辑和删除节点与边,以及调整它们的样式和属性。同时,手册还将涵盖各种图表类型(如树图、网络图、流程图等)的创建方法,让用户...

    flex Twaver组件使用

    数据管理容器,尤其是`twaver.DataBox`,在TWaver Flex中扮演着Model的角色。它可以驱动多个视图,如`twaver.controls.Tree`、`twaver.controls.Table`和`twaver.network.Network`。当`DataBox`中的数据发生变化时,...

    twaver flex developer guid

    - **约定俗成**:在TWaver Flex开发过程中,遵循一定的命名规则和代码风格是十分必要的。这些规则不仅有助于提升代码的可读性和可维护性,还能帮助开发者更好地理解和协作。 - **命名规范**:例如,类名通常采用...

    TWaver_Flex中文帮助文档

    TWaver Flex中的告警功能是该组件的一个重要组成部分,文档中讲解了告警的使用,包括告警级别、状态与统计、以及告警的呈现方式。 ### 版权声明和使用许可 文档中也明确了版权信息和版权声明,强调了文档是...

    Twaver Flex技术

    6. **源码与工具**:标签中的“源码”意味着学习和使用Twaver Flex可能涉及到查看和修改源代码,以便深入理解和定制。而“工具”可能指的是Adobe Flex Builder或其他相关开发工具,这些工具可以帮助开发者更有效地...

    TWaver Flex网元任意位置添加icon

    标题“TWaver Flex网元任意位置添加icon”指的是在使用TWaver Flex开发图形化界面时,如何在图表或网络拓扑图的各个元素(网元)上自由地添加图标(icon)。TWaver是一款强大的可视化工具,它允许开发者创建交互式的...

    Twaver Flex Demo

    Twaver Flex Demo SWF格式

    twaver-flex-3.6.5 官方demo

    在压缩包文件"twaver-flex-3.6.5"中,用户可以找到关于如何在Flex项目中集成和使用Twaver库的示例代码、资源文件以及可能的文档。这通常包括: 1. **源代码**:官方Demo的AS3源码,开发者可以通过阅读和修改这些...

    twaver for flex 开发手册

    这些控件允许开发者在 Flex 应用程序中轻松实现复杂的网络拓扑图、表格、树形结构等图形界面,从而极大地提高了应用程序的可读性和可用性。 #### 二、TWaverFlex 快速入门 **TWaverFlex 快速上手**:为了帮助初学...

    TWaver 3D Flex 3D 实例 例子

    标题中的“TWaver 3D Flex 3D 实例 例子”表明这是一份关于TWaver 3D技术在Flex 3D环境下的应用实例。TWaver是一款强大的数据可视化工具,它提供了丰富的图表类型和交互功能,而Flex 3D是Adobe Flex框架的一个扩展,...

    Flex与Twaver资料

    Flex与Twaver是两个在IT行业中用于图形化界面开发和数据可视化的重要工具。Flex是一种基于ActionScript和MXML的开源框架,主要用于构建富互联网应用程序(RIA),尤其是在Web上创建交互式、动态的用户界面。而Twaver...

    twaverflex 3D开发文档

    因此,开发者需要在安装有Flex Builder 4.6的环境中进行TWaver3D的开发工作。 ### 3. 第一个3D应用程序的创建 文档介绍了如何构建第一个3D应用程序,这包括了3D应用的基本概念,如事件驱动、元素的组织、3D样式、...

    Flex Twaver 入门指南中文版

    **前期准备**:在开始使用 Flex Twaver 之前,需要确保已经安装了 Java 开发环境,并了解基本的 Java 编程知识。此外,还需要获取 Flex Twaver 的安装包并按照指引完成安装。 **TWAVER 组件概览**:Flex Twaver ...

    TWaver.swc 3.3.1

    TWaver-flex的库TWaver.swc

    TWaver_Web_4.0中文开发手册

    TWaver Web 的广义概念涵盖了多个版本,包括 TWaver Web SVG、TWaver Flex 和 TWaver Silverlight;而在狭义上通常指的是 TWaver Web SVG 版本。 - **TWaver SVG 快速上手**:这一章节将介绍如何快速地使用 TWaver...

    TWaver文档

    - TWaver在处理大量数据时表现出了极高的效率,例如在**Java**版本中可以在1秒内呈现10,000个节点和连线;在**Flex**版本中也可以在1.5秒内完成同样的任务。 - 这样的性能优势使得TWaver非常适合于处理大规模的数据...

Global site tag (gtag.js) - Google Analytics