Stefan Horochovec
Possuo 20 anos de experiência no desenvolvimento de soluções web. Nos últimos 10 anos tenho atuado como Arquiteto de Soluções auxiliando empresas a desenvolver projetos para nuvem com um grande foco em Java EE como tecnologia voltada ao backend, Angular e React voltada ao frontend e Flutter voltado ao desenvolvimento móvel. Com relação a plataformas na nuvem, atuo com projetos consumindo serviços da AWS, Azure, e GCP.

Adobe Flex 4 — States

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:

Tela de Login
Tela de Cadastro

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!

Share

You may also like...

Deixe uma resposta

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