Actionscript/ AS 3.0/ Dicas/ Flex/ Flex 3 how to/ Flex 4

Dica: Criando um componente de relógio para seu Flex 2/3 e até 4

Dando aquela geral nos e-mails não respondidos para finalizar o ano sem pendências, acabei achando relíquias nos arquivos, 4 grandes leitores tinham a mesma dúvida em comum. “Preciso criar um relógio para meu aplicativo Flex,sem que consuma memória e que seja elegante”. Quarto com a mesma dúvida? É o mesmo que matar 4 coelhos em uma cajadada só, esperto! Esperto mais ainda é se eu escrever isso aqui e daqui algum tempo alguém, esperto também use o mecanismo de busca do site para achar essa dica.

A mágica do relógio é super simples:

Ingredientes:

DateFormatter
Event.ENTER_FRAME
Global.Date;

Componente Relógio:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
< ?xml version="1.0" encoding="utf-8"?>
<mx :Label enterFrame="showClock(event)" creationComplete="df.formatString = 'JJ:NN:SS'" xmlns:mx="http://www.adobe.com/2006/mxml">
 
	</mx><mx :Script>
		< ![CDATA[
			import mx.formatters.DateFormatter;
 
 
				private var df:DateFormatter = new DateFormatter();
 
				private function showClock(e:Event):void
				{
						this.text =  df.format(new Date());
				}
		]]>
	</mx>

Só copiar para dentro de seu projeto Flex, de preferência para seu diretório de componentes, e usar assim em seu aplicativo.

1
2
3
4
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:blogtips="br.com.igorcosta.blogtips.*">
	<blogtips :Relogio/>
</mx>

Explicando: Nem tem muito o que explicar do exemplo, já que o grande formatter ai do tipo DateFormatter, foi o responsável em geral por sempre formatar uma nova Date() object toda vez que entrar um novo Frame, e como por padrão o Frame do Flex é 24fps, então ele roda bem suave.

Da próxima vez que você ver alguém precisando de um relógio, avisa a ele deste post. Até a próxima.

Actionscript/ AS 3.0/ Flash/ Flex/ Flex 3 how to/ Flex 3 SDK/ Flex Builder 3/ frameworks/ Labs

3D na sua aplicação Flex usando apenas os novos recursos do Flash Player 10

O título é enorme, mais o conteúdo é de se animar. Eu já havia postado aqui sobre a novidade, só não tinha dito como fazer.Trabalhar com efeitos 3D no Flex é fácil, divertido e te tira uma boa parte do seu tempo pela manhã.

Existem algumas(1) bibliotecas(2) gratuitas(3) que faz esse serviço para a versão do Flash Player 9, embora ainda funcionando no Flash Player 10. Mais esse conteúdo é direcionado apenas para quem já tem o Flash Player instalado e quer começar a brincar ou quem sabe aplicar os efeitos de 3D em sua aplicação Flex existente já usando os novos recursos de 3D do Flash Player 10.

Requesitos:

– Ter o Flash Player 10 instalado
– Ter o Adobe Flex Builder 3.0.2+
– Ter tempo disponível de 30 minutos.

Antes de mais nada, para começar você vai precisar alterar algumas coisas do seu Flex Builder 3.0.2, embora ele já venha atualizado, existe uma pequena configuração necessária para rodar. Notadamente essa configuração não terá mais valor para o Flex Builder 4, ou melhor “gumbo”,já que por padrão ela vem feita.

Passos para configurar:

1. Vá até o Flex Builder e crie um novo projeto.
2. Depois do projeto criado, clique com o botão direito do mouse sobre o projeto e escolha a opção do menu “Properties”.
3. Vai abrir a tela de propriedades do projeto. Nela você deve escolher a opção “Flex Build Path”.
3d

4. Clique em Flex 3.2 para expandir e delete a biblioteca playerglobal.swc, essa biblioteca é para o Flash Player 9.
5.Clique no botão Add SWC e procure dentro dos arquevos de instalação de sua máquena onde está o seguinte caminho.

