Apache Flex/ Flex/ FlexJS

Apache Flex com saída para HTML5,Javascript e CSS. Trans-compilação para vários clientes

flexjs

Em Janeiro, teve muita gente que desacreditou e não depositou mais as fichinhas na solução Apache Flex, até eu tentei fazer isso. O fato é que é difícil você largar certos hábitos e se transformar em uma outra pessoa da noite para o dia, é um aprendizado longo e doloroso.
breakfast-anyone-l

Parte desse processo é justamente ficar de mãos atadas à Adobe que é controladora do Flash Player/AIR e consecutivamente depende de navegadores que esses tendem a não depender ou querer mais players instalados neles por padrão, resumindo. Tem muita caixinha de areia para trabalhar e isso impactou bastante na boa positividade do Flash Player, travamentos constantes e a falha de quebra de navegadores deixaram todos malucos, especialmente quem desenvolve para o Flash Player.

Antes de continuar com o post, eu gostaria de defini-lo como uma rendição, não aquela onde você se rende ao fracasso e ao descaso e tenta-se recompor com meios pejorativos ou com uma arrogância de quem não quer mais vencer e se dá por vencido. Essa é uma rendição de que o Apache Flex tem um futuro brilhante em 2014 e é sobre isso que eu quero escrever para você que está ai com um pouco de pensamento cético ou desacreditado que isso não possa mudar nem tão cedo.

Vamos por parte, eu sempre gosto de dividir posts longos em tópicos, assim fica muito mais fácil para mim conseguir entender minha linha cronológica do assunto. Eu começo pelo.

O lado bom de trabalhar em uma fundação

Superman-l
Sendo um único comitter Brasileiro do projeto, isso quer dizer que eu tenho grandes responsabilidades não só em ajudar a tecnologia, assim como trazer boas notícias para nós aqui no Brasil, ser comitter acima de tudo é divulgar, acreditar, evangelizar, convencer as pessoas que aquilo é bom. E na fundação Apache eu tomei isso como uma tarefa obrigatória e semanal. Em 2013 eu doei mais de 320 horas ao projeto. Criando coisas que possam servir não agora, mais em um futuro bem próximo e que isso torne nossas vidas mais fáceis e assim a internet consiga progredir a passos largos como tem feito avanços ao longo do tempo.

Tendo em vista que eu tenho um trabalho full-time, 320 horas é mais que suficiente para garantir que o projeto ande bem, já que a cada mês sempre temos novos membros na equipe que são escolhidos pela sua dedicação e tempo doado ao projeto e a fundação.

Doar seu tempo com uma tecnologia que o acompanha sempre para onde você for é gratificante, ainda hoje recebo mensalmente algumas dúzias de e-mails pedindo ajuda para solucionar problemas de desenvolvimento relacionados ao Flex, eu diminuir muito minha cota de resposta, fica difícil acompanhar e responder todos com tantas atribuições para serem feitas durante todo santo dia, de domingo a domingo. A resposta sempre vem, isso é garantido só que pode ser que o tempo não seja hábil. Então eu prefiro colocar em pausa e focar mais no tempo gasto para o Apache Flex, até mesmo blogar ficou em segundo plano, esse ano de 2013 foi basicamente meia dúzia de posts, metade só sobre EGO de palestrar, nada tão tesão que eu gostaria de mostrar.

E depois que eu adotei essa regrinha de doar 1 hora por dia ao projeto isso me fez refletir sobre os resultados dessa dedicação, não é nada fácil fazer algo voluntário e esperar bons resultados, eles sempre veem de forma à longo prazo. Só que ai entra na questão dos números.

O Apache Flex atualmente

Zebra-l

O SDK para melhor funcionar em sua máquina ele é distribuído através de uma instalador que de longe facilita e muito a configuração automática para sua máquina, assim você gasta tempo no que realmente importa.

Falando do Instalador, sua última versão 4.11 tem recebido um em média semanal mais de 15.000 mil instalações, isso quer dizer que muitas pessoas ainda desenvolvem no SDK.
A lista de discussão tem uma média mensal de 600 a 800 e-mails.

