Iniciante
Olá Beck Novaes, como andam as coisas? Já faz um bom tempo desde a nossa ultima conversa. Bem, eu continuo muito interessado no Flex. Porém, alguns amigos andaram me dizendo que o Flex não dá futuro. Eu não concordo com eles, mas gostaria de ouvir a sua opinião antes de retomarmos o nosso bate-papo técnico.

Beck Novaes
Olá iniciante. O Flex não dá futuro? Olha, eu ouço isto há uns cinco anos, não especificamente sobre Flex, mas sobre a plataforma Flash. Alguns teóricos e puristas de Web vivem falando mal do Flash e vira e mexe sai um daqueles artigos como aquele famoso do Jakob Nielsen. Porém, entra ano saí ano e o Flash/Flex continua cada vez mais forte.

Se eu for falar pela minha vida profissional posso dizer que não me arrependo de ter focado no Flex nos últimos anos. Eu escrevo este post de New Jersey nos EUA donde posso ver Manhattan depois do Rio pela janela do apartamento que estou hospedado. Nas ultimas semanas tive a oportunidade de trabalhar em um protótipo que foi apresentado na maior conferência de Business e Tecnologia dedicada a Inovação de busca de informações. E isso por quê? Porque assim como a empresa em que trabalho eu acreditei no Flex desde sua versão 1.0. Além disso, você pode ver neste outro post porque eu gosto tanto do Flex.

Iniciante
Legal ouvir que as empresas e profissionais Brasileiros já estão tirando proveito do seu conhecimento técnico de Flex nos EUA. Não vejo a hora de entrar nessa também. Mas antes disso, obviamente, preciso continuar meus estudos em Flex.

No nosso ultimo bate-papo você mencionou alguma coisa sobre os Containers, que eu já sei são componentes que servem para fazer layout dos seus componentes filhos. Mas eu acho que ainda não sei qual container eu devo usar para cada situação. Você poderia falar um pouco sobre isso?

Beck Novaes
Esta é uma excelente pergunta. E infelizmente não creio que eu possa te dar uma “receita de bolo” de qual container usar em qual situação. Obviamente, se você está desenvolvendo um aplicativo simples, talvez um HBox e dois VBox resolvam o seu problema. Mas como eu penso que você está interessado em desenvolver aplicativos de grande porte a história é diferente. Possivelmente você terá que combinar os Containers de uma maneira mais complexa para obter o resultado desejado. Neste sentido, o que eu posso lhe falar é que você deve considerar duas coisas quando tiver que decidir qual Container utilizar: performance e facilidade de manutenção de código.

Como você deve saber os Containers possuem regras que definem como será feito o layout dos seus componentes filhos. Estas regras são algoritmos, algumas vezes complexos, que são executados no Flash Player na maquina do usuário. Implicitamente isto quer dizer que se você tiver muitos Containers, um dentro do outro, a performance da sua aplicação pode ser prejudicada. Por isso considere fazer um Refactoring do seu código de layout sempre que você perceber que a sua aplicação está demorando para “renderizar” a sua interface conforme você muda o tamanho do Browser. Nestes casos procure usar um Container que lhe permita chegar ao mesmo resultado sem ter que usar vários deles. Por exemplo, o Container Form lhe permite chegar a este layout facilmente. Sem ele, talvez você tenha que usar vários VBox e HBox aninhados. Além disso, alguns containers possuem a propriedade “layout”. Com ela, você pode especificar que o layout dos componentes dentro de um Panel, por exemplo, é Horizontal sem que para isso você tenha que criar no Panel outro container como o HBox. Em outras palavras, você pode usar a propriedade layout que alguns Containers tem para evitar ter que usar um container adicional dentro deles para conseguir o resultado desejado.

Outro ponto a ser observado com relação a performance é a opção “creationPolicy”. Por default os Containers tem a propriedade “creationPolicy” definida como “auto”, o que significa que os seus componentes filhos só serão instanciados quando eles forem necessários. Esta funcionaldiade do Flex é conhecida como Deferred Instatiation. A questão é: se você tem alguns componentes dentro de um Container que não está visível na tela do usuário ainda, por que eles deveriam estar instanciados? Eu usei a palavra visível, mas vale ressaltar esta funcionalidade não tem nada a ver com a propriedade “visible”. Na realidade você pode observar este comportamento quando você utiliza um Container como o ViewStack, por exemplo, para prover a navegação na sua aplicação.

