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:
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
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.
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:
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
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:
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:
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:
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!
Comentários