Actionscript/ Dicas/ Flash Player/ Flex

Dica: Exibindo o consumo de memória do Flash Player em sua aplicação Flex

Duvida vinda por e-mail, bastante desaconselhado já que demoramos muito para responder os e-mails. Como essa dúvida era legal e única, eis aqui uma solução.

Quero exibir a quantidade de memória que minha aplicação Flex está consumindo no momento da execução. Bom dificilmente você vai saber quanto ela está consumindo se você estiver com algum site aberto ou até mesmo MSN Live que use o Flash Player. Já que para ler o consumo de memória mesmo é necessário estar apenas a aplicação rodando. Uma vez que a quantidade de memória acumulativa sendo consumida é medida pelo Flash player em geral e não apenas da aplicação. Se for nessas circunstâncias você pode exibir o consumo de memória para o usuário final. Caso contrário aconselho usar os recursos do Flex Builder como Profiler para tal.

Então como exibir?

Para facilitar eu criei uma classe utilitária chamada MemoriaUtil.as

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
package
{
	import flash.system.System;
 
	public class MemoriaUtil
	{
		public function MemoriaUtil()
		{
		}
		public static function uso():String{
 
			 var memoria:String = Number(System.totalMemory/1024/1024).toFixed(2)+'MB';
 
			 return memoria;
		}
	}
}

E uso no Flex assim.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
< ?xml version="1.0" encoding="utf-8"?>
<application xmlns:"http://www.adobe.com/2006/mxml" layout="absolute">
 
	<script>
		< ![CDATA[
 
 
				public function testarMemoria():void{
 
						memoriatxt.text = 'Uso atual do seu Flash Player é de: '+MemoriaUtil.uso();
				}
		]]>
	</script>
		<label enterFrame="testarMemoria()" fontSize="20" x="100" y="100" id="memoriatxt"/>
</application>
Actionscript/ AS 3.0/ Flex Componentes/ Google

Criando sua primeira aplicação com o Google Maps AS3.0 API

Continuando depois do último post feito sobre esse estupendo, helvis,…, igual ao rapaz de Quixeramobim, Ceará. Vamos aos passos.

Antes de começar a ler o resto do post e bateu a preguiça de ler? Bom, eu pensei nisso também, então tá aqui a solução pronta.

Primeiro passo

Gere uma Google Map API Key para ter acesso externo aos mapas do google. Como? Clique aqui.

O que é esse Google Map API Key?
É um controle que o google faz para saber quantas aplicações ou acessos estão sendo feito em suas aplicações para servir como referência de suas pesquesas.
O Principal objetivo do GMA Key é justamente deixar você usar o serviço sem precisar autenticá-lo toda vez que for usar.
Não existe limitação de uso ou qualquer outra forma de bloqueio, porém o google pede que se o seu aplicativo tiver mais que 500mil pageview que entre em contato com eles para eles poderem te ajudar melhor nisso aumentando sua capacidade para que seu serviço não sofra com isso.

Aceite os termos do contrato, após isso submeta uma URL para que o google saiba onde será localizado o aplicativo, por exemplo você pode colocar apenas o site da sua empresa ou seu sem precisar especificar ao certo qual path(diretório) será guardado o aplicativo.

Copie o código que o Google vai lhe dar, geralmente é um conjunto imenso de caracteres, procure guardar em um bloco de notas da vida.

Minha chave de código é essa:

1
ABQIAAAAfRPIvINtjZu3PtRGVoq7mBQogceLfcZe7FekjL-2SpDGGlJNIRRAbExTAlOd6Y5xk8V9kGtfjzffFw

Mesmo eu colocando aqui publicamente a chave ela só funcionará no meu domínio, uma forma de proteger o serviço para cada domínio.

Lembre-se que não é necessário ter uma conta do Google para fazer isso, o que é mais legal ainda.

Segundo passo

Baixe o SDK do Google

O SDK do Google Maps As3.0 API, contém documentação de todas suas classes e um .swc que tanto pode ser usado no Flash quanto no Flex, por ambos os produtos suportarem a linguagem Actionscript 3.0.
Caso você esteja lendo esse post e usa Flash, espere por outro tutorial voltado para Flash, já que esse aqui será voltado apenas para desenvolvedores Flex.

Feito o Download do pacote que é um arquevo *.zip, por favor descompacte usando algum software .zip, supondo eu que aqui só tenha desenvolvedores ou aspirantes de desenvolvedores, obviamente maior parte aqui sabe usar um descompactador.

Hora de ir para o Flex Builder.

1. Crie um projeto Novo no Flex Builder
2. Nomeie o projeto como GoogleFlexMap
3. Clique em Finish

