AIR 2.7/ AIR Mobile/ Android/ Flex/ Flex 4.5/ Flex Mobile Framework

Criando seu primeiro aplicativo Flex 4.5 Mobile para smartphones Android parte (1 de 3)

Depois de muito tempo sem tempo, olha que controvérsia, acabei com algumas horas livres essa tarde e aproveito para escrever esse post.
Quer criar Apps para Android com o Adobe AIR e Flex? Siga a receita abaixo para isso.

Ja é sabido de sua parte que o Flex cria apps nativas para Android de forma hiper simples. Se você é acostumado ao seu workflow de componentes, ciclos de vidas, você irá facilmente criar Apps elegantes, rápidas e intuitivas para dispositivos móveis.

O Framework do Flex, que usaremos é o Flex 4.5 com overlay do Adobe AIR 2.7, que conta com 4x mais performance do que o AIR 2.6. Em suma, o Flex roda em dispositivos móveis por que o AIR Run-time roda no Android.

Só que antes de você sair comprando ai seus dispositivos xing-lings ou baratinhos com o Android para testar suas criações artisticas, aconselho ler esse POST.

Para começar a brincadeira, você vai precisar de alguns ingredientes, vamos aos itens:

Antes de configurar alguma coisa, é super importante que você tenha em mente a seguinte afirmação. Eu entendo os riscos e serei um bom garoto(a), e nunca irei portar nenhum App meu com Datagrid de 100 registros dentro de uma App móvel, não farei Zilhões de operações.

Ok! Agora pode continuar.

Criando uma conta no Google e no Android Market

Esse passo é o mais simples que você encontrará nesse post, duvido que você não tenha uma conta no Google, vai dizer pajé que tu não tem um @gmail.com ? Uma continha perdida do Orkut? Ah! você vive em outro mundo que não é esse, volta para lá de onde tu veio vai! Esqueça isso de Mobile.

Ok, animos acalmados, criou a conta? Ah! Já tem? Ótimo, o próximo passo é registra-se no Android Market e se tornar um publicador de Apps lá. O processo é mega simples, entre no endereço https://market.android.com/publish/Home
android_publish_home.

Coloque seu login e senha e clique em Login, como você ainda é novato, vai aparecer outra tela perguntando seu Developer Name, dados de contato e telefone. Lembre-se coloque um nome de guerra, nome profissional, nada de vitinho, Vikky, Fofinha, LindinhadoAndroid, algo que passe credibilidade aos seus futuros usuários, Caso você seja uma empresa nem preciso fazer essas recomendações, basta colocar o nome da empresa que você quer usar como Developer Name no formulário.

android_publish_info

Clique agora em Continue.

Depois disso, você precisará dos

US$25 dolares

para fazer a sua inscrição no programa por 1 ano, se você tem conta no Google Checkout basta gastar por lá, caso contrário use algum cartão de crédito de qualquer bandeira que aceite transações internacionais.

android_publish_pagamento

Pronto, você está com a conta no Google Android Market criada e é só aguardar a liberação. Em média esse processo é quase imediato, em outros pode levar cerca de 1 dia no máximo. A coisa é rápida, então fica de olho no e-mail de boas vindas quando tudo for aceito pelo Google.

Aqui está minha dashboard no Android Market.

android_publish_dashboard

Configurando o Flex 4.5.1 SDK para usar o AIR 2.7 SDK

Como o SDK do Flex 4.5.1 ainda vem com suporte ao Adobe AIR 2.6 que é cerca de 4.x mais lento tanto no Android quanto no IOS, você vai precisar configurar seu SDK, esse processo agente chama de “SDK Overlay”, que é basicamente um CTRL+C e CTRL+V em alguns diretórios que sobrepõem arquivos antigos do AIR 2.6.

Baixou o AIR 2.7 SDK? Ok, feito isso extraia ele para um diretório de sua confiança, que seja simples de acessar. O pacote contendo o AIR 2.7 SDK tem os seguintes diretórios e arquivos.

air_2.7_sdk

Se você tem um igual, sinal que vai dar tudo certo, meio caminho andado.

Baixou o Flex 4.5.1 SDK? Ótimo, faça o mesmo processo do AIR 2.7 SDK e descompacte ele no seu diretório predileto, eu particularmente sempre deixo em um diretório meu chamado SDKs, porém nesse exemplo tem pessoas que gostam de deixar no mesmo diretório dos já existentes SDK do Flash Builder 4.5.1.

Ok, se você tem o SDK já descompactado, basta copiar o conteúdo da pasta onde você descompactou o AIR 2.7 SDK dentro da pasta do Flex 4.5.1. SDK. A idéia é sobrescrever os já existentes.

Feito? Ok, próximo passo é instalar o Flash Builder, a ferramenta perfeita para você criar suas apps, não só para Android como para outros devices, ios, BlackBerry Playbook, Web e Desktop.

Flash Builder Instalado? Perfeito, vamos agora configurar o ambiente Android para rodar sua app no console nativo que o próprio google disponibiliza.

Configurando o Android Console

Já tem o Java instalado em sua máquina? Então pule essa etapa, ela só serve mesmo para quem nunca usou o JDK ou tem apenas o JRE.

Para você testar no console, você precisa do JDK(Java Development Kit), que já vem tudo em um, então dependendo de seu sistema operacional, você precisará fazer alguns processos manuais, já no Windows é meio for dummies, é next-> next-> finish.

Baixou o correto referente ao seu OS? Instalou? Ótimo, pois agora precisamos definir as variáveis de ambiente do JAVA_HOME nas configurações globais do sistema operacional.

No Windows, vá em Iniciar – > Computador -> Botão direito do mouse -> Escolha propriedades -> Escolha aba Configurações Avançadas -> Variáveis de ambiente.

Adicione um novo registro na suas variáveis de ambiente com o nome JAVA_HOME. Olhe o exemplo abaixo.

jdk_java_home

Se você configurou tudo certinho, você pode testar no prompt do DOS do windows digitando java -version. Vai aparecer isso aqui ó.

