Actionscript/ AS 3.0/ Dicas/ Flex

Estendendo o mx:Panel adicionando botões Fechar, Maximizar e Minimizar

Uma das coisas que deixam qualquer desenvolvedor contente é a possibilidade de estender e costumizar os componentes já padrões do framework de trabalho.
Flex é bem transparente quanto a isso, e dá a possibilidade de se estender com 2 maneiras diferentes, pelo layoutchrome e pelo createChildren.

A parte onde é adicionada conteúdo é a área em branco e para fazer isso Flex deixa muitas possibilidades, porém para criar na borda é outra história, você precisa fazer um override de alguns e estender, todos os componentes no Flex são compatíveis com override mais apenas algumas funções que podem ser re-escritas que faz parte do layoutchrome do Flex.

Veja o exemplo abaixo estendendo o o Panel, onde é adicionado 3 botões, maximizar, minimizar e fechar, ambos funcionais. Como?

Copie o código abaixo e experimente em seu projeto Flex, coloque-o dentro de um package (diretório referente ao que está escrito no package igorcosta.controles), os botões podem ser substituidos por imagens.

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
 
package igorcosta.controles
{
	import mx.containers.Panel;
	import mx.controls.Button;
	import flash.events.MouseEvent;
	import mx.core.Application;
	import mx.effects.Move;
	import mx.core.IFlexDisplayObject;
	import mx.managers.PopUpManager;
 
	public class PopUpWindow extends Panel
	{
		private var fechar:Button;
		private var maximizar:Button;
		private var minimizar:Button;
		private var isPopWindow:IFlexDisplayObject;
 
		public function PopUpWindow():void
		{
			super();
			super.width = 250;
			super.height = 200;
			super.isPopUp = true;
 
 
		}
		 protected override function createChildren(): void
		{
		   super.createChildren();
		   minimizar = new Button();
		   minimizar.label= "_";
		   minimizar.width = 20;
		   minimizar.height = 20;
		   //minimizar.x = this.width-65;
		   minimizar.move(this.width-65,2);
		   minimizar.addEventListener(MouseEvent.CLICK,diminue);
		   maximizar = new Button();
		   maximizar.label= "-";
		   maximizar.width = 20;
		   maximizar.height = 20;
		   //maximizar.x = ;
		   maximizar.move(this.width-43,2);
		   maximizar.addEventListener(MouseEvent.CLICK,aumenta);
 
		   fechar = new Button();
		   fechar.label = "x";
		   fechar.width= 20;
		   fechar.height = 20;
		   //fechar.x= this.width-20;
		   fechar.move(this.width-21,2);
		   fechar.visible=true
		   rawChildren.addChild(minimizar);
		   rawChildren.addChild(maximizar);
		   rawChildren.addChild(fechar);
		  //rawChildren.setChildIndex(btStateDown,numChildren+1);
		   //rawChildren.addChild(btStateDown);
		}
		public var setNovo:Boolean = true;
		public function aumenta(event:MouseEvent):void
		{
			setNovo = false;
			var effectAumenta:Move = new Move(this);
			effectAumenta.duration = 500;
			effectAumenta.xTo = 0;
			effectAumenta.yTo = 0;
			effectAumenta.play();
			this.x = 0;
			this.y = 0;
			this.width = mx.core.Application.application.width;
			this.height = mx.core.Application.application.height;
 
		}
		public function diminue(event:MouseEvent):void
		{
 
			var x_:Number = mx.core.Application.application.width -this.width;
			var y_:Number = mx.core.Application.application.height -this.height;
 
			if(setNovo == false)
			{
			this.width = 250;
			this.height = 70;
			this.move (mx.core.Application.application.width - this.width,mx.core.Application.application.height - this.height);
			}else {
				this.height = 70;
				this.width = mx.core.Application.application.width;
			}
		}
		private function layoutBotoes():void{
			if(minimizar != null){
				minimizar.move(titleBar.width - 20 * 3  - 6 - 6 - 6, (titleBar.height - 10) / 2);
			}
			if(maximizar != null){
				maximizar.move(titleBar.width - 20 * 2  - 6 - 6, (titleBar.height - 10) / 2);
			}
			if(fechar != null){
				fechar.move(titleBar.width - 20 - 6, (titleBar.height - 10) / 2);
			}
		}
 
		override protected function layoutChrome(unscaledWidth:Number, unscaledHeight:Number):void{
			super.layoutChrome(unscaledWidth, unscaledHeight);
			layoutBotoes();
		}
 
	}
}

Espero que gostem

2 thoughts on “Estendendo o mx:Panel adicionando botões Fechar, Maximizar e Minimizar

  1. Boa Tarde,

    Igor, tente incluir algumas Event Metatags para o usuário ter a possibilidade de decidir o que fazer quando os botões forem clicados.

    Marcos.

Comments are closed.