Flex 2.0 - Criando seu primeiro aplicativo

Já faz algum tempo desde que escrevi o primeiro artigo tratando sobre o Flex 1.0/1.5, desde então muita coisa mudou, ganhamos uma nova interface, menor custo e maiores opções de tornar a tecnologia possível.

por Igor Costa

Olá a todos.

Já fazem alguns anos desde que escrevi o primeiro artigo tratando sobre o Flex 1.0/1.5, desde então muita coisa mudou, ganhamos uma nova interface, menor custo e maiores opções de tornar a tecnologia possível.

Para que possamos continuar com nosso artigo, gostaria de sugerir que siga os passos abaixo:

1. Baixe a nova versão do Flex Builder no site (labs.adobe.com)
2. Caso escolha a opção de plug-in para Eclipse, deve-se baixar primeiro o Eclipse.
3.Instale com as opções padrões que vem no instalador.

Após seguir os passos acima, vamos por aqui.

A base de desenvolvimento a que chamamos de IDE, está de cara totalmente nova, antigamente quando ainda tinhamos o Flex Builder 1.5, a sua IDE era baseada no engine do Dreamweaver porém nao resolvia sérios problemas quanto a questão de aplicações complexas, o que levava muitos programadores a editar seus .mxml em editores padrões de .xml, como o da Altova. Porém essa realidade agora muda, a nova IDE, vem com a cara do Eclipse, por que ela foi desenvolvida como um plug-in para a Eclipse, como um plano de marketing para puxar vários desenvolvedores javas para a nova tecnologia, e o que podemos ver é que tá dando certo, mais e mais programadores do mundo java tão aderindo a moda do Flex.

Mas afinal o que mudou da versão 1.5 para versão 2.0?

Em maio de 2004, antiga Macromedia começa seu programa beta para uma nova tecnologia chamada Flex, desde então, só havia boatos entre alguns engenheiros ou quem era assinante da DEVNET. Foi muito bem bolada a idéia, e em Setembro do mesmo ano, abriram os portões e mostraram a todos sobre o Flex, e quais suas funções e o que ele fazia.

A Macromedia aproveitou o código utilizado em uma das suas ferramentas, carro chefe da empresa, o atual Dreamweaver e criou uma IDE para que suprisse de imediato o mercado fomento de informações sobre essa nova forma de criar RIA. No mesmo mês, a lista brasileira foi criada por mim, sendo a primeira a tratar do assunto em português, na época só 7 participantes, depois do primeiro artigo, dezenas já haviam entrado, e a maior lista sobre Flex, é criada pelo pessoal da empresa de desenvolvimento e consultoria que, hoje parte da adobe a Interation::Two, sendo essa a maior do mundo.

Em maio de 2005 a Adobe declara a compra da Macromedia. Em junho de 2005, sendo ainda Macromedia, ela começa a vender para o público licenças enterprises do Flex, e em Setembro do mesmo ano ela assina contrato firmando parceria coma fundação eclipse para iniciar uma nova IDE baseada na arquitetura da plataforma Eclipse, uma tentativa de chamar vários desenvolvedores javas a usarem Flex para desenvolver suas aplicações.

Em novembro de 2005 ela lança a primeira versão beta do Flex Builder 2, e sua IDE como forma de plug-in ou stand-alone para o público, inicia-se o processo de beta 1 ao público geral sem precisar selecionar certa parte de pessoas para testar, fica mais democratizada a forma de reportar bugs e ajudar a empresa desenvolver algo mais "perfeito", livres de falhas. Em dezembro de 2005 a compra da Macromedia pela Adobe é autorizada pela justiça americana, agora toda linha de produto da Macromedia passa a poder de controle da Adobe, sendo esta a se tornar a sexta maior produtora de software mundial.

