06 mar 2011

BlazeDS – Do básico ao avançado – Parte 1

Pretendo ensinar, em uma série de posts e screencasts, como utilizar o BlazeDS para construir aplicações Flex utilizando a maioria dos serviços disponibilizados pelo BlazeDS, incluindo desde a utilização de mensageira básica a utilização de filas JMS, conhecimentos básicos de serialização e como modifica-la, configurações dos serviços e como customizar Channels e Adapters para resolver os problemas de serialização de Enumse também para resolver o famoso LazyInitializeException quando trabalhamos com Flex, Java e Hibernate.

Sobre o BlazeDS

O BlazeDS é uma aplicação Java opensource mantida pela Adobe, sob licensa GNU Lesser General Public License, Version 3 (LGPL v3), que fornece um conjunto de serviços, todos sobre o protocolo HTTP(Hyper Text Transfer Protocol), para permitir uma aplicação Flex fazer chamadas a serviços remotos Java, retornando os dados tanto de forma assíncrona como em tempo real.

Por utilizar o formato de dados binário chamado AMF(Action Message Format) para a serialiazação e deserialização de dados, a comunicação entre uma aplicação Flex e o servidor Web se torna muito otimizada. Existem estudos feitos comparando as diversas tecnologias, como o Jamesward, mostrando o potencial do AMF.

Outra grande vantagem quando usamos o BlazeDS é a facilidade de ter classe Java automaticamente convertida para uma classe ActionScript e vice-versa.

O BlazeDS pode ser baixado do site da Adobe em dois formatos:

  1. Turnkey – Versão que já vem com exemplos e servidor tomcat pré configurado
  2. Binary – Versão com os binários

Você pode optar também por fazer o download do código fonte. A documentação também está disponível neste link.

Entendendo os arquivos de configuração do BlazeDS
A estrutura de arquivos do BlazeDS é bem simples, quando descompactamos o blazeds.war, presente na versão binária, podemos ver a seguinte estrutura:



Devemos nos atentar a duas pastas. A pasta lib, que contém todos os jars necessários, e a pasta flex, que contém todos os arquivos de configuração do BlazeDS. Vamos ver o que cada arquivo significa:

  1. services-config.xml: É neste arquivo que estão as principais configurações do BlazeDS como segurança, logging, serviços disponíveis (Canais), fábricas para a integração com Frameworks Java como Spring e EJB3 e as referências para os outros três arquivos de configuração.
  2. remoting-config.xml: É nesse arquivo que iremos configurar os serviços Java para serem "consumidos" pela aplicação Flex. Sempre quando configuramos este arquivo, iremos trabalhar com o componente Flex chamado RemoteObject.
  3. message-config.xml: Aqui é configurado tudo o que for relacionado com mensageria, sempre necessário quando trabalhamos com os componentes Flex Consumer e Producer. Um exemplo da utilização desta tecnologia seria fazer um bate bapo, ou até mesmo aplicações colaborativas, onde é desejável a iteração simultânea de diversos usuários.
  4. proxy-config.xml: Além da possibilidade de utilizarmos o componente RemoteObject, o Flex disponibiliza mais duas formas de integração: O HTTPService e o WebService. Porém, por questões de segurança, os serviços só podem ser chamados quando os mesmos estão no mesmo domínio que a aplicação, ou que exista uma configuração específica que permita um cliente Flex fazer a consulta (esta configuração é feita por um arquivo chamado crossdomain.xml e está sempre no servidor onde está o serviço chamado). Caso uma das duas condições acima não seja satisfeita, deveremos utilizar o BlazeDS como proxy , e é ai que configuração deste arquivo se torna necessário.

Criando o seu primeiro projeto com o BlazeDS

Para criar o projeto iremos precisar de:

  1. Eclipse Galileo JEE
  2. FlashBuilder Plugin
  3. BlazeDS 4 Binary
  4. Tomcat 6

Feito os downloads e a instalação do Eclipse e FlashBuilder, vamos iniciar o FlashBuilder para criar o projeto.
Antes de criar o projeto, vamos configurar o Tomcat:

  1. Nas preferências do Eclipse, vá em Server — Runtime Environments e clique em Add…
  2. Na pasta Apache selecione Apache Tomcat v6.0 e clique em Next
  3. Selecione a pasta onde você descompactou o Tomcat e clique em Finish

