Parte 1Parte 2Parte 3Parte 4.1Parte 4.2

Olá. Nesta parte do tutorial vamos ver onde baixar o Flash Builder, como criar um novo projeto, como “amarrar” este projeto ao projeto criado na primeira parte e por fim como criar um serviço simples e consumi-lo. Então, vamos lá!

Primeiramente você precisará baixar o Flash Builder (antigo Flex Builder), que é uma IDE especializada na criação de RIAs (Rich Internet Application) em Flash (você já deve saber disso hehe). Internamente o Flash Builder utiliza o Flex SDK (que por sua vez é gratuíto) para compilar os arquivos fonte do projeto em um .swf que conterá a interface gráfica da aplicação. Neste tutorial estou abordando o uso da IDE para facilitar o aprendizado. Acessanto esse link, você pode baixar a versão trial do Flash Builder 4 (versão que estou usando). São disponibilizadas duas versões, uma que é um Plugin para o Eclipse, e outra que é Standalone (é um Eclipse com o plugin já instalado). Como estamos trabalhando com o NetBeans para construir nosso backend, então estarei utilizando a versão Standalone, mesmo porque não sou usuário do Eclipse e não sou muito fã também.

Já baixou? Já instalou? Ótimo! Mão na massa agora 😀

Com o Flash Builder aberto, crie um novo projeto: File > New > Flex Project. Feito isso, a janela New Flex Project será exibida. Vamos preenchê-la da seguinte forma:

  • Project name: IntegracaoFlexJavaGUI – perceba que mantive o nome do projeto do NetBeans, colocando a sufixo GUI.
  • Project Location: desmarque o “Use default location”, pois iremos guardar o projeto no mesmo diretório onde estamos salvando o projeto do NetBeans. No meu caso, eu salvei o projeto do NetBeans em C:\Users\David\Documents\Java\Flex, sendo assim, o caminho para salvar o projeto do Flash Builder vai ficar C:\Users\David\Documents\Java\Flex\IntegracaoFlexJavaGUI
  • Application type: Web – estamos desenvolvendo para Web e não para o AIR. Só para contextualizar, o AIR é basicamente uma plataforma para execução de projetos do Flex em ambiente desktop, como uma aplicação convencional.
  • Flex SDK version: vamos usar o default, que é o Flex SDK 4.0 para o Flash Builder 4. Nada impede que outros SDKs sejam instalados, caso você queira usar algum mais antigo.
  • Server technology: Como estamos trabalhando com Java, vamos escolher J2EE.
    • Marque a opção “Use remote object access service” caso não esteja marcado.
    • Nós vamos utilizar o BlazeDS. Não expliquei no tutorial anterior o que é o BlazeDS, então lá vai. O BlazeDS implementa um protocolo chamado AMF (Action Message Format), que é utilizado na tarefa de serializar e deserializar objetos. Nossa aplicação em Flex vai enviar objetos ActionScript via AMF para a nossa aplicação Java. O BlazeDS vai deserializar esses objetos em objetos Java. O inverso também ocorrerá, ou seja, criaremos objetos Java, mandaremos via BlazeDS (serializando em AMF) para a aplicação em Flex, que por sua vez vai deserializá-los. Legal não? O LifeCycle Data Services é como o BlazeDS, só que mais robusto e é pago. Ah, além do Blaze e do LifeCycle que são implementações em Java, existem diversas outras implementações para outras linguagens.

 

Figura 1

Criando o projeto no Flash Builder

 

Com tudo preenchido, clique em Next. O próximo passo deve ser preenchido da seguinte forma:

  • Root folder: Este campo deve ser preenchido com o caminho do diretório que contém o diretório WEB-INF/flex. No meu caso, o caminho seria C:\Users\David\Documents\Java\Flex\IntegracaoFlexJava\web. Note que estamos apontando para o projeto do NetBeans e na pasta web estão contidas as pastas META-INF, WEB-INF e swf.
  • Root URL: Este campo deve ser preenchido com o endereço da raiz da aplicação em execução. Caso você esteja usando o Tomcat na porta padrão definida pelo NetBeans (8084), este campo deve ser preenchido com o seguinte valor: http://localhost:8084/IntegracaoFlexJava/. Perceba que normalmente o Tomcat ou outro servidor que manterá suas aplicações em produção rodam em outra porta. O padrão do Tomcat é a 8080. Então você tem duas opções. 1ª configurar o Tomcat do NetBeans para rodar na porta 8080, assim você não terá problemas quando for colocar a aplicação em produção. 2ª (não recomento) trocar a porta do Tomcat de produção para 8084. Existe a necessidade de colocar o endereço correto porque o Flex vai usar esse endereço para compilar o endereço dos serviços que iremos criar.
  • Context root: Esse campo define a raiz do contexto. Neste exemplo, a raiz é /IntegracaoFlexJava. Note que é o final do endereço do Root URL.
  • Output foler: Neste campo é definido onde o resultado da compilação do projeto no Flash Builder será colocado. Lembra da pasta swf que criamos? Queremos então que o Flash Builder jogue os .swfs gerados dentro daquela pasta. Então, no meu caso, o caminho ficou C:\Users\David\Documents\Java\Flex\IntegracaoFlexJava\web\swf

 

