`
it_liuyong
  • 浏览: 100598 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

Flex:在PANEL的title上加一个button[转]

    博客分类:
  • flex
 
阅读更多
Flex:在PANEL的title上加一个button[转]
在panel的titleBar上添加按钮,首先 override createChildren方法, 其中加入panel.rawChildren.addChild(Button),然后override panel的layoutChrome方法定置按钮的位置。
例子如下:

?1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166 package{
    import mx.containers.Panel;
    import mx.controls.Button;
    import flash.events.Event;
    import flash.events.MouseEvent;
    import flash.display.DisplayObject;
    import mx.effects.Resize;
    import mx.controls.Alert;
    import mx.controls.Label;
 
    [Event(name="restore")]
    [Event(name="maximize")]
 
    public class FlexPanel extends Panel{
        private var state:int = 0;
             
        private var restoreBtn: Button;
        private var minBtn: Button;
        private var closeBtn: Button;
        
        [Embed("../assets/minICON.png")] // 这里我自定义了按钮外观
        private var minIcon:Class;
        [Embed("../assets/minOverICON.png")]
        private var minOverIcon:Class;
        
        [Embed("../assets/restoreICON.png")]
        private var restoreIcon:Class;
        [Embed("../assets/restoreOverICON.png")]
        private var restoreOverIcon:Class;
        
        [Embed("../assets/closeICON.png")]
        private var closeIcon:Class;
        [Embed("../assets/closeOverICON.png")]
        private var closeOverIcon:Class;
        
        private var resize: Resize;    
        private var effectTime: Number = 400;
          
        private static var _instance: FlexPanel;
        
        public function FlexPanel(){
            super();
            _instance = this; 
        }
        
        public override function initialize():void{
            super.initialize();
            this.maxHeight = this.height;
            initEffect();
        }
        
        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 {
            super.createChildren();
           
            this.titleBar.addEventListener(MouseEvent.MOUSE_DOWN, doDrag);
            this.titleBar.addEventListener(MouseEvent.MOUSE_UP, doDrop);
           
            restoreBtn = new Button();
            restoreBtn.addEventListener("click",doRestore);       
            restoreBtn.setStyle("overIcon",restoreOverIcon);
            restoreBtn.setStyle("downIcon",restoreIcon);
            restoreBtn.setStyle("upIcon",restoreIcon);       
            restoreBtn.visible=false;
            rawChildren.addChild(restoreBtn); 
           
            minBtn = new Button();
            minBtn.addEventListener("click",doMin);
            minBtn.setStyle("overIcon",minOverIcon);
            minBtn.setStyle("downIcon",minIcon);
            minBtn.setStyle("upIcon",minIcon);
            minBtn.visible = true;
            rawChildren.addChild(minBtn);
           
            closeBtn = new Button();
            closeBtn.addEventListener("click",doClose);
            closeBtn.setStyle("overIcon",closeOverIcon);
            closeBtn.setStyle("downIcon",closeIcon);
            closeBtn.setStyle("upIcon",closeIcon);
            closeBtn.visible = true;
            rawChildren.addChild(closeBtn);       
           
        }
        /* ************************************************** */
        protected override function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void{
            super.updateDisplayList(unscaledWidth, unscaledHeight);           
        }
        
        private function doMin(event:Event):void{
            setState(1);
            minBtn.visible= false;
            restoreBtn.visible= true;
            minEffect();
            //Alert.show(this.verticalScrollBar.toString());
        }
         
        private function doRestore(event:Event) :void{
            setState(0);
            minBtn.visible= true;
            restoreBtn.visible= false;
            restoreEffect();
        }
        
        private function doClose(event:Event) :void{
            this.visible = false;
            this.parent.removeChild(this);
        }
        
        private function doDrag(event:Event):void{
            this.startDrag();       
        }
        
        private function doDrop(event:Event):void{
            this.stopDrag();       
        }
        /* ********************************************************************************* */
        protected override function layoutChrome(unscaledWidth: Number, unscaledHeight:Number):void {
            super.layoutChrome(unscaledWidth, unscaledHeight);
           
            var margin:int = 0;
            var pixelsFromTop:int = 6;
            var pixelsFromRight:int = 12;
            var buttonWidth:int = 18;
            var buttonHeight:int = 17;
            var distance:int = 7;
            var x:Number = this.width - buttonWidth*2 - distance - pixelsFromRight;
            var y:Number = pixelsFromTop;
           
            restoreBtn.setActualSize(buttonWidth, buttonHeight);
            restoreBtn.move(x,y);
           
            minBtn.setActualSize(buttonWidth, buttonHeight);
            minBtn.move(x,y);
           
            closeBtn.setActualSize(buttonWidth, buttonHeight);
            closeBtn.move(this.width - buttonWidth - pixelsFromRight,y);
           
        }
        /* ********************************************************************************* */
        private function initEffect():void{       
            resize = new Resize(_instance);
            resize.heightTo = this.titleBar.height;
            resize.duration = effectTime;
        }
        
        private function minEffect():void{
            resize.heightTo = this.titleBar.height;
            resize.end();
            resize.play();
        }
        
        private function restoreEffect():void{
            resize.heightTo = this.maxHeight;
            resize.end();
            resize.play();
        }
    }
}

分享到:
评论

相关推荐

    Flex:事件的流转控制.doc

    1. **仅响应Panel事件**:在`Panel`内部的`Button`上添加了事件处理器`buttonClickHandler`,并通过`useCapture=true`设置在捕获阶段监听事件。因此,点击按钮时,`Panel`的事件处理器将被执行,而按钮自身的处理器...

    Flex 延迟加载 问题说明 处理 实现

    在Flex框架中,延迟加载主要应用于组件的渲染和资源的加载上。例如,当一个Flex应用程序包含大量组件时,如果所有组件都在启动时加载并渲染,这将大大增加初始加载时间。通过采用延迟加载技术,可以让不立即可见或...

    flex quick starts

    这段代码将在按钮上设置工具提示,当鼠标悬停在按钮上时,会显示“这是一个示例按钮”。 **2. 处理换行** 如果工具提示的文本过长,可以通过添加`\n`(ActionScript中)或`
