Flex/ Flex 3 how to

#2 Flex How to: Criando seus próprios eventos em Actionscript 3.0

O modelo do SDK do Flex permite que você crie, dispare e assista a distribuição de seus eventos próprios, sem ter que usar os eventos padrão que vem aos componentes do Flex SDK.

Criar eventos próprios facilita na hora de manipular as informações e o fluxo que elas agregam a tela de sua aplicação. Fácil à isso tornar-se elementar o uso de eventos próprios em componentes.

Passo-a-passo

Para se criar eventos próprios, basta estender da classe Event e disparar pelo DispatchEvent que são modelos de classes nativas do Flash Player.

package br.com.igorcosta.howto.events
{
	import flash.events.Event;

	public class MeuEvento extends Event
	{
		public static const CRIOU:String= "criouEvent";
		public static const DELETOU:String = "deletouEvent";
		public static const ATUALIZOU:String = "atualizouEvent";
		public function MeuEvento(type:String, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
		}
		override public function clone():Event{
			return new MeuEvento(type,bubbles,cancelable);
		}

	}
}

Uma vez que sou responsável pela classe eu consigo manipular todos os seus estados, eu criei uma classe chamada MeuEvento que estende da classe Event, logo eu declarei três constantes públicas para serem acessadas pelo meu componente, que for usar. Uma coisa bem importante é que você faça o clone da classe Event, para que ela se comporte igual à um evento nativo do Flash Player, caso contrário o Flash Player não vai entender sua classe como um evento distinto para ser absorvido pelo eventDispatcher.

Aplicação

Como a classe MeuEvento foi definida, agora resta aplicar o código na aplicação, já que este é um simples exemplos vou aplicar direto no Application, no seu caso se for um componente, você não muda nada em termos de aplicação, é basicamente igual.
Para declarar e deixar que o Flex acesse o evento, eu declaro via um tag metada chamado Event meu evento.

< ?xml version="1.0" encoding="utf-8"?>



		[Event (name="Nome do Evento",type="Tipo do Evento")]



O tag metadata é bem útil e pode servir para outros propósitos não só para evento, mais para um número finitos de aplicações.

O nome do evento que será declarado ao total são 3 e derivam do tipo MeuEvento. Criei uma interface para ajudar a entender melhor e disparar e escutar todos os eventos necessários para isso.

< ?xml version="1.0" encoding="utf-8"?>



		[Event (name="criouEvent",type="br.com.igorcosta.howto.events.MeuEvento")]
		[Event (name="deletouEvent",type="br.com.igorcosta.howto.events.MeuEvento")]
		[Event (name="atualizouEvent",type="br.com.igorcosta.howto.events.MeuEvento")]


	
		< ![CDATA[

		]]>
	
	
	
	
	
	
	

Agora é colocar para funcionar a lógica dentro do bloco de script. A primeira coisa que pode fazer é criar os eventListeners e os handlers para o aplicativo, ja que está dentro do seu escopo. Ficando assim as funções.

			public function attachEventListeners():void {
					this.addEventListener(MeuEvento.ATUALIZOU,atualizouHandler);
					this.addEventListener(MeuEvento.CRIOU,criouHandler);
					this.addEventListener(MeuEvento.DELETOU,deletouHandler);
			}
			public function atualizouHandler(e:MeuEvento):void {
				Alert.show('Atualizou Registro');
			}
			public function criouHandler(e:MeuEvento):void {
				Alert.show('Criou registro');
			}
			public function deletouHandler(e:MeuEvento):void {
					Alert.show('Deletou Registro');
			}

Uma fez feito, só preciso então adicionar ao tag Application a propriedade creationComplete para agregar os listeners ao aplicativo.
Depois disso, preciso disparar esses eventos para que o aplicativo que agora rigorosamente está escutando-os, basta adicionar o dispatEvent para fazer o trabalho, meus três disparos de eventos ficou assim.

			import mx.controls.Alert;
			import br.com.igorcosta.howto.events.MeuEvento;
			import mx.collections.ArrayCollection;

			[Bindable]public var colecao:ArrayCollection = new ArrayCollection();
			public var pessoa:Object;

			public function createAction():void {
				pessoa = new Object();
				pessoa.nome = yourName.text;
				colecao.addItem(pessoa);
				dispatchEvent(new MeuEvento(MeuEvento.CRIOU));
				yourName.text ='';
			}
			public function deletarAction():void{
				if(peopleList.selectedItem !=null){
				colecao.removeItemAt(peopleList.selectedIndex);
					dispatchEvent(new MeuEvento(MeuEvento.DELETOU));
				}

			}
			public function atualizarAction():void{
				pessoa = new Object();
				pessoa.nome = yourName.text;
				if(yourName.text != '' && peopleList.selectedItem !=null){
						colecao.setItemAt(pessoa,peopleList.selectedIndex);
						dispatchEvent(new MeuEvento(MeuEvento.ATUALIZOU));
				}
			}

Toda vez que fizer uma ação peço para disparar um novo evento que no caso é o MeuEvento com o tipo do evento em questão, lembra das constantes criadas? Elas definem o tipo da classe MeuEvento.

O resultado final, é esse código.

< ?xml version="1.0" encoding="utf-8"?>



		[Event (name="criouEvent",type="br.com.igorcosta.howto.events.MeuEvento")]
		[Event (name="deletouEvent",type="br.com.igorcosta.howto.events.MeuEvento")]
		[Event (name="atualizouEvent",type="br.com.igorcosta.howto.events.MeuEvento")]


	
		< ![CDATA[
			import mx.controls.Alert;
			import br.com.igorcosta.howto.events.MeuEvento;
			import mx.collections.ArrayCollection;

			[Bindable]public var colecao:ArrayCollection = new ArrayCollection();
			public var pessoa:Object;

			public function createAction():void {
				pessoa = new Object();
				pessoa.nome = yourName.text;
				colecao.addItem(pessoa);
				dispatchEvent(new MeuEvento(MeuEvento.CRIOU));
				yourName.text ='';
			}
			public function deletarAction():void{
				if(peopleList.selectedItem !=null){
				colecao.removeItemAt(peopleList.selectedIndex);
					dispatchEvent(new MeuEvento(MeuEvento.DELETOU));
				}

			}
			public function atualizarAction():void{
				pessoa = new Object();
				pessoa.nome = yourName.text;
				if(yourName.text != '' && peopleList.selectedItem !=null){
						colecao.setItemAt(pessoa,peopleList.selectedIndex);
						dispatchEvent(new MeuEvento(MeuEvento.ATUALIZOU));
				}
			}
			public function attachEventListeners():void {
					this.addEventListener(MeuEvento.ATUALIZOU,atualizouHandler);
					this.addEventListener(MeuEvento.CRIOU,criouHandler);
					this.addEventListener(MeuEvento.DELETOU,deletouHandler);
			}
			public function atualizouHandler(e:MeuEvento):void {
				Alert.show('Atualizou Registro');
			}
			public function criouHandler(e:MeuEvento):void {
				Alert.show('Criou registro');
			}
			public function deletouHandler(e:MeuEvento):void {
					Alert.show('Deletou Registro');
			}
		]]>
	
	
	
	
	
	
	


One thought on “#2 Flex How to: Criando seus próprios eventos em Actionscript 3.0

  1. Boa tarde!

    Achei bem legal seu artigo, so fiquei com duvida em relacao ao clone do evento, vc diz que com ele o flash entende o evento como se foce um evento nativo do flash, oque seria examtamente esse evento nativo, pois eu utilizo so extendo a classe Event, sera que é pq eu so uso compilando direto no flash mesmo ?

    Obrigado

Comments are closed.