Na estrutura de diretório do projeto criado existe uma pasta chamada Libs, dentro dessa pasta você vai jogar o arquevo map_flex_1_1.swc que você estraiu do arquevo SDK zipado.
Não precisa de tanto detalhe basta copiar o arquevo, selecionar a pasta e dá um simples CTRL+V.

Feito isso, seu projeto vai suportar a API do Google Maps. Hora de começar a Programar.

Crie uma nova classe em AS3.0 no Flex. Para criar siga os passos:
1. File > New > Actionscript Class
2. Use o Package para a classe de seu gosto, eu usei o com.igorcosta
3. Por regra de convenção Classes em Actionscript é mais aceitas a primeira letra ser Maiúscula
4. Nomeie para GoogleFlexMap
5. Estenda o GoogleFlexMap usando o SuperClass, clique em Browser e escolha UIComponent para ser estendida.
6. Clique em OK

Se você seguiu tudo certo, você terá um novo arquevo gerado com a seguinte sintaxe.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
package com.igorcosta
{
	import mx.core.UIComponent;
 
	public class GoogleFlexMap extends UIComponent
	{
		public function GoogleFlexMap()
		{
			super();
		}
 
	}
}

Nota: Como o google criou uma API genérica para Flash/Flex você vai precisar usar esse tipo de artifício para garantir que ele será adicionado a classe UIComponent que faz uso de criar controles da tela.

Então para encurtar mais eu fiz uma classe simples que vai definir um novo Componente no qual terá o nome definido de GoogleFlexMap igual a classe criada.

Segue a classe completa

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
 
package com.igorcosta
{
	import com.google.maps.LatLng;
	import com.google.maps.Map;
	import com.google.maps.MapEvent;
	import com.google.maps.MapType;
	import com.google.maps.controls.MapTypeControl;
	import com.google.maps.controls.PositionControl;
	import com.google.maps.controls.ZoomControl;
 
	import flash.events.Event;
	import flash.geom.Point;
 
	import mx.core.UIComponent;
	import mx.events.FlexEvent;
 
	public class GoogleFlexMap extends UIComponent
	{
 
		private var _largura:Number = 650;
		private var _altura:Number = 500;
		private var _mapa:Map;
		private var _tipomapa:Array = ["hibrido","normal","fisico","satelite"];
		private var _key:String;
		private var _controleZoom:Boolean = false;
		private var _controlePosicao:Boolean = false;
		private var _controleTipo:Boolean = false;
 
		public function GoogleFlexMap()
		{
			super();
			super.addEventListener(FlexEvent.INITIALIZE,init);
 
		}
		private function init(event:Event):void {
			 this.width = _largura;
			this.height = _altura;
			// Iniciando o Objeto Map
			_mapa = new Map();
			_mapa.key =_key;
			_mapa.addEventListener(MapEvent.MAP_READY,criarUIMapa);
			_mapa.setSize( new Point (this.width, this.height));
				if(_controleZoom){
				_mapa.addControl( new ZoomControl());
				}
				if(_controleTipo){
					_mapa.addControl(new PositionControl());
				}
				if(_controleTipo){
					_mapa.addControl(new MapTypeControl());
				}
			// adiciona o _mapa ao UIComponent;
			this.addChild(_mapa);
		}
		public function get ControleZoom():Boolean{
			return _controleZoom;
		}
		public function set ControleZoom(value:Boolean):void {
			_controleZoom = value;
		}
		public function get ControlePosicao():Boolean{
			return _controlePosicao;
		}
		public function set ControlePosicao(value:Boolean):void {
			_controlePosicao = value;
		}
		public function get ControleTipo():Boolean {
			return _controleTipo;
		}
		public function set ControleTipo(value:Boolean):void {
			_controleTipo = value;
 
		}
		public function get key():String{
				return _key;
		}
		public function set key(value:String):void {
			_key = value;
		}
		private function criarUIMapa(event:Event):void {
			_mapa.setCenter( new LatLng(40.736072,-73.992062),14,MapType.HYBRID_MAP_TYPE);
		}
	}
}

A classe facilita muito o uso. Então ela tem propriedades específicas que faz fácil o uso.

Terceiro Passo

Usando o Componente criado

Simplesmente você fará assim

1
2
3
4
5
6
7
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:google="com.igorcosta.*"  xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
  	<google :GoogleFlexMap
  		key="ABQIAAAAfRPIvINtjZu3PtRGVoq7mBQogceLfcZe7FekjL-2SpDGGlJNIRRAbExTAlOd6Y5xk8V9kGtfjzffFw"
  		width="100%" height="100%"/>
