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.