java_version_console

Agora você está pronto para o Android SDK.

Baixando e configurando o Android SDK

Baixou o SDK? Então descompacte em um diretório de fácil acesso, eu coloquei o meu em C:/android-sdk. Para facilitar digitação de comandos.

Execute o SDK Manager, que é o carinha responsável por baixar todos os arquivos necessários do Android SDK da nave mãe Google.

android_avd

Pela primeira vez, esse processo dependendo de sua conexão com a internet, leva uma média de 1 hora para baixar todos os arquivos para seu computador.
Depois disso ele fica como o meu aqui.

android_sdk_dir

Ok, tudo configurado e instalado, vamos verificar se está mesmo. Com o mesmo comando que fiz para o java -version, usarei agora o comando adb version que é o Android Debug Bridge , para ver se executa corretamente.

android_adb

Se aparecer como na imagem acima, é sinal que tudo está correto e perfeito para criarmos nosso Android Emulator, onde iremos simular o sistema operacional Android. Prontos para esse passo?

Ah! Que esqueci, que depois que ele instalar tudo, ele vai pedir para você fechar o SDK Manager e abrir novamente, para que as alterações sejam aplicadas.

Criando o Android Emulator

Ok, volte agora ao SDK Manager e escolha a opção Virtual Devices.

android_virtual_devices

Veja que nesse meu eu já possuo 2 devices virtuais, para criar outro basta clicar em “New…”.

android_new_console

Preencha os dados de seu virtual device, assim como mostra na imagem acima, veja que eu não esqueci de criar usando o Android 2.2 API level 8, que é o necessário para o Adobe AIR rodar e consecutivamente o Flex. Como eu quero apenas testar a App nativa no dispositivo virtual eu deixei as outras configurações padrão, salvo apenas para a memória alocada de 100mb para esse console. Agora clique em “Create AVD”.

O AVD foi criado, só que agora falta executar, esse processo é bem gastante se você tem pouca memória na máquina, típicos 2GB, demora aproximadamente 20min até 30min para ele começar realmente executar, Eu por exemplo tenho 8Gb de memória e leva uma média de 5min. Se você tiver problemas na hora de executar veja se o JVM está setado corretamente.

Para executar, basta clicar em “Start…”.

android_starting

Essa tela preta é demorada, então aproveita e vai tomar um café, falar com sua tchutchuca.

….
……………
Passados alguns minutos. E eis que temos a tela inicial do Android rodando.

android_started

Android rodando, navegando na Web, agora só temos um problema, não temos o Adobe AIR instalado para testar a App, como fazer?

Instalando o Adobe AIR APK no seu emulador

Se você é por natureza curioso, dúvido você não ter bisbilhotado o SDK do Flex que você fez o overlay(Sobreposição) do AIR 2.7 no Flex 4.5.1 SDK. Abra esse diretório para você navegar nele, dentro do SDK você vai encontrar o nosso famoso AIR.apk que é necessário para rodar suas Apps.

air_apk_folder

Veja que eu fiz um mapinha de onde você vai achar o run-time do AIR para seu emulador Android, existem dois, para o Device e para o Emulador, você deve usar a versão Emulador, que é com ela que você vai conseguir emular alguma coisa. Resumindo eis aqui o caminho completo em minha máquina.

C:Program Files (x86)AdobeAdobe Flash Builder 4.5sdks4.5.1_air2.7runtimesairandroidemulator

Lembre-se seu índio, que o diretório na sua máquina pode ser diferente, se não você vai reclamar depois nos comentários que não consegiu achar o tal APK.

Eu copiei o meu para esse exemplo para o diretório raiz, C:/ para facilitar agora o processo de digitação pelo prompt de comando.

Abra o CMD(MS-DOS), e digite o comandos abaixo.

adb devices

adb_devices_list

Se aparecer o nosso Emulador em execução,é por que está tudo OK.

Para instalar é super simples, digite o comando.

adb install {NOME-DO-EMULADOR} c:/Runtime.apk

adb_devices_install_sucess

Finalmente terminamos essa parte chata de configurar a máquina, seu Adobe AIR está funcionando perfeitamente no seu device, Só que como é que eu sei que ele está instalado? Tem 2 formas, vê se o resultado do comando de instalar deu certo e também indo no Emulador, clicar em
Settings -> Applications-> Manage Applications; E você vai ver o Adobe AIR instalado lá.

air_installed

Tudo pronto, agora só abrir o Flash Builder já instalado e começar com sua App Hello World. Nos vemos na próxima Etapa.

Aproveite e participe do grupo de discussão Flex-Mobile

Flex/ Flex 3 para Flex 4/ Flex 4

Flex 3 para Flex 4: Componentes não visuais

Essa é uma mudança peculiar, no Flex 3 independente de qual seja a função do componente, ele sempre fica no escopo geral do Application.

Por exemplo:

1
2
3
4
5
6
7
8
9
10
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx:ArrayCollection id="blogpost">
			<mx:Object id="postid" titulo="" datapublicada=""/>
			<mx:Object id="postid" titulo="" datapublicada=""/>
			<mx:Object id="postid" titulo="" datapublicada=""/>
	</mx:ArrayCollection>
 
</mx:Application>

Não só ArrayCollection, como HTTPServices, RemoteObject, Producer, Consumer, WebServices, Array, Number, Validadores, Formatadores e até mesmo seus componentes não visuai. Todos esses conhecidos componentes que também são confundidos de classes, podem ser utilizados em qualquer local, contanto que seja dentro do escopo da Application.

No Flex 4, devido a maneira como você cria objetos visuais no atual modelo do pacote Spark, houve a necessidade de tirar essas mudanças, deixando a coisa mais organizada, só que ao meu ver, apenas para dar mais suporte ao Flash Catalyst, por isso que chamo de mudança peculiar.

