Detalhes

Categoria: Flex

Atualização: Sábado, 27 Fevereiro 2010 14:12

Autor: vovó Vicki

Acessos: 7314

No início era tudo página estática. Depois vieram os gifs animados, os applets java e, finalmente, o flash. Ainda tenho viva na minha memória a euforia que os arquivinhos swf causaram (e ainda causam) na ocasião. Eu literalmente babava com as imensas possibilidades de interatividade e com a liberdade de design, mas...

Porque sempre tem que haver um mas? É por que sempre procuramos algo mais - e este algo mais tem o nome de Flex. Explico. Naquelas priscas eras da web "paradona", o flash era um verdadeiro colírio para os olhos e uma tentação irrecusável. Entusiasmada, passei a criar algumas coisinhas usando a nova tecnologia (na época oferecida pela Macromedia, hoje da Adobe) até que esbarrei num "pequeno" detalhe: os arquivos flash aninhados em páginas HTML eram estanques. Não conseguiam conversar com o servidor web porque eram baixados para o computador do usuário para serem executados localmente, uma limitação importante quando se trata de interatividade. Perdi o encanto quando esbarrei nesta limitação e em algumas outras, como o tempo enorme que levava o download destes arquivos na pré-história do acesso à web com conexão discada. Mas isto são águas passadas. Hoje a conexão é mais rápida e hoje também existe o Flex.

O que é o Flex

O Flex é a ponte que todos estavam procurando. Usando a linguagem MXML, o Flex cria arquivos flash (swf) capazes de conversar com o servidor web, ou seja, apesar da execução ser local, é possível enviar informações para o servidor e acioná-lo para executar tarefas como acessar um banco de dados e/ou processar as informações enviadas.

A MXML (Minimal XML) é uma biblioteca pequena, rápida e versátil que lê um arquivo XML e o coloca numa árvore DOM. Entenda o DOM como um idioma comum entre o browser e o servidor, é a forma como eles se entendem. Os aplicativos Flex são arquivos flash (swf) que incorporam um script MXML, responsável pela comunicação cliente-servidor.

Flex Builder

Como qualquer outra programação, podemos fazer tudo na unha ou usar um aplicativo que use a API do Windows para nos auxiliar na tarefa. A Adobe oferece um aplicativo deste tipo, o Flex Builder. Infelizmente esta ferramenta de programação é cara pra caramba, mas... é isso aí, tem sempre um mas

Para os mortais comuns que quiserem apenas aprender a pilotar o Flex Builder, a Adobe oferece uma cópia gratuita sob certas condições para estudantes ou profissionais desempregados. Escolhi os "desenvolvedores desempregados" por que, neste caso, não é preciso fornecer nenhum documento. Acesse a página dos desempregados, marque Do you accept this terms? e clique no botão [Next]. Na página seguinte preencha seus dados e envie. Forneça um endereço de email válido por que, no máximo em duas semanas, você vai receber um serial que desbloqueia a versão trial. Enquanto isto, faça o download do Flex Builder e instale-o. Você poderá usá-lo por 60 dias. Caso a licença não for enviada, faça contato pelo email O endereço de e-mail address está sendo protegido de spambots. Você precisa ativar o JavaScript enabled para vê-lo. (não se esqueça, o pessoal só entende inglês!).

Apresentação do Flex Builder

A interface do Flex Builder é mostrada ao lado. O menu tradicional fica no topo da janela e oferece os itens File, Edit, Source, Design, Navigate, Search, Project, Data, Run, Window e Help. Cada um deles vai ser explicado nos próximos tutoriais. Logo abaixo fica uma barra de ferramentas. O restante da janela é dividida em vários painéis.

O primeiro painel, localizado no campo superior esquerdo, é o Flex Navigator. Ele mostra a estrutura de diretórios (ou pastas) onde estão os projetos. Neste exemplo o arquivo /olaMundo/src/olaMundo.mxml está destacado.

O painel superior central é a área de criação visual e de script. No topo deste painel existem abas para cada projeto aberto. No exemplo, há a aba [Flex Start Page] (inativa) e a aba [olaMundo.mxml] que está ativa. Para incluir um projeto neste painel basta dar um duplo clique no arquivo principal do projeto listado no Flex Navigator ou criar um novo projeto. Logo abaixo das abas há uma barra de ferramentas. Observe que o botão [Design] foi ativado. É por isto que a área de edição mostra a aparência visual do projeto. Se o botão [Source] estivesse ativado, esta mesma área mostraria o script do projeto.

Note que existe um componente ativado na área de edição. É um componente do tipo painel (panel) e sabemos que está ativo por que mostra uma borda com 8 pontos brancos de referência. Para ativar um componente basta clicar sobre ele. Assim que for ativado, o painel inferior direito, chamado de Flex Properties, mostra o tipo e todas as propriedades do objeto: mx:Panel nos diz que se trata de um painel, Title:Quem está numa boa? indica o título deste objeto e assim por diante. É no painel Flex Properties que podemos atribuir valores às propriedades dos objetos para que tenham a aparência e o comportamento desejados.

Na parte inferior esquerda fica o painel dos componentes. Com um simples clique, arraste e solte podemos colocar uma grande variedade de objetos na área de edição. Os componentes estão divididos em Controles, Layout, Navegadores e Gráficos. A maioria são velhos conhecidos como botões, caixas de texto, imagens e listas. O bacana é que, assim que colocamos um novo objeto na área de edição, o código correspondente é inserido automaticamente na área de script.

Só ficaram faltando os painéis States e Problems. O painel States fica na posição superior direita e mostra todas as partes (os "estados") da aplicação. No exemplo, há apenas uma parte: o estado básico (basic state) responsável pelo início (start) do aplicativo. O painel Problems fica no centro, logo abaixo do painel de edição. Caso ocorram problemas durante o processamento (erros no script ou erros durante a compilação), este painel lista as ocorrências.

Sugestão para quem está começando

Crie um novo projeto e coloque alguns objetos na área de edição. Altere algumas propriedades dos objetos e observe em tempo real as mudanças. Faça de tudo um pouco - que não vai servir para nada - só para pegar o jeito. Quando inserir um novo objeto, clique na aba [Source] do painel de edição para ver o código que foi introduzido. Isto também serve para ir se acostumando com o MXML e o ActionScript do flash.

Aqui está o mapa da mina para criar um novo projeto. Clique nas imagens para ampliá-las e ler a explicação.

Finalmentes

Este tutorialzinho só serviu para conhecer um pouco do Flex e da interface do Flex Builder. Para começar a produzir alguma coisa que funcione você vai precisar ler os tutoriais seguintes. Sugestão: acompanhe os tutoriais na sequência apresentada, por que conceitos e dicas não são repetidas nos tutoriais subsequentes.

Divirtam-se e abraço da vó