Stefan Horochovec

Olá

Neste post irei comentar um pouco sobre a grande evolução que os States sofreram no Adobe Flex 4 em relação as versões 2 e 3 do Flex SDK. Com novos recursos, realmente agora ficou muito fácil sua implementação em nossos projetos.

Na versão 3 do Flex SDK, era muito difícil a utilização de States em nossas aplicações. Sua implementação era muito complexa e ao invés de facilitar a vida do desenvolvedor na verdade ela criava mais uma barreira para o desenvolvimento, ou seja, muito pouco material você irá encontrar na internet caso pesquise, encorajando a sua utilização.

Entretanto, no Flex 4 SDK, os States foram reformulados. Sua implementação ficou muito mais fácil e agora sim, vale a pena utilizar esse recurso em seus projetos.

Para exemplificar a utilização do State, iremos criar um projeto em nosso Adobe Flash Builder, conforme imagem abaixo:

Feito isso, iremos criar um layout que contemple essas duas situações:

O detalhe é que esse layout irá conter um único TitleWindow, e não iremos utilizar nenhum ViewStack para fazer as telas de login e cadastro. Iremos apenas usar os novos conceitos de States para mostrar e ocultar informações.

Primeiro passo será criar a tela de Login, conforme imagem e código abaixo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?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">
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:TitleWindow width="384" height="200" horizontalCenter="0" verticalCenter="0" title="Login">
		<s:layout>
			<s:BasicLayout/>
		</s:layout>
		<s:Label text="Olá, Seja bem vindo(a)!" left="10" top="15"/>
		<s:Label text="Email:&#xd;" top="52" left="25"/>
		<s:TextInput left="65" top="47" right="15"/>
		<s:Label text="Senha:" left="20" top="82"/>
		<s:TextInput x="65" y="77" width="148" displayAsPassword="true"/>
		<s:Button label="Entrar" left="65" top="107"/>
		<s:Button label="Limpar" top="107" left="143"/>
		<s:Button label="Não sou cadastrado" top="107" left="221"/>
	</s:TitleWindow>
</s:Application>

Podemos observar que todos os objetos contidos no TitleWindow foram posicionados através de posicionamento relativo, utilizando valores para “left, right, top” e não valores para “x e y”. Até então tudo normal, sem nenhuma implementação nova.

Agora, iremos adicionar um novo State para nossa aplicação para o formulário de cadastro, conforme imagem abaixo. Caso seu Adobe Flash Builder não esteja com o painel para States habilitado. Utilize a opção “Window -> States“.

No campo Name, informamos o nome de nosso State, Cadastro, e na opção “Create as” iremos deixar marcada a opção para que o State a ser criado seja uma duplicação do State1, que é o nome padrão do State inicial dentro do Adobe Flash Builder.

Agora iremos alterar o nome do nosso primeiro State em nossa aplicação. Para isso, iremos clicar em cima do nome State1, e solicitar sua alteração, conforme imagem abaixo:

Feito isso, podemos verificar quais alterações ocorreram em nosso código-fonte e em nosso ambiente visual. Nosso layout não sofreu nenhuma alteração, surgindo apenas um bloco de códigos com as definições dos States.

1
2
3
4

<s:states>
	<s:State name="Login"/>
	<s:State name="Cadastro"/>
</s:states>

Agora, podemos dar inicio a construção de nossa tela de cadastro. Iremos então selecionar nosso State Cadastro, da seguinte forma:

Feito isso, iremos iniciar as alterações em nossa janela, sem se preocupar com o State anterior. Obteremos então o seguinte resultado:

Para o desenvolvimento desse layout, eu dupliquei o campo e o label do campo email para que eu pudesse armazenar o nome do usuário do sistema que fosse efetuar seu cadastro, e também dupliquei o campo e label senha, conforme a sugestão do layout.

Em seguida, alterei o label dos botões, e alterei o titulo de meu TitleWindow.

Entrando em modo de Design, obtemos o seguinte código:

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

<?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">
	<s:states>
		<s:State name="Login"/>
		<s:State name="Cadastro"/>
	</s:states>
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	<s:TitleWindow width="384" height="200" horizontalCenter="0" verticalCenter="0" title="Login" title.Cadastro="Cadastro" height.Cadastro="250" horizontalCenter.Cadastro="0" verticalCenter.Cadastro="0">
		<s:layout>
			<s:BasicLayout/>
		</s:layout>
		<s:Label text="Olá, Seja bem vindo(a)!" left="10" top="15" text.Cadastro="Informe seus dados para o cadastro&#xd;"/>
		<s:Label text="Email:&#xd;" top="52" left="25" top.Cadastro="82" left.Cadastro="26"/>
		<s:Label text="Nome:" top="53" left="23" includeIn="Cadastro"/>
		<s:TextInput top="77" left="66" right="14" includeIn="Cadastro"/>
		<s:TextInput left="65" top="47" right="15" top.Cadastro="47" left.Cadastro="66" right.Cadastro="14"/>
		<s:Label text="Senha:" left="20" top="82" top.Cadastro="112" left.Cadastro="21"/>
		<s:TextInput x="65" y="77" width="148" displayAsPassword="true" x.Cadastro="66" y.Cadastro="107"/>
		<s:Label text="Senha:" left="21" top="142" includeIn="Cadastro"/>
		<s:TextInput x="66" y="137" width="148" displayAsPassword="true" includeIn="Cadastro"/>
		<s:Button label="Entrar" left="65" top="107" top.Cadastro="167" left.Cadastro="66" label.Cadastro="Cadastrar"/>
		<s:Button label="Limpar" top="107" left="143" top.Cadastro="167" left.Cadastro="148"/>
		<s:Button label="Não sou cadastrado" top="107" left="221" top.Cadastro="167" left.Cadastro="222" label.Cadastro="Efetuar Login"/>
	</s:TitleWindow>
</s:Application>

Nesse momento, fica fácil perceber como o Flex 4 SDK trabalha com os States. A cada propriedade comum de um objeto em mais de um State, é adicionado ao fim da propriedade, o nome do State correspondente. Para exemplificar, usaremos a declaração do TitleWindow:

1

<s:TitleWindow width="384" height="200" horizontalCenter="0" verticalCenter="0" title="Login" title.Cadastro="Cadastro" height.Cadastro="250" horizontalCenter.Cadastro="0" verticalCenter.Cadastro="0">

A primeira vez o atributo title aparece sem a declaração de qual State deverá pertencer, ou seja, nesse caso esse é o valor quando o State da aplicação for o State default. Logo em seguida o atributo title aparece seguido de um ponto e do valor Cadastro, que é o nome de nosso segundo State, já com o novo valor do título da janela. E assim, essa regra permanece no próprio componente TitleWindow e também nos demais componentes.

É valido ressaltar, que ao selecionar o modo “Source” em seu Adobe Flash Builder, você também poderá mostrar o código de apenas um ou todos os States disponíveis em seu componente da seguinte forma:

Nesse momento, podemos perceber que o Adobe Flash Builder oculta a codificação em MXML que não será utilizada no State selecionado.

Para efetuarmos a troca de State, faremos a seguinte implementação. Com o State Login selecionado, clique com o botão direito do mouse sob o botão com o label “Não sou cadastrado” e vá na opção “Generate Click Handler“.

Nesse momento, o Adobe Flash Builder entrará em modo “Source”. Faça a seguinte implementação:

1
2
3
4

protected function button1_clickHandler(event:MouseEvent):void
{
	currentState = 'Cadastro';
}

Volte ao modo Design e faça a mesma operação no botão com o label “Efetuar Login” e faça a seguinte implementação:

1
2
3
4

protected function button2_clickHandler(event:MouseEvent):void
{
	currentState = 'Login';
}

Pronto. Basta salvar e executar o projeto, e terá um exemplo simples e rápido para demonstrar o uso de States dentro do Flex 4 SDK. A partir de agora, fica por nossa conta a criatividade para sua melhor exploração.

Para ver o exemplo rodando clique aqui.

Para ver o código fonte do exemplo completo clique aqui.

Para efetuar o download do exemplo clique aqui.

Obrigado pela visita, volte sempre!