Exemplo prático de tela de Login com states e efeitos (com Transition, Sequence, Parallel, Move e Resize)

Para mostrar a evolução do Flex 4 em relação a efeitos, vamos criar este exemplo que relaciona diversos conceitos tais como States, seqüência de efeitos e transições. A idéia é criar uma tela de login agradável ao usuário, sem abusar muito.

Clique aqui para ver este exemplo em funcionamento

Inicialmente vamos rever alguns conceitos importantes:

States

O uso de states ficou muito fácil no Flex 4. Eles mudaram completamente em relação ao Flex 3. Por exemplo, criamos os states:

<s:states>
	<s:State name="normal"/>
	<s:State name="login"/>
	<s:State name="logado"/>
</s:states>

E após criar estas states, podemos relacioná-los da seguinte forma:

<s:BorderContainer 

	width="200"
	width.normal="80"
	height="150"
	right="50"
	y.normal="-120"
	y.logado="-120"
	y.login="10"
/>

A parte em negrito define a propriedade y do componente, de acordo com o state ativado. No Flash Builder, você pode digitar a propriedade e em seguida inserir um ponto, surgirá o state para que você possa escolher, conforme a figura a seguir.

Desta forma fica fácil definir os states da sua aplicação, principalmente se você não estiver no modo design (no Flex 3 era muito complexo alterar states no modo texto).

Transitions

Transições estão diretamente ligadas aos states. Sempre que você quiser usar efeitos em conjunto com states, deverá usar transitions. Na transition, você cria o efeito. Veja o exemplo a seguir:

<s:transitions>
	<s:Transition>
		<s:Parallel>
			<s:Sequence>
				<s:Resize target="{caixa}"/>
				<s:Move target="{caixa}"/>
			</s:Sequence>
			<s:Fade targets="{[btnLogarOk,btnLogar,
					btnSair,lblHello]}"/>
		</s:Parallel>
	</s:Transition>
</s:transitions>

No exemplo acima, a tag <s:Transition> relaciona qualquer mudança de state na aplicação. Pode-se usar as propriedades toState e fromState para definir states específicos. Na definição da transition, criamos um efeito em paralelo (Parallel) seguido de um efeito em série (Sequence). O target destes efeitos estão relacionados ao componente cujo o id é “caixa”. O efeito Fade possui a propriedade targets, define os botões que sofrerão efeito de Fade.

Em relação ao artigo anterior (Efeitos no Flex 4 – Move, Fade, Parallel, Easing, Bounce), repare que não definimos propriedades para os efeitos. Ou seja, não usamos xTo ou yFrom, nem alphaFrom ou alphaTo. Quem define essas propriedades é o próprio componente (na verdade é o trigger do efeito em relação ao componente…), na mudança de states. Ou seja, se em um determinado state um botão está visivel, e em outro state não está mais, o efeito será realizado.

Exemplo Completo

O código a seguir representa a união de todos estes conceitos:

<?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:creationComplete>
		<![CDATA[
		currentState='normal';
		]]>
	</s:creationComplete>

<s:states>
	<s:State name="normal"/>
	<s:State name="login"/>
	<s:State name="logado"/>
</s:states>

<s:transitions>
	<s:Transition>
		<s:Parallel>
			<s:Sequence>
				<s:Resize target="{caixa}"/>
				<s:Move target="{caixa}"/>
			</s:Sequence>
			<s:Fade targets="{[btnLogarOk,btnLogar,
					btnSair,lblHello]}"/>
		</s:Parallel>
	</s:Transition>
</s:transitions>

	<fx:Declarations>
	</fx:Declarations>

	<s:BorderContainer
		id="caixa"
		cornerRadius="5"
		backgroundColor="#eeeeee"
		borderColor="#aaaaaa"

		width="200"
		width.normal="80"
		height="150"
		right="50"
		y.normal="-120"
		y.logado="-120"
		y.login="10"
		>

		<s:Button  id="btnLogar"
				   label="Logar"
				   bottom="5"
				   right="5"
				   includeIn="normal"
				   click="{this.currentState='login'}"
				   />

		<s:Button id="btnLogarOk"
				  label="Ok"
				  bottom="5"
				  right="5"
				  includeIn="login"
				  click="{this.currentState='logado'}"
				  />

		<s:Button id="btnSair"
				  label="Sair"
				  bottom="5"
				  right="5"
				  includeIn="logado"
				  click="{this.currentState='normal'}"
				  />

		<s:Label id="lblHello"
				  text="Ola Fulano"
				  bottom="5"
				  left="5"
				  includeIn="logado"
				  />

		<s:Label top="10" left="10"
				 text="Email:"/>

		<s:TextInput top="25" left="10" right="10"
				 text=""/>

		<s:Label top="60" left="10"
				 text="Senha:"/>

		<s:TextInput top="75" left="10" right="10"
					 text=""/>

	</s:BorderContainer>

</s:Application>

Clique aqui para ver este exemplo em funcionamento