java Tutorial Flex para mortais comuns

[iMelo~' 17]

Flex para mortais comuns

 

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 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 piscada

 

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.

 

 

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/***/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

 

 

 

 

 

Créditos: numaboa