`

flex之小功能:用AS3创建带收缩功能的自定义Panel

    博客分类:
  • Flex
阅读更多

Flex3权威指南第10课中讲述了如何用AS3创建自定义组件,例如创建一个带收缩功能的自定义Panel。如图:

 



 
 此AS代码就是填加了两个BUTTON,用图标显示了。还自定义了两个事件:restore和maximize。当然,你引用此组件的时候再实现这两个事件。

代码为:

package views
{
	import flash.display.DisplayObject;
	import flash.events.Event;
	
	import mx.containers.Panel;
	import mx.controls.Button;
	
	[Event(name="restore")]
	[Event(name="maximize")]
	
	public class MaxRestorePanel extends Panel
	{
		private var state:int =0;//代表是否被最大化
		private var btStateUp:Button;//可以单击该按钮将Panel最大化
		private var btStateDown:Button;//可以单击该按钮将Panel还原
		
		[Embed("../assets/upArrow.gif")]
		private var buttonUpIcon:Class;
		
		[Embed("../assets/downArrow.gif")]
		private var buttonDownIcon:Class;
		//设置状态,看看派发哪个事件
		private function setState(state:int):void{
			this.state = state;
			if(state == 0){
				this.dispatchEvent(new Event("restore"));
			} else {
				this.dispatchEvent(new Event("maximize"));
			}
		}
		protected override function createChildren():void{//重写Panel中的createChildren
			super.createChildren();
			btStateUp = new Button();
			btStateDown = new Button();
			btStateUp.addEventListener("click",doMaximize);
			btStateDown.addEventListener("click",doRestore);
	                                btStateUp.setStyle("overIcon",buttonUpIcon);
	                                btStateUp.setStyle("downIcon",buttonUpIcon);
	                                btStateUp.setStyle("upIcon",buttonUpIcon);
	                                btStateDown.setStyle("overIcon",buttonDownIcon);
	                                btStateDown.setStyle("downIcon",buttonDownIcon);
	                                btStateDown.setStyle("upIcon",buttonDownIcon);
	                                btStateUp.visible = true;
	                                btStateDown.visible = false;
	                                rawChildren.addChild(btStateUp);
	                                rawChildren.addChild(btStateDown);
		}
		//重写定义小图标的位置和大小
		protected override function updateDisplayList(unscaledWidth:Number, unscaledHeigh:Number):void{
			super.updateDisplayList(unscaledWidth,unscaledHeigh);
			if(unscaledWidth > 0){
				this.visible = true;
			} else {
				this.visible = false;
			}
			var upAsset:DisplayObject = btStateUp.getChildByName("upIcon");
			var downAsset:DisplayObject = btStateDown.getChildByName("upIcon");
			var margin:int = 4;//详细请查看权威指南211页
			btStateUp.setActualSize(upAsset.width+margin,upAsset.height+margin);
			btStateDown.setActualSize(downAsset.width+margin,downAsset.height+margin);
			var pixelsFromTop:int = 5;
			var pixelsFromRight:int = 10;
			var buttonWidth:int = btStateUp.width;
			var x:Number = unscaledWidth - buttonWidth - pixelsFromRight;
			var y:Number = pixelsFromTop;
			btStateDown.move(x,y);
			btStateUp.move(x,y);
		}
		private function doMaximize(event:Event):void{
			setState(1);
			btStateUp.visible = false;
			btStateDown.visible = true;
		}
		private function doRestore(event:Event):void{
			setState(0);
			btStateUp.visible = true;
			btStateDown.visible = false;
		}
	}
}

 

  • 大小: 8.6 KB
  • 大小: 18.1 KB
分享到:
评论

相关推荐

    flex 自定义panel

    flex自定义桌面panel,可放大缩小,不会超出桌面大小

    flex自定义创建css样式

    本篇文章将深入探讨如何在Flex布局中自定义创建CSS样式,以满足多样化的设计需求。 首先,我们需要理解Flex布局的基本概念。在Flex布局中,容器被称为“flex容器”,其内部的子元素称为“flex项目”。通过设置容器...

    flex3自定义DownloadProgressBar

    本文将围绕“flex3自定义DownloadProgressBar”这一主题展开,讲解如何在Flex3中创建一个定制化的下载进度条组件,并探讨相关的编程技术和实践。 一、自定义组件基础 在Flex中,自定义组件是通过继承已有的...

    flex panel窗体有最小化最大化关闭

    Flex Panel 是一种在富互联网应用程序(RIA)开发中常见的组件,尤其在Adobe Flex或Apache Flex框架下使用。它提供了一种灵活的方式,用于在用户界面上创建可自定义的、可调整大小的容器。在标题“flex panel窗体有...

    as3 flex mxml调用.as文件例子

    在本文中,我们将深入探讨如何在ActionScript 3 (AS3) 和 Flex 框架中使用MXML来调用`.as`文件中的类。Flex是Adobe开发的一个开源框架,用于构建富互联网应用程序(RIA),它结合了MXML和AS3,提供了声明式和编程式...

    as3/flex4.6

    ### Flex4.6与AS3知识点详解 #### 一、Flex4.6简介与特性 **Flex4.6**作为一款强大的开源框架,主要用于构建跨平台的企业级应用程序、网页游戏、桌面应用及移动应用等。它基于ActionScript 3 (AS3) 开发,为开发者...

    Flex_4组件:自定义外观

    Flex CSS简介 Flex 使用MXML设置样式 Flex 使用ActionScript设置样式 Flex 样式的继承与叠加 Flex 主题的使用 Flex 自定义皮肤 Flex 应用皮肤

    flex和as3之间互相调用的方法

    Flex和ActionScript 3(AS3)之间的交互是Adobe Flex应用程序开发中的重要组成部分。Flex是一种基于MXML和AS3的开源框架,用于构建富互联网应用(RIA)。在Flex项目中,用户界面通常由MXML组件定义,而业务逻辑和...

    Flex使用<mx:Tree>控件创建树(可添加和删除节点)

    本文将详细讲解如何在Flex中使用`&lt;mx:Tree&gt;`控件来创建可动态添加和删除节点的树形结构,以及相关的源码和工具应用。 `&lt;mx:Tree&gt;`控件是Flex MX组件库中的一个关键组件,它允许开发者展示层次化的数据,用户可以...

    Flex4自定义组件开发.pdf

    ### Flex4自定义组件开发详解 #### 一、Flex4自定义组件概述 Flex4(也称为Spark)是Adobe Flex框架的一个重要版本,它引入了许多新的特性,包括改进的组件库、性能优化以及更好的可定制性。在Flex4中,自定义组件...

    Flex教程系列之(四) AS3语法——面对对象编程

    Flex教程系列之(一) AS3语法——编程基础 http://download.csdn.net/source/1161756 Flex教程系列之(二) AS3语法——流程控制语句 http://download.csdn.net/source/1161804 Flex教程系列之(三) AS3语法——控制...

    Flex自定义加载条(小起)

    - `.mxml`或`.as`文件:这是自定义加载条的源代码,展示了如何创建和定制加载条组件。 - `.css`文件:可能包含自定义的样式定义,用于改变加载条的外观。 - `.swf`或`.air`文件:编译后的应用程序,可以直接运行查看...

    as3 arpg游戏常用组件,自定义背包,skin

    【标题】AS3 ARPG游戏常用组件:自定义背包与皮肤设计 在开发ActionScript 3(AS3)中的角色扮演游戏(ARPG)时,组件是构建用户...利用Flex框架和AS3语言的优势,开发者可以创建出富有吸引力且功能丰富的ARPG游戏。

    WEB项目集成Flex3功能

    【WEB项目集成Flex3功能】是指在Web应用中整合Adobe Flex 3的技术,使得Web界面可以利用Flex的强大富客户端功能。Flex是一种用于构建RIA(Rich Internet Applications)的开放源码框架,它允许开发者创建交互性更强...

    flex 自定义组件

    Flex自定义组件是Adobe Flex框架中的一个重要特性,它允许开发者创建具有特定功能和外观的UI元素,以满足项目中独特的用户界面需求。Flex是一个开源的、基于MXML和ActionScript的开发框架,主要用于构建富互联网应用...

    flex 自定义加载进度框

    2. **Flex SDK**:理解Flex SDK的结构和使用,包括如何使用mxml和as文件创建组件。 3. **事件监听**:监听加载进度事件,如`ProgressEvent.PROGRESS`和`Event.COMPLETE`,以便更新进度条的状态。 4. **Flex ...

    flex4自定义事件用法

    在Flex应用中,事件处理是核心功能之一,它使得组件之间能够有效地通信。自定义事件是Flex开发中的一个重要概念,允许开发者扩展内置事件系统,以满足特定项目的需要。下面将详细介绍Flex4自定义事件的用法,以及...

    flex 自定义控件、事件

    自定义控件在Flex开发中扮演着重要角色,它们允许开发者根据项目需求创建具有独特功能和外观的组件。创建自定义控件的过程通常包括以下步骤: 1. **创建类**:首先,你需要创建一个继承自Flex内置组件的类。这可能...

    flex as3虚线

    在Flex AS3开发中,创建虚线效果是常见的需求,特别是在UI设计中,虚线常用于表示分隔、选中状态或非连续路径等。本文将深入探讨如何在Flex AS3环境中实现虚线效果。 首先,我们需要理解AS3(ActionScript 3)是...

Global site tag (gtag.js) - Google Analytics