Janeiro de 2006, a Adobe decide mudar os planos de venda sobre o Flex, torna-lo mais acessível a pequenas e médias empresas desenvolvedoras de aplicações ricas, e em fevereiro o Beta 2 está disponível com uma nova onda, " OPEN-SOURCE", exato, foi um grande avanço, a Adobe está dando um compilador gratuito junto com o SDK se voce quiser utilizar a tecnologia em qualquer IDE que seja de seu gosto, ou se você preferir usar a IDE deles pagando um singelo preço, até o momento não mencionado. Então entramos nos meses consecutivos até final de maio, onde a Adobe lança a última versão mais estável do Flex e o Flex Builder e abre ao público a versão do Flash Player 9, antes considerada 8.5, mudando também várias formas de vender acessórios vindos dela mesma para empresas, como data collections, gráficos e uma integração com a nova onda "AJAX". Com isso nos sobra o presente atual, junho desse ano onde estou voltando a escrever esse artigo e deixa-lo informado de tudo aconteceu, chega de história por agora, vamos dá uma olhada no que temos por enquanto.

Bom, voltando, a nova IDE, vem com vários recursos já conhecidos da comunidade eclipse, e alguns apetrechos que foram feitos especialmente para se trabalhar com Flex. Vamos dá uma conhecida na nova IDE, e ver como ela pode nos ajudar.

Start Page



Como toda a família de software vindos da Macromedia, a Adobe segue com a mesma idéia, no Start Page do Flex Builder, ela reúne todas as características que podem ajudar desenvolvedores novos, como também para desenvolvedores experientes que queiram descobrir o que há de novo no editor.

Navigator

Navigator é o que chamamos de organizador de projetos, nele você ou seu time vai visualizar todos os projetos que estejam acontecendo na IDE. como visto na figura ao lado existem vários projetos simples que criei para demonstrar seu uso, usando o botão direito do mouse sobre cada projeto que você deseja exibir e clicando na opção " Go Into", ele vai exibir apenas o projeto selecionado, para voltar a exibir todos os projetos basta apenas usar o menu de navegação nele mesmo que é simbolizado pelas setas de voltar e ir.

Como o Flex Builder organiza seus projetos?

Quando um projeto novo é criado pelo Flex Builder a arquitetura de organização das pastas são estas.



Não que necessariamente é obrigatório o uso dessa forma de publicar, é apenas a forma padrão que o Flex Builder tem para gerar seus .swf"s no local correto, a pasta html-template pode até ser deletada e usar apenas a pasta bin, porém não será publicado com o history dos filmes em .swf para que o navegador possa interpretar como etapas da aplicação, é como se você tivesse navegando em uma aplicação html, porém usando o Flash Player para isso.

Criando nossa primeira aplicação com Flex Builder 2.0

Para criar nossa primeira aplicação, é necessário criarmos nosso projeto primeiro. Para isso só ir no menu File > New > Flex Project.

Ao selecionar essa opção vai aparecer a seguinte caixa de diálogo, perguntando quais opções sua aplicação Flex vai requerir para funcionar.

A primeira opção é criar alguma aplicação que se conecte ou se comunique com XML, PHP,ASP.net, JSP, que são linguagens server-side que se conectam com o Flash Player através das classes de loadMovie e LoadVars.
A segunda opção é caso sua aplicação precise usar algum objeto ou receber dados vindos do ColdFusion que está conectado ao Flash Remoting, isso também vale para opções caso forem usadas como AMFPHP.
E a terceira e última opção é para aqueles que querem usar o novo serviço que a Adobe disponibilizou junto com a família flex para conectar-se direto com Banco de dados ou serviços de dados.

A primeira opção é a que iremos usar, então clique em next, e seguimos para o próximo passo.

A próxima tela é apenas para colocar um nome novo para seu projeto, lembrando que não aceita espaços entre o nome dos projetos, no meu caso irei usar "boas_vindas", sem aspas, seguimos então ao próximo passo.

Nessa última parte do wizard se você quiser clicar em Finish, seu projeto já tá pronto, porém caso queira adicionar algumas opções a mais em seu projeto, simples, você pode adicionar icones, imagens, sons, etc usando Source Path para adicionar pastas que estejam por exemplo na pasta de Meus Documentos fora do main source da aplicação que tenha algo que você precise, entretanto não iremos usar isso por enquanto, clicando em Finish vamos finalizar a criação de nosso projeto.