Figura 2

Segundo passo na criação do projeto

 

Por fim, clique em Finish. O novo projeto será criado. Por padrão, o Flash Builder vai criar um arquivo mxml que será o ponto de partida para a execução da aplicação (chamado de Default Application). No nosso caso, o arquivo gerado se chama IntegracaoFlexJavaGUI.mxml. Note que também por padrão é exibido o código do arquivo. Logo acima, podemos mudar para a visualização do Design do arquivo em questão.

 

Figura 3

Botão design

 

Clicando no botão Design, você poderá ver o editor gráfico da interface. À esquerda há uma paleta com os componentes gráficos. Arraste um botão para o Design para podermos ver o que está acontecendo quando executamos nosso projeto.

 

Figura 4

Um botão inserido na aplicação

 

Note que o objetivo deste tutorial não é ensinar a trabalhar com o Flex nem com o Flash Builder, mas sim, ajudar na integração com a camada escrita em Java. Sendo assim, não ficarei detalhando componentes o tempo todo.

Salve o arquivo que está aberto. Sempre que salvar, o Flash Builder vai compilar todo o projeto novamente, gerando os .swfs. Sendo assim, volte agora para o NetBeans e expanda a pasta swf que foi criada no tutorial anterior. Percebe que foram gerados diversos arquivos.

 

Figura 5

Arquivos gerados dentro do NetBeans

 

Esses arquivos sempre serão gerados automaticamente, então não há necessidade de se preocupar. Os arquivos principais no nosso caso são o IntegracaoFlexJavaGUI.html e o IntegracaoFlexJavaGUI.swf. O primeiro é a página HTML que vai ser usada para executar o segundo. Vamos testar então. No NetBeans, execute o projeto (F6 ou flecha verde). A página “Hello World!” ainda será exibida. Agora mude o endereço para http://localhost:8084/IntegracaoFlexJava/swf/IntegracaoFlexJavaGUI.html e acesse. Você vai ver que será exibida a aplicação.

Legal não é? A aplicação está rodando dentro do Tomcat. Temos dois ambientes separados, um para a infraestrutura em Java no NetBeans e um para a construção da interface gráfica no Flash Builder. Vamos agora começar a trabalhar com os serviços. Primeiro vamos criar um serviço que, quando acessado, simplesmente direciona para a saída padrão, via System.out.println(), uma mensagem. Depois iremos melhorar a idéia e testar outras possibilidades, e no final, na quarta parte do tutorial, faremos um exemplo envolvendo a transferência de objetos entre as duas camadas criadas.

Vamos ao serviço então?

No projeto do NetBeans, vá em Source Packages e crie um novo pacote chamado “servicos”. Neste pacote, crie uma classe chamada “ServicosTeste”. Nesta classe, crie um método chamado imprimirMensagem que em seu corpo simplesmente executa o método System.out.println( “mensagem aqui…” ). Veja a Figura abaixo.

 

Figura 6

Primeiro servico

 

servicos.ServicosTeste.java

package servicos;

/**
 *
 * @author David
 */
public class ServicosTeste {

    public void imprimirMensagem() {
        System.out.println( "Serviço rodando! Sim senhor!" );
    }

}

Cada método definido na classe criada será um serviço, mas para que esses métodos sejam reconhecidos como serviços, precisamos configurar o arquivo remoting-config.xml, dizendo ao Flash Builder que ao compilar o projeto, a classe ServicosTeste contém serviços. Abra então o arquivo remoting-config.xml que está dentro da pasta WEB-INF/flex do projeto do NetBeans. No arquivo, antes da última tag </service> insira o seguinte trecho de código:

<destination id="testeServicos">
    <properties>
        <source>servicos.ServicosTeste</source>
    </properties>
</destination>

Com isso dizemos ao compilador do Flex (que será chamado pelo Flash Builder) que a classe ServicosTeste – que está dentro do pacote servicos – é uma classe que contém serviços. Perceba que definimos um identificador para o destination. Esse id será importante quando formos chamar o serviço pela aplicação desenvolvida no Flash Builder.

Recaptulando: criamos uma classe no NetBeans que conterá nossos serviços. Criamos o método imprimirMensagem que é o nosso primeiro serviço. Editamos o arquivo remoting-config.xml para dizer que a classe que criamos contém serviços. Agora vamos no Flash Builder para vermos como fazemos para chamar o serviço criado.

Voltando então ao Flash Builder, volte para a edição do código fonte do arquivo mxml que foi gerado. Para isso, basta clicar no botão Source (do lado do botão Design). Apague o comentátio dentro da tag <fx:Declarations>. É entre as tags <fx:Declarations> e </fx:Declarations> que iremos declarar nossos serviços. Para declarar os serviços, utilizaremos a tag <s:RemoteObject>. Segue o código que deve ficar dentro de <fx:Declarations>.

<s:RemoteObject
    id="servicos"
    destination="testeServicos"
    showBusyCursor="true">

    <s:method
        name="imprimirMensagem"
        fault=""
        result=""/>

</s:RemoteObject>

Na tag <s:RemoteObject> definimos a propriedade id (que usaremos dentro do código para executar os serviços), a propriedade destination (lembra do destination do remoting-config.xml?) e se queremos que o cursor apareça como ocupado durante a execução de algum serviço. Dentro da tag <s:RemoteObject>, definimos então os métodos, que serão os nossos servicos. Para isso, usa-se a tag <s:method>. Na propriedade name colocamos o nome do método (tem que ser igual ao da classe em Java). As propriedades fault e result eu explico daqui há pouco.

Pois bem, temos o servico configurado tanto do lado do cliente (Flex) quanto do lado do servidor (BlazeDS), agora só falta executar. Lembra do botão que criamos na interface? Ele é representado pela tag <s:Button>. Edite seu botão disso:

<s:Button x="10" y="10" label="Button"/>

Para isso:

<s:Button x="10" y="10" label="Executar" click="botaoExecutarClick(event)"/>

O que fizemos? Primeiro trocamos o label do botão para “Executar” ao invés de “Button”. Segundo, registramos um método (ou função, você escolhe como chamar) para tratar o evento de clicar no botão. Precisamos implementar esse método. Para isso, antes da tag <fx:Declarations>, iremos colocar código fonte ActionScript. Para fazer isso dentro do código do mxml, usados a tag <fx:Script>. Veja como ficou:

<fx:Script>
    <![CDATA[
        private function botaoExecutarClick( event: Event ): void {
            servicos.imprimirMensagem();
        }
    ]]>
</fx:Script>

Note que dentro do método botaoExecutarClick, nós chamamos o <s:RemoteObject> que declaramos (o id era servicos, lembra?) e chamamo o método que foi definido (imprimirMensagem). Com isso feito, salve seu arquivo, vá no NetBeans e execute novamente o projeto. Após executar, troque o endereço novamente para http://localhost:8084/IntegracaoFlexJava/swf/IntegracaoFlexJavaGUI.html e acesse. Clique no botão executar.  Vá agora no NetBeans e veja a saída do Tomcat (logo abaixo na IDE, na aba Apache Tomcat 6.0.26). Se tudo deu certo, o println com a mensagem definida dentro de imprimirMensagem deve ter executado e a mensagem vai estar na saída do Tomcat.

Deu certo? Ótimo. Não deu? Verifique o que faltou. Até agora conseguimos chamar um serviço bem simples. Ainda não trocamos mensagens entre o servidor e o cliente, mas você verá que isso é muito fácil também. Por enquanto, vamos finalizar o que já fizemos. Você se lembra das propriedades fault e result do método (<s:method>) que foi definido no <s:RemoteObject>? Pois bem, essas duas propriedades definem respectivamente um método para tratar algum problema na execução do serviço e um método para tratar a execução bem sucedida do serviço.

Vamos então implementar esses métodos. Eles simplesmente mostrarão uma mensagem. A seguir, o arquivo IntegracaoFlexJavaGUI.mxml completo:

IntegracaoFlexJavaGUI.mxml

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600">

    <fx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.rpc.events.FaultEvent;
            import mx.rpc.events.ResultEvent;

            private function botaoExecutarClick( event: Event ): void {
                servicos.imprimirMensagem();
            }

            private function imprimirMensagemFault( event: FaultEvent ): void {
                Alert.show( "Ocorreu um erro...", "ERRO" );
            }

            private function imprimirMensagemResult( event: ResultEvent ): void {
                Alert.show( "Serviço executado com sucesso!", "Mensagem" );
            }

        ]]>
    </fx:Script>

    <fx:Declarations>

        <s:RemoteObject
            id="servicos"
            destination="testeServicos"
            showBusyCursor="true">

            <s:method
                name="imprimirMensagem"
                fault="imprimirMensagemFault(event)"
                result="imprimirMensagemResult(event)"/>

        </s:RemoteObject>

    </fx:Declarations>

    <s:Button x="10" y="10" label="Executar" click="botaoExecutarClick(event)"/>

</s:Application>

Faça as modificações necessárias, salve o projeto do Flash Builder e execute o projeto do NetBeans de novo. Aponte para a URL  http://localhost:8084/IntegracaoFlexJava/swf/IntegracaoFlexJavaGUI.html e teste. Toda vez que clicar no botão, o serviço será executado e o método que trata a execução bem sucedida (imprimirMensagemResult) vai ser executado.

Bem, esta parte já está ficando muito grande. Na próxima parte do tutorial iremos fazer uma calculadora onde enviaremos os operandos e executaremos a operação desejada. Isso pode ser feito no cliente, mas vamos testar a chamada a serviços com passagem de parâmetros e recebimento de valores. Assim que fizermos esse exemplo, partiremos para a última parte do tutorial, onde iremos trabalhar com objetos mais complexos.

Espero que estejam gostando 🙂

Parte 1Parte 2Parte 3Parte 4.1Parte 4.2

Anúncios