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.

Quem compareceu ao último sextaflex não pode reclamar, foi excelente o evento e o Michel Vandaniker mandou ver no Axiis para todos os 18 participantes ao total presente no evento on-line.
Caso você por algum motivo que seja perdeu e quer acessar, você pode acessar o link da gavação abaixo.

http://experts.na3.acrobat.com/p38851909/

Obrigado a todos que compareceram.

Nesta semana dia 16/10 não haverá sextaflex por motivo de força maior. Não somos muito de reclamar das coisas, mais tem sido bem corrido, em resumo todo mundo decidiu usar Flex de uma única vez e nesse final de ano.

Na próxima semana já temos engatado mais 1 palestrante nacional e vai falar de seus cases e você vai conhecer novas empresas que produzem RIA com qualidade. Queremos mostrar e dar vitrine para todas as minúsculas até as golias das empresas Brasileiras o espaço para ir falando de suas dificuldades e sucessos com a escolha do Flex. Afinal Flex não é só flores.

Na próxima sexta-flex, no mesmo horário vamos ter um encontro com o Michael VanDaniker, ele é co-autor do framework open-source que mudou a maneira como dados são exibidos na plataforma Flex.

Se você fica babando por que vê os tão belos feitos do Flex Data Visualization, (charts). Então você precisa conhecer o Axiis.
Veja os detalhes da palestra e vê se não perde. Claro que agente entende se você não puder assistir ao vivo, depois ela será gravada.

Palestra On-line
Titulo : Advanced Data Visualization with Axiis
Palestrante: Michel VanDaniker
Horário: Sempre no mesmo horário: das 09:00 AM até as 10:00 horário de Brasília.
Endereço para acesso: http://experts.na3.acrobat.com/palestras/
Palestra em inglês.

Com as mesmas palavras recebidas no título do e-mail enviado pelo Carlos Brandão sobre suas dificuldades em posicionar o componente Alert, escrevemos o título deste post.
Sem dúvidas é um problema simples, antigo e de fácil resolução. Porém muitos desenvolvedores acabam no final achando mais cômodo colocar o Alert em sua posição original, no centro da tela.

Em via das dúvidas, o mais correto seria imitar o Delphi, C#, Swing. Em deixar o desenvolvedor alertar alguma mensagem na posição que ele queira; Já que nativamente se você colocar o parent ele posiciona no container desejado o alerta na posição central referente ao tamanho e posição daquele container. No ambito de melhor experiência é bem mais agradável mostrar a mensagem de alerta onde o usuário esta usando naquele momento.

O Alert é um componente baseado em Panel, uma vez que ele possui apenas 1 método estático chamado show, ele cria 1 popUp por vez usando o PopUpManager direto no global do Application , comportamento esse que é padrão. Se você já é um usuário avançado do Flex com toda certeza você já deve ter implementado isso, analisando o código fonte do SDK.
Como ele é baseado em um Panel e por sua vez é herdado do UIComponent, ele possui tamanho, posição, cor, propriedades do Panel como a propriedade status, em fim uma gama de novas propriedades que podem ser usadas.

Para ajudar o Carlos, segue uma classe simples que faz todo esse trabalho, é definida por uma propriedade booleanada chamada posicionar que por padrão é false para deixar o mesmo comportamento original do Alert, e caso ela venha a ser alterada para true e suas posições x e y forem alteradas, ela fará um novo posicionamento do Alert para o local que você precisa. Veja como isso pode ser feito.

Classe utilitária para criação do Alerta costumizado.

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

