flex4 做和QQ一样的窗体最大化最小化关闭拖动改变大小

确实比较男

浏览: 115319 次
性别:
来自: 成都

最近访客更多访客>>

a83614098

jzhfmm

ldlzp

漆佳峰

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Flex4

flex4 仿QQ窗口自定义窗体最大化最小化关闭拖动

最近学习flex4,就做了一个和QQ一样的窗体，实现了最大化最小化关闭拖动改变大小，在这里记录下来，要是以后要用也可以在这里来查，本人属于flex4新手，有什么地方写的不好的请大家指出来，也好有所改进。

这个窗体的实际大小是比看到的要大，只是它被隐藏到了，显示出来的只是一个id叫main的 group

而这个group又被分成了两部分:标题部分（id = windowTitle）和内容部分(id = content).

要添加内容都加到这两个部分。

窗体中还有三个button，是用来拖动控制窗体的bottomHButton（//下边的button） resizeButton （//右下角） rightVButton（//窗口右边的button）

<?xml version="1.0" encoding="utf-8"?>
<s:Window xmlns:fx="http://ns.adobe.com/mxml/2009"
		  xmlns:s="library://ns.adobe.com/flex/spark"
		  xmlns:mx="library://ns.adobe.com/flex/mx"
		  xmlns:button="components.button.*"
		  creationComplete="initComplete(event)" 
		  showStatusBar="false"  
		  systemChrome="none"
		  transparent="true"
		  width="900"
		  height="700"
		  mouseDown="startMoveWindow(event)"
		  skinClass="skin.window.ApplicationSkin"
		  >
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			///import 省略			
			//窗口的菜单项
			private var _titleText:String = "";
			[Bindable]
			private var _windowWidth:Number = 400;
			[Bindable]
			private var _windowHeight:Number = 300;
			
			private var _controlButtons:ArrayList = new ArrayList();
			
		 	[Embed(source="images/cursor/leftRight.png")]
			public var leftRight:Class;
			[Embed(source="images/cursor/leftTop.png")]
			public var leftTop:Class;
			[Embed(source="images/cursor/bottomTop.png")]
			public var bottomTop:Class; 
			
			//控制窗口是不是可以resize
			private var _isResize:Boolean = true;
			
			//光标的id
			private var buttonOverId:Number = 0;
			private var buttonDownId:Number = 0;
			
			//原来的坐标位置
			private var oPoint:Point = new Point;
			//新坐标的位置
			private var nPoint:Point = new Point;
			
			private var _mW:Number = 300;
			private var _mH:Number = 300;
			
			
			//窗体周围的button
			private var resizeButton:Button;
			private var bottomHButton:Button;
			private var rightVButton:Button;
			
			
			
			//用来判断窗体周围的哪个下button被按下
			private var flag:String;
			
			/*移动窗口*/
			protected function startMoveWindow(event:MouseEvent):void
			{
				this.nativeWindow.startMove();
			}
			
			//添加控制按键
			public function addWindowControlButton(button:Button,index:int):void{
				controlButtons.addItemAt(button,index);
			}
			
		
			protected function initComplete(event:FlexEvent):void
			{			
				
				//把controlButtons中的buttons取出来   放到Group  control上
				for(var i:int=0;i<controlButtons.length;i++){
					control.addElement(controlButtons.getItemAt(i) as Button);
				}
				
				
				if(_isResize){
					//窗口可以改变大小 resize
			
					addResizeButtons();
				}
				
			}

			private function addResizeButtons():void{
				//窗口右边的button
				rightVButton = new Button;
				rightVButton.right = 0;
				rightVButton.verticalCenter = 0;
				rightVButton.width = 4;
				rightVButton.percentHeight = 98;
				rightVButton.setStyle("skinClass",skin.button.VerticalButton);
				rightVButton.setStyle("skinClass",skin.button.HorizontalButton);
				rightVButton.addEventListener(MouseEvent.MOUSE_DOWN,rightVButtonDown);
				rightVButton.addEventListener(MouseEvent.MOUSE_OVER,buttonOver)
				rightVButton.addEventListener(MouseEvent.MOUSE_OUT,buttonOut);
				
				
				//下边的button
				bottomHButton = new Button;
				bottomHButton.bottom = 0;
				bottomHButton.horizontalCenter = 0;
				bottomHButton.percentWidth = 98;
				bottomHButton.height = 4;
				bottomHButton.setStyle("skinClass",skin.button.HorizontalButton);
				bottomHButton.addEventListener(MouseEvent.MOUSE_DOWN,bottomHButtonDown);
				bottomHButton.addEventListener(MouseEvent.MOUSE_OVER,buttonOver)
				bottomHButton.addEventListener(MouseEvent.MOUSE_OUT,buttonOut);
				
				
				//右下角
				resizeButton = new Button;
				resizeButton.right = 0;
				resizeButton.bottom = 0;
				resizeButton.setStyle("skinClass",skin.button.RightBottomButtonSkin);
				resizeButton.width = 14;
				resizeButton.height = 14;
				resizeButton.addEventListener(MouseEvent.MOUSE_DOWN,resizeButtonDown);
				resizeButton.addEventListener(MouseEvent.MOUSE_OVER,buttonOver)
				resizeButton.addEventListener(MouseEvent.MOUSE_OUT,buttonOut);
				
				
				
				main.addElement(resizeButton);
				main.addElement(rightVButton);
				main.addElement(bottomHButton);
			}
			
			
			protected function resizeButtonDown(event:MouseEvent):void
			{
				// 右下角button的鼠标按下事件
				event.stopPropagation();
				flag = "rightBottom";
				resizeDown(this.leftTop);
			}	
			protected function bottomHButtonDown(event:MouseEvent):void
			{
				// 下边button  donw 事件
				event.stopPropagation();
				flag = "bottomHButton";
				resizeDown(this.bottomTop);
				
			}
			
			protected function rightVButtonDown(event:MouseEvent):void
			{
				// 右边的button  down事件
				event.stopPropagation();
				flag = "rightVButton";
				resizeDown(this.leftRight);
			}
			
			protected function buttonOver(event:MouseEvent):void
			{
				switch(event.target)
				{
					case resizeButton:
						//右下角
						// 左下图标  鼠标浮动事件
						buttonOverId = (event.target as Button).cursorManager.setCursor(this.leftTop,2,-20,-20);
						break;
					case bottomHButton:
						//右下角
						// 左下图标  鼠标浮动事件
						buttonOverId = (event.target as Button).cursorManager.setCursor(this.bottomTop,2,-20,-20);
						break;
					case rightVButton:
						buttonOverId = (event.target as Button).cursorManager.setCursor(this.leftRight,2,-20,-20);
						break;
					
				}
				
			}
		
			private function resizeDown(cursor:Class):void{
				// 鼠标按下的事件
				this.parent.addEventListener(MouseEvent.MOUSE_MOVE, resizeWindowMoveHandler);
				this.parent.addEventListener(MouseEvent.MOUSE_UP, resizeWindowUpHandler);
				
				//设置在parentWindow下的光标样式 
				buttonDownId = this.cursorManager.setCursor(cursor,2,-20,-20);
				
				oPoint.x = mouseX;
				oPoint.y = mouseY; 
				oPoint = this.localToGlobal(oPoint);
			}
			
			
			
			protected function resizeWindowMoveHandler(event:MouseEvent):void
			{
				// 改变窗体大小的移动事件
				// 移动splitButton  来改变显示区域的大小 
				nPoint.x = mouseX;
				nPoint.y = mouseY;
				nPoint = this.localToGlobal(nPoint);
				
				var xPlus:Number = nPoint.x - this.oPoint.x;            
				var yPlus:Number = nPoint.y - this.oPoint.y;
				
				switch(flag)
				{
					case "rightBottom":
						if (this.windowWidth + xPlus > this.mW) {
							this.width = this.width + xPlus;
							this.windowWidth = this.windowWidth + xPlus;
						}
						
						if (this.windowHeight + yPlus > this.mH) {
							this.height = this.height + yPlus;
							this.windowHeight = this.windowHeight + yPlus;
						}
						break;
					case "bottomHButton":
						if (this.windowHeight + yPlus > this.mH) {
							this.height = this.height + yPlus;
							this.windowHeight = this.windowHeight + yPlus;
						}
						break;
					case "rightVButton":
						if (this.windowWidth + xPlus > this.mW) {
							this.width = this.width + xPlus;
							this.windowWidth = this.windowWidth + xPlus;
						}
						break;
						
				}
				oPoint.x = mouseX;
				oPoint.y = mouseY; 
				oPoint = this.localToGlobal(oPoint);
				
			}
			
			
			protected function resizeWindowUpHandler(event:MouseEvent):void
			{
				// 鼠标弹起事件
				// 移除绑定的事件  和  光标样式
				this.parent.removeEventListener(MouseEvent.MOUSE_MOVE, resizeWindowMoveHandler);
				this.parent.removeEventListener(MouseEvent.MOUSE_UP, resizeWindowUpHandler);
				
				this.cursorManager.removeCursor(this.buttonDownId);
				
			}
			
			protected function buttonOut(event:MouseEvent):void
			{
				// 鼠标移开事件
				(event.target as Button).cursorManager.removeCursor(buttonOverId);
			}
			
			
			//get   set方法省略		
			
		]]>
	</fx:Script>
	<s:Group id="main" width="{_windowWidth}" height="{_windowHeight}" horizontalCenter="0" top="8">
		
		<!-- 设置边框  --><!-- 设置圆角 -->
		<s:Rect left="0" right="0" top="0" bottom="0" radiusX="5" radiusY="5">
		
			<s:stroke>
				<s:SolidColorStroke color="#3A4B5E"/>
			</s:stroke>
			<s:fill>
				<s:SolidColor color="#84A8CE"/>
			</s:fill>
		</s:Rect>
		
		<!--  设置背景图片  -->
		<s:Group width="100%" height="100%" minWidth="0" minHeight="0">
			<s:layout>
				<s:VerticalLayout paddingBottom="2" paddingLeft="2" paddingRight="2" paddingTop="2"/>
			</s:layout>
		
			<s:BitmapImage width="100%" height="100%" alpha="1" source="images/login.jpg"/>	
		</s:Group>
		
			
			<s:VGroup width="100%" height="100%" gap="0">
				<!-- 标题部分 -->
				<s:Group id="windowTitle" 
						 width="100%">
					
					<s:Group id="titleToolbar">
						
					</s:Group>
					
					
					<s:HGroup id="control" gap="0"
							  right="1">
						
					</s:HGroup>
					
				</s:Group>
				
				
				<!-- 主要的内容部分 -->
				<s:Group id="content"
						 width="100%" height="100%">
					
				</s:Group>
				
			</s:VGroup>

	</s:Group>
	
</s:Window>

下面说下怎么用这个窗体：

var lw:SimpleWindow = new SimpleWindow;
				var quit:QuitButton = new QuitButton;
				var min:MinButton = new MinButton();
				 
				var max:MaxButton = new MaxButton;
				max.simpleWindow = lw;
				
				
				lw.addWindowControlButton(min,0);
				lw.addWindowControlButton(max,1);
				lw.addWindowControlButton(quit,2);
				 
				
				lw.open();

上面有三个button 是最大化最小化关闭，最小化也可以到托盘，不过要设置一个属性值（_isSystemTray），这是个boolean类型。具体看代码。

上面用的到组件皮肤都在附件中，最大化最小化关闭的皮肤可以合并使用一个，在皮肤中可以用getStyle方法来得到相应的图片，就可以合并了，我这里就不想改了。