`(MXML中)来实现换行。例如: ``...

    flex与ajax交互、flex与javascript交互.docx

    下面的示例展示了如何在一个简单的Flex应用中使用Flex-AjaxBridge技术与JavaScript进行交互。 ##### Flex端代码(main.mxml): ```xml <mx:Application xmlns:mx=...

    Flex 3 控件实例全部

    在 Flex 3 中,你可以通过调用静态方法 `Alert.show()` 来显示一个 `Alert` 对话框。例如: ```xml <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"> <mx:Script> <![CDATA[ import mx.controls....

    Extjs4 Grid分页与自动刷新

    { text: '标题', dataIndex: 'title', flex: 2 }, { text: '发布时间', dataIndex: 'posttime', flex: 1 } ], dockedItems: [ // 定义停靠项 { xtype: 'pagingtoolbar', // 分页工具栏 store: store, // 绑定...

    flex quick starts 中文版(翻译by dreamer)

    除了布局容器外,Flex还提供了专门用于导航的容器,如Accordion和TabNavigator等,这些容器可以方便地在多个子容器之间进行切换。 #### 总结 容器在Flex开发中扮演着非常重要的角色,它们不仅能够组织和布局UI元素...

    Flex3 界面布局教程

    Canvas 是 Flex 中一个非常基础且重要的布局容器,它允许开发者通过精确控制子元素的位置来构建界面。Canvas 容器本身定义了一个矩形区域,可以在此区域内放置其他容器或控件。与大多数其他容器不同,Canvas 不会...

    grails和flex的集成手册

    <mx:Panel layout="vertical" title="Enter Customer Information"> <mx:Form backgroundColor="white"> <mx:FormItem label="First Name"> <mx:TextInput id="firstName" width="150"/> </mx:FormItem> <mx:Form...

    extjs初学控件

    以上代码创建了一个包含三列(Name, Email, Phone)的Grid,并将其渲染到页面上。 在学习ExtJS控件时,理解这些基本组件的使用方法至关重要,因为它们构成了构建复杂应用的基础。无论是弹框用于用户交互,还是表格...

    Flex UI组件使用全集

    本文档是基于阿树对Adobe Flex UI组件库的全面整理,并结合Adobe主页上提供的各种组件代码示例进行深度解析。Flex是一种用于构建高度交互式的Web应用的框架,尤其适用于创建丰富的互联网应用程序(RIA)。它包含了一...

    关于应用容器(Application Container)

    - 在Flex中,应用容器通过`<mx:Application>`标记进行定义,该标记必须是MXML文件的第一个标记。 - `<mx:Application>`不仅充当容器的角色,还作为该文件中所有ActionScript代码的默认作用域,并定义了应用程序的...

    Flex使用视图状态(View States)笔记

    例如,在一个相册应用中,当用户鼠标悬停在一张图片上时,系统可以显示与该图片相关的信息(如拍摄时间、地点等),而当鼠标移开时,这些额外信息消失,仅保留图片本身。这就是视图状态的一个典型应用场景。 #### ...

Global site tag (gtag.js) - Google Analytics