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上面的鼠标样式