Então veja só, no Flex 4, todo e qualquer componente que não for visto pelo usuário final deve ficar declarado dentro de um tag, tal tag chamado de . O código do Flex 3 aplicado ao Flex 4 ficaria assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
 
		<s:ArrayCollection id="blogpost">
			<fx:Object id="postid" titulo="" datapublicada=""/>
			<fx:Object id="postid2" titulo="" datapublicada=""/>
			<fx:Object id="postid3" titulo="" datapublicada=""/>
		</s:ArrayCollection>
	</fx:Declarations>
</s:Application>

Então da próxima vez que for usar componentes não visuais, atento para essa dica.

Flex/ Flex 3/ Flex 3 para Flex 4/ Flex 4

Flex 3 para Flex 4: AC_OETags vs. SWFObject

Não ocorreram só mudanças na parte do SDK apenas, o Wrapper que envolve o SWF produzido pelo Flash Builder também mudou. Os engenheiros do SDK notaram que é muito complicado manter o formato AC_OETags em diferentes browsers sem ter que alterá-lo. E também mais complicado ainda é adicionar parametros, adicionar variáveis, uma gama de pequenas dificuldades que acabam gerando algum certo tipo de stress seu na hora de publicar seu projeto.

A grande vantagem do SWFObject é que é um projeto mantido pelo Google, Open-source e continua constantemente sendo atualizado a cada 12 meses de ciclo. É um projeto que faz examente a mesma coisa que o AC_OETags faz, porém de forma mais simples.

No Flex 3 para você embedar uma aplicação Flex ou um SWF feito em Flash Builder, você provavelmente teria isso aqui como código gerado.
Read More

Flex/ Flex 3/ Flex 3 para Flex 4

Flex 3 para Flex 4: Scrollers, Alguém tem que usar o scroll

Arrrghh!!! Eu já vi gente xingando o Flex 4 em e-mails, dizendo que não consegue colocar scrolls nos containers, no application. Eu sei, eu entendo suas frustrações, tudo que é novo e difícil de fazer é irritante.
Tenha em mente o seguinte, no Flex 3, tudo que é container tem automaticamente um scroll herdado diretamente na classe, essa técnica é absurdamente fantástica, você não tem a preocupação em ajustar a tela, ela simplesmente acompanha o fluxo e cria um scroll para você, seja ele vertical ou horizontal.
Também no Flex 3 você facilmente habilitava ou desabilitava o scroll dos containers, seja ele qual for.

Por exemplo, veja esse código abaixo onde eu desabilito todas as barras de scroll.

1
2
3
4
5
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	verticalScrollPolicy="off" horizontalScrollPolicy="off">
 
</mx:Application>

Ai, se você decide que apenas a barra vertical (scroll) seja exibida você faz assim.

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 xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="loop()" layout="vertical"  horizontalScrollPolicy="off">
 
<mx:Script>
		<![CDATA[
			import mx.controls.Label;
			import mx.containers.Canvas;
 
				/**
				 * Função apenas para gerar conteúdo para Área de Scroll
				 * */
				private function loop():void
				{
					var i:uint=0;
					for (i;i<99;i+=1){
						var obj:Canvas = new Canvas();
						var lbl:Label = new Label();
						lbl.setStyle('fontSize',20);
						lbl.text = "Panel Color item " + i;
						obj.width = this.width;
						obj.height = 50;
						obj.setStyle('backgroundColor',Math.random()*0xffffff);
						obj.addChild(lbl);
						this.addChild(obj);
					}
				}
 
 
		]]>
</mx:Script>
</mx:Application>

Resultado do código acima.
flex3scroll

Facilmente a famosa barrinha de rolagem vai aparecer apenas na vertical, e você vai conseguir rolar sobre o conteúdo.
Por padrão o scrollPolicy sempre é auto, ou seja, o que vier, agente aguenta e cria uma barrinha de rolagem para te ajudar.

Como é no Flex 4?

No Flex 4 é bem diferente do que você faz no Flex 3. Ao invés de você ter uma barra de rolagem aninhada ao código do container, você simplesmente esquece isso. A arquitetura atual do Flex 4 é baseada em composição.

Composição: Imagine vários blocos de lego, cada um deles é um componente que gera um brinquedo, boneco, castelo, carro que nesse caso são equivalentes a containers, então você compõe cada bloco do lego que é um diferente do outro, em um só componente principal. É assim que tudo funciona. Ou um outro exemplo bem louco é “assista o filme transformers 2”, a hora em que o avião doa peças para Optimus Prime e ele tem mais poderes. A grande sacada de composição é que tudo é plugável e desplugável.

Já que, composição agora é fichinha para você; Voltamos ao assunto. Então tudo no Flex 4 é feito disso, logicamente qualquer container é composto. Por um Group e Skin.
Existem 2 formas de você acrescentar um Scroller à qualquer container, que são:

Por Skin:

O Application possui uma Skin que define essa aparência dele, que está localizado no pacote spark.skins.spark.ApplicationSkin, basta copiar o conteúdo desse skin e criar um novo através do menu do Flash Builder File > New > MXML Skin. Detalhe é que o atual Flash Builder não consegue localizar o ApplicationSkin, então você pode criar qualquer componente Skin, depois remover o conteúdo e colar o conteúdo que você copiou do ApplicationSkin.

ApplicationSkin padrão é assim:

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
<?xml version="1.0" encoding="utf-8"?>
 
<!--
 
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
 
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
 
-->
 
<!--- The default skin class for the Spark Application component.
 
