Fabiel Prestes

package com.imaster.customPanel {
 
	import flash.display.DisplayObject;
 
	import mx.containers.Panel;
	import mx.core.Application;
	import mx.core.UIComponent;
	import mx.effects.Blur;
	import mx.events.FlexEvent;
	import mx.managers.PopUpManager;
 
	[Style(name="headerHorizontalGap", type="Number", inherit="no")]
	/**
	 * @author Fabiel Prestes
	 */
	public class BaseCustomPanel extends Panel {
 
		/**
		 * Aqui será armazenado todos os componente FILHOS que serão adicionados
		 * ao HEADER
		 */
		[ArrayElementType("mx.core.UIComponent")]
		public var arrayFilhos:Array = [];
 
		private var blurIn:Blur;
 
		/**
		 * Construtor Padrao
		 */
		public function BaseCustomPanel() {
			super();
		}
 
		/**
		 * @inheritDoc
		 */
		override protected function childrenCreated():void {
			super.childrenCreated();
 
			configStyle();
 
			/* Para cada Filho adicionado no objeto 'arrayFilhos'
			 * será realizado algumas configurações como:
			 * Adiciona-lo no HEADER do PANEL
			 * Propriedade buttonMode = true ....*/
			for each (var child:UIComponent in arrayFilhos)
				addTitleBarComponent(child);
		}
 
		/**
		 * @private
		 */
		private function abreComEfeito():void{
			blurIn = new Blur();
			blurIn.blurXFrom = 10;
			blurIn.blurXTo = 0;
			blurIn.blurYFrom = 10;
			blurIn.blurYTo = 0;
			blurIn.duration = 600;
			blurIn.play([this]);
		}
 
		/**
		 * Realizando a configuração padrão dos Estilos
		 */
		private function configStyle():void {
			this.setStyle("headerHorizontalAlign", "rigth");
			this.setStyle("headerVerticalAlign", "middle");
			this.setStyle("headerHorizontalGap", 5);
		}
 
		/**
		 * @inheritDoc
		 */
		override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void {
			super.updateDisplayList(unscaledWidth, unscaledHeight);
 
			reposicioneElementosNoCabecalho();
		}
 
		/**
		 * Reposiciona todos os componentes FILHOS ao PAI 'HEADER'
		 */
		protected function reposicioneElementosNoCabecalho():void {
			var componenteFilho:UIComponent;
			var posicaoX:Number = 0;
			var tamanhoPai:Number = 0;
			var posicaoY:Number = 0;
			var headerHorizontalGap:Number = getStyle('headerHorizontalGap');
 
			/* Caso não tenha sido adicionado Nenhum filho, deve apenas retornar e continuar
			 * o processamento natural. */
			if (arrayFilhos.length == 0)
				return;
 
			tamanhoPai = this.width - 10;
 
			/* Para cada filho Definido para ser adicionado no cabeçalho deve ser
			 * verificado seu tamanho para assim ser posicionado no componente HEADER do PANEL. */
			for (var i:int; i < arrayFilhos.length; i++) {
				componenteFilho = UIComponent(arrayFilhos[i]);
				componenteFilho.setActualSize(componenteFilho.getExplicitOrMeasuredWidth(), componenteFilho.getExplicitOrMeasuredHeight());
 
				/* Abaixo é pego a altura do HEADER do PANEL subtraido com a altura do COMPONENTE filho
				 * e DIVIDIDO por 2, afim de pegar o valor que será definido no Y. Desta maneira
				 * o filho ficará no meio do HEADER. */
				posicaoY = (getHeaderHeight() - componenteFilho.getExplicitOrMeasuredHeight()) / 2;
 
				/* Abixo é pego o tomanho total do PANEL subtraido com o tamanho total do COMPONENTE
				 * filho SUBTRAIDO com o HORIZONTAL GAP, afim de pegar o valor que será definido no X.
				 * Desta maneira os componente FILHOS ficarão sempre a DIREITA do PANEL.
				 * A variavel TAMANHOPAI e tambem sempre recebe o resultado desta subtração para que assim
				 * os FILHOS não irão ficar sobre postos um ao outro.*/
				posicaoX = tamanhoPai - componenteFilho.getExplicitOrMeasuredWidth() - headerHorizontalGap;
				tamanhoPai = posicaoX;
 
				/* Move o componente FILHO para o X e Y calculado anteriormente. */
				componenteFilho.move(posicaoX, posicaoY);
			}
		}
 
		/**
		 * Responsavel por Adicionar o Filho ao HEADER e realizar algumas pré configurações
		 */
		public function addTitleBarComponent(child:UIComponent):void {
			child.buttonMode = true;
 
			/* Este metodo é responsavel por adicionar o FILHO ao HEADER do PANEL. */
			titleBar.addChild(child);
 
			invalidateDisplayList();
		}
 
		public function openPanel():void{
			PopUpManager.addPopUp(this, DisplayObject(Application.application));
			PopUpManager.centerPopUp(this);
			abreComEfeito();
		}
	}
}

