Apache Flex/ Flex

Apache Flex 4.9 SDK liberado para download

apache_flex_logo

Acabamos de liberar mais uma versão do Apache Flex SDK a 4.9 com ela algumas mudanças substanciais e necessárias, em especial ao Mustella.

Dentre as mudanças mais aguardada era a possibilidade de compilar usano o Java 7, agora é possível e o TLF (Text Layout Framework) que passa a ser parte do SDK.

Assim como anunciei aqui, o Apache Flex agora não deixa de ser apenas projeto incubado e passa a ser um projeto que fica na mesma sala do Apache Tomcat.
O futuro do SDK

Tem muito rumor falso que o Flex já se foi, ou está fraco, tudo isso acontece em qualquer área, a diferença é apenas que o Flex agora é projeto vindo e fornecido por uma  fundação sem fins lucrativos, ou seja teremos mais colaboradores, menor ciclos de releases e mais qualidade de código.

Estamos preprando algumas mudanças para a versão 5.0 que terá como alvo principal o suporte ao Flacon compiler, já que o compilador foi doado e faz parte do projeto.

Dentre as mudanças está a adaptação do SDK para o novo compilador, dando suporte alguns elementos MXML, incorporação de novos componentes vindos da comunidade.

Estamos trabalhando em um novo site para o projeto que vai ao ar em breve.

FalconJS

O FlaconJS ainda está em estágio inicial, que é a possibilidade de escrever em Actionscript e ele gerar CSS,HTML e Javascript. Para suas Apps, porém é bastante limitado no atual momento, já que consegue suportar apenas Classes em Actionscript para Javascript. Devido sua similaridade entre ambas.

O suporte a MXML e 80% do código do SDK ser suportado no FlaconJS é trabalho para até ano que vem, quando novas releases acontecerão.

 

IDE de desenvolvimento com suporte

A Adobe continua a produzir e aprimorar o Flash Builder para dá suporte ao Apache Flex 4.9 SDK, visto isso quem tiver comprado o Flash Builder 4.5 tem direito a um serial e baixar o Flash Builder 4.7 gratuitamente. A única coisa é você baixar o SDK e instala-lo.

Adobe Flash Builder 4.7
PowerFlasher FDT
Flash Develop
Intellij IDE

 

Faça o download do SDK

 

Apache Flex

Flex é aceito na fundação Apache

Uffa! No apagar das luzes de 2011, a fundação Apache aprovou o pedido da Adobe para incubar o Flex como projeto open-source.

Eu sou o único brasileiro no meio do SDK que irá ajudar a manter organizado o SDK daqui para frente, você também pode se tornar um colaborador, enviando bugs, criticas na página oficial do projeto que entrará no ar ainda nesse trimestre.

Tem muito trabalho pela frente, mover código para o SVN da fundação apache, arquivos de ajuda, documentação, a idéia é de fato ter um SDK 100% open-source, fora das garras de uma unica empresa.

Em contra partida, aproveito a ocasião para pedir para vocês assinarem a lista de discussão na fundação Apache.

Basta enviar um e-mail para flex-dev-subscribe@incubator.apache.org e você já está dentro da lista.

O que eu vejo daqui para frente?

Novos componentes estão sendo preparados pela própria Adobe, para ser a primeira contribuição em massa para o SDK, sob o controle da fundação Apache.

Flash Builder 4.5/ Flex/ Flex 3 para Flex 4/ Flex 4.5

Flex 3 para Flex 4.5 – Datagrid

Wow, que mudança; Imagine você acostumado com o Datagrid do Flex 3.x e de repente você se depara com o novo Datagrid do Flex 4.5.1. Se você tem pleno conhecimento do Flex, você terá um esforço médio de 10%, agora se você pega o Flex de vez em quando, perceberá de início que mudou 50%, que sá 100%.

Veja o diagrama do novo Datagrid.

datagrid-spec-diagram

Algumas mudanças bem acentuadas estão:

  • A classe Datagrid não é uma subclass do List ou ListBase
  • Todos os itens criados para o Datagrid são declarativos, ou seja você não tem aquela chatisse de sobrescrever vários métodos como era necessário no Flex 3.x
  • itemClick, DropEnable, DragEnable, AllowMultiSelection entre outras propriedades não existem mais, você tem que fazer na unha via Actionscript 3.0
  • Scrollbars eram parte integrante da estrutura de Halo, ou seja ele variava de acordo com o Height de cada item e a posição sempre era baseada nisso, no novo Datagrid a posição sempre é alterada quando há scrolling, você tem proveito do Smooth Scrolling por exemplo.
  • Não há suporte a estilos como era feito no Datagrid do Flex 3, nesse caso eles forçam você a adotar mesmo Skins para os itens, no caso se você quiser aplicar estilos, será necessário usar o styleName onde você quer aplicar as mudanças.
  • Tooltips nos dados agora são dataTips, a grande vantagem disso é que você pode usar igual aos MX Charts, showDatatips é uma propriedade que você pode exibir todos.
  • Leia todas as mudanças aqui na especificação do novo componente.

Agora sabendo dessas pequenas mudanças, vamos ver alguns exemplos práticos que no dia-a-dia você vai lutar contra.

Datagrid Simples e preenchido

 
<?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:DataGrid showDataTips="true" x="312" y="108" requestedRowCount="4">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
				<s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
				<s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
			</s:ArrayList>
		</s:columns>
		<s:typicalItem>
			<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
		</s:typicalItem>
		<s:ArrayList>
			<fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
			<fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
			<fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
			<fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
		</s:ArrayList>
	</s:DataGrid>
</s:Application>

Drag and Drop desabilitados por padrão, implementados manualmente.

<?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" creationComplete="initApp(event)">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.graphics.ImageSnapshot;
 
			import spark.components.Grid;
			import spark.components.gridClasses.CellPosition;
			import spark.events.GridEvent;
			import spark.primitives.BitmapImage;
			import spark.primitives.Rect;
 
 
			private var item:Object;
			private var gost:BitmapImage;
 
			protected function initApp(event:FlexEvent):void
			{
				tabela.addEventListener(GridEvent.GRID_MOUSE_DOWN,dragItens,false,1,true);
				tabela2.addEventListener(GridEvent.GRID_MOUSE_UP,releaseItem,false,1,true);
			}
 
			protected function dragItens(event:GridEvent):void
			{
				// pega o item selecionado e arrasta
				item = tabela.selectedItem;
 
				// cria um fantasma do item selecionado
				var posX:Number = tabela.mouseX;
				var posY:Number = tabela.mouseY;
 
				gost = new BitmapImage();
				//var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(event.currentTarget.grid,null,null,null,
				//	new Rectangle(tabela.x,event.currentTarget.rowHeight,tabela.width,event.currentTarget.rowHeight));
				var imageBitmapData:BitmapData = ImageSnapshot.captureBitmapData(event.currentTarget.grid,null,null,null,
					new Rectangle(posX,posY,tabela.width,26));
				gost.source = new Bitmap(imageBitmapData);
				gost.x = mouseX - 50;
				gost.y = mouseY - 50;
				this.addElement(gost);
				stage.addEventListener(MouseEvent.MOUSE_MOVE,moveGost,false,3,true);
				stage.addEventListener(MouseEvent.MOUSE_UP,removeGost,false,4,true);
 
			}
			protected function moveGost(e:MouseEvent):void
			{
				if(gost != null){
				gost.x = mouseX -50;
				gost.y = mouseY -50;
				}
			}
			protected function removeGost(event:Event):void
			{
				// TODO Auto-generated method stub
				if(gost !=null)
				{
					this.removeElement(gost);
					gost = null;
				}
			}
 
			protected function releaseItem(event:GridEvent):void
			{
 
					tabela2.dataProvider.addItem(item);
 
					item = null;
			}
 
 
		]]>
	</fx:Script>
	<s:DataGrid id="tabela" x="44" y="99" width="348" height="286" requestedRowCount="4"
				showDataTips="true">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
				<s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
				<s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
			</s:ArrayList>
		</s:columns>
		<s:typicalItem>
			<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
		</s:typicalItem>
		<s:ArrayList>
			<fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
			<fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
			<fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
			<fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
		</s:ArrayList>
	</s:DataGrid>
	<s:DataGrid id="tabela2" x="433" y="99" width="383" height="286" requestedRowCount="4">
		<s:columns>
			<s:ArrayList>
				<s:GridColumn dataField="dataField1" headerText="Column 1"></s:GridColumn>
				<s:GridColumn dataField="dataField2" headerText="Column 2"></s:GridColumn>
				<s:GridColumn dataField="dataField3" headerText="Column 3"></s:GridColumn>
			</s:ArrayList>
		</s:columns>
		<s:typicalItem>
			<fx:Object dataField1="Sample Data" dataField2="Sample Data" dataField3="Sample Data"></fx:Object>
		</s:typicalItem>
		<s:ArrayList>
			<fx:Object dataField1="data1" dataField2="data1" dataField3="data1"></fx:Object>
			<fx:Object dataField1="data2" dataField2="data2" dataField3="data2"></fx:Object>
			<fx:Object dataField1="data3" dataField2="data3" dataField3="data3"></fx:Object>
			<fx:Object dataField1="data4" dataField2="data4" dataField3="data4"></fx:Object>
		</s:ArrayList>
	</s:DataGrid>
</s:Application>

Existe um mar de possibilidades, provavelmente eu volte a falar mais do DataGrid do Flex 4.5 por aqui. Fique ligado nas mudanças.

Flash Builder 4.5/ Flex/ Flex 4.5

Corretor ortográfico em aplicações Flash/Flex/AIR

Já pensou em ter uma aplicação que possa corrigir erros ortográficos em alguns aplicativos, por exemplo, aplicações de edição de textos públicos, licitatórios, organizadores de documentos virtuais, edição de textos, em fim uma gama de aplicações são pertinentes ao assunto. E A Adobe tem há algum tempo uma biblioteca gratuita que você pode usar para adicionar essa funcionabilidade ao seu aplicativo.

A Squiggly, além de gratuita ela se baseia em dicionário público e open-source que é bastante utilizado nos navegadores Chrome, Firefox e a suite de office open-source Open-Office. Tem alguns bugs conhecidos, mais nada que lhe impeça de criar essa função em seu aplicativo.

E cá entre nós, praticamente 50% dos sistemas não tem um corretor ortográfico em campos como comentários adicionais, preenchimento de dados específicos como descrição de produtos, e acaba afetando, ou vai dizer que todo o texto que seu sistema controla é feito pelo Word?

Vamos lá fazer um exemplo.

Passo 1 – Criar um projeto
Passo 2 – Baixar o SWC do Squiggly.
Passo 3 – Adicionar o SWC’s do Squiggly no diretório lib de seu projeto. Os SWCs você vai encontrar direto na pasta libs do arquivo .zip que você baixou. Veja como ficou o meu abaixo.
squiggly

Agora, o resto é fácil. Veja um exemplo abaixo que criei. Lembre-se estou usando o Flex 4.5, funciona com Flash, AIR 2.0+ e em projetos Actionscript 3.0 puro. No .zip que você baixar vai encontrar vários exemplos.

Publicador

<?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:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|Form s|FormItem
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");
		}
		s|Form s|FormHeading
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin");
		}
	</fx:Style>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:Form x="170" y="45" width="487" height="486">
			<s:FormItem label="Título do post:" width="100%">
				<s:TextInput id="campoTitulo" width="100%"/>
			</s:FormItem>
			<s:FormItem label="Post:" width="100%">
				<s:TextArea id="campoCorpoTexto" width="100%" height="300">
 
				</s:TextArea>
			</s:FormItem>
			<s:Button width="135" height="35" label="Publicar" fontWeight="bold"/>
	</s:Form>
</s:Application>

Ok, até ai tudo bem, o problema agora é o seguinte, por padrão o Squiggly trás apenas o idioma en_US, para o corretor, o que nos faz pesquisar no Google e tentar achar outros idiomas, já que é gratuito e eu mencionei OpenOffice, então facilmente eu consigo esse dicionário em pt_BR. Ah! achei.

Com o dicionário em mãos, eu vou criar a seguinte estrutura em meu projeto.

squiggly_pt_br

Veja que tem a estrutura en_US, pt_BR dentro da pasta dictionaries, essas pastas por padrão estão dentro do pacote que você baixou do squiggly. Você vai encontrar ela (en_US) dentro da pasta src.

Agora o que você precisa fazer é mapear essa nova biblioteca que você adicionou(pt_BR) ao AdobeSpellingConfig.xml que está no projeto, ele tem o atual código.

<?xml version="1.0" encoding='UTF-8'?>
<spellingConfig>
  <languageResource language="English" languageCode="en_US" ruleFile="dictionaries/en_US/en_US.aff" dictionaryFile="dictionaries/en_US/en_US.dic"/>
</spellingConfig>

Troque por essa:

<?xml version="1.0" encoding='UTF-8'?>
<spellingConfig>
  <languageResource language="English" languageCode="en_US" ruleFile="dictionaries/en_US/en_US.aff" dictionaryFile="dictionaries/en_US/en_US.dic"/>
  <languageResource language="Português Brasil" languageCode="pt_BR" ruleFile="dictionaries/pt_BR/pt_BR.aff" dictionaryFile="dictionaries/pt_BR/pt_BR.dic"/>
</spellingConfig>

Adicione quantos idiomas você quiser. Agora voltamos ao código de nossa aplicação.

Eu peguei o código e apliquei as dependências do Squiggly. Então, veja como ficou.

<?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" creationComplete="startMeuCorretor(event)">
	<fx:Style>
		@namespace s "library://ns.adobe.com/flex/spark";
		s|Form s|FormItem
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormItemSkin");
		}
		s|Form s|FormHeading
		{
			skinClass: ClassReference("spark.skins.spark.StackedFormHeadingSkin");
		}
	</fx:Style>
	<fx:Script>
		<![CDATA[
			import com.adobe.linguistics.spelling.SpellUI;
			import com.adobe.linguistics.spelling.framework.ResourceTable;
			import com.adobe.linguistics.spelling.framework.SpellingConfiguration;
 
			import mx.events.FlexEvent;
 
			protected function startMeuCorretor(event:FlexEvent):void
			{
				// TODO Auto-generated method stub
				var dicionarios:ResourceTable = new ResourceTable();
			//opcional	dicionarios.setResource("en_US", {rule:"dicionaries/en_US/en_US.aff", dict:"dicionaries/en_US/en_US.dic"});
				dicionarios.setResource("pt_BR", {rule:"dicionaries/pt_BR/pt_BR.aff", dict:"dicionaries/pt_BR/pt_BR.dic"});
				SpellingConfiguration.resourceTable = dicionarios;
 
			}
 
		]]>
	</fx:Script>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
 
	<s:Form x="170" y="45" width="487" height="486">
			<s:FormItem label="Título do post:" width="100%">
				<s:TextInput id="campoTitulo" width="100%" creationComplete="SpellUI.enableSpelling(campoTitulo, 'pt_BR');"/>
			</s:FormItem>
			<s:FormItem label="Post:" width="100%">
				<s:TextArea id="campoCorpoTexto" width="100%" height="300" creationComplete="SpellUI.enableSpelling(campoCorpoTexto,'pt_BR')">
 
				</s:TextArea>
			</s:FormItem>
			<s:Button width="135" height="35" label="Publicar" fontWeight="bold"/>
	</s:Form>
</s:Application>

Resultado final:

squiggly_post

Com isso, basta publicar sua aplicação com todas as dependências de dicionários e arquivos e sua aplicação estará pronta para corrigir os assassinos de palavras portuguesas.

Aproveita, é simples, legal de implementar. Até o próximo post.

AIR 2.0/ Dicas/ Dicas e truques/ Flex/ Flex Builder 4/ Livros/ RIA

Livro Flex 4 Avançado

A editora Novatec, recentemente lançou o livro Flex 4 Avançado, que conta com um excelente conteúdo programático e uma ótima tradução.

Se você quer aprender mais a fundo o Adobe Flex 4 e Adobe AIR, você deve comprar esse livro, nós indicamos por que avaliarmos o livro técnicamente, e ele passou pela nossa análise.

Analisamos pontos de referencia, técnicas e macetes já dados no livro em Inglês e querendo ou não acabam se perdendo com traduções mal feitas. Esse livro me surpreendeu por que sua tradução está muito bem feita, e preservou também esses macetes que salvam em horas turbulentas.

O melhor disso tudo é que não só avaliamos o livro como também conseguimos um desconto para todos os leitores desse blog e também a comunidade Flex Brasileira.

Valendo até 31/12/2011 quando você comprar esse livro ou qualquer outro livro no site da Novatec, você ganha 20% de desconto inserindo o código promocional FLEXBRA

Estamos sorteando 1 cópia desse livro Flex 4 Avançado, veja meu Tweet. E também siga também a @novateceditora no Twitter, eles fazem diariamente outras promoções.

AIR Mobile/ Flex/ Flex 4/ Flex Builder 4/ Flex Mobile Framework/ iPad/ Iphone

Novo curso da RIACycle Flex para dispositivos móveis

Como vocês viram no último post a Adobe recentemente lançou o Flex 4.5 e Flash Builder 4.5 para criação de aplicações móveis usando o Flex.

Criação de aplicações móveis com Flex tem sido um debate pertinente em nosso dia-a-dia, assim como várias palestras.
bannerflexmobile

E através disso, acabamos de lançar o curso Flex para dispositivos móveis na RIACycle onde eu sou o instrutor.

Participe, são vagas limitadas.

AIR Mobile/ Flex/ Flex 4/ Flex Mobile Framework/ Negócios/ Notícias

Cineminha um aplicativo para Android feito com Flex e AIR

cineminhamobile
Colocamos a prova se realmente era possivel fazer aplicativos reais com a atual versão do Flex Hero SDK e AIR 2.5 para Android.
Queriamos construir um aplicativo real que fosse de fácil navegação e que o usuário final pudesse ficar confortável com seu uso.

Então demorou mais ou menos umas 7 horas para esse aplicativo ficar pronto, entre API do servidor desenvolvida em parceria com o Leonardo Sobral um dos sócios do portal Cineminha e a RIACycle.

A criação do aplicativo foi super tranquila, o SDK do Flex Hero está bem maduro para ser uma versão beta, alguns ajustes aqui e outros ali podem deixa-lo mais fáceis de criar.
A única grande dificuldade de criar o aplicativo foi o quesito customização. Agente deixou essa etapa para uma versão futura quando o SDK vier a ficar em sua versão de lançamento.

Um tratamento bem especifico foi dado na coleta de dados e eliminação da mesma, testamos vários Layouts para lists e alguns deles ainda está limitados, tentamos aceleração por GPU, porém o SDK ainda não está compatível com essa opção.

Em fim, foi bem divertido e interessante trabalhar com um SDK ainda em desenvolvimento, mais que mostrou grande maturidade e futuro fixo.

Quem quiser baixar o Aplicativo e rodar em seu Android na versão 2.2 acima, pode encontra-lo aqui.

Flex/ Flex 3 para Flex 4/ Flex 4

Flex 3 para Flex 4: Layout, layout="vertical,horizontal,absolute"

Duvido que você não tenha encontrado esse problema quando você começou seus estudos no Flex 4, Como eu faço o posicionamento de objetos? Tarefa básica que no Flex 3 era tudo automático, coisinha linda. Porém tudo que é fácil tem-se um preço a pagar. Performance.

No Flex 3 você define layouts simplesmente fazendo o uso de VBox, HBox, HDividedBox,Canvas, VDividedBox, TitleWindow, Panel, Window, Application. Todos esses componentes tiram proveito das propriedades, verticalScrollPolicy, horizontalScrollPolicy, layout, align, padding(todos). O que torna todo o desenvolvimento uma diversão. O preço pago por isso é que seu Flex 3 sempre faz calculo de posição no updateDisplayList() e measure(), ocasionando uma certa lentidão quando se tem um container com vários objetos.

