| 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. |
Precisa de um freelancer, códigos-fonte e exemplos completos?
Códigos-fonte 
Bancos de Dados
Usuários On-Line
Conhecendo o Flex Builder - Da
instalação à primeira aplicação
Veja dicas, truques e anotações de 
Delphi - 
