`
确实比较男
  • 浏览: 115239 次
  • 性别: Icon_minigender_1
  • 来自: 成都
社区版块
存档分类
最新评论

flex4 实现分隔栏 类似java里面的JSplitPane的功能

阅读更多

最近写flex4的项目,要用到一个类似java里面的JSplitPane那样的功能,也是一个分隔栏,能左右拖动来改变两边容器的大小 ,网上找了很久都没有找到有这样的。在找了一些资料后就自己写了一个,有什么需要改进的,希望大家说出来,交流下 ,能使它更完善。

主要是个btton实现的,这个button的皮肤可以自己定义

 

 

package util
{
	import flash.events.MouseEvent;
	import flash.geom.Point;
	
	import mx.core.Application;
	import mx.managers.CursorManager;
	import mx.managers.CursorManagerPriority;
	
	import spark.components.Button;
	import spark.components.Group;
	import spark.components.Window;
	
	public class SplitButton extends Button
	{
		
		//记录光标的id
		//记录在splitbutton上的光标id
		private var resizeCur:Number = 0;
		//记录在父容器上的光标id
		private var parentCur:Number = 0;

		//原来的坐标位置
		private var oPoint:Point = new Point;
		//新坐标的位置
		private var nPoint:Point = new Point;
		
		//鼠标光标的图标  光标的偏移量
		private var _cussor:Class;
		private var _offX:Number = -20;
		private var _offY:Number = -22;
		
		
		//与分隔栏相关联的容器  
		private var parentWindow:Window;
		//要控制的两个容器
		private var oneGroup:Group;
		private var anotherGroup:Group;
		
		
		//控制的两个容器的最小高度  宽度
		private var _oneGroupMinWidth:Number;
		private var _oneGroupMinHeight:Number = 50;
		private var _anotherGroupMinWidth:Number;
		private var _anotherGroupMinHeight:Number = 30;
		
		//判断分隔栏是否横放的
		private var _isHorizontal:Boolean = true;
		
		public function SplitButton(parent:Window,oneGroup:Group,anotherGroup:Group)
		{
			this.parentWindow = parent;
			this.oneGroup = oneGroup;
			this.anotherGroup = anotherGroup;
			
			
			this.addEventListener(MouseEvent.MOUSE_OVER, splitButtonOverHandler);
			this.addEventListener(MouseEvent.MOUSE_OUT, splitButtonOutHandler);
			this.addEventListener(MouseEvent.MOUSE_DOWN, splitButtonDonwHandler);
			
		}
		
		
		protected function splitButtonOverHandler(event:MouseEvent):void
		{
			// 鼠标移动上来的事件
			this.resizeCur = parentWindow.cursorManager.setCursor(_cussor,2,_offX,_offY);
		}
		
		protected function splitButtonOutHandler(event:MouseEvent):void
		{
			// 鼠标移除的事件
			parentWindow.cursorManager.removeCursor(this.resizeCur);
		}
		
		protected function splitButtonDonwHandler(event:MouseEvent):void
		{
			// 鼠标按下的事件
			parentWindow.addEventListener(MouseEvent.MOUSE_MOVE, resizeGroupMoveHandler);
			parentWindow.addEventListener(MouseEvent.MOUSE_UP, resizeGroupUpHandler);
			
			//设置在parentWindow下的光标样式 
			this.parentCur = parentWindow.cursorManager.setCursor(_cussor,2,_offX,_offY);
			
			oPoint.x = mouseX;
			oPoint.y = mouseY; 
			oPoint = this.localToGlobal(oPoint);
		}
		
				
		
		protected function resizeGroupMoveHandler(event:MouseEvent):void
		{
			// 移动splitButton  来改变显示区域的大小 
			nPoint.x = mouseX;
			nPoint.y = mouseY;
			nPoint = this.localToGlobal(nPoint);
			
			
			if(_isHorizontal){
				//是横放的
				var yPlus:Number = nPoint.y - oPoint.y;
				if (oneGroup.height + yPlus > _oneGroupMinHeight 
						&& anotherGroup.height - yPlus > _anotherGroupMinHeight) {
					oneGroup.height = oneGroup.height + yPlus;
					anotherGroup.height = anotherGroup.height - yPlus;
				}
			}else{
				//竖放的
				var xPlus:Number = nPoint.x - oPoint.x; 
				if (oneGroup.width + xPlus > _oneGroupMinWidth
						&& anotherGroup.width - xPlus > _anotherGroupMinWidth) {
					oneGroup.width = oneGroup.width + xPlus;
					anotherGroup.width = anotherGroup.width - xPlus;
				} 
			}
			
			
			oPoint.x = mouseX;
			oPoint.y = mouseY; 
			oPoint = this.localToGlobal(oPoint);
			
		}
		
		
		protected function resizeGroupUpHandler(event:MouseEvent):void
		{
			// 移除绑定的事件  和  光标样式
			parentWindow.removeEventListener(MouseEvent.MOUSE_MOVE, resizeGroupMoveHandler);
			parentWindow.removeEventListener(MouseEvent.MOUSE_UP, resizeGroupUpHandler);

			parentWindow.cursorManager.removeCursor(this.parentCur);
		}
		
	
		public function set cussor(value:Class):void
		{
			_cussor = value;
		}

		public function set offX(value:Number):void
		{
			_offX = value;
		}

		public function set offY(value:Number):void
		{
			_offY = value;
		}

		public function set oneGroupMinWidth(value:Number):void
		{
			_oneGroupMinWidth = value;
		}

		public function set oneGroupMinHeight(value:Number):void
		{
			_oneGroupMinHeight = value;
		}

		public function set anotherGroupMinWidth(value:Number):void
		{
			_anotherGroupMinWidth = value;
		}

		public function set anotherGroupMinHeight(value:Number):void
		{
			_anotherGroupMinHeight = value;
		}

		
	}
}

 

上面这个是主要的类,下面说下怎么用这个类:

 

 

var splitButton:SplitButton = new SplitButton(this,msgGroup,msgEdit);
				splitButton.percentWidth = 100;
				splitButton.height = 3; 
				splitButton.setStyle("skinClass",skin.button.SplitButtonSkin);
				splitButton.cussor = this.bottomTop;
				splitButton.oneGroupMinHeight = 50;
				splitButton.anotherGroupMinHeight = 30;
				splitButton.offX = -20;
				splitButton.offY = -22;

 

 

 

不知道怎么把效果图放上来     有人知道请教下我   因为我也是刚在这个上面写没多久

 

把效果图片都上传到附件里面的

 

图片上面有个上下箭头  那个就是鼠标移动在splitButton上面的鼠标样式

 

 

 

 

 

  • 大小: 205.1 KB
  • 大小: 207.6 KB
分享到:
评论

相关推荐

    JSplitPane

    JSplitPane

    JSplitPane的用法

    4. **扩展性**:`JSplitPane`支持“一键展开”功能,即当用户单击分割条时,该面板会立即扩展到最大尺寸。 #### 三、代码解析 下面是对给定代码的详细解析: 1. **初始化**: ```java public class Test ...

    Java Swing中的工具栏(JToolBar)和分割面版(JSplitPane)组件使用案例

    工具栏中的每个元素都是通过JButton来实现的,每个按钮都可以设置相应的图标、文本、提示信息和大小。 在JToolBar的使用中,可以通过setFloatable方法来设置工具栏是否可以浮动。默认情况下,工具栏是浮动的,这...

    Java实现类Windows导航栏

    在Java编程中,实现类似Windows操作系统中的导航栏功能可以为应用程序提供用户友好的界面和便捷的导航体验。本文将详细讲解如何使用Java Swing库来创建一个自定义的导航栏组件。 首先,Java Swing并没有直接提供...

    java swing-JSplitPane的使用

    JSplitPane是Swing库提供的一个分割面板组件。它可以在图形界面中创建两个子组件,并允许用户通过拖动分割条来调整子组件的大小。

    Java Tree 导航栏

    ### Java Tree 导航栏知识点解析 #### 一、概览 在本代码片段中,开发者构建了一个基于Java Swing框架的树形导航栏组件。该组件不仅为用户提供了一个直观的目录结构视图,还允许用户通过点击节点来展开或收起子节点...

    java实例_简单Java_IDE工具

    例如,使用JSplitPane分隔主编辑区和信息显示区,JDesktopPane作为多文档的容器,JScrollPane则包裹JTextArea以实现滚动查看。 在实际编码过程中,我们将逐步添加更多的功能,如文件操作、项目管理、编译和运行等。...

    java swing笔记

    `JCheckBoxMenuItem`是一种可以在菜单或工具栏中使用的复选框,可以添加到工具栏中,用于控制某些功能的开启或关闭。 #### 三、BorderLayout与JSplitPane的组合使用 `BorderLayout`是一种常见的布局管理器,用于将...

    实例22 分割一个面板(java绝对新手实例)

    在Java编程语言中,"分割一个面板"通常指的是使用Swing库中的JSplitPane组件来创建用户界面。JSplitPane允许我们将屏幕空间分为两个或更多个可调整大小的部分,这样用户就可以根据自己的需求动态调整各个区域的大小...

    kk.rar_jsplitpane UI_成绩管理系统

    在Java Swing中,`JSplitPane` 是一种布局管理器,它提供了水平或垂直分割视图的功能。开发者可以将它用于创建如邮箱客户端、文本编辑器等应用,其中用户可能需要同时查看或操作两个相关的数据集。`JSplitPane` 提供...

    Java制作浏览器和源代码查看器.rar

    Java制作的网页浏览器和源代码查看器,仿IE的网页浏览功能,不支持HTML5,窗口采用上下分屏显示的方式,上面显示网页浏览器,下面显示该网页的源代码,JTextField jtfAddress; //输入html文件地址或网址  ...

    功能较完善的文件管理器java课程设计报告.doc

    8. **压缩打包**: 文件管理器还支持文件压缩打包,这通常意味着它需要实现类似ZIP格式的压缩功能,这可能涉及到对`java.util.zip`包的使用,如`ZipOutputStream`来创建ZIP文件。 9. **多文档界面(MDI)**: 多文档...

    Java实现文字随意拖动.rar

    Java实现文字随意拖动,随处拖动文本字符,移动到任意位置,super("文本的拖动处理"); //调用父类构造函数  String[] data = {"one", "two", "three", "four"}; //字符数组,用于构造列表框  DragList list=new...

    java 简单ide开发文档

    在**8.2 Java IDE的主要功能**部分,作者提到这个简单的IDE将实现文件操作、文本操作、项目管理以及Java文件的编译和运行。更高级的IDE通常还包括个性化设置、代码生成、代码提示、调试功能和文件搜索等,这些功能能...

    基于Swing的类似编辑器的界面

    本文将深入探讨基于Swing的"类似编辑器的界面"的设计与实现,以及涉及到的关键技术,包括可关闭的选项卡面板、文件复制功能、JSplitPane和滚动面板。 首先,"可关闭的选项卡面板"是一种常见的用户界面设计,常用于...

    获得分割栏获得分割栏获得分割栏

    此外,熟悉分割栏的使用也有助于理解其他编程环境中的类似概念,如Qt的QSplitter或Java的JSplitPane。 在提供的压缩包文件“1.20 如何获得任务栏窗口”中,虽然没有详细内容,但我们可以猜测这可能是关于如何获取和...

    java分栏技术,一个很实用得小程序

    Java分栏技术是一种在编程中实现界面布局管理的方法,它使得在GUI(图形用户界面)设计中,可以将内容划分为多个独立的区域或“栏”,每个区域展示不同的信息或功能。这种技术在桌面应用、网页设计乃至移动应用中都...

    JavaSwing.PPT (Swing 详解)

    它们各自承担特定的布局和功能,例如JPanel作为基本容器,JScrollPane提供滚动功能,JToolBar用于创建工具栏,JSplitPane分割视图,JTabbedPane实现选项卡布局。 6. **Swing编程注意事项** - Swing组件与AWT组件...

    SplitPanel的使用

    2. 自定义`JPanel`子类:可能代表`JSplitPane`的左右两侧组件,实现特定的UI布局和功能。 3. 事件监听器:可能添加了鼠标或键盘监听器,以响应用户对分隔条的操作。 运行这个项目,用户可以在myEclipse环境下看到一...

Global site tag (gtag.js) - Google Analytics