Já reparou na quantidade de commits que o projeto recebeu só em 2013? Uma média de 705 commits mensais e o resultado disso é mais de dúzias de centenas de bugs corrigidos e novas implementações para o FlexJS, falo disso daqui à pouco.

Fora que nosso site teve mais de 200.000 mil visitas únicas desde que começamos a monitorar em Janeiro deste ano.

Toda essa atividade prova que o projeto tomou um fôlego e mais desenvolvedores estão engajados ao projeto.

A mudança de jogo

asvsjs

Tudo começou por um e-mail, Janeiro quando um dos comitters o Eric, estava trabalhando em um SDK chamado Vanilla SDK, ajudou bastante nesse processo de migração.

Criar trans-compilação para vários clientes não é dificil, especialmente se tratando de javascript, várias linguagens de programação já fazem isso. Então se todas fazem por que é tão dificil para do Actionscript para o Javascript?

Actionscript para Javascript

Snow-fun-l

Embora ambas as linguagens sejam descendentes do ECMAScript, o Javascript ficou para trás em vários quesitos em relação ao Actionscript e algumas coisas que limitam o Actionscript, no Javascript ele dá de lavada. Dito isso, boa parte dessa diferença está na especificação 262, o Javascript adota a edição 5 e o Actionscript parou na edição 3. Essa diferença não é quase nítida e sim retrai a velha teoria que o Javascript não é só OOP simulado como era o Actionscript 1.0. Na verdade o Javascript ainda é imperativo e funcional. Boa parte disso você percebe quando tenta rodar um script de javascript e se houver erro acaba limitando o modelo de objeto a ser relacionado a função ou ao corpo que ele esteja sendo manipulado.

Se tratando de trans-compilação isso é uma faca de dois gumes, de um lado você tem diversas implementações que já foram resolvidas 5 anos atrás como é o caso do Actionscript 2.0 e de 8 anos atrás como é o caso do recém Actionscript 3.0.

E toda essa reviravolta é apenas por uma causa dessa carta , acho que sua frustração não era em si pela tecnologia, mais simples pela falta de controle do Flash Player que a Adobe queria continuar dominando o mundo com seu player. Resultado, deu no que deu. Muitos clientes alheios a essa limitação começou a bater o pé e não querer mais o SWF compilado em seus projetos, coisas e afins, não tenho dúvidas quanto a isso. A Web precisa ser justa e aberta, a NSA está ai para provar que estou certo, enfim, isso é papo para outro post.

Passados uns 15 meses e a Adobe sem solução alguma para passar uma borracha em soluções SWF e dar suporte ao então famigerado que rouba o crédito do Javascript o HTML5, surge o CREATEJS. Ele tem uma API muito similar ao Actionscript 3.0 e reduz e muito a curva de aprendizado quando você começa a programar nele, a diferença é que você vai escrever partes apenas em Javascript e não fará nada além disso. Embora eu tenha dito isso, acabei de receber um alerta aqui do Creative Cloud que o Flash CC dará suporte nativo ao CREATEJS com HTML5 Canvas, imagine você programar Javascript diretamente do Flash CC, acho que eles estão tentando se adaptar ao mercado.

Lembrando que o Canvas do HTML5 só é possível por que parte do engine compilador do Actionscript foi doado para fundação Mozilla e se espalhou pela Web. Acabou surgindo na especificações da W3C o Canvas.

Voltando ao assunto, existe outro framework que já faz essa trans-compilação de Actionscript para JavaScript? Não, existe uma outra linguagem de programação chamada Haxe junto a outro projeto chamado OpenFl que faz essa trans-compilação e cross-compilação estilo Apache Flex SDK, só que com menos da metade das funções fora da caixa pronta como o Apache Flex SDK possui.

O que torna atrativo a idéia de usar o Apache Flex como solução é justamente usar ou migrar Apps para fora da caixa do plugin e ir direto para outra caixa do navegador. Acho que esse pulo do gato o Nicolas Cannasse pensou bem antes, criar algo que fosse semelhante a API do Actionscript e exportasse para várias plataformas. Veja que a idéia do Nicolas se encaixa perfeito em nossa perspectiva de como será o Apache Flex daqui para frente.