C:Program FilesAdobeFlex Builder 3 Plug-insdks3.2.0frameworkslibsplayer10playerglobal.swc

Esse novo playerglobal.swc vai garantir que as classes do Player padrão que no caso será o 10, terá todas as classes requesitadas.

Após isso, volte no menu lateral e escolha a opção Flex Compiler, e adicione ao compilador o seguinte parâmetro “-target-player=10”. Com isso garantimos que o compilador vai adicionar as classes dependentes para isso.

Feito isso, caso você queira assegurar que o swf gerado seja enxergado e possa refletir as mudanças para o instalador automático, mude a versão do Flash Player que está ai de 9.0.24 para 10.0.0.

Passo final. Clique OK e está salvo as alterações, agora é só contigo.

Entendendo um pouco do 3D do Flash Player 10.

Toda classe do DisplayObject, MovieClip e Sprite, tem novas propriedades cada uma dessas novas propriedades faz a rotação do objeto em um eixo X,Y e Z. As propriedades são: rotationX,rotationY, rotationZ,transformX,transformY,transformZ,scaleX,scaleY,scaleZ, dentre outras classes. Quem trabalha com Flash CS4 pode ver em detalhe como funciona o 3D do Flash Player (em português).

Para quem trabalha com Flash tem-se uma vantagem que é definir o ponto de registro x,y de um objeto quando se está criando, o que você pode fazer com que seu objeto seja rotacionado no eixo existente e assim fazer um efeito conciso.

Já no Flex não temos essa vantagem o que podemos fazer é imitar o Flash IDE nessa parte, colocando qualquer um de nossos componentes como container do componente afetado, complicado né?! Não, por exemplo veja abaixo que apliquei diretamente o efeito de 3D à um painel, observe que ele vai rotacionar no eixo Y de onde os pontos x,y foram registrados.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationY:pa.rotationY+180,time:1});
			}
		]]>
	</mx>
 
 
	<mx :Panel  id="pa" x="451" y="141" width="208" height="196" title="Painel Rotativo">
 
	</mx>
	<mx :Button x="20" y="55" label="Rotacionar" click="rotate()"/>

Agora comportando-se como no Flash IDE, adiciono o painel à um container.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationY:pa.rotationY+180,time:1});
			}
		]]>
	</mx>
 
	<mx :Container clipContent="false" id="pa" width="300" height="300" x="513.5" y="223">
	</mx><mx :Panel horizontalCenter="0" x="-150" y="-150" width="300" height="300" title="Painel Rotativo">
 
	</mx>
 
	<mx :Button x="20" y="55" label="Rotacionar" click="rotate()"/>

Onde depois você pode ir manipulando de uma só vez as três propriedades definidas. Exemplo abaixo:

3d2

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application horizontalScrollPolicy="off" verticalScrollPolicy="off" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="675" height="509">
 
	</mx><mx :Script>
		< ![CDATA[
			import caurina.transitions.Tweener;
 
 
			public function rotate():void{
 
				Tweener.addTween(pa,{rotationX:transformaX.value,rotationY:transformaY.value,rotationZ:transformaZ.value,time:1});
			}
		]]>
	</mx>
 
	<mx :Container clipContent="false" id="pa" width="150" height="150" x="486" y="212">
	</mx><mx :Panel horizontalCenter="0" x="-75" y="-75" width="150" height="150" title="Painel Rotativo">
 
	</mx>
 
	<mx :Button x="29" y="257" label="Rotacionar" click="rotate()"/>
	<mx :Form x="20" y="85">
		</mx><mx :FormItem label="rotationX">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaX" />
		</mx>
		<mx :FormItem label="rotationY">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaY"/>
		</mx>
		<mx :FormItem label="rotationZ">
			<mx :HSlider minimum="0" labels="[0,90,180,270,360]" maximum="360" allowTrackClick="true" snapInterval="15" id="transformaZ"/>
		</mx>