package com.imaster.customPanel {
	import com.imaster.event.WindowPanelEvent;
 
	import flash.events.MouseEvent;
	import flash.filters.GlowFilter;
 
	import mx.containers.Box;
	import mx.controls.Image;
	import mx.core.UIComponent;
	import mx.effects.Blur;
	import mx.effects.Move;
	import mx.effects.Parallel;
	import mx.effects.Resize;
	import mx.effects.Sequence;
	import mx.events.EffectEvent;
	import mx.managers.PopUpManager;
	import mx.utils.ObjectUtil;
 
	[Event(name="minimixar", type="com.imaster.event.WindowPanelEvent")]
	[Event(name="maximizar", type="com.imaster.event.WindowPanelEvent")]
	[Event(name="fechar", type="com.imaster.event.WindowPanelEvent")]
	/**
	 * @author Fabiel Prestes
	 */
	public class WindowPanel extends BaseCustomPanel {
 
		private var imgFechar:Image;
		private var imgMaximizar:Image;
		private var imgMinimizar:Image;
 
		private var glow:GlowFilter;
 
		private var sequenceMinimizar:Sequence;
 
		private var parallelMaximizar:Parallel;
		private var moveMaximizar:Move;
		private var resizeMaximizar:Resize;
 
		private var parallelMinimizar:Parallel;
		private var resizeMinimizar:Resize;
		private var moveMinimizar:Move;
 
		private var widthOriginal:Number;
		private var heightOriginal:Number;
 
		[Bindable]
		private var xOriginal:Number;
 
		[Bindable]
		private var yOriginal:Number;
 
		public var panelPai:UIComponent;
		public var barra:Box;
 
		/**
		 * Contrutor Padrão
		 */
		public function WindowPanel() {
			super();
		}
 
		/**
		 * @inheritDoc
		 */
		override protected function childrenCreated():void{
			this.setStyle("styleName", "windowpanel");
 
			configBotoes();
 
			super.childrenCreated();
 
			widthOriginal = ObjectUtil.copy(this.width) as Number;
			heightOriginal = ObjectUtil.copy(this.height) as Number;
 
			configEfeitoBotoes();
		}
 
		/**
		 * @private
		 * Metodo responsavel por guarda a posição X e Y atual da tela para que
		 * assim ao maximizar a tela a mesma volte para a sua posição original.
		 */
		private function trateMouseUpMinimizar(evt:MouseEvent):void{
			xOriginal = this.x;
			yOriginal = this.y;
		}
 
		/**
		 * @private
		 * Responsavel por criar e configurar os botoes de Maximizar, Minimizar e Fechar.
		 */
		private function configBotoes():void{
 
			imgMaximizar = new Image();
			imgMaximizar.source = "assets/img/maximizar.png";
			imgMaximizar.width = 20;
			imgMaximizar.height = 20;
 
			imgMinimizar = new Image();
			imgMinimizar.source = "assets/img/minimizar.png";
			imgMinimizar.width = 20;
			imgMinimizar.height = 20;
 
			imgFechar = new Image();
			imgFechar.source = "assets/img/fechar.png";
			imgFechar.width = 20;
			imgFechar.height = 20;
 
			imgMaximizar.addEventListener(MouseEvent.MOUSE_OVER, trateMouseOver);
			imgMaximizar.addEventListener(MouseEvent.MOUSE_OUT, trateMouseOut);
			imgMaximizar.addEventListener(MouseEvent.CLICK, trateMaximizarClick);
 
			imgMinimizar.addEventListener(MouseEvent.MOUSE_OVER, trateMouseOver);
			imgMinimizar.addEventListener(MouseEvent.MOUSE_OUT, trateMouseOut);
			imgMinimizar.addEventListener(MouseEvent.CLICK, trateMinimizarClick);
			imgMinimizar.addEventListener(MouseEvent.MOUSE_UP, trateMouseUpMinimizar);
 
			imgFechar.addEventListener(MouseEvent.MOUSE_OVER, trateMouseOver);
			imgFechar.addEventListener(MouseEvent.MOUSE_OUT, trateMouseOut);
			imgFechar.addEventListener(MouseEvent.CLICK, trateFecharClick);
 
			this.arrayFilhos.push(imgFechar);
			this.arrayFilhos.push(imgMaximizar);
			this.arrayFilhos.push(imgMinimizar);
		}
 
		/**
		 * @private
		 * Responsavel por instanciar e configurar os efeitos que serão realizados
		 * pelo click do mouse nas imagens no HEADER.
		 */
		private function configEfeitoBotoes():void{
			/* Este efeito será utilizado quando o mouse estiver em cima do botoes/imagens
			 * no HEADER */
			glow = new GlowFilter();
            glow.color = 0xffffff;
            glow.blurX = glow.blurY = 20;
		}
 
		/**
		 * @private
		 * Responsavel por instanciar e configurar os efeitos que serão realizados
		 * pelo click do mouse na imagem de Maximizar.
		 */
		private function configEfeitoMaximizar():void{
 
            if(moveMaximizar == null){
            	moveMaximizar = new Move(this);
	            moveMaximizar.duration = 600;
            }
 
			moveMaximizar.xFrom = barra.x;
			moveMaximizar.yFrom = barra.y;
 
            moveMaximizar.xTo = xOriginal;
            moveMaximizar.yTo = yOriginal;
 
            if(resizeMaximizar == null){
	            resizeMaximizar = new Resize(this);
 
	            resizeMaximizar.heightTo = heightOriginal;
	            resizeMaximizar.widthTo = widthOriginal;
	            resizeMaximizar.duration = 600;
            }
 
			if(parallelMaximizar == null){
				parallelMaximizar = new Parallel(this);
 
	            parallelMaximizar.addChild(moveMaximizar);
	            parallelMaximizar.addChild(resizeMaximizar);
   			}
		}
 
		/**
		 * @private
		 * Responsavel por instanciar e configurar os efeitos que serão realizados
		 * pelo click do mouse na imagem de Minimizar.
		 */
		private function configEfeitoMinimizar():void{
			if(resizeMinimizar == null){
	            resizeMinimizar = new Resize(this);
	            resizeMinimizar.widthTo = 200;
	            resizeMinimizar.heightTo = 35;
	            resizeMinimizar.duration = 600;
			}
 
			if(moveMinimizar == null){
	            moveMinimizar = new Move(this);
	            moveMinimizar.duration = 600;
			}
 
			var filhosBarra:int = barra.getChildren().length;
 
			if(filhosBarra >= 1){
				moveMinimizar.xTo = (barra.getChildAt(0).width + 10) * filhosBarra;
			}else{
	            moveMinimizar.xTo = barra.x;
			}
 
            moveMinimizar.yTo = barra.y; 
 
            if(parallelMinimizar == null){
	            parallelMinimizar = new Parallel();
            	parallelMinimizar.addChild(resizeMinimizar);
	            parallelMinimizar.addChild(new Blur());
	            parallelMinimizar.addChild(moveMinimizar);
            }
 
			if(sequenceMinimizar == null){
	            sequenceMinimizar = new Sequence(this);
				sequenceMinimizar.addChild(parallelMinimizar);
	            sequenceMinimizar.addEventListener(EffectEvent.EFFECT_END, trateFimEfeitoMinimizar);
			}
		}
 
		/**
		 * @private
		 * Trata o OVER do mouse nas imagens do HEADER
		 */
		private function trateMouseOver(evt:MouseEvent):void{
            evt.currentTarget.filters =[glow];
		}
 
		/**
		 * @private
		 * Trata o OUT do mouse nas imagens do HEADER
		 */
		private function trateMouseOut(evt:MouseEvent):void{
			evt.currentTarget.filters = [];
		}
 
		/**
		 * @private
		 * Trata o CLICK da imagem maximizar do HEADER
		 */
		private function trateMaximizarClick(evt:MouseEvent):void{
			barra.removeChild(this);
			PopUpManager.addPopUp(this, panelPai);
 
			configEfeitoMaximizar();
			parallelMaximizar.play();
			this.dispatchEvent(new WindowPanelEvent(WindowPanelEvent.MAXIMIZAR));
		}
 
		/**
		 * @private
		 * Trata o CLICK da imagem mniimizar do HEADER
		 */
		private function trateMinimizarClick(evt:MouseEvent):void{
			configEfeitoMinimizar();
			sequenceMinimizar.play();
		}
 
		/**
		 * @private
		 * Trata o CLICK da imagem fechar do HEADER
		 */
		private function trateFecharClick(evt:MouseEvent):void{
			var blur:Blur = new Blur(this);
            blur.blurXFrom = 0;
            blur.blurYFrom = 0;
            blur.blurXTo = 10;
            blur.blurYTo = 10;
            blur.duration = 600;
            blur.addEventListener(EffectEvent.EFFECT_END, trateFimEfeitoFechar);
			blur.play();
		}
 
		/**
		 * @private
		 * Apos terminar o efeito de minimizar, é dispachado o evento do tipo MINIMIZAR
		 */
		private function trateFimEfeitoMinimizar(evt:EffectEvent):void{
			barra.addChild(this);
			this.dispatchEvent(new WindowPanelEvent(WindowPanelEvent.MINIMIZAR));
		}
 
		/**
		 * @private
		 * Apos terminar o efeito de mafechar, é dispachado o evento do tipo FEHCAR
		 * e logo em seguida a tela é removida.
		 */
		private function trateFimEfeitoFechar(evt:EffectEvent):void{
			try{
				PopUpManager.removePopUp(this);
				barra.removeChild(this);
				panelPai.removeChild(this);
			}catch(er:Error){}
			this.dispatchEvent(new WindowPanelEvent(WindowPanelEvent.FECHAR));
		}
	}
}

		<![CDATA[
			import com.imaster.WindowPanelTeste;
			import mx.managers.PopUpManager;
			import mx.controls.PopUpButton;
			import com.imaster.customPanel.WindowPanel;
 
			public var filhos:Number = 1;
 
			private function init():void{
				var tela:WindowPanelTeste = new WindowPanelTeste();
				tela.panelPai = this;
				tela.barra = hbBarra;
				tela.title = "Tela 1";
 
				PopUpManager.addPopUp(tela, this);
				PopUpManager.centerPopUp(tela);
 
				var tela2:WindowPanelTeste = new WindowPanelTeste();
				tela2.panelPai = this;
				tela2.barra = hbBarra;
				tela2.title = "Tela 2";
 
				PopUpManager.addPopUp(tela2, this);
				PopUpManager.centerPopUp(tela2);
			}
 
			private function novaJanela():void{
				var tela:WindowPanelTeste = new WindowPanelTeste();
				tela.panelPai = this;
				tela.barra = hbBarra;
				tela.title = "Nova Janela";
				tela.openPanel();
			}
		]]>

