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.

Desde os tempos de Macromedia eu sinto que muitas pessoas aprendem tanto sobre Flex nos Coffee Breaks quanto no próprio treinamento. Com base nisto e na confiança de que eu tenho de que a documentação do Flex é boa eu começo aqui uma série de artigos que simulam um bate-papo entre eu e uma pessoa iniciante em Flex. Espero que a idéia funcione e que esta serie de artigos sirva como referência para as pessoas que estão começando e até mesmo para aquelas já tem algum conhecimento de Flex.

Iniciante
Olá Beck Novaes, eu sou iniciante em Flex e gostaria de criar a minha primeira aplicação. Você conhece algum tutorial que mostra como fazer isso?

Beck Novaes
Olá “Iniciante”. Você pode acessar a documentação do Flex que, ao contrário do que muitos dizem, eu considero muito boa. Para você começar eu recomendaria este exemplo.

Iniciante
Olá Beck Novaes, sou eu de novo. Eu fiz o tutorial que você recomendou e funcionou direitinho. Mas fiquei interessado em saber mais. O Flex tem um tal de MXML. Para que serve isso? E o ActionScript? Qual a diferença entre os dois?

Beck Novaes
Olá “Iniciante”. É bom ver que quer aprofundar os seus conhecimentos. Bem, vamos as respostas. O MXML é a notação XML que faz parte do “framework” do Flex para definir a interface. Já para fazer a parte lógica da sua aplicação você usa o ActionScript. No fundo o MXML só existe por uma questão de conveniência. Isto porque o XML é a melhor maneira de definir interfaces de usuário programaticamente. Ou seja, para definir a interface o XML é mais apropriado do que as linguagens de programação tradicionais. É por isso que toda tecnologia nova está partindo para este caminho para definir as interfaces de usuário. Por outro lado, o XML não é tão bom quanto as linguagens de programação tradicionais para fazer a parte lógica da sua aplicação. É aqui que entra o ActionScript. Você pode encontrar na documentação mais informações sobre a sintaxe MXML e sobre como usar o ActionScript.

Iniciante
Olá Beck Novaes, sou eu mais uma vez (hehehe). Interessante esse negócio de definir a interface usando o XML. Também dei uma olhada no ActionScript. A sintaxe lembra o Java e o C#. Mas ela é Orientada a Objetos ou Orientada a Eventos?

Beck Novaes
Esse negócio de ser ou Orientado a Objetos ou Orientado a Eventos não é exclusivo como muita gente pensa. Ou seja, pode ser as duas coisas – e esse é o caso do Actionscript. Se você for pesquisar verá que os Eventos e a Orientação a Objetos surgiram praticamente juntos para atender as Graphic User Interfaces. Os Eventos provêem uma maneira excelente de comunicação entre diferentes objetos.

Quando você trabalha com os componentes prontos do Flex você geralmente usa os eventos. Mas quando você for mais experiente em Flex você criará os seus próprios eventos para diminuir o acoplamento na sua aplicação. Você descobrirá também que no ActionScript os eventos podem ser propagados tal como faz parte da especificação do ECMA. Porém, isto não é muito comum aos programadores acostumados com outras tecnologias. Além disso, como os eventos podem ser tratados por diferentes Event Handlers (tratadores de eventos) você pode definir a prioridade deles. Em outras palavras, se houver mais de um Event Handler para o mesmo evento você pode definir qual será executado primeiro quando o evento for disparado.

Vale mencionar também que se você tem um background apenas de programação Web eu recomendo que pesquise a fundo os Eventos no Flex – um fator chave para você desenvolver bem suas aplicações.

Iniciante
Olha, eu até conhecia um pouco sobre eventos, mas esse negócio do Evento Propagar é novidade para mim.

Mas deixando os eventos um pouco de lado, vejo que o Flex é muito forte na parte visual. Por isso, sinto que é importante entender bem como funciona os componentes visuais. Você poderia me dar umas dicas?

Beck Novaes
Claro que sim! Bem, os componentes visuais do Flex também fazem parte do SDK. Este SDK do Flex foi projetado para tirar proveito da Orientação a Objetos e assim facilitar a utilização e a manipulação destes componentes. Por exemplo, aqui você pode ver que todos os componente do Flex herdam de uma classe chamada UIComponent. Esta classe provê métodos, propriedades, estilos e efeitos (Behaviors) comuns a todos os componentes. Os Behaviors são uma feature do Flex que lhe permite adicionar transições e animação e enriquecer a sua aplicação.

O Flex possui na implementação do seu SDK um conjunto de rotinas que controlam o layout, o tamanho e o ciclo de vida dos seus componentes. Existe toda uma nomenclatura para estes recursos tais com posicionamento absoluto, posicionamento relativo, tamanho explicito, tamanho default, etc. Enfim, não adianta eu ficar aqui tentando lhe explicar tudo isso. Por isso é importante você dar uma olhada neste link.

Em resumo, você geralmente trata eventos de um componente visual, aplica estilos e aplica efeitos (behaviors). Tem também uma coisa chamada skin que lhe permite mudar totalmente a aparência do seu componente. Ah! E você pode fazer todas essas alterações em tempo de execução.

Iniciante
Caramba! Vejo que essa documentação é boa mesmo. O que faltava era alguém um pouco mais experiente para me mostrar onde encontrar o quê. Até agora estamos indo muito bem. Mas existiria algo mais que você poderia me falar sobre os componentes de interface?

Beck Novaes
Bem, eu poderia lhe falar também que existe um grupo de componente que lida com dados. Este componentes são chamados de Data-Driven components. Todos eles possuem uma propriedade chamada “dataProvider” que serve para manter os dados que eles apresentam. Você já ouviu falar de MVC? Pois bem, você pode pensar que cada um destes Data-Driven components possuem seu próprio MVC. Cada um deles tem um model para manter os dados (dataProvider) e podem apresentar estes dados de uma maneira diferente (View). Por fim, como já foi dito anteriormente, todos eles possuem eventos que tratam da interação com o usuário (control). E assim como no MVC a grande vantagem disso é que você pode mexer em cada uma das camadas sem interferir na outra. O ComboBox, o List e o DataGrid, por exemplo, podem apresentar o mesmo dado de uma maneira diferente.

Além disso os DataProviders trabalham com Collections. As coleções provem maneiras de manipular o Model, ou seja o dataProvider. Estas coleções são abstratas de tal forma que se você souber usar a API corretamente você poderá ter bastante flexibilidade no Model dos seus componentes.

Bem, creio que isso já é bastante informação por hoje. Você tem muito conteúdo para digerir. Portanto, sugiro continuarmos o posso bate para daqui há alguns dias, ok?

Iniciante
Você tem razão. Creio que isso já é o suficiente para eu me divertir pelo resto da semana. Até mais.