Cursos/ Design Patterns/ Dev. Software/ Flex/ Flex 4/ Flex Componentes/ Notícias

Novos cursos avançados para Flex 4 pela RIACycle

Uau, faz 5 meses desde que começamos a treinar o pessoal pela internet e de lá para cá já foram 712 alunos ao total. Obrigado a todos pelo apoio para com a RIACycle e os cursos com nossos instrutores, tem sido um verdadeiro desafio e uma tremenda animação nesse período.

De lá para cá nossos ex-alunos sempre pediam tópicos avançados, então ontem e hoje lançamos 2 novos cursos avançados pela RIACycle, que são:

Design Patterns para projetos Flex 4
banner_design_patterns

Esse curso é para quem gosta de se organizar, deixar tudo nos devidos lugares, deixar seu projeto digno de ser bem interpretado pelo flash player e assim ter uma maior fluidez entre telas, comunicação com serviços remotos e deixar sua aplicação leve e robusta, de fácil manutenção.

Flex 4 Profissional
banner_flex4_pro

Esse curso é voltado para quem já conhece Flex e quer aprofundar no Flex 4 com novo ciclo de componentes, técnicas avançadas de integração contínua, gerar swfs através de ANT Build, e fazer testes unitários, digamos que seja um nível avançado do que você já conhece de Flex e quer ficar mais expert no assunto.

Ambos os cursos tem o objetivo de treinar você a acompanhar o ritmo de projetos de médio e grande porte da solução Flex para o mercado de Rich Internet Applications.

E uma das novidades desses dois cursos é que agora em sua empresa você pode matricular 1 vez até 3 funcionários e pagando menos.

Obrigado a todos pela confiança depositada e iremos retribuir nos cursos, com conteúdo de primeira e exemplos reais.

Como é festa de lançamento estamos sorteando pelo twitter 2 vagas para cada curso, você tem sorte? Então Tweet usando os hashtags #flex4pro e #flexdp.

Flex/ Flex 3 Charts/ Flex 3 Open-Source/ Flex 3 SDK/ Flex Componentes/ frameworks/ Open-source

DVM ou Pacote de gráficos agora é open-source

Parte da estratégia da Adobe em colocar o DVM em categoria open-source é justamente tentar envolver mais ainda a comunidade em ajuda-la a corrigir bugs e manter o SDK ativo para a próxima geração de aplicativos desenvolvidos com o SDK do Flex.

A parte boa dessa história é que antes você teria que desembolsar cerca de $249 para ter acesso ao código fonte do mesmo.

Ano passado ela já havia liberado o acesso ao código fonte do produto, porém não permitia o uso comercial do mesmo, já que você não tinha a licença. Essa sem dúvida em minha opinião foi o melhor movimento do tão requisitado e usado framework de gráficos da plataforma Flex.

Você pode baixar o SDK de gráficos + Olap Datagrid + Advanced Datagrid diretamente do site Open-source da Adobe. Visite

Comunidade/ Dicas/ Flex/ Flex 3/ Flex 4/ Flex Componentes/ Notícias

Tour de Flex aprenda por diversos exemplos

Particularmente nós acreditamos que o caminho mais curto de se aprender um conceito é vendo por exemplos.
E quando você se depara com uma documentação completamente técnica e nenhum exemplo vivo disso, chega a dar preguiça e acaba nem se quer terminando de ler o que havia começado.
Isso tem acontecido muito até a versão 3.0 do SDK do Flex, porém notamos uma ligeira mudança na maneira da equipe responsável pela documentação ver isso com outros olhos. Quem já anda lendo como nós a documentação do Flex 4, percebe que o conteúdo da linguagem de referência do Flex 4 possui uma quantidade extra de exemplos o que torna o aprendizado mais fácil.
Tornando o aprendizado mais fácil por meio de exemplos é o que o Tour de Flex promete, ele ajuda você a encurtar seu caminho no aprendizado e adotar mais rápido alguns exemplos e técnicas não apenas com o SDK do Flex, mas inclui exemplos de outros projetos open-sources e integração com terceiros.