<?xml version="1.0" encoding="iso-8859-1"?>
<locale lang="en_US">
	<property key="titulo_app" value="Applying I18n in Flex applications" />
	<property key="usuario" value="Username" />
	<property key="senha" value="Password" />
	<property key="login_erro" value="User credentials are wrong. Please try again" />
	<property key="bt_login" value="Login" />
	<property key="bt_logout" value="Logout" />
	<property key="msg_boas_vindas" value="User logged in successfully." />
	<property key="idioma" value="Language" />
	<property key="selecione_idioma" value="Select a language." />
</locale>
 
<?xml version="1.0" encoding="iso-8859-1"?>
<locale lang="pt_BR">
	<property key="titulo_app" value="Aplicando I18n em aplicações Flex." />
	<property key="usuario" value="Usuário" />
	<property key="senha" value="Senha" />
	<property key="login_erro" value="Dados incorretos. Tente novamente." />
	<property key="bt_login" value="Login" />
	<property key="bt_logout" value="Sair" />
	<property key="msg_boas_vindas" value="Usuário logado com sucesso." />
	<property key="idioma" value="Idioma"/>
	<property key="selecione_idioma" value="Selecione um idioma."/>
</locale>
 
<?xml version="1.0" encoding="iso-8859-1"?>
<locale lang="es_ES">
	<property key="titulo_app" value="Aplicando i18n aplicaciones en Flex." />
	<property key="usuario" value="Nombre de Usuario" />
	<property key="senha" value="Contraseña" />
	<property key="login_erro"
		value="Credenciales de usuario se equivoca. Por favor, inténtelo de nuevo." />
	<property key="bt_login" value="Inicio de sesión" />
	<property key="bt_logout" value="Cerrar sesión" />
	<property key="msg_boas_vindas" value="Usuario conectado correctamente." />
	<property key="idioma" value="Idioma" />
	<property key="selecione_idioma" value="Seleccione un idioma."/>