Flex/ Flex 3/ Flex 3 how to

#6 Flex How to: Habilitando acesso da aplicação por teclado

Ter acesso à execução de operações por teclado em sua aplicação RIA com Flex é essencial, uma aplicação ótima tem que deixar isso de fácil uso para o usuário final.
No Flash Player a classe responsável por isso é o KeyBoard que possui várias variáveis, constantes pré-definidas que mapeiam todo seu teclado; A Classe está localizada em flash.ui.KeyBoard, outras classes existentes que também faz parte do esquema de teclado é a KeyEquevalent(Apenas para AIR) e KeyLocation.

Embora em Flex para web usemos apenas o KeyBoard e junto a ele os disparos de eventos pelo KeyBoardEvent que possuim duas constantes definidas(KEY_DOWN,KEY_UP), que faz a interpretação de teclas pressionadas ou não.
Cada tecla é mapeada por códigos únicos, esses códigos são universais em qualquer teclado multimídia ou normal, esses códigos por tecla estão descritos na classe KeyBoard.

Prática 01:
Exemplo abaixo mostra como capturar cada código no Flex. Nele adicionamos dois listeners de eventos um capturando o exato momento que a tecla está pressionada e quando ela é solta.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
 
		public function init():void {
			stage.addEventListener(KeyboardEvent.KEY_DOWN,teclaPressionada);
		    stage.addEventListener(KeyboardEvent.KEY_UP,teclaSolta);
		}
		private var check:Boolean = false;
		public function teclaPressionada(e:KeyboardEvent):void {
				if(!check){
					check = true;
					Alert.show('Codigo caracter : '+e.charCode +'n'+
					'Codigo da tecla : '+ e.keyCode.toString());
				}
		}
		private function teclaSolta(event:KeyboardEvent):void {
			check = false;
			Log.text += 'Tecla pressionada!'+ 'n';
		}
	]]>
</mx>
<mx :TextArea id="Log" width="200" height="100"/>

Prática 02:

Como identifica a combinação de Ctrl + F1 para pedir ajuda.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
 
		public function init():void {
			stage.addEventListener(KeyboardEvent.KEY_DOWN,teclaPressionada);
		    stage.addEventListener(KeyboardEvent.KEY_UP,teclaSolta);
		}
		public function teclaPressionada(e:KeyboardEvent):void {
				if(e.ctrlKey){
						if(e.keyCode == Keyboard.F1){
							Alert.show('Help');
						}
				}
		}
		private function teclaSolta(event:KeyboardEvent):void {
			Log.text += 'Help acionado';
		}
	]]>
</mx>
<mx :TextArea id="Log" width="200" height="100"/>

Prática 03:

Verificando se a tecla CapsLock está ativa ou não. Isso é bem útil em telas de login.Onde você pode também colocar o listener no textInput quando o usuário for dar o focus, ou direto no stage da App.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
		import flash.ui.Keyboard;
 
		public function init():void {
			if(Keyboard.capsLock){
				Log.text +='Caps lock ativada' +'n';
			}else{
				Log.text += 'Caps lock desativada'+'n';
			}
			stage.addEventListener(KeyboardEvent.KEY_UP,verifica,true);
		}
		public function verifica(e:KeyboardEvent):void {
				if(e.keyCode == Keyboard.CAPS_LOCK){
						if(Keyboard.capsLock){
								Log.text +='Ativou'+'n';
						}else {
							Log.text +='Desativou'+'n';
						}
				}
		}
	]]>
</mx>
<mx :TextArea id="Log" width="200" height="100"/>

Prática 04:

Como combinar clique de Mouse com Shift,Alt e Ctrl por exemplo, quando queremos selecionar um lote de itens.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application applicationComplete="init()" xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.collections.ArrayCollection;
		import mx.controls.Alert;
		import flash.ui.Keyboard;
		import mx.containers.Panel;
 
		public function init():void {
				 stage.addEventListener(KeyboardEvent.KEY_UP,deleta);
		}
		public var itens:ArrayCollection = new ArrayCollection();
		public function seleciona(event:MouseEvent):void {
				if(event.shiftKey){
						itens.addItem(event.currentTarget);
				}
				else{
					itens.removeAll();
				}
		}
		public function deleta(e:KeyboardEvent):void {
			if(e.keyCode == Keyboard.DELETE){
						if(itens.length <=0){
							Alert.show('Nada para deletar');
						}else{
							for each( var item:Object in itens){
								this.removeChild(item as DisplayObject);
						}
					}
			}
		}
	]]>
</mx>
 
 
		<mx :Panel title="a" click="seleciona(event)" width="100" height="100" x="59" y="76"/>
		<mx :Panel title="b" click="seleciona(event)" width="100" height="100" x="167" y="76"/>
		<mx :Panel title="c" click="seleciona(event)" width="100" height="100" x="275" y="76"/>
		<mx :Panel title="d" click="seleciona(event)" width="100" height="100" x="392" y="76"/>
Flex/ Flex 3 how to/ Flex 3 SDK

#5 Flex How to: Como popular um menu e aplicar icones e eventos

Tem muita gente com essa dúvida, andamos pesquesando os arquevos da lista da Flex-Brasil, e percebemos que teve um número considerável sobre esse tópico.
Criar menus dinâmicos ou não em Flex é fácil, a definição de estrutura de seus itens é feita por um XML, sela ele interno ou externo.

O formato do arquevo xml que o MenuBar ou Menu lê, é pré-definido com alguns atributos que ambos os componentes já interpretam. São elas:

  • enabled – Habilita ou desabilita um item do menu.
  • groupName – Quando um item haje como radio Button, ou check Button de um grupo de itens.
  • icon – Coloca um item como imagem, herdando de um asset do tipo Class.
  • label – Nome que aparece no item do menu.
  • toggled – Seleciona ou escolhe o tipo do item marcando na seleção do item.
  • type – Especifica o tipo do item do menu com seus valores (check, radio e separator)

Exemplo do meumenu.xml :



		
                
                
                	
                
                

            
            		
            		
            
            
                
                
                
            
            

Em alguns tags do exemplo acima usei as propriedades definidas do xml que é automaticamente interpretada pelo menu. Lembrando que se meu XML tem formato E4X , precisa-se setar o labelField do Menubar, que para acessar um atributo no XML só basta ler com @ e o nome da propriedade.

O resultado do XML acima pode ser aplicado dentro do Flex, como mostra o exemplo abaixo.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
</mx><mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>

Para se usar com ícone, você deve setar a propriedade iconField no MenuBar, para que o próprio possa setar o valor da imagem. Lembrando que sempre com o tipo Class.
Auxiliando nesse ponto, você pode definir uma classe ou arquevo especificadamente para setar os icones de seu menu. Criei um arquevo simples que faz todo esse processo de Embed e converte para Class.

Como ficou o arquevo:

1
2
3
4
5
6
7
8
9
10
11
12
13
// ActionScript file
 
[Embed(source="./assets/dev.png")]
[Bindable]
public var iconeDev:Class;
 
[Embed(source="./assets/book.png")]
[Bindable]
public var iconeBook:Class;
 
[Embed(source="./assets/info.png")]
[Bindable]
public var iconeInfo:Class;

Depois que definir isso, só trato de verificar se o iconField, foi definido no MenuBar e também o atributo tem o nome específico setado pela variável criada no arquevo “includeIcones.as”.

Como fica o exemplo com ícones.

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		include "includeIcones.as";
 
 
	]]>
</mx>
<mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo" icon="iconeDev">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo" icon="iconeBook"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar" icon="iconeInfo">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar iconField="@icon" dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>

