Configurando um Ambiente para Desenvolvimento com Flex e a Primeira Aplicação

Essa semana, eu e o kinja estavamos conversando sobre flex java e tals, e do nada ele teve uma ideia de um site! revolucionário claro! heheh então nós bolamos a idéia de fazer em flex com java

Mas então vamos la!!

Primeiro vamos configurar para Desenvolver usando Flex! +)

Requerimentos:
--Ambiente configurado para desenvolvimento em JAVA
--Eclipse 3.2.2 (Mirror: UFPR)
--Flex Builder 2.0 Trial (É necessário fazer um cadastro para baixar)

1. Depois de Baixado os links primeiro instale o Eclipse, é muito facil, só avançar e avançar e bla bla! +), recomendo instalar no diretório c:/ Ficando C:/Eclipse/
   
   


2. Agora é soh instalar o flex Builder também muito fácil:
   
   

a) Na Primeira Tela ele pedirá aonde vc quer extrair o arquivos, deixe o padrão.

b) Depois ele pedirá se vc quer instalar o Flex limpo somente ele e o Eclipse (Flex builder and Flex SDK), e instalar o Flex Builder como se fosse um Plugin adicional para um Eclipse Já instalado (Flex Builder Plugin And Flex SDK), Vamos utilizar a segunda Opção.

c) Depois é ir avançando até o momento onde ele pedira para localizar o Eclipse Instalado e Pronto!!
seu ambiente já está ok!! para desenvolvimento! +)

Se alguem Quise tenho esse aqui...

• Plugin Flex Builder 2.0;
• SDK Flex 2.0;
• SDK Apollo;
• Plugin PHP;
• Plugin Search Koders;
• TomCat Server 6.0 c/ Plugin;
• Pluigin Xampp;

Isto é, bem completinho para desenvolvimento WEB!

Link Para Download:
Link

Vamos Primeira Aplicação?

1 - Abra seu Eclipse, e selecione a perspective FLEX;
(Window -> Open Perspective -> Other -> Flex Development)

2 - Vamos criar um Novo Projeto Flex;
(File -> New -> Flex Project)

3 - Nesta proxima Janela selecione o modo "Basic (e.g XML or PHP, JSP, .NET)" e avance;

4 - Coloque nome "OlaMundo" em Project Name e clique em FINISH;Percebe que ele já cria os diretórios necessários para o desenvolvimento e já abre um OlaMundo.mxml

Nesse mxml, vc tem o modo Source e o modo Desing, clique em Desing

a) Na aba Components, clique em Button e arraste para o Desing.

b) Clique em Source e na tag perceba ali que que vc pode mudar o label e tem o x e o y, estes regulam a localizaçao do componente.

c) Agora Complete como na imagem abaixo:

Depois de digitado vamos compilar esta aplicação:

Na View " Navigator " clique com o Botão direito do mouse em OlaMundo.mxml e vá até Run AS e clique em Flex Application, com isso ele compila gera um .swf, esse gerado na pasta bin ali em navigator.

Aplicação Rodando:
http://digows.orgfree.com/flexdemos/olamundo/

Source do Exemplo:
Link