haxe-diagrama

Só que é melhor usar soluções próprias e migrar o Falcon para fazer essa exportação de maneira mais rápida, foi ai que o Alex Harui outro comitter teve a idéia de usar a solução dessa trans-compilação usando o Google Closure para fazer essa tradução, afinal GWT usa isso do Java para o Javascript.

Existe outras tentativas para o uso da mesma API do Flash Player, inclusive o Stage3D que acaba acelerando o processo para o Dart. Além do Vanilla SDK ele foi inspirado na verdade com as tentativas do Jangaroo.

A mais avançada tentativa até hoje é o projeto Mozilla Shumway que é a tentativa de emular a máquina virtual do Actionscript diretamente no browser sem precisar usar o Flash Player, o projeto ainda está em fase alpha, mais já possui grande chance de funcionar, já vi até o Candy Crunch feito em Flash rodar liso nele. Para isso você precisa ter a ultima versão do Firefox.

Na prática como isso funciona, abaixo eu criei um diagrama de como será daqui para frente com o Apache Flex.

apache-flex-architecture-full

Você vai continuar programando em Actionscript e MXML (isso garante o investimento feito) para criar layouts e em contra-partida o FalconJX, em conjunto com o framework interno ainda em estado de POC (Prova de Conceito) FlexASJS está ainda nos primeiros passos, já temos meia dúzia de componentes visuais prontos para serem usados e compatíveis com os navegadores IE8+, Chrome19+, Firefox16+, Opera11+, Safari 7+. Nada de navegadores antigos, já de cara suportando o que há de mais avançado nesse quesito.

Design em mente

color-leave-l

Uma das grandes sacadas do Apache Flex é a questão dos Skins, uma mistura do clássico SVG com a sintaxe do MXML e saiu o FXG para criar interfaces com perfeição de pixels, sem distorção.

A galera dos padrões Web parece que percebeu isso e começou a adotar o SVG para esse propósito, até a Adobe está dando uma forcinha. E toda a parte de Skin dessa transição será feita em SVG, é o melhor formato e boa parte dos navegadores modernos já suportam SVG para isso.

Tem muita coisa a ser implementada, por exemplo criar Datagrid, Lists, Habilitar a criação de componentes personalizados, dar suporte a E4X já que no javascript isso não é possível.

Por exemplo, para configurar seu Flash Builder para suportar isso ainda é muito manual, o Om está fazendo um instalador à parte para ajudar nesse processo e deixar mais simples essa configuração do ambiente, também existe uma petição para que isso seja possível também no IntelliJ IDE “Ajude-nos, vote lá”.

Nos próximos 6 meses ele ficará um pouco mais maduro e terá mais componentes disponíveis para essa transição.

O que é possível hoje?

Para encurtar se você domina o inglês, siga esses passos. Caso contrário pode fazer o seguinte. É interessante também você ler como funciona aqui.

1 – Instale o Apache Flex SDK 4.10 ou maior.
2 – Feche o Flash Builder 4.7 se estiver aberto.
3 – Baixe a biblioteca do Google Closure. Extraia em um diretório de sua preferência, ex: c:\sdks\closure\
4 – Vale lembrar que você precisa ter o JDK na máquina.
5 – Configure a variável de ambiente GOOG_HOME e aponte para o diretório onde você extraiu o Google Closure.
6 – Baixe o ApacheFlexJS.zip
7 – Extraia ele em um diretório de sua preferência, eu geralmente coloco assim c:\sdks\flex\flexjs
8 – Depois que você extrair, vá até o diretório onde você extraiu o arquivo e execute o arquivo deploy.bat pela linha de comando do prompt do Windows e passe o comando deploy.bat Importe > Run/Debug > Launch Configurations
12 – Escolha a IDE Flash Builder da cópia modificada do FlexJS
13 – Se você fez tudo certo vai aparecer agora várias configurações extras sob a ferramenta ‘External Tools’.

flexjs

Existe outros exemplos dentro do FlexJS que você baixar do SDK, embora eles sejam um pouco mais complexos para quem quer adaptar a realidade, eu acabei criando um do zero e coloco aqui para vocês baixarem.

