Category: Flex



Olá pessoal, acabei de fazer o upload dos projetos dos tutoriais. Os arquivos estão hospedados no 4Shared.

Seguem os links 😉

Primeiro projeto
CRUD com janelas (Flash Builder)
CRUD com janelas (FlashDevelop)
Backend em Java (está no estado do último tutorial, o do FlashDevelop)

Abraços!

Anúncios

Olá pessoal, hoje vamos aprender como configurar um projeto no FlashDevelop para trabalhar com um backend em Java. Para acelerar o processo, iremos utilizar como base tanto o projeto do backend feito no NetBeans quanto o projeto do frontend feito no Flash Builder. Então vamos lá!

Vamos começar pelo FlashDevelop. Vá no menu Project e escolha New Project. Na janela New Project, escolha Flex 4 Project. Em Name, entre com “IntegracaoFlexJavaComJanelasFD” (sem as aspas). Em location, escolha o diretório onde você está salvando o projeto do NetBeans e os projetos que fizemos no Flash Builder. No meu caso o caminho é “C:\Users\David\Documents\Java\Flex”. O campo package pode ficar vazio. Deixe a opção “Create directory for project” e clique em OK. Veja a Figura abaixo.

 

Figura 1

Criando um projeto no FlashDevelop

 

Agora vamos copiar todos os arquivos de código fonte do nosso projeto do Flash Builder. Para isso, abra o Flash Builder e localize o projeto. Vá na pasta “src”, selecione os pacotes “entidades” e “gui”, clique com o botão direito e escolha “Copy”. Veja a Figura abaixo.

 

Figura 2

Copiando o código do projeto do Flash Builder

 

Com o código copiado, volte ao FlashDevelop, clique com o botão direito na pasta “src”, escolha Edit > Paste. Veja a Figura abaixo.

 

Figura 3

Colando o código do projeto do Flash Builder no projeto do FlashDevelop

 

Fazendo isso, todo o código fonte do projeto do Flash Builder será colado dentro do projeto do FlashDevelop. Agora precisamos configurar nossa aplicação padrão. No FlashDevelop, a aplicação padrão (default application) fica marcada com flexinha verde. No nosso projeto, a aplicação padrão atual é a Main.mxml. Vamos mudar então a aplicação padrão para a Principal.mxml. Para isso, clique com o botão direito no arquivo Principal.mxml e escolha “Always Compile”. Você vai perceber que a flexinha vai passar para o Principal.mxml. Agora apague o arquivo Main.mxml (botão direito no arquivo, Edit > Delete).

Até agora criamos um novo projeto do FlashDevelop, copiamos nossos arquivos fonte e configuramos nossa aplicação principal (default application), mas ainda precisamos realizar alguns passos:

  1. Apontar o compilador do Flex para o services-config.xml, fazendo com que os serviços configurados sejam “enxergados” pelo .swf compilado;
  2. Fazer algumas alterações no services-config.xml;
  3. Configurar o FlashDevelop para copiar os arquivos do build para a nossa pasta dos arquivos swf no NetBeans;
  4. Por fim, iremos configurar o nosso index.jsp para redirecionar para a página que contém o arquivo .swf.

Então vamos lá! No FlashDevelop, algumas configurações ficam mais “escondidas” do que no Flash Builder. A primeira é relacionada à compilação dos serviços. Na verdade, quando usamos o Flash Builder, as opções da localização do arquivo services-config.xml e outras relacionadas à utilização de serviços remotos via AMF, se tornam parâmetros do compilador (veja nas propriedades do projeto do Flash Builder). Então temos que configurar isso no nosso projeto no FlashDevelop. Para isso, clique com o botão direito no seu projeto (IntegracaoFlexJavaGUIComJanelasFD) e escolha Properties.

A janela de propriedades do projeto abrirá a última aba da janela é a “Compiler Options”. Clique nela. Veja a Figura abaixo.

 

Figura 4

Opções do compilador

 

Nós vamos mexer na primeira “propriedade”, a “Additional Compiler Options”. Para isso, selecione a propriedade e clique no botão “…” para abrir o editor. No diálogo que abriu, inseria o seguinte valor:

-services C:\Users\David\Documents\Java\Flex\IntegracaoFlexJava\web\WEB-INF\flex\services-config.xml
-context-root /IntegracaoFlexJava

Antes de dar OK, vamos à explicações. O parâmetro -services é usado para apontar para o arquivo services-config.xml que está contido no projeto do backend em Java. No meu caso, o projeto do backend está localizado em “C:\Users\David\Documents\Java\Flex\”, você vai precisar localizar o seu projeto no diretório que você escolheu anteriormente. Por fim, o segundo parâmetro é o -context-root, onde devemos preencher com a raiz do contexto do nosso backend, que no nosso caso é /IntegracaoFlexJava. Agora que você já entendeu para que serve cada parâmetro e já alterou o -services para apontar para o seu services-config.xml, dê OK. O resultado deve ser parecido com o mostrado na Figura abaixo.

 

Figura 5

Opções do compilador alteradas

 

