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?

Deixe uma resposta

O seu endereço de email não será publicado. Campos obrigatórios são marcados com *