[button link=”https://www.dropbox.com/s/jnmih4vrz8ccbiv/FlexParaJavascript.zip” color=”#a39e9e” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]FlexParaJavascript.zip[/button] [note color=”#FFCC00″]Esse arquivo tem os binários compilados, rode em seu navegador e veja que funciona tanto no SWF quanto sem ele.[/note]

Onde e como posso acompanhar

A maneira mais fácil e ir ao site, flex.apache.org e começar a assinar a lista de discussão ou fazer um fork no projeto pelo Github, o projeto está espelhado por lá.

A medida que o projeto for evoluindo eu vou postando mais exemplos aqui, ainda há muita coisa a ser feita. Até o final de Dezembro teremos um SDK mais estável e um instalador para ele.

O clima é de festa e Queremos avisar ao Javascript que estamos chegando para ajudar e não competir.

Actionscript/ AS 3.0/ Dev. Software/ Flex 3/ Flex Componentes/ Google/ Labs/ Open-source

Criando um tradutor em Flex usando o Google

Essa também veio lá do meu blog em inglês. Como criar uma ferramenta de tradução em Flex usando os recursos on-line que o google tem?

Google está cada vez mais entrando na esfera do Flash player e outras plataformas deixando-as consumir seus serviços, prova disso foi os outros testes feitos anteriormente à isso.

Para usar o serviço de tradução do Google é bem simples, ele respondendo com formato de dados em JSON, REST, XML, TXT no Flex fica mais fácil.

Para encurtar muito nessa explicação aqui abaixo você tem o código fonte da aplicação. Lembrando que para executá-la. É necessário você baixar o código fonte dele, devido ter algumas dependências de classes.

Código fonte

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
< ?xml version="1.0" encoding="utf-8"?>
<mx :Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="626">
	</mx><mx :Script>
		< ![CDATA[
			import mx.collections.ArrayCollection;
			import mx.rpc.events.ResultEvent;
			import com.adobe.serialization.json.JSON;
			[Bindable]public var googleText:String = "http://ajax.googleapis.com/ajax/services/language/" ;
			[Bindable]public var tsrc:String ="translate?v=1.0&q=";
			[Bindable]public var lanpair:String = "&langpair=";
			[Bindable]public var pairCode:String = "%7C";
			private function onJSONLoad(event:ResultEvent):void
			{
				var rawData:String = String(event.result);
				if(JSON.decode(rawData).responseData.translatedText !=null){
				var decoded:String =JSON.decode(rawData).responseData.translatedText;
				}else {
					decoded = "None support";
				}
				txtdest.text = decoded;
			}
		]]>
	</mx>
	<mx :Array id="langFrom">
		<mx :Object  value="auto" label="Select Language"/>
		<mx :Object  value="ar" label="Arabic"/>
		<mx :Object  value="bg" label="Bulgarian"/>
		<mx :Object  value="zh-CN" label="Chinese"/>
		<mx :Object  value="hr" label="Croatian"/>
		<mx :Object  value="cs" label="Czech"/>
		<mx :Object  value="da" label="Danish"/>
		<mx :Object  value="nl" label="Dutch"/>
		<mx :Object  value="en" label="English"/>
		<mx :Object  value="fi" label="Finnish"/>
		<mx :Object  value="fr" label="French"/>
		<mx :Object  value="de" label="German"/>
		<mx :Object  value="el" label="Greek"/>
		<mx :Object  value="hi" label="Hindi"/>
		<mx :Object  value="it" label="Italian"/>
		<mx :Object  value="ja" label="Japanese"/>
		<mx :Object  value="ko" label="Korean"/>
		<mx :Object  value="no" label="Norwegian"/>
		<mx :Object  value="pl" label="Polish"/>
		<mx :Object  value="pt" label="Portuguese"/>
		<mx :Object  value="ru" label="Russian"/>
		<mx :Object  value="es" label="Spanish"/>
		<mx :Object  value="sv" label="Swedish"/>
	</mx>
	<mx :Array id="langTo">
		<mx :Object  value="ar" label="Arabic"/>
		<mx :Object  value="bg" label="Bulgarian"/>
		<mx :Object  value="zh-CN" label="Chinese (Simplified)"/>
		<mx :Object  value="zh-TW" label="Chinese (Traditional)"/>
		<mx :Object  value="hr" label="Croatian"/>
		<mx :Object  value="cs" label="Czech"/>
		<mx :Object  value="da" label="Danish"/>
		<mx :Object  value="nl" label="Dutch"/>
		<mx :Object  value="en" label="English"/>
		<mx :Object  value="fi" label="Finnish"/>
		<mx :Object  value="fr" label="French"/>
		<mx :Object  value="de" label="German"/>
		<mx :Object  value="el" label="Greek"/>
		<mx :Object  value="hi" label="Hindi"/>
		<mx :Object  value="it" label="Italian"/>
		<mx :Object  value="ja" label="Japanese"/>
		<mx :Object  value="ko" label="Korean"/>
		<mx :Object  value="no" label="Norwegian"/>
		<mx :Object  value="pl" label="Polish"/>
		<mx :Object  value="pt" label="Portuguese"/>
		<mx :Object  value="ru" label="Russian"/>
		<mx :Object  value="es" label="Spanish"/>
		<mx :Object  value="sv" label="Swedish"/>
	</mx>
	<mx :ComboBox id="langFromCbx" prompt="Select a language" x="28.5" y="64" dataProvider="{langFrom}"/>
	<mx :HTTPService id="googleTransService"
		 url="{googleText + tsrc+txtsource.text + lanpair + String(langFromCbx.selectedItem.value)+pairCode+String(langToCbx.selectedItem.value)}"
		 useProxy="false" showBusyCursor="true" result="onJSONLoad(event)"  resultFormat="text"/>
	<mx :TextArea id="txtsource" x="28.5" y="124" width="569" height="116"/>
	<mx :TextArea id="txtdest" x="28.5" y="274" width="569" height="248"/>
	<mx :Button x="473.5" y="61" label="Translate" click="googleTransService.send()" width="124" height="28"/>
	<mx :ComboBox id="langToCbx" x="222.5" y="64" prompt="Select a language" dataProvider="{langTo}"></mx>
	<mx :Label x="30.5" y="45" text="Translate from:"/>
	<mx :Label x="28.5" y="98" text="Text to Translate"/>
	<mx :Label x="28.5" y="248" text="Result Text translated"/>
	<mx :Label x="222.5" y="45" text="Translate To:"/>
[Update] Alguns códigos exibidos neste post podem não aparecer corretamente, devido a um problema antigo em um plug-in para exibir código fonte. Pedimos desculpas.

Actionscript Frameworks/ AS 3.0/ Flash/ Flash CS 3/ Flex/ Flex 3/ Flex 3 Open-Source/ Flex Componentes/ frameworks/ Labs

Componente Google Maps para Flex 3

Eu só tinha anunciado essa notícia no Blog em inglês. E cometi o erro de não publicar aqui também na versão Brasileira.

O Componente mapas do google para o Flex aka(GoogleFlexMaps). Eu até tinha publicado a tão recém e aguardada obra do Google para plataforma Flash Player, tornando assim usar seus serviços tão htmlzados.
Em fim, Vocês pode usar o componente que torna a sintaxe bem mais fácil, bem mais completa ao ponto de vista de desenvolvimento Flex.

1
2
3
4
5
6
7
8
< ?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="sua chave de desenvolvedor"
      width="100%" height="100%"/>
 
</mx>

E quanto aos desenvolvedores Flash? Eu também pensei neles e fiz uma alteração no componente .swc que pode aceitar dentro do Flash. Basta apenas usar uma instancia nova. Porém não garanto 100% perfeição em todos os recursos que o Google Maps funciona, para isso indico o SDK padrão do Flex.

Baixe aqui o .swc para seus projetos tanto em Flex quanto Flash.

Veja aqui a documentação do Componente* ( em ingles)

Caso você seja curioso ou quer o código fonte por simplesmente por gostar de fazer hacks,

Boa sorte em seus uso.

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.