</locale>

package com.flexI18n.utils {
	import flash.events.Event;
	import flash.net.URLLoader;
	import flash.net.URLRequest;
 
	import mx.resources.ResourceBundle;
	import mx.resources.ResourceManager;
 
	/**
	 * @author Fabiel Prestes
	 */
	public class ConfigI18n {
 
		private var resourceBundle:ResourceBundle;
 
		[Bindable]
		public var currentLocale:String = "pt_BR";
 
		public function ConfigI18n() {
			super();
		}
 
		/**
		 * Carrega o xml locale baseado na String passada como parametro.
		 */
		public function loadLocale(locale:String= "pt_BR"):void {
			currentLocale = locale;
			var xmlLoader:URLLoader = new URLLoader();
			xmlLoader.addEventListener(Event.COMPLETE, createBundle);
			xmlLoader.load(new URLRequest("I18n/" + currentLocale + ".xml"));
		}
 
        /**
        * @private
        * Apos o xml ser carregado com sucesso, deve-se pegar cada chave (key) e valor 
        * (value) e adicionar no resourceBundle, para assim ser acessado em qualquer local da aplicação.
        * @eventType Event
        */
        private function createBundle(e:Event):void {
            var propertyList:XMLList = new XML(e.target.data).property;
 
            resourceBundle = new ResourceBundle(currentLocale, "ApplicationResource");
 
            for each (var property:XML in propertyList) {
            	resourceBundle.content[property.@key] = property.@value;
            }
 
            ResourceManager.getInstance().addResourceBundle(resourceBundle);
            ResourceManager.getInstance().update();
            ResourceManager.getInstance().localeChain = [currentLocale,"pt_BR"];
        }
	}
}