@see spark.components.Application
 
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
 
	<fx:Metadata>
		<![CDATA[
		/**
		* A strongly typed property that references the component to which this skin is applied.
		*/
		[HostComponent("spark.components.Application")]
		]]>
	</fx:Metadata>
 
	<fx:Script fb:purpose="styling">
		<![CDATA[
			/**
			 *  @private
			 */
			override protected function updateDisplayList(unscaledWidth:Number,
														  unscaledHeight:Number) : void
			{
				bgRectFill.color = getStyle('backgroundColor');
				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}
		]]>
	</fx:Script>
 
	<s:states>
		<s:State name="normal" />
		<s:State name="disabled" />
		<s:State name="normalWithControlBar" />
		<s:State name="disabledWithControlBar" />
	</s:states>
 
	<!-- fill -->
	<!---
	A rectangle with a solid color fill that forms the background of the application.
	The color of the fill is set to the Application's backgroundColor property.
	-->
	<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
		<s:fill>
			<!--- @private -->
			<s:SolidColor id="bgRectFill" color="#FFFFFF"/>
		</s:fill>
	</s:Rect>
 
	<s:Group left="0" right="0" top="0" bottom="0">
		<s:layout>
			<s:VerticalLayout gap="0" horizontalAlign="justify" />
		</s:layout>
 
		<!---
		@private
		Application Control Bar
		-->
		<s:Group id="topGroup" minWidth="0" minHeight="0"
				 includeIn="normalWithControlBar, disabledWithControlBar" >
 
			<!-- layer 0: control bar highlight -->
			<s:Rect left="0" right="0" top="0" bottom="1" >
				<s:stroke>
					<s:LinearGradientStroke rotation="90" weight="1">
						<s:GradientEntry color="0xFFFFFF" />
						<s:GradientEntry color="0xD8D8D8" />
					</s:LinearGradientStroke>
				</s:stroke>
			</s:Rect>
 
			<!-- layer 1: control bar fill -->
			<s:Rect left="1" right="1" top="1" bottom="2" >
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry color="0xEDEDED" />
						<s:GradientEntry color="0xCDCDCD" />
					</s:LinearGradient>
				</s:fill>
			</s:Rect>
 
			<!-- layer 2: control bar divider line -->
			<s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
				<s:fill>
					<s:SolidColor color="0x000000" />
				</s:fill>
			</s:Rect>
 
			<!-- layer 3: control bar -->
			<!--- @copy spark.components.Application#controlBarGroup -->
			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
				<s:layout>
					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
				</s:layout>
			</s:Group>
		</s:Group>
 
		<!--- @copy spark.components.SkinnableContainer#contentGroup -->
		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
	</s:Group>
</s:Skin>

Veja que logo aqui, no finalzinho existe, um componente Group chamado contentGroup. É ai que o conteúdo do Application fica guardado, então claro vamos aplicar um Scroll nesse camarada, o que resulta no seguinte conteúdo.

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
<?xml version="1.0" encoding="utf-8"?>
 
<!--
 
ADOBE SYSTEMS INCORPORATED
Copyright 2008 Adobe Systems Incorporated
All Rights Reserved.
 
NOTICE: Adobe permits you to use, modify, and distribute this file
in accordance with the terms of the license agreement accompanying it.
 
-->
 
<!--- The default skin class for the Spark Application component.
 
@see spark.components.Application
 
@langversion 3.0
@playerversion Flash 10
@playerversion AIR 1.5
@productversion Flex 4
-->
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
		xmlns:fb="http://ns.adobe.com/flashbuilder/2009" alpha.disabled="0.5" alpha.disabledWithControlBar="0.5">
 
	<fx:Metadata>
		<![CDATA[
		/**
		* A strongly typed property that references the component to which this skin is applied.
		*/
		[HostComponent("spark.components.Application")]
		]]>
	</fx:Metadata>
 
	<fx:Script fb:purpose="styling">
		<![CDATA[
			/**
			 *  @private
			 */
			override protected function updateDisplayList(unscaledWidth:Number,
														  unscaledHeight:Number) : void
			{
				bgRectFill.color = getStyle('backgroundColor');
				super.updateDisplayList(unscaledWidth, unscaledHeight);
			}
		]]>
	</fx:Script>
 
	<s:states>
		<s:State name="normal" />
		<s:State name="disabled" />
		<s:State name="normalWithControlBar" />
		<s:State name="disabledWithControlBar" />
	</s:states>
 
	<!-- fill -->
	<!---
	A rectangle with a solid color fill that forms the background of the application.
	The color of the fill is set to the Application's backgroundColor property.
	-->
	<s:Rect id="backgroundRect" left="0" right="0" top="0" bottom="0"  >
		<s:fill>
			<!--- @private -->
			<s:SolidColor id="bgRectFill" color="#FFFFFF"/>
		</s:fill>
	</s:Rect>
 
	<s:Group left="0" right="0" top="0" bottom="0">
		<s:layout>
			<s:VerticalLayout gap="0" horizontalAlign="justify" />
		</s:layout>
 
		<!---
		@private
		Application Control Bar
		-->
		<s:Group id="topGroup" minWidth="0" minHeight="0"
				 includeIn="normalWithControlBar, disabledWithControlBar" >
 
			<!-- layer 0: control bar highlight -->
			<s:Rect left="0" right="0" top="0" bottom="1" >
				<s:stroke>
					<s:LinearGradientStroke rotation="90" weight="1">
						<s:GradientEntry color="0xFFFFFF" />
						<s:GradientEntry color="0xD8D8D8" />
					</s:LinearGradientStroke>
				</s:stroke>
			</s:Rect>
 
			<!-- layer 1: control bar fill -->
			<s:Rect left="1" right="1" top="1" bottom="2" >
				<s:fill>
					<s:LinearGradient rotation="90">
						<s:GradientEntry color="0xEDEDED" />
						<s:GradientEntry color="0xCDCDCD" />
					</s:LinearGradient>
				</s:fill>
			</s:Rect>
 
			<!-- layer 2: control bar divider line -->
			<s:Rect left="0" right="0" bottom="0" height="1" alpha="0.55">
				<s:fill>
					<s:SolidColor color="0x000000" />
				</s:fill>
			</s:Rect>
 
			<!-- layer 3: control bar -->
			<!--- @copy spark.components.Application#controlBarGroup -->
			<s:Group id="controlBarGroup" left="0" right="0" top="1" bottom="1" minWidth="0" minHeight="0">
				<s:layout>
					<s:HorizontalLayout paddingLeft="10" paddingRight="10" paddingTop="7" paddingBottom="7" gap="10" />
				</s:layout>
			</s:Group>
		</s:Group>
 
		<s:Scroller  id="scroller" width="100%" height="100%" hasFocusableChildren="true" horizontalScrollPolicy="off">
		<!--- @copy spark.components.SkinnableContainer#contentGroup -->
		<s:Group id="contentGroup" width="100%" height="100%" minWidth="0" minHeight="0" />
		</s:Scroller>
	</s:Group>