Se estiver tudo certo, você pode então dar OK na janela de propriedades, alterando assim as opções do compilador do Flex. Até agora, configuramos para o compilador enxergar o services-config.xml, mas vamos precisar – infelizmente – fazer uma pequena alteração nesse arquivo de configuração… O Flash Builder consegue inserir parâmetros no arquivo em tempo de compilação, mas o FlashDevelop não. Então o que seria automático no Flash Builder vai ter que ser manual ao usar o FlashDevelop. Vamos por a mão na massa então.

Abra o projeto do backend no NetBeans e procure pelo arquivo services-config.xml (WEB-INF/flex/services-config.xml). Ao abrir  esse arquivo XML, procure pela tag “<channels>”. Nessa tag são configurados os canais do AMF, ou seja, onde o serviços de serialização/deserialização do AMF são encontrados. Por padrão, estão definidos três canais (my-amf, my-secure-amf e my-polling-amf). Estamos usando apenas o primeiro canal, o my-amf, então é nele que vamos mexer. Primeiro copie toda a definição do canal, cole logo abaixo e comente a segunda definição. Você vai ficar com algo assim:

services-config.xml (editando)

...
<channels>

        <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
            <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>

        <!--
        <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
            <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
        -->

        <!-- outros canais aqui... -->

</channels>
...

O que vamos alterar é a URL do endpoint. Note que na URL temos três parâmetros: {server.name}, {server.port} e {context.root}. Quando usamos o Flash Builder, ele preenche os três parâmetros em tempo de compilação, mas o FlashDevelop só “consegue” preencher o parâmetro {context.root} (lembram do parâmetro -context-root que alteramos nas opções do compilador?). Os outros dois parâmetros vamos ter que alterar manualmente. Eu ainda não encontrei onde fazer isso automaticamente no FlashDevelop, então não sei se existe essa opção de fazer o preenchimento dos outros parâmetros automaticamente. Se alguém encontrar, é só avisar ;).

Em {server.name} vamos ter que colocar o endereço do nosso servidor e em {server.port} a porta do servidor. Sendo assim, o segue o código alterado do services-config.xml.

services-config.xml (final)

...
<channels>

        <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
            <endpoint url="http://localhost:8084/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>

        <!--
        <channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
            <endpoint url="http://{server.name}:{server.port}/{context.root}/messagebroker/amf" class="flex.messaging.endpoints.AMFEndpoint"/>
        </channel-definition>
        -->

        <!-- outros canais aqui... -->

</channels>
...

Muito bem, salve o arquivo. Com isso, a compilação dos serviços irá adicionar os caminhos apropriados para a utilização dos serviços. Vamos agora configurar o FlashDevelop para copiar os arquivos do build (resultado da compilação do projeto) para dentro da pasta swf do nosso projeto do backend. Primeiro, vá no NetBeans e apague TODO o conteúdo da pasta swf. Volte ao FlashDevelop e acesse novamente as propriedades do projeto (botão direito no projeto e escolha Properties).

Nós poderíamos alterar apenas o caminho para a criação do arquivo de saída, mas queremos que todo o resultado do build (swf + outros arquivos) sejam copiados para a pasta swf do projeto do backend. Então vamos lá. Na aba “Build” vamos adicionar um comando no “Post-Build Command Line” para copiar os arquivos de build para o nosso projeto do backend. No Windows, o comando para copiar todos os arquivos de um diretório de forma recursiva é o xcopy. Então vamos adicionar o comando para copiar todos os arquivos da pastas bin do projeto do FlashDevelop para a pasta “swf” do projeto do backend. Segue então o comando e a Figura onde é mostrado o comando inserido nas propriedades do projeto do FlashDevelop. Lembre-se de marcar a opção “Always execute”.

xcopy .\bin ..\IntegracaoFlexJava\web\swf /E /Y

 

Figura 6

Comando para executar após o build do projeto

 

Então usamos o comando xcopy, para copiar o conteúdo da pasta bin para a pasta swf do projeto do backend (note os caminhos relativos). As opções /E e /Y especificam que devem ser copiados todos os arquivos recursivamente (/E) e que os arquivos devem ser substituidos sem confirmação (/Y).

Dê OK na janela de propriedades, e faça o build do projeto usando o botão com o ícone de engrenagem, na barra de ferramentas do FlashDevelop. Verifique se os arquivos da pasta do projeto do FlashDevelop foram copiados para a pasta swf do projeto do backend. Se foram copiados, ótimo, está tudo OK. Se não foram, verifique os passos do tutorial novamente para ver onde errou.

Estamos quase lá, falta apenas mudar o nosso index.jsp para apontar para o arquivo html gerado pelo FlashDevelop. Abra então o index.jsp do projeto do backend e altere a tag meta para recionar para o index.html (gerado pelo FlashDevelop, na pasta bin). O meta vai ficar assim:

Meta alterado

<meta http-equiv="Refresh" content="0; url=swf/index.html>

Execute o projeto para testar. Você vai perceber que o swf não vai ocupar todo a página, mas essa correção fica como exercício. Nesse tutorial fizemos a migração toda na mão, mas poderíamos também usar o assistente de importação do FlashDevelop (Menu Project > Import Project…), mas isso também fica como exercício 😉

Então é isso, finalizamos mais um tutorial. Espero que tenham gostado!

Abraços!


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!

%d blogueiros gostam disto: