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.

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 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 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 3/ Flex 3 para Flex 4/ Flex 3 SDK/ Flex 4

Flex 3 para Flex 4: Namespaces

Houve uma grande polêmica quando estavam fazendo o novo Flex 4 à mais ou menos 1 ano atrás. Quando estavam falando dos novos namespaces e prefixos. Melhorou um pouco do que eles haviam criado devido a comunidade de desenvolvedores reclamarem por causa do problema, eles voltaram atrás e fizeram direito.

No Flex 3 você tem apenas 1 namespace original para criar aplicações Flex, que é:

1
xmlns:mx="http://www.adobe.com/2006/mxml"

Ele define tudo que seu aplicativo precisa para acessar componentes e classes originais do Framework em seu todo.
Só que agora é que vem um grande diferencial do que você estava acostumado a fazer no Flex 3 para o Flex 4. No Flex 4 tudo mudou, temos agora um namespace para cada parte do SDK, isso se da ao fato que temos agora uma nova forma de criar interfaces no Flex 4, através de Skins e o Flash Catalyst é um grande influenciador nesse sentido, além dos seus próprios namespaces o SDK do Flex 4 em sí, vem com vários namespaces pré-definidos, então para não prolongar mais e mais, focarei apenas no SDK.

No Flex 4 temos os seguintes namespaces:

1
2
3
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx"

Tais namespaces representam cada parte do SDK por completo, os novos componentes do Flex 4 ficam no namespace com prefixo S, e os elementos core do SDK ficam no prefixo FX. Já os conhecidos componentes do Flex 3 continuaram no pacote de prefixo mx.

Cada namespace tem suas próprias propriedades, estilos, efeitos e vez ou outra você pode ficar empacado em achar que funciona no Flex 4, muito cuidado nesse aspecto por que mudou muita coisa mesmo para componentes do Flex 3 funcionarem perfeitamente no Flex 4.

Então uma aplicação típica no Flex 3 ficaria assim:

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><mx :Script>
		< ![CDATA[
 
 
		]]>
	</mx>

No Flex 4 uma típica aplicação ficaria assim:

1
2
3
4
5
6
7
8
9
10
11
12
13
< ?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>
	</fx>
 
	<fx :Script>
		< ![CDATA[
 
		]]>
	</fx>
</s>