</s:Skin>

Seto a largura e altura em 100% e habilio o hasFocusableChildren para true,fazendo ele não perder o foco no objeto quando estiver navegando. E por último eu desabilito o scroll horizontalmente.

Uffa, feito o Skin, como eu aplico agora no Application ?

Lá no Application é super simples, através da propriedade de registro skinClass você apresenta o diretório e o arquivo de Skin que você criou. Desse jeito aqui.

1
2
<?xml version="1.0" encoding="utf-8"?>
<s:Application skinClass="com.riacycle.skins.ScrollerSkin" xmlns:fx="http://ns.adobe.com/mxml/2009"

Nesse meu caso eu criei um Path com o nome “com.riacycle.skins”, onde guardo meus Skins personalizados. O resto agora é lenda, basta repetir o código do Flex 3 no Flex 4, atento apenas as mudanças que você já sabe, ficando o código da Aplicação dessa maneira.

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
<?xml version="1.0" encoding="utf-8"?>
<s:Application skinClass="com.riacycle.skins.ScrollerSkin" xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" creationComplete="loop()" >
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
 
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
		<fx:Script>
		<![CDATA[
			import com.riacycle.skins.ScrollerSkin;
 
			import mx.containers.Canvas;
 
			import spark.components.Label;
			import spark.skins.spark.ApplicationSkin;
				/**
				 * Função apenas para gerar conteúdo para Área de Scroll
				 * */
				private function loop():void
				{
					var i:uint=0;
					for (i;i<99;i+=1){
						var obj:Canvas = new Canvas();
						var lbl:Label = new Label();
						lbl.setStyle('fontSize',20);
						lbl.text = "Panel Color item " + i;
						obj.width = this.width;
						obj.height = 50;
						obj.setStyle('backgroundColor',Math.random()*0xffffff);
						obj.addElement(lbl);
						this.addElement(obj);
					}
				}
 
 
		]]>
	</fx:Script>
</s:Application>

Assim, você pode ter essa maneira simples, usando Skin, ou se você quer eliminar o uso do Skin, você simplesmente cria um Group e um Scroll que o abrace para gerar o mesmo comportamento.
Ficando o código assim:

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
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="995" minHeight="600" creationComplete="loop()"  width="100%" height="100%">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
			import com.riacycle.skins.ScrollerSkin;
 
			import mx.containers.Canvas;
 
			import spark.components.Label;
			import spark.skins.spark.ApplicationSkin;
			/**
			 * Função apenas para gerar conteúdo para Área de Scroll
			 * */
			private function loop():void
			{
				var i:uint=0;
				for (i;i<99;i+=1){
					var obj:Canvas = new Canvas();
					var lbl:Label = new Label();
					lbl.setStyle('fontSize',20);
					lbl.text = "Panel Color item " + i;
					obj.width = this.width;
					obj.height = 50;
					obj.setStyle('backgroundColor',Math.random()*0xffffff);
					obj.addElement(lbl);
					grupo.addElement(obj);
				}
			}
 
 
		]]>
	</fx:Script>
	<s:Scroller width="100%" height="100%">
		<s:Group id="grupo" height="100%">
			<s:layout>
				<s:VerticalLayout/>
			</s:layout>
		</s:Group>
	</s:Scroller>
</s:Application>

Super simples, tem mais coisa que gostaria de falar sobre Scrolls, mais eu deixo para um outro post mais específico.

Flex/ Flex 3 para Flex 4/ Flex 4

Flex 3 para Flex 4: ApplicationControlBar

Adeus AplicationControlBar, lembra que você fazia assim no Flex 3:


Flex 3 ApplicationControlBar

1
2
3
4
5
6
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:ApplicationControlBar>
		<!-- itens para ser adicionado -->
	</mx:ApplicationControlBar>
</mx:Application>

A grande sacada do ApplicationControlBar ficava por conta da propriedade dock=true, lembra? Ela ocupava toda a parte superior do Application. A grande desvantagem é que se você decidisse mudar o layout padrão dele que é alinhar sempre os items de forma orizontal da esquerda para direita, você teria que colocar outros containers, o que acaba ficando meio sem sentido, sempre um container dentro de outro container (preço caro a se pagar).

No Flex 4 eles criam um similar a ele, só que bem mais legal de trabalhar e passível de receber qualquer típo de layout. Veja como pode ser feito:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:controlBarLayout>
		<s:VerticalLayout/>
	</s:controlBarLayout>
	<s:controlBarContent>
		<s:Label text="item 01"/>
		<s:Label text="item 02"/>
	</s:controlBarContent>
</s:Application>

Qual a vantagem do novo controlBarContent? Simples, aplicar qualquer tipo de layout, criar em qualquer componente uma barra de menu, o controlBarContent é aplicável em qualquer componente de Container.

Qual a desvantagem? Se você quiser mudar para parte inferior do seu Application, você vai ter que criar um novo Skin para seu Application. Coisa que no Flex 3 você apenas mudava a posição y sempre que fizesse um resize da App.

Flex/ Flex 3 para Flex 4/ Flex 3 SDK/ Flex 4

Flex 3 para Flex 4: Binding

Uma das grandes vantagens de usar o Flex é fazer uso do Databinding, coisa que ele faz muito bem para quem sabe usar. Databinding para quem não sabe é um língua solta. Tudo que acontece na variável que ele está de butuca, ele vai acabar contando para o patrão dele, ou seja o cara que está esperando a resposta da variável que ele está observando.

No Flex 3 você pode fazer binding da seguinte maneira:

1
2
3
4
 
<mx:Binding source="txtB.text" destination="txtA.text"/>
   <mx:TextInput x="154" y="68" id="txtA"/>
   <mx:TextInput x="154" y="122" id="txtB"/>

Ou você pode fazer assim:

