最近学习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方法来得到 相应的图片,就可以合并了,我这里就不想改了。
- 大小: 438.4 KB
- 大小: 589.6 KB
- 大小: 446.2 KB
- 大小: 819.3 KB
分享到:
相关推荐
实现flex4窗体最大化 最小话 和关闭功能
flex panel窗体有最小化最大化关闭可移动
Flex带最大化最小化按钮可拖动调整窗口大小的TitleWindow
Flex自定义组件,带最大化、最小化、还原及关闭按钮。
flex实现窗口的拖拽,最大化,最小化,关闭。
本资源修改了panel的最小,最大化按钮的bug,增加了拖动面板时的判断。目前来看还是不错的。希望大家多提意见。
flex 窗体拖拽,可以自由拖拽,最大化,最小化,拖拽式有按钮提示,整个窗体也可自由拖拽。。。等等
Flex 模拟地图 放大缩小 拖动限制功能
flex4舞台尺寸随浏览器窗口大小改变.rar
可以对任何flex组件进行拖拽变大变小,这个例子使用的是边框,对此组件进行了最大化,最小化等的处理..这个例子一般在项目里是什么加分的..希望对大家有所帮助。
flex TitleWindow自定义最大最小化
Flex 子窗体操作父窗体,实现父与子窗体之间数据传输,当子窗体数据改变时父窗体数据也相应改变。
flex 图片画线,图片拖动,图片高亮,拖动线随图片动
通过鼠标拖动可以改变窗口的位置,鼠标在窗口边框上是并按下并拖动就可以改变窗口的大小。。。
flex4 线上带点,并弹出窗体效果代码,分享给大家做个参考,不能运行,这个是需要我的后台代码(java)结合才能看到效果,大家下载下来自己修改就可以了。 这个是效果图 ...
Flex 移动效果 界面 最大化 Flex 移动效果 界面 最大化
重写titlewindow,带最小化、最大化、关闭按钮,方便前端使用
flex 仿qq
flex 入门介绍 flex 如何结合 j2ee 开发应用程序以及 flex 的国际化等