Atualmente o Tour de Flex possui mais de 200 exemplos, os quais fica fácil aprender. Quem não lembra quando lançamos em 2006 os “40 projetos open-source”, explorando os recursos do SDK do Flex 2? Só no link direto foram mais de 2.400 downloads, o que nos faz pensar que realmente por exemplo o conceito aprende-se muito mais rápido.

É por isso que a partir de hoje, vamos colocar o badge para quem estiver visitando o blog, conhecer o projeto Tour de Flex e ir explorando os recursos do Flex 3.0 e já com alguns exemplos do Flex 4.0.

Actionscript Frameworks/ AS 3.0/ Flex/ Flex 3 Charts/ Flex Componentes/ frameworks/ Sexta-Flex Talkshow

Sexta-Flex – Criando visualizações de dados avançados com Axiis

axiis

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.

AS 3.0/ Flex/ Flex 3/ Flex 3 Open-Source/ Flex 3 SDK/ Flex Componentes/ Flex Hacks

Como posicionar o Alert nos valores x e y que eu queira?

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"/>
AbsolutoBrasil/ Actionscript Frameworks/ AS 3.0/ Flex/ Flex 3/ Flex 3 Documentação/ Flex 3 Open-Source/ Flex Componentes/ frameworks/ Labs/ Open-source

Adicionando um TabManager ao TabNavigator de seu projeto

Em um dos projetos que estamos desenvolvendo chegadou-se a uma certa necessidade de usar um manager para algumas views. Controlar isso via interface é horrível, quanto maior genérico fique sua view melhor.
Gostaria de compartilhar com vocês esta classe que faz justamente isso, organizar e administrar melhor as abas do TabNavigator. Que inclusive estará fazendo parte dos managers do novo AbsolutoBrasil 1.5 que está vindo por ai. Porém como vai demorar um pouquenho para sair segue a classe bem documentada.

Caso de uso:

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
< ?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 mx.containers.Canvas;
			import mx.events.ItemClickEvent;
 
			import br.absolutobrasil.managers.TabManager;
 
			private function init():void {
					TabManager.tabNavigator = minhaTabNav;
			}
			public function switchBotoes(event:ItemClickEvent):void {
					switch(btns.selectedIndex) {
						case 0:
								TabManager.createNewTab(Canvas,"Nova Aba","001");
								break;
						case 1:
								TabManager.removeSelectedTabByIndex(minhaTabNav.selectedIndex);
								break;
						case 2:
								Alert.show(TabManager.getUniqueTab("001").toString());
								break;
					}
			}
		]]>
	</mx>
	<mx :Array id="arr">
			<mx :Object label="Criar Aba"/>
			<mx :Object label="Deletar Aba" />
			<mx :Object label="Pegar Id da Aba"/>
	</mx>
	<mx :TabNavigator id="minhaTabNav" width="695" height="375" x="213" y="67">
		</mx><mx :Canvas label="" width="100%" height="100%">
		</mx>
 
 
	<mx :ButtonBar itemClick="switchBotoes(event)" id="btns" dataProvider="{arr}" x="213" y="20">
	</mx>