1
2
3
4
5
6
7
8
9
10
11
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
 
			[Bindable]public var dados:ArrayCollection;
 
 
		]]>
	</mx:Script>
 
	<mx:List dataProvider="{dados}"/>

E diretamente em Classes, você pode bindar uma classe inteira assim:

1
2
3
4
5
6
7
8
9
10
11
12
package com.igorcosta.migracao.Binding
{
	[Bindable]
	public class BlogPost
	{
		public function BlogPost()
		{
		}
		public var valor:Number;
		public var debito:Number;
	}
}

Até ai tudo bem, lembrando que é sempre bom você ter cuidado ao uso do Binding, vai que você usa em excesso e depois seu aplicativo fica que nem uma carroça. Só que no Flex 3, Binding é possível apenas de um recurso para outro recurso, e não vice-versa nativamente. Você pode até ter alguns truques na manga como esse aqui:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
 
<mx:Binding source="txtA.text" destination="txtB.text" />
<mx:Binding source="txtB.text" destination="txtA.text"/>
	<mx:TextInput x="154" y="68" id="txtA"/>
	<mx:TextInput x="154" y="122" id="txtB"/>
	<mx:Label x="87" y="70" text="Campo A"/>
	<mx:Label x="87" y="124" text="Campo B"/>
 
 
	<mx:Script>
</mx:Application>

Se você tiver feito isso, é mais um problema para você se preocupar no futuro. Então é ai que vem no Flex 4 uma maneira super simples de fazer isso, chamado de Two-way-databinding, que é mais ou menos assim a sintaxe comparada com o último exemplo do Flex 3 acima:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:layout>
		<s:VerticalLayout/>
	</s:layout>
 
	<s:TextInput id="campoA"/>
	<s:TextInput id="campoB" text="@{campoA.text}"/>
</s:Application>

Através do @ eu consigo amarrar o dedo-duro do Binding tanto indo como vindo, em ambos os campos, independente da ordem que eu os altero, se alterar em 1, irá alterar em outro a propriedade text em ambos os campos.

Então da próxima vez que você for fazer isso do Flex 3 para o Flex 4, lembre-se do Two-way.

Flex/ Flex 3 para Flex 4/ Flex 4

Flex 3 para Flex 4: States

Uau! Foi a mudança mais significativa que fizeram com o Flex SDK, no Flex 4 você vai quebrar um pouco a cabeça no início, mais depois você acaba se acostumando. Sabe como era tedioso criar states no Flex 3 em tempo de desenvolvimento, imagine só em tempo de execução. Se você não tiver uma boa índole, acaba fazendo o mal para muita gente.

No Flex 3 você estava acostumado a declarar States da seguinte forma:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
	<mx:states>
		<mx:State name="State1">
			<mx:AddChild position="lastChild">
				<mx:Button x="287" y="216" label="Bem vindo ao State 1"/>
			</mx:AddChild>
			<mx:RemoveChild target="{button1}"/>
		</mx:State>
		<mx:State name="State2">
			<mx:AddChild position="lastChild">
				<mx:Button x="287" y="216" label="Bem vindo ao último state"/>
			</mx:AddChild>
			<mx:RemoveChild target="{button1}"/>
		</mx:State>
	</mx:states>
	<mx:Button x="287" y="216" label="Root do State" id="button1"/>
 
</mx:Application>

O Código acima, cria 2 novos states no Application em geral, do contrário do que você possa imaginar, States não é um luxo apenas para o Application, mais para qualquer objetivo que vive na hierarquia do DisplayObject.

Como é no Flex 3: Você cria objetos baseados em camadas, igual em páginas de revistas, você adiciona e remove objetos a medida que o usuário vai interagindo com a UI, Então ele criar diferentes objetos que ficam armazenados em um Array (states), que vai constantemente mudando (executa o addChild e removeChild em tempo de execuçao), sempre que checa o currentState, removendo e adicionando objetos. Eu não tenho nada contra States, mais a maneira que o Flex 3 e Flex 2 fazem é absurdamente elementar. É de fácil aplicação, porém em grandes projetos isso chega a ser um tédio, forcando você à adotar na maioria das vezes Singletons em componentes para acessar objetos persistentes a tela, retardar a criação de objetos para pegar de VO’s e assim por diante, técnicas para isso é que não faltam.

Agora veja só como funciona no Flex 4:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:states>
		<s:State name="primeiro"/>
		<s:State name="segundo"/>
		<s:State name="terceiro"/>
	</s:states>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Button includeIn="primeiro" x="577" y="293" label="States em Flex 4"/>
	<s:Button includeIn="segundo" x="604" y="300" label="Segundo State"/>
	<s:Button includeIn="terceiro" x="610" y="298" label="Terceiro State"/>
</s:Application>

E agora no Flex 4, temos o seguinte, Cada State agora é tratado da mesma forma que era tratado no Flex 3, com duas grandes diferenças, Não precisamos re-criar o mesmo objeto várias vezes para ser vistos em diferentes etapas do projeto. Uma vez que eu tenho duas variáveis de registro que são (includeIn e excludeFrom). Ambas servem para verificar propriedades distintas ao objeto que elas estão amarradas e assim atribuir as propriedades devidas em diferentes states. É uma técnica chamda DRY (Don’t Repeat yourself), Não repita isso. O que deixa muito confortável em uma situação que você não precisa mais remover e adicionar constantemente da tela, ele é re-utilizando, reduzindo o trabalho do LayoutManager e UIComponent.

Veja outro exemplo desse re-uso:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<s:states>
		<s:State name="primeiro"/>
		<s:State name="segundo"/>
		<s:State name="terceiro"/>
	</s:states>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:Button x="577" y="293" label="States em Flex 4 Opa" width="91"
			  height="108" width.terceiro="272" height.terceiro="21"
			  y.terceiro="380" width.segundo="290" x.segundo="212"
			  y.segundo="106" height.primeiro="56" width.primeiro="226"/>
</s:Application>