package org.igorcosta.alert
{
	import flash.display.Sprite;
 
	import mx.controls.Alert;
	import mx.managers.PopUpManager;
 
	public class Alerta
	{
		/**
		 * @Author www.igorcosta.org
		 * */
		public function Alerta()
		{
			super();
		}
		/**
		 * @public 
		 * 
		 * Método estático que cria um Alert na posição desejada pelo usuário.
		 * 
		 * Por padrão é desabilitado o posicionamento, caso você queira usar o posicionamento você
		 * deve passar o parametro posicionar como true e definir os pontos x e y para se Alert.
		 * vale resaltar que os valores para o posicionamento de x e y são por padrão iguais a 0.
		 * Caso você defina apenas os valores de x e y e deixar o valor original de posicionar como false
		 * não ocorrerá as mudanças.
		 * @return Alert
		 * */
		public static function show(mensagem:String,titulo:String,posicionar:Boolean=false,xPos:Number=0,yPos:Number=0,flags:uint=4,parent:Sprite=null,closehandler:Function =null,icon:Class = null,defaultbuttonFlag:uint =4):Alert{
			var alerta:Alert = Alert.show(mensagem,titulo,flags,parent,closehandler,icon,defaultbuttonFlag);
			Alert.yesLabel = 'Sim';
			Alert.noLabel = 'Não';
			Alert.cancelLabel = 'Cancelar';
			Alert.okLabel = 'OK';
			if(posicionar ==true){
			PopUpManager.centerPopUp (alerta);
			var internalX:Number = xPos;
			var internalY:Number = yPos;
			alerta.move(internalX,internalY);
			}else{
				PopUpManager.centerPopUp (alerta);
			}
 
		return alerta;
		}
	}
}

Aplicação da classe:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	</mx><mx :Script>
		< ![CDATA[
			import org.igorcosta.alert.Alerta;
 
			public function alertar(e:MouseEvent):void{
				Alerta.show('mensagem de boas vindas','teste',true,e.currentTarget.x,e.currentTarget.y);
			}
		]]>
	</mx>
	<mx :Button id="btn" click="alertar(event)" x="31" y="23" width="61" height="32" label="Click"/>
	<mx :Button id="btn0" click="alertar(event)" x="538" y="23" width="61" height="32" label="Click"/>
	<mx :Button id="btn1" click="alertar(event)" x="538" y="338" width="61" height="32" label="Click"/>
	<mx :Button id="btn2" click="alertar(event)" x="31" y="338" width="61" height="32" label="Click"/>

Tivemos uma surpresa hoje pela manhã, chegaram 8 e-mails perguntando a mesma coisa, como deixar a imagem mais suave quando o container ou moviclip que será despejada é menor.

O que acontece é que enquanto o Bitmap não estive preenchido ou melhor completo ao processo de carregar a imagem, o Bitmap em sí fica null, não é somente no Flex mais também no Flash.

Para solucionar o problema no Flash, aconselho ler isso aqui no blog do GSkinner(inglês).

Para o Flex, é fácil, adicione no evento complete=”" ao campo de Imagem.

Feito isso você pode aliviar os pixels mal posicionados na tela, Essa opção mudou muito no Flash Player 10, ficando bem melhor o resultado do que no Flash Player 9.

Existem outros links de referências que valem o click:
http://www.kevin-fitzpatrick.net/blog/?p=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”.

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 Files\Adobe\Flex Builder 3 Plug-in\sdks\3.2.0\frameworks\libs\player\10\playerglobal.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:

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>

O exemplo abaixo, mostra como criar um player de música em actionscript 3.0 feito com alguns componentes básicos do Flash CS4, aquiles que vem por padrão no Flash CS3 e Flash CS4.
O projeto foi feito usando o Flex Builder, então procure nos arquevos do site como usar os componentes do Flash no Flex Builder.

Na atual versão do actionscript 3.0 é bem complicado usar a classe de som, para se ter uma idéia, foi necessário usar as classes Sound, SoundChannel,SoundTransform, só para dar o play e controlar o volume.
Em fim, segue abaixo o exemplo:

Código:

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

