Quando vamos desenvolver uma aplicação em Flex, temos como ferramenta padrão a IDE Flash Builder, que é uma ferramenta comercial da Adobe, entretanto, o Flex SDK, que constitui todo o ferramental para a compilação dos projetos do Flash Builder, é uma solução gratuita, sendo que qualquer um pode baixá-lo e usá-lo em qualquer outra IDE que desejar, ou mesmo desenvolver seus códigos em qualquer editor de texto.

Apesar do Flash Builder ser uma solução comercial, existe também uma versão gratuita do mesmo que pode ser obtida por estudantes, professores ou profissionais, desde que não o usem para fins comerciais. Esta versão pode ser obtida em http://www.adobe.com/devnet/flex/free/index.html.

Uma alternativa ao uso do Flash Builder é o FlashDevelop, uma IDE gratuita desenvolvida em .Net. Hoje iremos aprender como utilizar essa IDE para criar nossos projetos, além de aprender como baixar, instalar e configurar o Flex SDK.

Como já dito, o Flex SDK pode ser obtido gratuitamente no site da Adobe. A página de download é esta aqui. Neste link, são apresentados vários links, sendo que o principal para nós é este aqui que lista todos os downloads disponíveis do Flex SDK 4. Uma alternativa a estes links é este aqui, que vamos utilizar para fazer o download do Flex SDK. A vantagem desta página é que ela já vai nos redirecionar para a última versão do Flex SDK.

Para fazer o download, basta preencher o formulário e clicar em “Download now”. Logo que você clicar, o download vai iniciar. Para a versão que baixei (4.1) o tamanho do download foi de cerca de 171 MB. Sendo assim, baixe o arquivo. Assim que terminar, escolha onde vai salvar os SDKs, sugiro a raiz de qualquer partição. Crie então uma pasta chamada “Flex” e dentro dela uma pasta chamada “sdks”. No meu caso, o caminho para a pasta sdks ficou “D:\Flex\sdks\”. Dentro da pasta “sdks”, crie uma pasta com o número da versão do Flex. No meu caso, 4.1.0, e descompacte o conteúdo do arquivo baixado (no meu caso foi o flex_sdk_4.1.zip) na pasta criada. Deve ficar assim:

 

Figura 1

Flex SDK 4.1.0 descompactado

 

Note que você pode escolher o caminho que quiser para descompactar, estou apenas sugerindo um local. Note também que caso você já tenha instalado o Flash Builder 4, ele já vai vir com dois SDKs instalados, o 3.5 e o 4.0, que podem ser encontrados na pasta “sdks” que fica contida dentro da pasta onde o Flash Builder foi instalado.

Muito bem, até aqui tranquilo. Outro detalhe é que para você utilizar o compilador do Flex, você precisa instalar o Java SDK (JDK). Para isso, acesse esse link aqui, baixe o JDK e instale. Agora vamos fazer com que consigamos acessar pela linha de comando tanto o compilador do Java quanto do Flex. Para fazer isso, precisamos configurar uma variável de ambiente chamada “Path” no Windows. No Linux, a variável tem o mesmo nome. Para configurar essa variável, primeiro precisamos procurar onde fazer isso. O assistente para configurar variáveis de ambiente no Windows pode ser encontrado nas propriedades do sistema. Para chegar lá, você tem algumas alternativas. No Windows XP, procure pelo ícone “Meu Computador”, clique com o botão direito e vá em propriedades. No Windows Vista ou no 7, abra o menu iniciar, procure o item “Computador”, clique com o botão direito e vá em propriedades. Um atalho é win+pause. A janela sobre informações do computador vai abrir, nela procure por “Configurações Avançadas do Sistema” e clique nessa opção. A janela de propriedades do sistema vai ser aberta. Tanto no Windows XP quanto no Vista ou 7, procure pela aba “Avançado” e dentro dela, procure pelo botão “Variáveis de Ambiente…” e clique nele. Veja a Figura abaixo.

 

Figura 2

Acessando as variáveis de ambiente

 

Na Figura acima a janela de propriedades do sistema do Windows 7 é mostrada. Tanto no Windows XP quanto no Vista a janela é praticamente igual a esta. Ao clicar no botão “Variáveis de Ambiente…” uma nova janela se abrirá. É nela que as variáveis são criadas e configuradas. Existem dois escopos para essas variáveis. Um dos escopos é o escopo do usuário corrente (destacado em roxo) e o outro é o escopo das variáveis do sistema (em laranja). Eu gosto de alterar a variável do sistema e não a do usuário. Fazendo isso, a configuração é refletida para todo o sistema e não só para o usuário que a configurou. Veja a Figura abaixo.

 

Figura 3

Variáveis de ambiente

 

Note que na área destacada em laranja – que corresponde às variáveis do sistema – está destacada, em azul, a variável “Path”. Procure por essa variável na sua janela, selecione-a e clique no botão “Editar”. Na Figura seguinte é mostrada a janela que irá aparecer, ou seja, a janela para configurar o valor dessa variável.

 

Figura 4

Variável "Path"

 

O valor da variável “Path” é composto por uma série de “caminhos” (Path), ou seja, referências para diretórios onde estão contidos programas ou bibliotecas que devem ser enxergados de forma global pelo sistema operacional. Esses caminhos são separados pelo símbolo do ponto e vírgula “;”. Vamos então editar nossa variável para apontar para o diretório “bin” do JDK, onde estão as ferramentas do JDK como o compilador Java e o interpretador, e também vamos inserir o caminho do “bin” do Flex SDK, permitindo assim que possamos chamar o compilador do Flex pela linha de comando.

