1 - Introdução

O Adobe Flex Builder é uma IDE baseada no Eclipse e usada para o desenvolvimento de aplicações ricas para a Internet (RIAs) com o framework Adobe Flex. Ao usar o Flex Builder, os desenvolvedores poderão rapidamente construir e liberar aplicação expressivas, intuitivas e ricas em interatividade. O Flex Builder é um ambiente de desenvolvimento produtivo que torna fácil a customização de aplicações de modo a conseguir a aparência e funcionalidade desejada.

A adição do Adobe Flex Charting permite aos desenvolvedores adicionar tabelas ou gráficos dinâmicos às aplicações Flex e visualizar dados de forma interativa e dinâmica. Simplesmente arraste e solte os diferentes tipos de tabelas em suas aplicações, liga-as às fontes de dados e os componentes de gráficos são dinamicamente renderizados no cliente (aplicativo ou browser). É muito fácil adicionar ações, efeitos ao passar o mouse e outras formas de interatividade que tornam os gráficos mais útil, consequentemente, levando a melhores decisões de negócios.

2 - A Instalação

Neste artigo descreveremos como instalar a versão 2 Trial do Flex Builder. Acreditamos que o procedimento não deve ser muito diferente para as versões em CD e/ou mais recentes.

O primeiro passo é baixar o Flex Builder. Para isso, aponte seu navegador para http://www.adobe.com/products/flex/flexbuilder. A versão que baixamos é a completa para Windows para usuários que não possuem o Eclipse instalado. O nome do arquivo é FLXB_2.0_Win_WWE.exe e seu tamanho é 168Mb.

Finalizado o download, dê duplo-clique sobre o arquivo de instalação. Você verá a seguinte tela:



Este tela permite a escolha do local no qual os arquivos temporários da instalação serão colocados. Aceite o valor padrão e clique o botão Next. A tela seguinte fará a descompactação dos arquivos de instalação. Aguarde alguns segundos até este processo ser concluído. Veja a tela seguinte:



Nesta tela podemos escolher a forma como o Flex Builder será instalado. Na primeira opção teremos uma instalação da IDE, do SDK, ferramentas de linha de comando e Flash Player 9. Na segunda opção o Flex Builder será instalado como um plug-in para o Eclipse. Nesta instalação escolheremos a primeira opção. Clique Next para prosseguir com a instalação. O restante da aplicação segue o modelo "Next...Finish". Apenas tenha a certeza de informar um diretório de instalação que não contenha espaços, por exemplo "C:\Flex_Builder_2". Isso facilita muito quanto tivermos que trabalhar diretamente com as ferramentas de linha de comando.

3 - Criando sua primeira aplicação usando o Flex Builder

Finalizado a instalação, chegou a hora de criarmos nossa primeira aplicação. Para isso, vá em Iniciar -> Programas -> Adobe -> Adobe Flex Builder 2. Você verá seguinte tela:



Esta é a tela inicial do programa. Hora de clicar à vontade e conhecer melhor o programa. Para criar sua primeira aplicação vá em File -> New - Flex Project. Na tela seguinte deixe a opção Basic marcada e clique Next. Dê o nome "OlaMundo" ao projeto e clique Finish.

Em Navigator, localize o arquivo OlaMundo.mxml e dê duplo-clique nele. Isso fará com que este arquivo, que é o arquivo principal da aplicação, seja aberto na janela de código.

Na janela de código clique em Design. Você agora verá a tela da aplicação e os componentes já aparecerão na janela Components. Arraste um component Button para a janela da aplicação. Clique em Source na janela de código e você verá que o código abaixo:

<mx:Button x="10" y="10" label="Button"/>

foi adicionado ao arquivo OlaMundo.mxml. Volte novamente ao Design e selecione o botão. Em Flex Properties, localize On click e informe o valor mostrarMensagem(). Volte ao Source e verá que agora temos:

<mx:Button x="10" y="10" label="Button" click="mostrarMensagem()"/>

Como podemos ver, quando o botão for clicado, a função mostrarMensagem() será chamada. Assim, logo abaixo do código do botão, coloque o seguinte código ActionScript:

<mx:Script> <![CDATA[ import mx.controls.Alert; private function mostrarMensagem():void{ Alert.show("Fui clicado!", "Teste"); } ]]> </mx:Script>

Revise todo o seu trabalho, certifique-se de que o código para o arquivo OlaMundo.mxml fique bem parecido com:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="348" height="225"> <mx:Button x="10" y="10" label="Button" click="mostrarMensagem()"/> <mx:Script> <![CDATA[ import mx.controls.Alert; private function mostrarMensagem():void{ Alert.show("Fui clicado!", "Teste"); } ]]> </mx:Script> </mx:Application>

Hora de testar. Vá em Run -> Run OlaMundo. Você terá o seguinte resultado:



Experimente clicar no botão e verá uma caixa de mensagem com os dizeres "Fui clicado!".

Parabéns. Você acaba de escrever sua primeira aplicação Flex usando o Flex Builder. Agora é só estudar e ver a nossa seção de dicas sobre esta fascinante linguagem.

Graduado em Ciência da Computação pela UNIP (Universidade Paulista) e atualmente morando em Goiânia-GO. Desde 1998 tem atuado no desenvolvimento de sistemas, seja como responsável principal ou como freelancer ou consultor. Entre as linguagens que já desenvolveu pode-se incluir Java, Delphi, C++, Python, Perl, PHP, Ruby, etc. Alguns projetos já desenvolvidos incluem salas de chat, fóruns, sistemas de gerenciamento de notícias, blogs, sistemas de helpdesk, sites corporativos, sistemas acadêmicos e financeiros. É o proprietário e principal editor de conteúdo do site Arquivo de Códigos.

Atua também como professor do curso de Sistemas de Informação da Faculdade Delta (http://www.faculdadedelta.edu.br)

Este usuário atua como freelancer Veja a relação de freelancers

Use este formulário para inserir um novo comentário para este artigo ou tutorial. É preciso estar logado no site. Se você já um usuário registrado, efetue o login no menu esquerdo de nossas páginas.

Título do comentário:

Seu comentário:

Dicas de formatação: Não é permitido código HTML nos comentários. No entanto, você pode conseguir boas formatações usando: [b][/b] - para negrito [ul][/ul] - para listas não ordenadas [li][/li] - para itens da lista [pre][/pre] - para exibir trechos de códigos-fonte (de forma a manter a formatação e facilitar a leitura)

Escrevendo um sistema de login de usuários usando Flex + PHP

Criando sua primeira aplicação em Adobe Flex

Conhecendo o Flex Builder - Da instalação à primeira aplicação

Baixando, instalando e testando o SDK do Adobe Flex no Windows

Qt - Instalando e escrevendo sua primeira aplicação Qt no Windows

Java - Quer aprender Java? Comece instalando, testando o SDK e escrevendo o seu primeiro programa Java

Java - Aprenda a manipular bases de dados MySQL usando Java :: Obtendo uma conexão com o banco de dados MySQL

MySQL - Como instalar o MySQL Query Browser no Windows

Ruby On Rails - Instalando Ruby On Rails no Windows

Python - Instalando e executando Python no Windows

Perl - Escrevendo seu primeiro programa Perl no Linux Ubuntu

Apache Tomcat - Entendendo a chamada à pagina inicial do Tomcat

AJAX - Introdução ao processamento assíncrono usando AJAX

Apache Tomcat - Estrutura básica de uma aplicação web desenvolvida em Java

C++ - Criando uma aplicação C++ Console usando o Visual C++ 2005

Apache Tomcat - Testando a instalação do Tomcat

Perl - Instalando e executando Perl no Windows

C++ - Escrevendo sua primeira aplicação de interface gráfica usando wxDev-C++ e wxWidgets

Java - Aprenda a manipular bases de dados MySQL usando Java :: Entendendo como programas Java se conectam a uma base de dados

Tipos de dados da linguagem Java