Feito a configuração do Tomcat, vamos criar o projeto:

  1. Vá em File – New – Flex Project
  2. Preencha os dados do primeiro passo como na imagem abaixo e clique em Next
  3. Neste passo vamos configurar os dados do servidor. Deixe tudo configurado como na imagem e clique em Next

    Para selecionar o “Target Runtime”, clique em New e depois escolha o Apache Tomcat 6, como na imagem abaixo.
  4. No último passo não será necessário mudar nada, clique em Finish

Agora vamos criar a classe Java que terá o serviço para retornar a string “HelloBlazeDS”

  1. Crie uma classe Java br.com..service.RemotingService
  2. Crie o serviço:
    1
    2
    3
    4
    5
    6
    7
    8
    package br.com..service;
    public class RemotingService {

        public String sayHello() {
            return "HelloBlazeDS";
        }

    }

Agora vamos configurar o BlazeDS para disponibilizar o serviço que acabamos de criar.

  1. Abra o arquivo remoting-config.xml que está na pasta WebContent/WEB-INF/flex
  2. Para que seja possível chamar os métodos da classe Java, precisamos configurar um destination. Isso é necessário para cada classe Java.
    O arquivo fica assim:

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    <?xml version="1.0" encoding="UTF-8"?>
    <service id="remoting-service" class="flex.messaging.services.RemotingService">
        <adapters>
            <adapter-definition id="java-object"
                class="flex.messaging.services.remoting.adapters.JavaAdapter"
                default="true" />
        </adapters>
        <default-channels>
            <channel ref="my-amf" />
        </default-channels>
        <destination id="blazeServices">
            <properties>
                <source>br.com..service.RemotingService</source>
            </properties>
        </destination>
    </service>

Vamos colocar na aplicação a chamada para o servidor.

  1. A primeira coisa que precisamos fazer é configurar o RemoteObject. Fazer isso é muito simples:
    1
    2
    3
    4
    5
            <fx:Declarations>
            <s:RemoteObject id="services" destination="blazeServices"
                            result="services_resultHandler(event)"
                            fault="services_faultHandler(event)" />
        </fx:Declarations>

    Alguns detalhes:

    * Perceba que a propriedade destination aponta para o destination que configuramos no arquivo remoting-config.xml

    * Precisamos declarar um id para poder referenciar o RemoteObject

    * Adicionamos um ResultHandler para tratar o resultdo do serviço

    * Adicionamos um FaultHandler para tratar a falha do serviço

  2. Os Handlers ficam assim:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
            <fx:Script>
            <![CDATA[
                import mx.controls.Alert;
                import mx.rpc.events.FaultEvent;
                import mx.rpc.events.ResultEvent;

                protected function services_resultHandler(event:ResultEvent):void
                {
                    Alert.show(event.result.toString());
                }


                protected function services_faultHandler(event:FaultEvent):void
                {
                    Alert.show(event.fault.message);
                }

            ]]>
        </fx:Script>

    Alguns detalhes:

    * A propriedade result do evento ResultEvent vai conter o resultado do serviço. No nosso caso o serviço retorna uma String “HelloBlazeDS”

    * A propriedade fault do evento FaultEvent contém os detalhes do erro.

  3. A última coisa é chamar o serviço. Vamos fazer isso no evento creationComplete, como segue:
    1
    2
    3
    4
            protected function application1_creationCompleteHandler(event:FlexEvent):void
                {
                    services.sayHello();
                }
  4. A aplicação inteira fica assim:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
            <?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"
                   creationComplete="application1_creationCompleteHandler(event)">
        <fx:Script>
            <![CDATA[
                import mx.controls.Alert;
                import mx.events.FlexEvent;
                import mx.rpc.events.FaultEvent;
                import mx.rpc.events.ResultEvent;

                protected function services_resultHandler(event:ResultEvent):void
                {
                    Alert.show(event.result.toString());
                }


                protected function services_faultHandler(event:FaultEvent):void
                {
                    Alert.show(event.fault.message);
                }


                protected function application1_creationCompleteHandler(event:FlexEvent):void
                {
                    services.sayHello();
                }

            ]]>
        </fx:Script>
        <fx:Declarations>
            <s:RemoteObject id="services" destination="blazeServices"
                            result="services_resultHandler(event)"
                            fault="services_faultHandler(event)" />
        </fx:Declarations>
    </s:Application>