Veja que Eu continuo tendo o mesmo objeto sendo inserido em diferentes States, mantendo ele vivo, e apenas mudando as propriedades aninhadas que foram modificadas, sendo aplicadas quando chegar a hora, ou seja quando chegar no state de destino, definida pelo nome do state que foi selecionado ou que esta sendo visto no exato momento.

Fácil não?

Flash Builder/ Flash Catalyst/ Flex/ Flex 3 para Flex 4/ Flex 3 SDK/ Flex 4/ Flex Builder 3/ Flex Builder 4

Flex 3 para Flex 4 : Estilos

Criar estilos no Flex 4 é quase igual a criar no Flex 3, atento apenas em pequenas mudanças devido essa fase de transição e suporte ao Halo. veja as mudanças.

Flex 3 para aplicar estilo na sua aplicação você fez:

1
2
3
4
5
6
7
< ?xml version="1.0" encoding="utf-8"?>
<mx : Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
 
	<mx : Style source="Estilo.css"/>
 
 
</mx>

No Flex 4 você faz:

1
2
3
4
5
6
7
8
9
< ?xml version="1.0" encoding="utf-8"?>
<s :Application xmlns:fx="http://ns.adobe.com/mxml/2009"
			   xmlns:s="library://ns.adobe.com/flex/spark"
			   xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">
	<fx :Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx>
	<fx :Style source="Estilo.css"/>
</s>

Absolutamente não existe diferença entre o uso de um para o outro. Esse exemplo é apenas para uso de CSS externo ao código mxml. Uma vez que você não é tão inocente em escrever o CSS da sua aplicação dentro do próprio arquivo mxml do application.

Mudanças no namespace

Nem tudo são flores, você achou que isso ia passar direto, você pode usar e continuar usando seus componentes do Flex 3 restrito apenas alguns, contanto que respeitem as novas regras de ciclo de vida, você não terá problemas aparente.
O que mudou é que se você continuar usando seus componentes do Flex 3 com o Flex 4 para funcionar os estilos você terá que adicionar um namespace ao arquivo de CSS e também um seletor na frente de cada tag padrão do componente. Por exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* CSS file */
/* CSS file */
@namespace s "library://ns.adobe.com/flex/spark";
@namespace mx "library://ns.adobe.com/flex/mx";
 
 
/*
 Para estilizar seu componente Button do Flex 3 você tem
que fazer isso
*/
mx|Button{
	  /* suas preferencias do CSS aqui */
}
 
/*
	Para usar o Button do pacote Spark você usa assim
*/
s|Button {
	/* suas preferencias do CSS aqui */
}

Veja que não só os css do Flex 3 ainda funcionam como também você poderá mesclar ambos os css, tanto do 4 quanto do 3.

Suporte da ferramenta Flash Builder para CSS:

Você estáva acostumado a ter o Flex Builder com sua facilidade absurda em criar CSS e customizar suas telas, deixando-as cute cute para seus usuários finais. Porém o time de desenvolvimento do Flash Builder (novo nome para o antigo Flex Builder), decidiu tirar o suporte ao CSS da ferramenta e obriga-lo a usar o Flash Catalyst e forcar você a ser um pouco mais ninja. Vai ver algum desenvolvedor com alma boa tenha portado o Flex 3 Style Explorer para o Flex 4 e assim facilitar novamente sua vida.

Flex/ Flex 4/ Flex Builder 4

Até quando você terá projetos feitos em Flex 3 substituidos pelo Flex 4?

O Twitter te deixa bem preguiçoso quando o assunto é escrever em grande volume.
Embora esse texto não tenha cunho voltado para o Twitter e sim na migração de projetos feitos com o Flex 3.x para o Flex 4. Olha, faz tempo que eu queria escrever isso.

Já teve muita gente me perguntando com dúvidas em nossos cursos, via e-mail,etc. Se era melhor usar o Flex 4 já nos seus projetos ou continuar usando o Flex 3.x? Já teve a pergunta, eu devo aprender primeiro Flex 3 e depois pular para o Flex 4?
De todas essas perguntas eu compreendo que é um receio ao novo e lhe garanto que também já tive meu pé atrás com o Flex 4. Depois que escrevi isso, para depois passar na prática a coisa foi bem feia.
Só que eu queria deixar aqui minha mensagem a todos os leitores do blog e conseqüentemente a todos os desenvolvedores que conhecem o Flex. O Flex não morreu. Não apodrecerá e nem tampouco está horrível.
O grande medo que você pode sentir é ouvir boatos, Ah! Ainda é instável. Ah! Ainda é bugado, Ah! Ainda estão criando.
De fato todas as afirmações são corretas. Só que existe uma grande diferença entre um produto já homologado que é o caso do Flex 3.5.x SDK quanto ao Flex 4.0, Flex 4.1 e Flex 4.5.

Vamos aos fatos

Lascou tudo. A Adobe colocou as mãos pelos pés quando lançou o Flex 4 antes do Flash Player 10.1 e AIR 2.0 sair no mercado. Eu quando vi a troca de comentários nas correções de bugs um dia antes do lançamento eu pensei “Fudeu!”. Desculpem a palavra. Mais lançar o Flex 4 antes da finalização do Flash Player 10.1 e AIR 2.0 é um tremendo erro, não deu em outra, logo em seguida lançaram o Flex 4.1, saiba mais aqui e aqui.
Ai, todos nós nos deparamos com uma crise financeira dos diabos, a Adobe demite 600 funcionários, dos quais uma grande parte do time do Flex Builder, Flex Builder QA, Flex SDK, Flex DVM, Flex DVM QA foi mandado embora. Ficando ai pouco mais de 26 pessoas para trabalhar em um PUTA projeto que é líder de mercado no segmento.

Passado a crise, contratações continuam, e surge os rumores do HTML 5 que faz isso, faz aquilo, que o Flex tem que ser mobile também. Ai vem o MAX 2009 e ela apresenta o futuro do SDK do Flex que suportará dispositivos móveis, antes era chamado de Slider, e agora chamado de Hero.