Classe para adicionar à sua biblioteca

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
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
package br.absolutobrasil.managers
{
    /**
    * 	http://www.mozilla.org/MPL/
        THIS SOURCE CODE IS PROVIDED "AS IS" AND "WITH ALL FAULTS", WITHOUT
        ANY TECHNICAL SUPPORT OR ANY EXPRESSED OR IMPLIED WARRANTIES, INCLUDING,
        BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS
        FOR A PARTICULAR PURPOSE ARE DISCLAIMED.  ALSO, THERE IS NO WARRANTY OF
        NON-INFRINGEMENT, TITLE OR QUIET ENJOYMENT.  IN NO EVENT SHALL MACROMEDIA
        OR ITS SUPPLIERS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
        EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
        PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS;
        OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY,
        WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR
        OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOURCE CODE, EVEN IF
        ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
        *
        * Parte original http://coenraets.org/blog/
        * Modificações - http://www.igorcosta.com
 
	*/
	import mx.containers.TabNavigator;
	import mx.core.Container;
	import mx.events.ChildExistenceChangedEvent;
 
	public class TabManager
	{
		/**
		 * @Constructor
		 *
		 */
		public function TabManager()
		{
		}
 
		private static var _tab:TabNavigator;
 
		private static var uniqueTabs:Object = new Object();
 
		/**
		 * Seta o manager ao valor de um TabNavigator existente na aplicacao para iniciar as operacoes
		 * @param tabNavigator
		 *
		 * @example of uses:
		 * <listing version="3.0">
		 *              import br.absolutobrasil.managers.*;
		 * 				var minhaAba:TabNavigator = new TabNavigator();
		 *              private function init():void {
		 *                  TabManager.tabNavigator = minhaAba;
		 *              }
		 * </listing>
		 *
		 */
		public static function set tabNavigator(tabNavigator:TabNavigator):void
		{
			_tab = tabNavigator;
			_tab.addEventListener(ChildExistenceChangedEvent.CHILD_REMOVE,
				function (event:ChildExistenceChangedEvent):void
				{
					for (var uniqueId:String in uniqueTabs)
					{
						if (uniqueTabs[uniqueId] == event.relatedObject)
						{
							uniqueTabs[uniqueId] = null;
							return;
						}
					}
				});
		}
		/**
		 *  Cria uma nova Aba
		 *
		 * @param tabClass - o alvo ou componente que será criado
		 * @param label - Label que aparecerá na aba;
		 * @param uniqueId - Caso você queira definir um id único para a aba
		 * @return uma nova aba criada ao container posicionado como target
		 *
		 */
		public static function createNewTab(tabClass:Class,label:String='', uniqueId:String=null):Container
		{
			if (uniqueId && uniqueTabs[uniqueId])
			{
				_tab.selectedChild = uniqueTabs[uniqueId];
				return uniqueTabs[uniqueId];
			}
 
			var tab:Container = new tabClass();
 
			if (uniqueId)
			{
				uniqueTabs[uniqueId] = tab;
			}
 
			_tab.addChild(tab);
			_tab.label = label;
			_tab.selectedChild = tab;
			return tab;
		}
		/**
		 *Seta um id Unico para a aba desejada, passando obrigatoriamente o id que você deseja setar e o alvo que receberá.
		 * @param uniqueId
		 * @param tab
		 *
		 */
		public static function setUniqueTab(uniqueId:String, tab:Container):void
		{
			uniqueTabs[uniqueId] = tab;
		}
		/**
		 * Remove a aba desejada.
		 * @param tab
		 *
		 */
		public static function removeTab(tab:Container):void
		{
			_tab.removeChild(tab);
		}
		/**
		 *Remove a aba passando a posicao dela necessária, caso não queria controlar isso por id.
		 * @param index
		 *
		 */
		public static function removeSelectedTabByIndex(index:int):void {
			_tab.removeChildAt(index);
		}
		/**
		 * Remove todas as abas existentes no TabNavigator
		 * @param tabNavigatorTarget
		 *
		 */
		public static function removeAllTabs(tabNavigatorTarget:TabNavigator):void {
				_tab = tabNavigatorTarget;
				_tab.removeAllChildren();
		}
		/**
		 *Pega o Id único da aba desejada, não precisa selecionar.
		 * @param uniqueId
		 * @return
		 *
		 */
		public static function getUniqueTab(uniqueId:String):Container
		{
			return uniqueTabs[uniqueId];
		}
	}
}
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.