/davidbuzatto

Parte 1 – Parte 2 – Parte 3 – Parte 4.1 – Parte 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.

 

 

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

 

 

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.

 

 

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.

 

 

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.

 

 

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.

 

 

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 1 – Parte 2 – Parte 3 – Parte 4.1 – Parte 4.2