Agora só falta fazer o deploy da aplicação e subir o servidor.

  1. Vá em Window – Show View – Other. Na janela que abrir, digite Servers e clique OK
  2. Na view Servers, clique com o botão direito em Tomcat v6.0 e selecione Add and Remove…
  3. Selecione a aplicação HelloBlazeDS e clique em Add e depois Finish
  4. Na view Servers, clique com o botão direito em Tomcat v6.0 e clique em Run

Agora é só executar a aplicação e ver o resultado:

Isso é tudo, guarde esse projeto configurado para ser usado nos próximos posts.

Comments

  • icaroqr
    março 9, 2011 Responder

    Vou seguindo a thread! Tenho algumas duvidas com o Blaze! =D
    Parabéns pela abordagem!
    Abs!

  • SuporteMineiros
    março 27, 2011 Responder

    Shooow, já ansioso pelos próximos posts…

  • Jhonathan
    abril 17, 2011 Responder

    A minha aplicação deu o seguinte erro quando executa:

    —————————————————————————————————————
    HTTP Status 404 – /HelloBlazeDS/HelloBlazeDS/bin-debug/HelloBlazeDS.html

    type Status report

    message /HelloBlazeDS/HelloBlazeDS/bin-debug/HelloBlazeDS.html

    description The requested resource (/HelloBlazeDS/HelloBlazeDS/bin-debug/HelloBlazeDS.html) is not available.

    Apache Tomcat/6.0.32

    ———————————————————————————————————————–

    o que você acha que poder ser?

  • Henrique Marino
    abril 17, 2011 Responder

    @Jhonathan A url está errada, você deve acessar /HelloBlazeDS/HelloBlazeDS.html. Para mudar o padrão que o Eclipse utiliza, mude a propriedade “Output folder URL:” para http://localhost:8080/HelloBlazeDS, por exemplo.

  • Jhonathan
    abril 18, 2011 Responder

    Nesse endereço que você passou dá o seguinte erro:

    faultCode:Client.Error.MessageSend faultString:’Falha no envio’ faultDetail:’Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Status 404: url: ‘http://localhost:8080/WebContent/messagebroker/amf”

  • Henrique Marino
    abril 18, 2011 Responder

    @Jhonathan, perceba que o context-root na url acima é WebContent e deveria ser HelloBlazeDS, por isso não funciona. As vezes quando criamos um projeto integrado com WTP o FlashBuilder não respeita o context-root que colocamos na criação do projeto. Faça o seguinte (workaround):
    Abra o arquivo .flexProperties e mude o valor da prop: serverContextRoot=”HelloBlazeDS”. Esse é o context-root que será usado pela aplicação Flex e deve ser igual ao context-root que você usa para acessar a aplicação.

  • Jhonathan
    abril 18, 2011 Responder

    Deu certo. O meu problema todo foi relacionado a url. Cara, eu estava olhando no site da Adobe e tem um exemplo do James Ward, ele mostra uma forma em que faz dois projetos separados, você sabe me dizer qual a diferença entre programar usando dois projetos e um projeto? Qual a melhor abordagem?

  • Henrique Marino
    abril 19, 2011 Responder

    @Jhonathan Basicamente a diferença é que um projeto será puro Java e outro puro Flex. Quanto a melhor abordagem, isso é mais questão de “momento” do que outra coisa.
    As ferramentas também irão influenciar na decisão. Por exemplo, se você tiver usando o flexmojos você vai usar 2 projetos. Se você tiver equipes distintas e que não precisam saber da configuração de todos as tecnologias, talvez criar 2 seja uma boa solução e por ai vai…

  • Jhonathan
    abril 25, 2011 Responder

    Obrigado! Como vou desenvolver um pequeno projeto sozinho vou optar pela abordagem de um projeto único como você demonstrou no tutorial!

    Gostaria de mais uma dica, você conhece um bom livro para desenvolvimento Java e Flex?

    Gostei muito do seu post, e muito mais ainda da sua atenção em esclarecer minhas dúvidas. Parabéns! Acho que o melhor caminho é o compartilhamento de ideias.

Leave a Comment