Pensei UAU! Que mudança. Agora triste por saber que o Flex 4.5 não terá nightlybuilds , aqueles builds que você adora quando vive na beira do penhasco.
Tanta coisa acontecendo e eles não sabem para onde atirar, Sai o Matt Chotin gerente do SDK e vai para uma cadeira de diretor do produto Flex e entra a Deepa antes engenheira agora gerente, pensei, agora vai. Agora vai mudar à passos largos. Enganei-me.

Continuou no mesmo ritmo e a passos normais, listas de discussão diminuíram o tráfego, comunidade está perdida sem saber se o Flex 4 vai vingar ou se o produto está morto. Está um verdadeiro dilema que qualquer tecnologia que chega ao topo tem. Como se manter lá? Eis a ciência do negócio.

Ouvi a história uma vez que a Adobe tinha aberto o código fonte do Flex SDK, tanto compiladores quanto tudo.
De fato é aberto, mais já prestaram atenção que o novo SDK do Flex 4 você não consegue customizar de maneira fácil a GUI do seu sistema como era feito ainda no Flex 3?
Eles nos deram o pão, mais a manteiga e a faca ainda continua deles. Sabe o que é a manteiga e a faca? Chama-se o Flash Facalyst (Oops, Flash Catalyst) e Suite de produtos CS5.
Como disse, é tudo fato verídico, onde essas frases são a mais nua e crua verdade.
Porém, nada está perdido, eis que surge uma luz no final do túnel, e não é o trem.

Acabei me empolgando e desviei do assunto. É possível aplicar o jeitinho brasileiro nisso tudo e contornar todos esses problemas? Mais é claro. Se político tem jeito de driblar a lei, por que agente não?

Nunca desista

É o lema, o Flex 4 fora isso que comentei, que ao meu vê são problemas administrativos de decisões erradas que podem dar em merda. O Produto em si é uma excelência. Eles conseguiram mudar muita coisa que eu acharia impossível em 1 ano e 8 meses de trabalho. Eu tava apostando que eles conseguiram uns 50%, mais no final mesmo ainda em mudanças constantes eu digo que eles chegaram a 80%.
É válido migrar tudo para Flex 4.1?
Sim, aprenda desde agora que o Flex 4 não é apenas uma nova versão do produto, é uma nova versão do paradigma de GUI, eles estão ajudando você a entender que sua interface é modular, flexível, customizada de acordo com as regras do negócio. O Flex 4 vai render e ficar no mercado de vez por mais 3 anos ou até mais que isso.

E o Flex 3.x simplesmente será abandonado?

Já começou. Onde a própria Adobe disse que ia parar. Já fazem 9 meses que eles não mexem mais no SDK, à não ser para consertar bugs antigos ou bugs que impeçam que o SDK pare de funcionar.
As maiores e significativas mudanças é no SDK 4, onde eles tem um grande processo de implementação de novas idéias, de novos frameworks. Eu não deixaria de pensar em migrar um sistema antigo em Flex 2/3 para o Flex 4.

Então eu simplesmente largo a mão do Flex 3 e passo a usar o Flex 4?

Não estou dizendo isso, eu digo à você que, se sua empresa ou cliente precisa usar os novos benefícios do Flex 4 como RSL avançado, customização de telas, velocidade, aumento de performance, melhorias na comunicação remota, entre outras mais de 40 grandes novidades, então é importante que você migre para o Flex 4. E o mais importante que ela/ele tenham dinheiro para investir nisso.
Agora se você está chegando agora ou se tem um projeto em vista que precisa ser feito em Flex. Eu aconselho você pular do Flex 3 e partir para o Flex 4 de imediato.
Ah! Mais eu ainda tenho muita coisa em Flex 3 que demorará muito tempo para ser migrada e meu cliente não quer pagar para migração. Então aconselhe a ele que o sistema dele está fadado ao descaso não mais que 2 anos.
Flex 4 tem suporte a dispositivos móveis otimizado, tem componentes que rodam 4x mais rápido que na versão anterior, é mais leve, é muito mais amigo do designer e fiel ao que o cliente gosta de usar.
Então quer dizer que se eu começar a usar o Flex 4 eu vou re-escrever tudo que eu já tinha no Flex 3?
Claro que não, não seja tolo, você respeitou o ciclo de vida de componentes, criou novos componentes baseados no UIComponent, etc. Então você terá uma grande chance de escrever pouca coisa.
Então, vendo tudo isso, em todos os ângulos, vou ajudar vocês a entender melhor os benefícios do Flex 4, como temos ajudado nossos alunos nos cursos on-line, escrevendo mais a migração do Flex 3 para o Flex 4 e a experiência que tivemos nos últimos 9 meses usando o SDK.
Finalizando, se você continuar vivo pelos próximos 3 meses, garanto que você terá excelentes surpresas pela frente, no ramo de Flex. Otimismo meu amigo, Otimismo. Tempo é um luxo que todos nós temos, prazos não.

Flex/ Flex 4

Ajude a criar um Flex 4 cada vez melhor

Já havia comentado aqui e aqui, onde prometi atualizar vocês de novidades futuras que fossem vim sobre o Flex 4.

Então para ajudar o Flex SDK a entender melhor sobre você fiel desenvolvedor, tire alguns minutos do seu precioso tempo e ajude nessa pesquesa.Que o pessoal envolvido no desenvolvimento do Flex está fazendo. O bom é que são excelentes perguntas para quem realmente vive de desenvolvimento e tornam em sí um grande aliado na fabricação de um excelente produto que está por vir.

A Adobe em sí precisa de sua ajuda para fabricar melhor o Flex 4, tinhamos comentado aqui sua precipitação em distribuir já o Flex 4, o que ocasiou atraso na entrega do produto que só se realizará no Q4 de 2009 e também na remoção do prefixo FX para o novo framework do Flex 4. Lembram do prefixo e , Pois é a decisão que foi tomada é que o problema será resolvido por namespaces e não por prefixos como eles estavam adotando. Graças ao feedback (retorno) que vocês membros da comunidade faz todos os dias.

Participe, Preencha a pesquesa, não custa nada.