</mx>

Feito, você verá um resultado bem mais simples. Fácil não é?

[ATUALIZADO]

Como sempre a pressa é inimiga da perfeição, Fiz algumas alterações na classe e coloquei agora mais controles de forma mais fácil.

Tá com preguiça de fazer tudo isso? Baixe aqui o projeto completo feito.

Actionscript Frameworks/ AS 3.0/ Flex/ frameworks/ Google/ Open-source/ Web 2.0

Google Maps Actionscript 3.0 API Finalmente

Finalmente o tão aguardado, flamigerado e esperado por todos que trabalham com a plataforma Flash Player ( Flex/Flash/AIR), esperaram por essa grande notícia no última conferência Where 2.0 em San Francisco,US.

Google finalmente ajudou e muito a comunidade deixando de lado um pouco o aspecto de criar apenas para AJAX ou HTML.

Anterior à isso só existiam 2 produtos o UMap que usa o OpenMaps e Microsoft Map e o do Yahoo!.

O grande problema desses mapas é que para o Brasil fica muito restrito o acesso e não tem tanta riqueza de detalhes como o Google possui.

No próximo post, vocês vão ver como montar o ambiente, ou melhor projeto para começar a criar.

AS 3.0/ Dicas

#1 Performance em AS3.0 [Loops]

Um dos atributos que faz aumentar o rendimento da aplicação é sem dúvidas, loops, criação de instâncias.

Array Loops

1
2
3
4
5
6
7
8
9
10
11
 
// forma lenta de se fazer
 
 for (var i:Number=0; i< N; i++) {
  void;
 }
 
// forma rápida se fazer
 
var i:int;
for (;i<n; i++) { void}

Embora tenha o famoso for each, o loop com for e usando i como int, você ganha ai cerca de 100ms de ganho de performance em loops, o que pode ser facilmente bem vindo na hora de redenização de itens em um array para o ComoboBox.

Flex 3/ Flex 3 SDK

Mudou o quê do Flex 2.0.1 SDK para o Flex 3.0 SDK?

É, mudou muita coisa, será que foi só no número? Tem gente que acha que foi só isso.
Eu não quero entrar em detalhes do produto em sí, que envolve N tecnologias e partes. Foque no SDK.

Então essas mudanças comentadas aqui é um pouco diferente do que eu já fiz algum tempo atrás do Flex 2.0 para o Flex 2.0.1 que envolvia muito mais o produto como um todo.

O que mudou aos olhos da Adobe?

Você vai achar essa Lista completa aqui.

Porém aos olhos de um desenvolvedor, vi as seguintes mudanças de verdade, baseadas nelas no que foi planejado e no que foi executado.

A tal lista de deprecated, significa dizer “Vai de reto satanás”, no bom e velho popular.

-Baseline Alignment
-Charting Enhancements
-Compiler Performance
-Enhanced Constraints
-List and Data Effects
-OpenType Font Embedding
-MXMLC/COMPC Faster compilation
-MXMLC/COMPC Class caching at compilation
-MXMLC Framework Caching
-MXMLC Cross-Domain Caching
-MXMLC Runtime Localization
-MXMLC Resource Bundles
-MXMLC/COMPC Class Exclusion
-MXMLC/COMPC Flash-Type support
-Added CSS properties for advanced skinning via SWF/PNG
-List Effect classes
-AIR Flex SDK Application Window
-AIR Flex Database Support Classes
-AIR FileSystemComboBox
-AIR FileSystemDataGrid
-AIR FileSystemHistoryButton
-AIR FileSystemList
-AIR FileSystemTree
-AIR HTML
-AIR MenuItems
-AIR ApplicationWindow
-AIR Cross Scripting support
-AIR Application packaging and signing
-Deep Linking
-AJAX Support
-Flex 3 Open Bugbase
-Flex 3 Nightly Builds and Milestone Builds
-Mais alguns 200+ bugs consertados desde a versão 2.0.1

E a tal copatibilidade?

Bom, como ja é sabido o Flex veio sendo bastante usado na versão 2.0 e 2.0.1 aqui no Brasil por vários projetos que tive a chance de ver de perto ou feito. E para ser compatível e migrar para suportar o que há de melhor no Flex 3.0 nada mais lógico do que seguir essa linha tênue que Adobe preparou para isso. Sem ela você esta atirando no escuro.

Tamanho

Um dos problemas que se encaram desde o Flex 2.0 é o tal do tamanho final do SWF feito. No Flex 3 a coisa mudou, você pode ter detalhes aqui.

Alguma dica à mais para a lista?