Então para você fazer no Flex 3 o uso de Layout, você aplica das seguintes maneiras:

Setando o Application a aceitar posicionamento vertical:

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
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="horizontal">
 
	<!-- O Application quanto o Panel, TitleWindow, WindowedApplication,Application
		aceitam os valores na propriedade layout:
 
		 *vertical (ignora x)
		 *horizontal (ignora y)
		 *absolute (respeita x,y) -->
 
		 <mx:Panel width="400" height="400" layout="horizontal">
		 		<mx:Label text="Texto 01"/>
		 		<mx:Label text="Texto 02"/>
		 		<mx:Label text="Texto 03"/>
		 </mx:Panel>
 
		 <mx:TitleWindow width="400" height="400" layout="vertical">
		 		<mx:Label text="Texto 01"/>
		 		<mx:Label text="Texto 02"/>
		 		<mx:Label text="Texto 03"/>
		 </mx:TitleWindow>
		 <mx:HBox width="100" height="100">
		 		<mx:Label text="Texto 01"/>
		 		<mx:Label text="Texto 02"/>
		 		<mx:Label text="Texto 03"/>
		 </mx:HBox>
		 <mx:VBox width="100" height="100">
		 		<mx:Label text="Texto 01"/>
		 		<mx:Label text="Texto 02"/>
		 		<mx:Label text="Texto 03"/>
		 </mx:VBox>
</mx:Application>

Você sempre usa diversos artificios para posicionar objetos, ai acima são apenas alguns exemplos reais da coisa. Agora veja as mudanças.

No Flex 4, temos agora um novo conceito, leve 3 pague 2 ou pague o que usa estilo Cloud, diferente do Flex 3, toda vez que você faz um mesure() ou updateDisplayList() afeta tanto o Child (componentes internos) quanto externos, o Flex 4 ele altera apenas a instancia do layout. Assim, você reduz o uso da fluidez da tela, já pensou nos benefícios que isso pode trazer, veja alguns deles:

  • Composição de layouts : Imagine que você pode usar qualquer container e aplicar um layout a ele, e/ou melhor mudar em tempo de execução
  • Uso de 3D: Todos os elementos dentro de um container implementam uma interface em comum IVisualElement, o que é passível de transformação 3D usando a própria API do Flash Player 10
  • Eliminação do re-uso de mesureWidth, mesureHeight, unscaleWidth, unscaleHeight sempre que você for afetar o seu componente visualmente.
  • Mudar a ordem (depth) de um objeto dentro do layout através da classe GroupBase.

Em fim, uma gama de outras novidades que você pode aplicar no Flex 4, coisa que no Flex 3 você vai suar para fazer. Principalmente em customização de componentes.

Então como eu aplico novos Layouts ao Flex 4?

Exemplo 1:
Esse exemplo mostra como aplicar Layout ao Application e mudando em tempo de execução

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
<?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"
			   xmlns:layouts="com.riacycle.layouts.*">
 
<fx:Declarations>
		<s:VerticalLayout id="vertical"/>
		<s:BasicLayout id="basico"/>
		<s:HorizontalLayout id="horizontal"/>
		<s:TileLayout id="tile"/>
		<layouts:LayoutPessoal id="personalizado"/>
</fx:Declarations>
 
	<fx:Script>
		<![CDATA[
			import spark.layouts.BasicLayout;
			import spark.layouts.HorizontalLayout;
			import spark.layouts.VerticalLayout;
 
			protected function mudarLayout(valor:int):void
			{
 
				switch(valor){
						case 1:
								this.layout = vertical;
						break;
						case 2:
								this.layout = horizontal;
						break;
						case 3:
								this.layout = basico;
						break;
						case 4:
								this.layout = tile;
						break;
						case 5:
								this.layout = personalizado;
						break;
				}
			}
		]]>
	</fx:Script>
 
 
	<s:controlBarContent>
		<s:Button label="Vertical" click="mudarLayout(1)"/>
		<s:Button label="Horizontal"  click="mudarLayout(2)"/>
		<s:Button label="Basico"  click="mudarLayout(3)"/>
		<s:Button label="Tile"  click="mudarLayout(4)"/>
		<s:Button label="Personalizado"  click="mudarLayout(5)"/>
	</s:controlBarContent>
	<s:Label fontSize="30" text="Item 01" x="58" y="239"/>
	<s:Label fontSize="30" text="Item 02" x="136" y="136"/>
	<s:Label fontSize="30" text="Item 03" x="279" y="100"/>
	<s:Label fontSize="30" text="Item 04" x="58" y="35"/>