Primeiramente, posicione o cursor no campo “Valor da variável” e vá até o final do campo. Insira um ponto e vírgula e cole o caminho do “bin” do JDK. Após colar, insira outro ponto e vírgula e agora cole o caminho do “bin” do Flex SDK. No meu caso, a variável “Path” ficou com o seguinte valor:

<valor antigo>;C:\Program Files (x86)\Java\jdk1.6.0_20\bin;D:\Flex\sdks\4.1.0\bin

Sendo que <valor antigo> representa o que tinha anteriormente no campo “Valor da variável”. Não vou postar o conteúdo do meu, pois provavelmente sua máquina terá outro valor. Note que após o <valor antigo>, é necessário então colocar um ponto e vírgula. A seguir, em azul, está o caminho para o “bin” do JDK. Esse caminho provavelmente vai ser diferente para você também. Após isso, outro ponto e vírgula, e por fim, o caminho do “bin” do Flex SDK (destacado em roxo). Note que não há necessidade de colocar um ponto e vírgula no final. Feito isso, dê OK nesta janela, de OK na janela de “Variáveis de Ambiente” e dê OK na janela “Propriedades do Sistema”. Com isso finalizamos a configuração da variábel “Path”. Agora precisamos testar.

Abra um prompt de comando, ou digite “cmd” no executar do Windows (win+r) e dê OK. Vamos ver primeiramente se algum programa do “bin” do JDK está visível. Digite “javac -version” (sem aspas) no prompt e tecle <ENTER>.  Se tudo estiver correto a versão do javac será mostrada. Caso contrário, o Windows vai reclamar que não consegue reconhecer o comando dado. Da mesma forma que fizemos com o javac, para testar o “bin” do JDK, vamos testar agora o “bin” do Flex SDK. Para isso, ainda no prompt, digite “mxmlc -version” e dê <ENTER>. Novamente a versão do mxmlc deve ser apresentada. Veja a Figura abaixo. As saídas dos comandos javac e mxmlc estão destacadas respectivamente em azul e roxo. Caso tenha algum problema, verifique onde errou.

 

Figura 5

Saídas dos comandos javac e mxmlc

 

Muito bom! A partir de agora podemos compilar arquivos mxml e ActionScript a partir do prompt de comando ou a partir de arquivos em lote (batch scripts)! Mas não vamos fazer isso, não queremos sofrer muito para desenvolver nossas aplicações em Flex. Vamos automatizar um pouco isso, usando a IDE FlashDevelop que é gratuita.

Então vamos lá! Primeiramente, vamos fazer o download da ferramenta. O site oficial do FlashDevelop é http://www.flashdevelop.org/ e as instruções de download e das dependências necessárias para utilizá-lo pode ser encontrada nesse link: http://www.flashdevelop.org/community/viewtopic.php?f=11&t=6956. Note que nesse link está listada a última versão disponível quando esse post foi publicado. Sendo assim, recomendo que você entre no site da ferramenta e busque pelo link download. Note também que das dependências necessárias, já resolvemos a parte do JDK e do Flex SDK, sendo necessário que você instale o .Net framework caso ainda não o tenha instalado (Windows Vista e 7 já vem com ele instalado).

Depois que baixar o FlashDevelop, instale-o. Depois da instalação, abra a ferramenta. A cara dela é essa daqui (versão 3.2.2):

 

Figura 6

Interface principal do FlashDevelop 3.2.2

 

Vamos então criar um projeto para podermos configurar a ferramenta. Procure na barra de menu pelo item “Project”. Clique nele e escolha “New Project”. Em “Installed Templates” escolha “Flex 4 Project”. Em “Name” entre com “TesteFlashDevelop” (sem as aspas). Escolha onde quer salvar o projeto, dê uma nome para o pacote principal da aplicação (caso queira) e marque a opção “Create directory for project”. Dê OK e a ferramenta vai pedir o nome do autor. Preencha o campo e dê OK. Veja a Figura abaixo.

 

Figura 7

Criando um novo projeto no FlashDevelop

 

No canto superior direito da interface do FlashDevelop, a estrutura do projeto será apresentada. Procure na pasta “src” pelo Main.mxml e clique duas vezes. O arquivo será aberto no editor. Note que o código não tem nenhum componente visual, apenas a estrutura da aplicação. Vamos então tentar dar um build no projeto. Na barra de ferramentas da IDE, procure por um ícone com uma engrenagem e clique nele. A ferramenta vai avisar que é necessário configurar o compilador e vai perguntar se você quer fazer isso. Clique em OK e a seguinte janela será aberta:

 

Figura 8

Configurando o compilador do Flex no FlashDevelop

 

No campo “Flex SDK Location” precisamos apontar para o diretóri o raiz do Flex SDK. Note como ficou a configuração.

 

Figura 9

Apontando para o Flex SDK

 

Após fazer isso clique em close e tente dar o build novamente no projeto (botão da engrenagem). Com isso, o projeto deve ser compilado e você pode ver o resultado na pasta “bin” do projeto onde um arquivo “swf” com o nome do projeto vai ser gerado.

Muito legal não é? Temos agora uma IDE totalmente gratuita para utilizarmos. Uma desvantagem do FlashDevelop é que ele não tem um editor visual para a interface gráfica, mas é muito melhor usar ele do que ter que fazer tudo na mão, pois ele automatiza todo o processo de compilação para nós. No próximo tutorial, vou mostrar como portar o nosso projeto do CRUD em janelas para o FlashDevelop, configurando o compilador para ele compilar os serviços remotos do BlazeDS.

Então é isso, espero que tenham gostado 😉

Até a próxima!

Anúncios