package {
	import fl.controls.Button;
	import fl.controls.Slider;
 
	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.net.URLRequest;
	import flash.media.Sound;
	import flash.media.SoundTransform;
	import flash.media.SoundChannel;
	import flash.events.MouseEvent;
	import flash.events.Event;
	import fl.events.SliderEvent;
	import fl.controls.Label;
 
	[SWF(width="400",height="150",backgroundColor="0xF2F2F2",frameRate="25")]
	public class AS3Player extends Sprite
	{
		public var playButton:Button;
		public var stopButton:Button;
		public var volumeControl:Slider;
		public var urlSom:String = "mp3/seusom.mp3";
		public var MP3Request:URLRequest;
		private var musicaTransform:SoundTransform;
		private var musicaCanal:SoundChannel;
		private var musica:Sound;
		private var volLabel:Label;
 
 
		public function AS3Player()
		{
			super();
 
			MP3Request = new URLRequest(urlSom);
 
			musica = new Sound();
			musica.load(MP3Request);
			musicaCanal = new SoundChannel();
			musicaTransform = new SoundTransform(0.5,0);
 
 
 
			/**
			 * Montar os botões e Slider para controlar o som
			 * 
			 * playButton - Toca o som;
			 * stopButton - Para o som;
			 * volumeControl - Aumenta e diminue o som;
			 * */
 
			playButton = new Button();
			playButton.label = "Tocar";
			playButton.x = 10;
			playButton.y = 20;
			addChild(playButton);
			playButton.addEventListener(MouseEvent.CLICK,SomAction);
 
			stopButton = new Button();
			stopButton.label = "Parar";
			stopButton.x = playButton.width + 20;
			stopButton.y = 20;
			addChild(stopButton);
			stopButton.addEventListener(MouseEvent.CLICK,SomAction);
 
			volumeControl = new Slider();
			volumeControl.direction = "horizontal"// ou vertical;
			volumeControl.minimum =0;
			volumeControl.maximum =1;
			volumeControl.doubleClickEnabled = true;
			volumeControl.tickInterval = .1;
			volumeControl.snapInterval = .1;
			volumeControl.value = musicaTransform.volume;
			volumeControl.liveDragging = true;
			volumeControl.x = 230;
			volumeControl.y = 20;
			addChild(volumeControl);	
			volumeControl.addEventListener(SliderEvent.CHANGE,VolumeAction);	
 
			volLabel = new Label();
			volLabel.text = "Volume";
			addChild(volLabel);
			volLabel.x = 250;
			volLabel.y = 40;
		}
 
		/**
		 * @public
		 * Controla o volume da música carregada;
		 * */
		public function VolumeAction(e:SliderEvent):void{
				musicaTransform.volume = volumeControl.value;
				musicaCanal.soundTransform = musicaTransform;
		}
 
		/**
		 * @public
		 * controla o som, play e stop;
		 * */
		public function SomAction(e:MouseEvent):void{
 
				var posicao:int = musicaCanal.position;
				if(playButton.label == "Tocar"){
					playButton.label = "Pausa";
					musicaCanal = musica.play(posicao);
				}else{
					musicaCanal.stop();
					playButton.label = "Tocar";
					musicaCanal.stop();
				}
		}
	}
}

A sintaxe de programação para se trabalhar com DataProvider no Flash CS3 ou CS4 é um pouco diferente da que estamos acostumados no Flex. Entretanto o funcionamento é o mesmo.

O exemplo abaixo, popula um controle de ComboBox, e foi feito com Document Class, caso você queria setar um para rodar em sua máquena.

A primeira coisa que você faz para adicionar dados ao seu controle é justamente criar um objeto DataProvider e setar o source dele para o Array, XML ou coleção de objetos que você tenha. Ele parece muito com o comportamento do ICollectionView do Flex.

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

package{
		import fl.controls.ComboBox;
		import fl.data.DataProvider;
		import flash.events.Event;
 
		import flash.display.MovieClip;
		[SWF(width="800",height="600", backgroundColor="0xcccccc", frameRate='40')]
		public class Main extends MovieClip {
 
			public var cbx:ComboBox;
			public var arr:Array = ['Sao Paulo','Recife','Rio de Janeiro','Brasilia'];
			public function Main() {
				var d:DataProvider = new DataProvider(arr);
					cbx = new ComboBox();
					cbx.dataProvider = d;
					addChild(cbx);
					cbx.x = 100;
					cbx.y = 100;
					cbx.addEventListener(Event.CHANGE,selecionado);
			}
			private function selecionado(e:Event):void{
				trace(e.target.selectedItem.data.toString());
			}
		}
}