<?xml version="1.0" encoding="utf-8"?>
<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="100%" height="100%">
 
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.managers.PopUpManager;
			import com.flexI18n.utils.ConfigI18n;
 
			[Bindable] public var availableLocales:Array = [ {label:"English", data:"en_US"},
															 {label:"Portuguese", data:"pt_BR"},
			                                                 {label:"Spanish", data:"es_ES"} 
			                                               ];
 
 
			private function onLogin(e:Event):void {
				PopUpManager.removePopUp(this);
				Alert.show(resourceManager.getString('ApplicationResource','msg_boas_vindas'));
			}
 
			private function comboChangeHandler():void {
                var locale:ConfigI18n = new ConfigI18n();
                locale.loadLocale(localeComboBox.selectedItem.data);
                this.localeComboBox.selectedIndex = -1;
			}
 
		]]>
	</mx:Script>
	<mx:Form width="100%">
		<mx:FormItem label="{resourceManager.getString('ApplicationResource','usuario')}">
			<mx:TextInput id="username" width="200"/>
		</mx:FormItem>
		<mx:FormItem label="{resourceManager.getString('ApplicationResource','senha')}" direction="horizontal">
			<mx:TextInput id="password" displayAsPassword="true"  width="200"/>
		</mx:FormItem>
		<mx:FormItem label="{resourceManager.getString('ApplicationResource','idioma')}">
			<mx:ComboBox id="localeComboBox" selectedIndex="-1"
                dataProvider="{availableLocales}"
                change="comboChangeHandler()"
             	width="200" prompt="{resourceManager.getString('ApplicationResource','selecione_idioma')}"/>
		</mx:FormItem>
	</mx:Form>
	<mx:ControlBar width="100%" horizontalAlign="right">
		<mx:Button label="{resourceManager.getString('ApplicationResource','bt_login')}"
			click="onLogin(event)" enabled="{username.text != '' &amp;&amp; password.text != ''}"  x="517" y="118"/>
	</mx:ControlBar>
 
</mx:TitleWindow>

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initApp()">
 
	<mx:Script>
		<![CDATA[
			import mx.managers.PopUpManager;
			import com.flexI18n.views.LoginUI;
			import com.flexI18n.utils.ConfigI18n;
 
			private function initApp():void{
				new ConfigI18n().loadLocale();
 
				var login:LoginUI = new LoginUI();
				PopUpManager.addPopUp(login, this, true);
				PopUpManager.centerPopUp(login);
			}
		]]>
	</mx:Script>
 
</mx:Application>