Automaticamente irão ser criadas aquela estrutura de pastas que foi mencionada acima, e abrirá o editor de MXML a direita.

A visualização pode ser alterada em modo design, com o modo design ativado, a IDE, vai exibir as seguintes caracteristicas.

Acima você vai ver os botões que são usados para delimitar o refresh, caso você venha apresentar algum problema quanto a adicionar um container ou tag e não exibia, só clicar lá que ele ler novamente o MXML e remonta no modo design.
O State é bem importante na aplicação flash, digamos que ele seja um frame como era usado no Flash, que é baseado em time-line, então State é um frame que adsorve todas as telas que sua aplicação vai ter, a cada State cria-se uma nova tela.
Design Area é apenas para exibir a aplicação para modo de visualização, a opção Fit to window é a mais indicada.

Na figura abaixo você vai observar o que eu falei acima sobre States, é onde você vai criando as telas para suas aplicações, tanto pode ser feito usando actionscript 3 como também pode ser feita usando MXML com ou sem o modo layout.
Logo abaixo você vai ver todas as propriedades que podem ser usadas para sua aplicação ficar costumizada. Você pode acertar parametros de cores, tamanho, fontes, etc. Suas aplicações Flex podem ser costumizadas usando CSS. Incrível não é?

E por fim para finalizarmos a parte de conhecendo a IDE, temos na figura abaixo os componentes que já vem padrão na instalação do editor. Existem vários componentes que vão te ajudar a criar mais controle para seus aplicativos, tanto que de forma bem mais fácil, um design de interface de um time pode fazer as telas da aplicação sem precisar digitar nenhuma linha de código.

Como você já conheçe a IDE nova do Flex, chega a hora que você pode criar sua primeira aplicação, continuando o exemplo que dei acima do boas_vindas, vamos continuar no modo Source, para criarmos nosso famos "Olá mundo", no Flex 2.0.

Antes de tudo uma breve explicação do que é MXML.
O MXML nada mais é que um XML só que formatado com novas tags, basicamente é um XUL ( Extensible User Interface Language), com o MXML é a mesma coisa de está programando tanto em XML como na sintaxe do HTML.

Relembrando um pouco de HTML.

No HTML, você deve abrir e fechar um tag, no MXML é a mesma coisa e no XML também, porém no XML você não precisa criar um diretório de nódulo raiz, você pode declarar os quais você quer e ele obece suas ordens. No MXML é um pouco diferente, ele não obece a isso, ele precisa de um tag principal que delimita que tipo de MXML ele vai escrever, como em nosso caso, vamos usar um Application, é necessário declararmos.

Ficando assim:

Veja que,o formato é puramente XML, ele precisa criar essa formatação com cabeçalho em XML para usar o code hints ou intelli scene do editor, para ajudar o programador na hora de elaborar suas aplicações. Porém não se preocupe com isso a IDE já faz todo esse trabalho para você, é como no Dreamweaver, você cria uma nova página HTML, mas não precisa digitar todas as tags que compõem o formato do documento.

Dentro dos tags Applications, crie um chamado label como mostra abaixo.

Se você mudar para o modo Design, vai perceber que o texto "Olá mundo!", foi impresso em nossa aplicação, entretanto se caso você quiser mudar a posição desse texto no aplicativo, é simples, basta adicionar os eixos cartesianos x e y. Veja abaixo.

Feito isso vamos testar nossa aplicação, salve o documento, File > Save. Depois coloque o Flex Builder para publicar seu aplicativo e veja como fazer.
Vá até o menu superior como indica a figura abaixo, siga onde mostra em vermelho.

E o resultado vai aparecer em seu navegador padrão.

Este é apenas um tutorial básico que você pode criar usando o Flex Builder, eu apenas coloquei ele para que você fique mais familiarizado com a nova IDE, e daqui para frente aplicações reais podem ser mostradas, Agradeço sua leitura.

Onde devo ir à partir daqui? Simples junte-se a lista de discuções, aos fóruns que tratem desse assunto, uma boa dica é o grupo Flex-Brasil aque está sob o Yahoo Groups, até a próxima.