Parte 1Parte 2Parte 3Parte 4.1Parte 4.2

Hoje em dia existem diversas bibliotecas e/ou frameworks que apoiam os desenvovedores na tarefa de construir interfaces gráficas para aplicações Web, sendo que a maioria delas são baseadas em JavaScript e/ou em Flash. Tenho certa familiaridade com algumas delas e por isso decidi montar esse tutorial para ajudar quem tiver interesse em aprender como fazer a integração entre uma interface criada em Flex com um backend escrito em Java. Vou apresentar da forma mais simples possível, sem utilizar frameworks MVC, tentando apenas puxar o fio da meada para você que quer começar a aprender a trabalhar com Flex.

Este tutorial será dividido em algumas partes e nessa primeira parte vou tratar da configuração do NetBeans. Então vamos lá! Mãos na massa! Para essa parte do tutorial vamos precisar de:

Alguns detalhes quanto à instalação de cada um dos itens citados acima:

  • NetBeans 6.9 – Recomendo que você faça o download da versão completa do NetBeans (a última coluna na página de download). No primeiro passo na instalação, o instalador lhe dará a opção de escolher quais componentes deseja instalar. Eu recomendo que você escolha a opção para instalar o Tomcat. Prefiro o Tomcat para desenvolvimento;
  • BlazeDS 4.x – O BlazeDS é que vai fazer a ponte entre o .swf gerado no Flash Builder e a nossa infraestrutura em Java. Quando for fazer o download, existem três pacotes: Turnkey, binary distribution e source. Baixe o segundo pacote, o binary distribution (cerca de 4.1MB). O pacote Turnkey vem com um servidor para testar o BlazeDS enquanto no source vem o código fonte, eles serão desnecessários.

Note que ainda não entraremos em detalhes relacionados ao Flash Builder (Antigo Flex Builder). Com tudo instalado e pronto, vamos começar. O primeiro passo é criar um projeto no NetBeans e prepará-lo para a integração. Primeiramente, vamos criar um novo projeto Web no NetBeans:

  • File
    • New Project…
      • Categories: Java Web
      • Projects: Web Application

 

Figura 1

Criando um novo projeto Web no NetBeans

 

  • Next
    • Project Name: IntegracaoFlexJava
    • Project Location: escolha onse será salvo o seu projeto
    • Marque a opção “Use Dedicated Folder for Storing Libraries”, com isso, os .jars que utilizaremos no nosso projeto ficarão contidos na estrutura do projeto, permitindo que o projeto seja compactado e enviado para qualquer pessoa. Por padrão, o NetBeans vai sugerir .\lib. Recomendo que deixe assim.
    • Marque a opção “Set as Main Project

 

Figura 2

Continuação da criação do projeto no NetBeans

 

  • Next
    • Server: Apache Tomcat 6.0.26
    • O restante das opções não precisam ser alteradas. Veja Figura abaixo

 

Figura 3

Continuação da criação do projeto no NetBeans

 

  • Finish

Pronto, o projeto vai ser criado e aberto no seu NetBeans. Por padrão, o index.jsp será aberto no editor. Note que estou utilizando o NetBeans em inglês, sendo assim, caso esteja utilizando em português, utilize as figuras como guia caso tenha dificuldades. Outro detalhe é que a versão usada no NetBeans é a 6.9, sendo assim, se você estiver usando alguma versão mais antiga, algumas coisas podem ser um pouco diferentes.

Com o projeto criado, vamos passar para a configuração do BlazeDS dentro do projeto do NetBeans. Lembra do pacote do BlazeDS que você baixou? O nome dele é parecido com blazeds-bin-4.x.x.xxxx.zip. Independente da versão baixada (no meu caso foi a 4.0.0.14931), descompacte o arquivo. Note que no pacote existem dois arquivos: blazeds.war e blazeds-bin-readme.html. Lembre sempre que estou tendo como base a versão que usei.

Um arquivo com extensão WAR (Web ARchive) é um arquivo .zip (claro, com extensão alterada) que contém uma aplicação Web em Java. Sabendo disso, precisamos “pegar” algumas coisas dessa aplicação e copiar para o nosso projeto. Sendo assim, renomeie o arquivo blazeds.war para blazeds.zip e decompacte-o.

Feito isso, vamos primeiro preparar a biblioteca do BlazeDS dentro do nosso projeto. No NetBeans, com a árvore do projeto aberta, procure pela pasta Libraries.

 

Figura 4

Pasta Libraries do projeto do NetBeans

 