Como fazer para selecionar Itens do Menu e atribuir Eventos a cada item?

Atribuir ao MenuBar o evento de click e saber qual ícone foi selecionado, fica a cargo da propriedade itemClick do MenuBar,Menu.

Veja exemplo:

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
</mx><mx :Script>
	< ![CDATA[
		import mx.controls.Alert;
        import mx.events.MenuEvent;
 
		include "includeIcones.as";
 
            private function handleItemClick(event:MenuEvent):void {
 
                Alert.show('Menu escolhido foi: '+ event.item.@label);
            }
 
 
	]]>
</mx>
<mx :XML id="meumenu" xmlns="" format="e4x">
<root>
		<menuitem label="Arquevo" icon="iconeDev">
                <menuitem label="Novo Painel"/>
                </menuitem><menuitem label="Abrir">
                	<menuitem label="Ultimos..."/>
                </menuitem>
                <menuitem label="Fechar" enabled="false"/>
 
            <menuitem label="Editar">
            		<menuitem label="Titulo" icon="iconeBook"/>
            		<menuitem label="Tamanho"/>
            </menuitem>
            <menuitem label="Visualizar" icon="iconeInfo">
                <menuitem label="50%"
                    type="radio" groupName="grupo"/>
                <menuitem label="100%"
                    type="radio" groupName="grupo"
                    selected="true"/>
                <menuitem label="150%"
                    type="radio" groupName="grupo"/>
            </menuitem>
            </root>
</mx>
<mx :MenuBar itemClick="handleItemClick(event)" iconField="@icon" dataProvider="{meumenu.menuitem}" labelField="@label" width="100%"/>
Flex/ Flex 3 how to

#3 Flex How to : Como criar um player de Vídeo avançado

No SDK do Flex você não tem um player de vídeo avançado, você dispõe apenas de um VideoDisplay e o resto fica por conta de sua imaginação. O time do Flex SDK até pensou em incorporar um player de video já pronto, só arrastar e está pronto para uso. Porém não sei o que ocorreu que acabou que a idéia não foi para frente. Graças a comunidade Flexiana que está crescendo a cada dia que passa isso é possível ser feito sem ter que esperar pelo time do Flex SDK, você pode usar esse componente que tem todo o controle possível, play, pause, stop, controle de volume, barra progressiva, tudo que um bom e usual player de vídeo deva ter.

Passo-a-passo

Primeiro baixe aqui código fonte do VideoPlayer. Como ele não tem um arquevo binário para tal, basta copiar do arquevo zip que você baixou, o diretório ‘com’ para pasta src, que tem todas as classes necessárias para o player.

Feito isso, instancie-o assim:

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

	
		< ![CDATA[

			[Bindable]
			private var filme:String = "http://seufilme.com/arquevo.flv";

			]]>
	
	

Fácil não?!

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');
			}
		]]>
	
	
	
	
	
	
	


Flex/ Flex 3 how to

#1 Flex 3 How to : Implementar Singleton em Actionscript 3.0

Quem trabalha com C++, C# e Java, sentiu falta de alguns recursos que o Actionscript 3.0 falta. Dentre eles estão construtores (privados, protegidos), singletons, compositions entre outros recursos que existem nas linguagens mencionadas acima.
O fator que distingue essa falta de recursos é a limitação descrita em suas especificações que vem lá do Ecmascript-262 versão 3 do documento que declara os recursos existentes para linguagens scripts não só em AS3 mais também em Javascript,DMDScript, Javascript.Net, etc.
Porém nada está perdido, existem várias maneiras de enganar o compilador do Actionscript que vem junto ao Flex SDK para que isso ocorra, lembrando que fazendo isso você está apenas contornando o problema, sem muitas percas ou mal funcionabilidades.

Como criar Singleton em Actionscript 3.0?

Singleton é um modelo de design pattern que simplifica o acesso ao objeto com apenas uma instância ao modo geral da aplicação.
Em um modelo real, imagine ipoteticamente que um singleton é sua maneira única de agir, se comportar e falar, ninguém no mundo pode instânciar essa maneira que você tem de fazer as coisas, porém elas podem ser usadas por outras pessoas no mundo, um modelo a ser copiado porém sempre preservando de onde elas vieram.
É assim que singletons atuam, você precisa apenas instancia-los uma vez e ele faz o papel dele.
As classes que vem no Flex SDK não tem esse papel de singleton, alguns críticos acham que singleton é perca de tempo, optimização e recursos de um sistema não necessário à se ter.
Discordações a parte cada modelo de design pattern é aplicável em diferentes formas de elaborar um software, e tampouco pode ser ignorado as diferentes maneiras de serem aplicaveis, vai de cada recurso que elas necessitam.

Na própria página da Wikipedia existe um modelo de singleton em Actionscript 3.0 que podemos usar para esse exemplo.

Paso-a-passo:

1 – Crie um novo projeto Flex no seu Flex Builder
2 – Crie uma nova classe em Actionscript 3.0 e dê o nome “Singleton”.
3 – Adicione o seguinte código em sua classe.


package br.com.igorcosta.howto{
	public class Singleton {

		private static var instance:Singleton;

		public function Singleton(enforcer:SingletonEnforcer){
			if (enforcer == null)
				throw new Error("Só pode haver uma instância de Singleton");
		}

		public static function getInstance() : Singleton {
			if (instance == null)
				instance = new Singleton( new SingletonEnforcer );
			return instance;
		}
	}
}
//Para bloquear o acesso ao constructor.
class SingletonEnforcer {

}

Uma vez feito isso seu Singleton está pronto para ser usado, você pode usar essa mesma classe em outras classes para implementar o singleton nelas, um exemplo típico é os Models que trafegam entre o lado cliente e o servidor.

Como aplicar essa Classe Singleton em sua aplicação Flex?

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

	
		< ![CDATA[

			import br.com.igorcosta.howto.Singleton;

			public var instancia:Singleton = Singleton.getInstance();

			public function acessar():void{
					instancia.PropriedadesFuturas = // você pode definir propriedades
			}
		]]>
	


Ao invés de sempre usar public var obj:Object = new Object(); Você passa a usar a instância já pre-estabelecida para aquila classe em geral, por exemplo:

Criar um model que tenha algumas procidades e que essas possam ser acessadas por outras classes.

Classe Singleton: Modelo

package  br.com.igorcosta.howto.models{

	public class Modelo {



		// Propriedades publicas

		public var X:Number;
		public var Y:Number;
		public var Largura:Number;
		public var Altura:Number;

		private static var instance:Modelo;


		public function Modelo(enforcer:SingletonEnforcer){
			if (enforcer == null)
				throw new Error("Só pode haver uma instância de Singleton");
		}

		public static function getInstance() : Modelo {
			if (instance == null)
				instance = new Modelo( new SingletonEnforcer );
			return instance;
		}
	}
}
//Para bloquear o acesso ao constructor.
class SingletonEnforcer {

}

Cliente acessando pela instância e setando o valor de cada propriedade do Singleton Modelo:

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

	
		< ![CDATA[
			import mx.controls.Alert;
			import br.com.igorcosta.howto.models.Modelo;

				//instanciar o singleton Modelo

				public var instancia:Modelo = Modelo.getInstance();

				public function setarPropriedades():void {
					instancia.Altura = painel.height;
					instancia.Largura = painel.width;
					instancia.X = painel.x;
					instancia.Y = painel.y;
					Alert.show("Altura:"+instancia.Altura+ "n"+"Largura:"+instancia.Largura+
					"n"+"Posicao X:"+instancia.X+"n"+"Posicao Y:"+instancia.Y);


				}
		]]>
	
		
		

Veja aqui também outras maneiras de implementar Singletons em Actionscript 3.0.