</s:Application>

Veja que qualquer objeto que não seja visual eu preciso ter a certeza que ele esteja declarado dentro do tag , é obrigatório estar lá, caso contrário você vai receber um erro.
Caso você seja esperto ou curioso, vai notar que se eu setar do vertical para depois setar basic Layout, não funciona. Esse bug persiste desde o SDK 4.0 Beta, só que eles sempre colocam como fechado e vai empurrando com a barriga, o que é um erro. Eu voltei a postar novamente o erro Bug(SDK-27871), assim com mais detalhes inspirado nesse post.

Criando seus próprios layouts.

Então eu posso criar meus próprios sem depender muito da Adobe? Claro que pode, é ai que a coisa vai ficar bem legal. Veja só.
Para criar é simples, você vai criar uma nova classe que estenda da classe LayoutBase, que é a base de tudo para você aplicar seus layouts.

Exemplo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
package com.riacycle.layouts
{
	import mx.core.ILayoutElement;
 
	import spark.layouts.supportClasses.LayoutBase;
 
	public class LayoutPessoal extends LayoutBase
	{
		public function LayoutPessoal()
		{
			super();
		}
		override public function updateDisplayList(width:Number, height:Number):void
		{
			super.updateDisplayList(width,height);
 
		}
	}
}

Assim que você estende, você vai ver que terá que utilizar 2 métodos simples, se você quer usar o mesure para recalcular o elemento e seu tamanho ótimo, se você quer apenas modificar e brincar, com sua posição é super simples, ai você vai apenas estender o updateDisplayList como eu fiz nessa classe acima.

Para continuar, já que eu estender, agora eu vou modificar a posição de cada objeto mesmo que ele seja adicionado em tempo de execução.

1
2
3
4
5
6
7
8
9
10
11
12
13
			//faz um loop para pegar todos os elementos
			var x:Number = 2;
			var y:Number = 3;
			for (var i:int = 0; i < target.numElements; i++) {
 
				var element:ILayoutElement = target.getElementAt(i);
 
				x = x + element.getLayoutBoundsWidth() - element.getLayoutBoundsWidth()/2;
				y = y + element.getLayoutBoundsHeight();
 
				element.setLayoutBoundsPosition(x, y);
 
			}

Você usa a palavra reservada target, para percorrer todos os elementos que fazem parte do layout e assim setar as propriedades x,y. Esse código acima dá uma efeito de cascata, vai colocando 1 item abaixo do outro em sequencia.

O código completo fica 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
package com.riacycle.layouts
{
	import mx.core.ILayoutElement;
 
	import spark.layouts.supportClasses.LayoutBase;
 
	public class LayoutPessoal extends LayoutBase
	{
		public function LayoutPessoal()
		{
			super();
		}
		override public function updateDisplayList(width:Number, height:Number):void
		{
			super.updateDisplayList(width,height);
			//faz um loop para pegar todos os elementos
			var x:Number = 2;
			var y:Number = 3;
			for (var i:int = 0; i < target.numElements; i++) {
 
				var element:ILayoutElement = target.getElementAt(i);
 
				x = x + element.getLayoutBoundsWidth() - element.getLayoutBoundsWidth()/2;
				y = y + element.getLayoutBoundsHeight();
 
				element.setLayoutBoundsPosition(x, y);
 
			}
		}
	}
}

Você falou que daria para fazer 3D também?Certo, falei sim, que tal aprender já com exemplos bem legais que você pode achar aqui.

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.