Clique com o botão direito na pasta Libraries e escolha Add Library. Uma janela abrirá:

 

Figura 5

Bibliotecas do Projeto

 

Essa janela exibe todas as bibliotecas que estão configuradas dentro do projeto, sendo que elas não estão necessariamente inseridas na aplicação que será gerada. Vamos então criar a biblioteca para o BlazeDS. Clique no botão Create. No diálogo que aparecerá, coloque o nome da biblioteca (Library Name) como BlazeDS-4.0.0 (ou o nome que você desejar) e no tipo da biblioteca (Library Type) escolha Class Libraries e clique em OK. A janela Customize Library abrirá.

 

Figura 6

Janela Customize Library

 

Clique em Add JAR/Foder. Um outro diálodo abrirá. Lembra que você descompactou o blazeds.zip (que era blazeds.war)? Pois bem, procure onde você o descompactou e entre na pasta WEB-INF/lib. Note que aparecerão diversos .jars. Selecione todos e clique em Add JAR/Folder.

 

Figura 7

Escolhendo os .jars do blazeds.zip (blazeds.war)

 

O NetBeans vai perguntar se você quer mesmo criar a pasta para a biblioteca. Responda que sim. O diálogo Customize Library aparecerá novamente, agora com os .jars inseridos na biblioteca. Clique em OK.

 

Figura 8

.jars selecionados e inseridos na biblioteca

 

Ao clicar no OK, o diálogo Add Library aparcerá novamente, só que agora a nova biblioteca aparecerá na lista.

 

Figura 9

Janela Add Library com a nova biblioteca

 

Selecione-a e clique em Add Library. Perceba que fazendo isso, a biblioteca será inserida na estrutura do projeto. Se você expandir a pasta Libraries do projeto, verá que todos aqueles .jars que estão configurados na biblioteca que foi criada vão aparecer.

 

Figura 10

.jars adicionados na estrutura do projeto

 

Perceba que com isso inserimos a biblioteca BlazeDS no nosso projeto e no pacote que será gerado posteriormente para implantação da aplicação no servidor. Entretanto, ainda faltam alguns detalhes que precisamos nos preocupar. Quando utilizamos o BlazeDS, nós criamos serviços que serão expostos pela nossa aplicação. Esses serviços são implementados em classes, mas é necessário que o tanto o BlazeDS quanto o compilador do Flex saibam quais classes implementam esses serviços. Para isso, são utilizados diversos arquivos de configuração. Vamos copiá-los para nosso projeto agora. Procure a pasta WEB-INF do projeto, clique com o botão direito nela e escola New > Folder.

 

Figura 11

Criando uma nova pasta em WEB-INF

 

Um diálogo irá aparecer, perguntando o nome da pasta que será criada. Entre com o nome “flex” (sem as aspas) e clique em OK.

 

Figura 12

Pasta "flex" criada

 

Com isso feito, novamente vá aonde você descompactou o blazeds.zip (antigo blazeds.war), entre na pasta WEB-INF\flex, selecione todos os arquivos e dê um Ctrl+C ou botão direito, copiar.

 

Figura 13

Copiando os arquivos de configuração do Flex

 

Com os arquivos copiados, agora volte ao NetBeans, clique com o botão direito na pasta flex que você criou e escolha Paste (colar). Os arquivos serão copiados para a pasta.

 

Figura 14

Arquivos de configuração do Flex copiados para o projeto do NetBeans

 

Estamos quase cabando. Vamos agora modificar o web.xml do nosso projeto para configurar o gerenciador de mensagens do BlazeDS. Para isso, vá novamente no pacote que você descompactou e na pasta WEB-INF procure pelo arquivo web.xml. Abrá-o para edição. Selecione o conteúdo a partir do comentário “<!– Http Flex Session attribute and binding listener support –>” até a linha antes do do código <welcome-file-list>. Copie o texto selecionado (Ctrl+C), abra o web.xml do projeto dentro do NetBeans. O web.xml dentro do NetBeans possui uma interface gráfica para configuração. Não iremos utilizá-la agora, pois vamos editar o código XML diretamente. Para isso, clique no botão XML acima no editor.

 

Figura 15

Edição do web.xml

 

Cole o código que foi copiado do web.xml do pacote descompactado na linha entre </session-config>e <welcome-file-list>. Por fim, apague os trechos de código que estão comentados. No final, seu web.xml deve ter a seguinte aparência:

 

Figura 16

web.xml final

 

Falta pouco! Ainda no web.xml, remova a tag display-name dentro da tag servlet (<display-name>MessageBrokerServlet</display-name>). O código final do web.xml pode ser visto abaixo.

web.xml

<?xml version="1.0" encoding="UTF-8"?>
<web-app version="2.5" xmlns="http://java.sun.com/xml/ns/javaee" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd">
    <session-config>
        <session-timeout>
            30
        </session-timeout>
    </session-config>

    <!-- Http Flex Session attribute and binding listener support -->
    <listener>
        <listener-class>flex.messaging.HttpFlexSession</listener-class>
    </listener>

    <!-- MessageBroker Servlet -->
    <servlet>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <servlet-class>flex.messaging.MessageBrokerServlet</servlet-class>
        <init-param>
            <param-name>services.configuration.file</param-name>
            <param-value>/WEB-INF/flex/services-config.xml</param-value>
        </init-param>
        <load-on-startup>1</load-on-startup>
    </servlet>

    <servlet-mapping>
        <servlet-name>MessageBrokerServlet</servlet-name>
        <url-pattern>/messagebroker/*</url-pattern>
    </servlet-mapping>

    <welcome-file-list>
        <welcome-file>index.jsp</welcome-file>
    </welcome-file-list>
</web-app>

Da mesma forma que você criou a pasta “flex” dentro de WEB-INF, crie agora uma pasta chamada “swf” (sem aspas) na raiz do projeto (no mesmo nível de META-INF, WEB-INF e index.jsp).

 

Figura 17

Pasta "swf"

 

Posteriormente iremos configurar o Flash Builder para compilar nosso projeto em Flex e copiar os arquivos gerados para esta pasta.

O nosso último passo antes de testar o projeto é configurar o commons-logging que é é utilizado pelo BlazeDS. Para isso, primeiro vamos preparar onde iremos guardar o arquivo de configuração. Clique com o botão direito no mouse na raiz do projeto e escola Properties (último item da lista).

 

Figura 18

Acessando as propriedades do projeto

 

Com isso, a janela de propriedades do projeto abrirá. Por padrão, o item Sources estará selecionado, caso não esteja, selecione-o. Na opção sources, clique em Add Folder da área Source Package Folders.

 

Figura 19

Propriedades do projeto

 

A janela Add Source Folder irá aparecer. Nela, clique no botão destacado em vermelho na Figura abaixo e dê o nome de “logging” (sem aspas) ao diretório criado. Tecle enter para aceitar a mudança no nome do diretório, selecione-o e clique em Open.

 

Figura 20

Novo diretório de fontes

 

Feito isso, a janela de propriedades do projeto irá voltar a ser mostrada e note que o novo diretório será listado. Clique duas vezes no logging que aparece na coluna Label da tabela e dê o nome de “Configurações Logging” (sem aspas) e tecle Enter para aceitar a modificação.

 

Figura 21

Editando o label do diretório de logging

 

Por fim, clique no botão OK da janela de propriedades. Esse label que foi configurado será utilizado para mostrar essa nova pasta dentro da estrutura do projeto.

 

Figura 22

Configurações de logging dentro do projeto

 

Com isso feito, vamos agora copiar o arquivo de configuração de logging para dentro desta pasta. Vá novamente (última vez!) onde você descompactou o blazeds.zip, entre em WEB-INF/classes e copie o arquivo commons-logging.properties para a pasta que você criou dentro do NetBeans.

 

Figura 23

Arquivo de configurações de logging copiado

 

Nossa última tarefa (prometo!) é configurar para que nosso projeto não seja implantado no servidor cada vez que salvarmos algum arquivo. Isso previne que o Tomcat trave caso hajam muitos deploys seguidos. Para isso, acesse novamente as propriedades do projeto, ná na opção Run e desmarque a opção Deploy on Save e dê OK.

 

Figura 24

Desligando o deploy on save

 

Para finalizar esta parte do tutorial, pressione F6 ou então clique na flecha verde do NetBeans para compilar e executar o projeto (botão direito no projeto e Run também funciona). Se tudo estiver correto, o navegador abrirá e uma página com um “Hello World!” será exibida. Caso tenha ocorrido algum problema, revise o tutorial para verificar onde errou e tente novamente.

Na próxima parte do tutorial iremos baixar, configurar e utilizar o Flash Builder 4 para criarmos nossa primeira interface e fazer a comunicação com a camada em Java.

Grande abraço! Espero que tenha gostado 😉

Parte 1Parte 2Parte 3Parte 4.1Parte 4.2

Anúncios