AIR 2.0/ Cursos/ Flex 4

Ganhador dos cursos de Flex 4 Essencial e AIR 2.0 Essencial

Foi mais divertido que dificil. Dos 20 participantes do pequeno concurso que fizemos no post anterior rendeu muito assunto para jornal.

O pessoal solta a criatividade geral para ganhar as bolsas do Flex 4 Essencial e AIR 2.0 Essencial.

A parte dificil é escolher a melhor, e para isso chamei o pessoal do escritório para me ajudar. E a que foi mais votada aqui foi essa.

Já disseram que o homem não poderia voar, hoje temos o avião. Anos atrás a infecção era sinal de morte, até por acaso descobrirem a penicilina. Um dia pensaram que a internet não daria certo, hoje o mundo não consegue viver sem ela. Com a internet surgiu uma questão: “Precisamos ter interfaces mais dinâmicas, flexíveis e bonitas”! Nasce então o Flex. Eu quero participar da história da humanidade. Eu quero aprender Flex com vocês!

Essa justificativa foi bem interessante, e escrita pelo Raphael Vinícius do Rio de Janeiro. Ele trabalha ou é dono do site www.b2all.com.br .Parabéns Raphael, você realmente estava inspirado.

Para quem não ganhou, e mesmo assim quer fazer só que as coisas estão apertadas por ai. Fala comigo, pelo igorcosta AT gmail.com que eu dou um jeito de te ajudar como sempre fazemos.

AIR 2.0/ Flex/ Flex 4/ Flex Builder 4

Concorra a uma bolsa de estudos para o curso on-line Flex 4 Essencial

Vamos vender um pouco de jabá aqui.

Vocês sabem que temos cursos on-line dos mais variados tipos para e exclusivamente para a plataforma Flash. Não somos tão bons em propaganda, acreditamos que o boca-a-boca gera rendimento, tanto que estamos com quase 1mil alunos já capacitados em 6 meses de operações. (Vlw pessoal).

No próximo sábado dia 25/09 vai ter mais uma turma, e como é de costume, sempre que tem novas turmas, sorteamos 1 até 4 vagas pelo nosso twitter ou no twitter da RIACycle.

Porém, eu sei que nem todo mundo tem twitter ou gosta da onda, então quero sortear uma vaga para esse curso de sábado, aos nossos leitores que vem acompanhando a série de posts sobre o Flex 4 que temos feito por aqui.

Como participar?
É bem e muito simples, Escreva um comentário dizendo por que quer aprender Flex conosco.
Preencha seu nome, e-mail e telefone logo após o porque. Não iremos publicar seu telefone, pode ficar tranquilo.

Regras
O comentário que for mais inteligente, ganha uma bolsa não só para o curso de Flex 4 Essencial como também para o de AIR 2.0 Essencial.

Quantidade?
1 vaga.
Indique aos seus amigos, colegas de trampo.

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?

Flex/ Flex 4/ Open-source

Veja ao vivo as cameras da CET do Rio de Janeiro com Flex

Hoje o dia foi tranquilo, e como sempre, quando tem tempo livre agente ajuda abeça. Na lista flex-dev teve um rapaz perguntando como criar um monitorador de câmeras da CET do Rio de Janeiro em tempo real.

Bem, não é bem um tempo real, elas atualizam de 30 e 30 segundos e disponibilizam um link de imagem que você pode consumir facilmente. Está ai uma maneira legal de você criar serviços que ajudem a população a evitar grandes engarrafamentos e assim reduzir o consumo de combustível.

Pois bem, fizemos uma rápida API para o CET do rio de Janeiro. onde você pode ver o resultado abaixo. Detalhe é que se você usa um Android, você pode usar o aplicativo abaixo já direto no navegador.

cet-rio-flex
Código da Aplicação.



	
		
	

	
		
	
	
	

Código fonte da classe CETCameras

/**
 * Copyright (c) 2010 RIACycle LTDA ME. www.riacycle.com
All rights reserved.

The MIT License - http://www.opensource.org/licenses/mit-license.php

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
*/
package
{
	import flash.events.TimerEvent;
	import flash.utils.Timer;

	import mx.collections.ArrayCollection;

	public class CETCameras
	{
		public function CETCameras()
		{
		}
		[Bindable]public static var cameras:ArrayCollection = new ArrayCollection([]);

		private static var _intervalo:Timer;
		private static var quantidade:int;


		public static function addCamera(value:int=96):void
		{
			quantidade = value;
			for(var i:uint=1;i<=quantidade;i+=1)
			{
			var cam:CameraVO = new CameraVO();
			cam.nome = "Camera " + i;
			cam.camera = "http://200.141.78.14/imagens1/"+ String(i) + ".jpg?=" + Math.ceil(Math.random()*1000);
			cameras.addItem(cam);
			}
		}
		public static function atualizar(intervaloEmSecs:int=30):void
		{
				_intervalo = new Timer(intervaloEmSecs*1000);
				_intervalo.addEventListener(TimerEvent.TIMER,gerarNovamente);
				_intervalo.start();
		}
		internal static function gerarNovamente(e:TimerEvent):void
		{
			for(var i:uint=1;i<=cameras.length-1;i+=1)
			{
				var cam:CameraVO = cameras.getItemAt(i) as CameraVO;
				cam.nome = "Camera " + i;
				cam.camera = "http://200.141.78.14/imagens1/"+ String(i) + ".jpg?=" + Math.ceil(Math.random()*1000);
				cameras.setItemAt(cam,i);
			}
		}
	}
}

Código fonte do CameraVO, um Model usado para registrar a camera:

/**
 * Copyright (c) 2010 RIACycle LTDA ME. www.riacycle.com
 All rights reserved.

 The MIT License - http://www.opensource.org/licenses/mit-license.php

 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
 in the Software without restriction, including without limitation the rights
 to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 copies of the Software, and to permit persons to whom the Software is
 furnished to do so, subject to the following conditions:

 The above copyright notice and this permission notice shall be included in
 all copies or substantial portions of the Software.

 THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 */
package
{
	[Bindable]
	public class CameraVO
	{
		public function CameraVO()
		{
		}
		public var nome:String;
		public var camera:String;
	}
}