Com relação à facilidade da manutenção de código a questão é que alguns Containers tornarão o seu código mais legível do que outros e geralmente aqueles que oferecem melhor performance são também aqueles que deixam o seu código menos legível. O Canvas, por exemplo, é a melhor opção em termos de performance, mas não é tão fácil conseguir com o Canvas o mesmo resultado que conseguimos com um VBox (sem usar o Design no Builder). Se bem que estes componentes que permitem posicionamento absoluto oferecem uma outra alternativa para criar layouts complexos. Esta funcionalidade, muito importante, é conhecida com Constraint Based Layout. Fora isso, posso dizer que o VBox, apesar de oferecer uma performance inferior a do Canvas é mais fácil para dar manutenção. Enfim, como regra geral a dica é: utilize aquele que for mais fácil para compreender em termos de código. Se observar problema de performance Refatore para outro menos legível, mas com uma performance melhor. Você terá que saber como lidar com esse “trade-off” o tempo todo.

Iniciante
Ufa! Já vi que os Containers são mesmo muito importantes para o Flex. Só fiquei com dúvida com relação ao Form. No HTML eu uso isso aí para fazer submit e processar alguma coisa no back-end. No Flex não é a mesma coisa?

Beck Novaes
Foi muito bom você tocar neste assunto, pois essa é uma dúvida recorrente do pessoal iniciante em Flex. O Flex tem um Container Form sim, mas é só para fazer o layout de um Formulário padrão - aqui você pode ver um exemplo de como é esse layout. E a maneira como o Flex interage com o Back-End é totalmente diferente da maneira como o HTML interage (exceto aplicações Ajax). Existem muitas diferenças entre a maneira de se trabalhar no Flex e se trabalhar nas aplicações Web tradicionais, de modo que eu recomendo que você evite fazer analogias no que diz respeito ao fluxo de trabalho.

Outra diferença importante, por exemplo, é que no HTML você cria praticamente uma página para cada tela. No Flex você pode ter tudo num único arquivo MXML, mas por questões de boas práticas você geralmente transforma sua tela em um Componente MXML - aqui tem um exemplo muito simples de como isso funciona. Isso não significa que você deva fazer isso com todas as telas e somente o tempo e a experiência lhe darão o “feeling” que você precisa para saber o nível adequado de “granularização”. Em outras palavras, componentes demais é ruim assim como também é ruim componentes de menos. E, infelizmente, também não existe uma receita de bolo para você seguir.

Iniciante
Tudo bem. Eu entendi que você não precisa criar um arquivo para cada tela. Mas com eu faço para navegar nestas telas?

Beck Novaes
Ah, sim! Eu já ia esquecendo. De fato existem dois tipos de Containers que você pode usar no Flex. Os Layout Containers e os Navigators Containers. Parece que você já está entendendo bem do primeiro, mas ainda não falamos do segundo. Como o próprio nome diz, os Navigator Containers provem a navegação da sua aplicação. Novamente, isso é totalmente diferente da maneira como funciona o HMTL. Um exemplo simples de um Navigator Container é o TabNavitagor que oferece a navegação entre diferentes telas através de Tabs. Neste exemplo cada VBox pode ser considerado uma tela que você pode componentizar ou não para tê-la em um arquivo externo. Outro Navigator Container muito utilizado é o ViewStack. A diferença do ViewStack para o TabNavigator é que o primeiro não possui navegação embutida (tabs) deixando-o livre para implementar a navegação conforme desejar. Além disso, para facilitar sua vida você pode ou não usar os Navigation Bars como você pode ver neste exemplo.

Iniciante
Mas Beck, me diz uma coisa: Eu vi várias pessoas fazendo o Layout da sua aplicação em Modo de Design no Flex Builder e usando States para prover a navegação. Achei isto bem fácil. Mas por que você ainda não mencionou nada a respeito?

Beck Novaes
Bem, eu não mencionei nada sobre os States porque isso é uma tentação para os iniciantes, uma vez que é realmente mais fácil. Porém, tentar utilizar ao máximo os Containers e Navigators deixa o seu código mais simples de entender e modificar. O problema é que pode demorar um pouquinho até adquirir proficiência em como usar estes componentes.

Contudo, a pior coisa que você pode fazer na sua aplicação é criar uma navegação com States usando o AddChild e o RemoveChild. Ao fazer desta forma você perde tudo aquilo que eu falei sobre o “creationPolicy” e o Deferred Instantiation. Quando você conhecer um pouco mais sobre o ciclo de vida dos componentes você verá que grande parte do trabalho de inicialização é feita no momento do AddChild. Isto quer dizer que o AddChild é custoso em termos de processamento. Agora, imagine isto para uma tela inteira com vários componentes como é o que acontece quando você cria o sua navegação da aplicação usando States?

Iniciante
Olha, eu estou de boca aberta com a quantidade de informações que temos sobre os Containers. Eu até ia te perguntar mais algumas coisas sobre outras funcionalidades do Flex, mas acho melhor eu digerir isso primeiro. Muito Obrigado e até a próxima.

Beck Novaes
Bem, embora tenhamos falado basicamente sobre Containers espero que tenha sido proveitoso. Até a próxima.