Integrando Adobe Flex + BlazeDS + SpringFramework + Hibernate – Uma Solução OpenSource para Sistemas Web. (Parte 1)

Olá Pessoal,

Hoje vou começar algo que estou prometendo há um bom tempo! A integração dos seguintes frameworks:

Adobe Flex;

Adobe BlazeDS;

Spring Framework;

Hibernate;

Introdução

No mundo de desenvolvimento WEB principalmente com Java, temos problemas quanto ao desenvolvimento de interfaces, como incompatibilidade entre browsers, desenvolviemento lento, e outros detalhes que muitos vivenciam diariamente.

Existem soluções que prometem como o JSF por exemplo, mas como dizem “A primeira experiência em Flex o programador Java nunca esquece.” logo quero convidar você que vem do mundo do Java, para conhecer uma solução de desenvolvimento de interfaces com o AdobeFlex.

Apresentando Adobe Flex e Adobe BlazeDS

Adobe Flex

Do Flex não vou falar muito, também por que neste blog você pode encontrar muito conteúdo explicativo como por exemplo este link: http://23.20.48.222/?p=32 algumas abordagens ali já estão desatualizadas, porém a essência é a mesma como por exemplo algumas vantagens de se usar Flex:

O Flex é executado a partir de uma máquina virtual, logo o programador apenas se preocupa em desenvolver a interface não em programar compatibilidade entre browsers.

Você programa sua interface totalmente orientada a objetos, isso visa reuso de componentes, desenvolvimento de módulos e afins.

Há várias maneiras de comunicar o Java com o Flex, mas em destaque é que você pode trocar objetos Java/Flex por um protocolo que provê compactação e tranferência binária, este é o AMF.

Adobe BlazeDS

O BlazeDS é um produto OpenSource (Licença LGPL v3) que corresponde à tecnologia JAVA server-side que dá suporte tanto para o Remoting assim como ao Messaging de objetos trocados entre o Java e o Flex/Flash.

Com o BlazeDS você pode gerar vários tipos de canais de conexão, um destaque muito importante para toda a comunidade Flex/Flash mundial, é que o serviço de data-push também foi disponibilizado de graça!, para quem não conhece, é algo semelhante ao Pattern Observer.

Integrando o Adobe Flex com o BlazeDS

Requerimentos:

Eclipse 3.3;

Adobe Flex Builder 3 Plugin;
*No título apresento como solução OpenSource, e o FlexBuilder 3 é pago, mas irei fazer uso apenas para facilitar o entendimento, caso seja estudante, baixe o FlexBuilder 2 é de graça para estudantes ou afins, caso não, baixe o Flex SDK e compile com Ant ou com o FlashDeveloper que é de graça.

Adobe BlazeDS;
*É recomendável que baixe a documentação do BlazeDS, para futuros estudos.

Tomcat 6.0;

Ok, Vamos começar!

Extraia o Eclipse 3.3 em algum lugar, por exemplo C:/Desenvolvimento/Eclipse 3.3/

Instale o Plugin do Flex no Eclipse, quando pedir o local aonde instalar o flex sdk, você pode selecionar em C:/Desenvolvimento/Frameworks/Adobe/

Após baixado o BlazeDS, perceba que ele vem vários arquivos, o que importa agora são os seguintes:

blazeds-samples.war

blazeds.war

No blazeds-samples.war como o próprio nome diz, contém aplicações de exemplo, como implementação do data-push, um chat, e etc…

O blazeds.war contém tudo o que é necessário para podermos configurar nossa aplicação.

Você deve ter percebido que no arquivo que você baixou o BlazeDS, contém um Tomcat já com todas as libs necessárias e etc.. Algumas libs ali tem reelevância como a flex-tomcat-common.jar e flex-tomcat-server.jar mas vamos deixar isso para outro artigo =)

Apesar do BlazeDS já vir com um Tomcat, eu estarei usando meu próprio Tomcat 6.0.

Abra seu Eclipse, e faça como no screencast abaixo que mostra como criar seu projeto no Eclipse 3.3:

Link Externo

*Se na aba “Problems” estiver com o erro “Cannot create HTML wrapper. Right-click here to recreate folder html-template.” clique com o botão direito, e clique em Recreate HTML Templates. Considero isso um bug do FlexBuilder.


Com o projeto criado, vamos adicionar as libs necessárias para a execução do BlazeDS, para isso abra o blazeds.war (Com um Winrar da vida) e copie todos os Jars contidos na pasta WEB-INFlib para o nosso projeto na pasta WebContentWEB-INFlib.

Com as Libs adicionadas, vamos criar um serviço no java que servirá como exemplo de como o Flex pode acessar uma classe java através do BlazeDS.

Para isso na pasta src_java, crie uma estrutura de pacotes, por exemplo:

com/digows/artigos/JavaFlex/model/service/
com/digows/artigos/JavaFlex/model/entity/

Dentro do package entity crie uma classe java com o nome de Cargo com o seguinte conteúdo:

Cargo.java
[java]

package com.digows.artigos.JavaFlex.model.entity;

public class Cargo {

private long idCargo;
private String dsCargo;

public long getIdCargo() {
return idCargo;
}
public void setIdCargo(long idCargo) {
this.idCargo = idCargo;
}
public String getDsCargo() {
return dsCargo;
}
public void setDsCargo(String dsCargo) {
this.dsCargo = dsCargo;
}
}

[/java]

Entities (ou Entidades, nenhuma relação com Entity Beans) são objetos que possuem uma identidade única.

Um carrinho de compras numa loja virtual web não é igual a outro, não importa que possuam os mesmos produtos, o carrinho A é o carrinho do usuário A, o carrinho B é do usuário B. Mesmo que contenham os mesmos produtos você não pode exibir o carrinho B ao usuário A, eles são diferentes! O carrinho neste exemplo segue o Padrão Entity, ele é uma entidade de negócios única.

Dentro do package services crie uma classe java com o nome de CargoService com o seguinte conteúdo:

CargoService.java
[java]

package com.digows.artigos.JavaFlex.model.service;

import java.util.ArrayList;
import java.util.List;

import com.digows.artigos.JavaFlex.model.entity.Cargo;

public class CargoService {

public Cargo save(Cargo p_cargo) {
System.out.println(“Salvou o Cargo: “+p_cargo.getDsCargo());
return p_cargo;
}

public void remove(Cargo p_cargo) {
System.out.println(“Excluiu o Cargo: “+p_cargo.getDsCargo());
}

public List getList() {
return new ArrayList();
}

public Cargo findByPrimaryKey() {
return new Cargo();
}
}

[/java]

Services são classes que não implementam diretamente as regras de negócio da aplicação, apenas coordenam a interação entre os componentes, elas são quase sempre beans gerenciados pelo Spring. É muito importante que as classes do tipo Services não implementem as regras de negócio, elas apenas atuam como Façades coordenando as interações.

O CargoService claro não proverá persistência a um banco de dados, os sysouts ali são apenas para abstração da intragração.

Com as classes javas feitas, vamos a configuração dos channels do BlazeDS, para isso no web.xml contido dentro da pasta WebContentWEB-INFweb.xml, deixe como mostrado abaixo:

web.xml

[xml]

ArquiteturaJavaFlex

MessageBrokerServlet
MessageBrokerServlet

flex.messaging.MessageBrokerServlet

services.configuration.file
/WEB-INF/flex/services-config.xml

flex.write.path
/WEB-INF/flex

1

MessageBrokerServlet
/messagebroker/*

index.html
index.htm
index.jsp

[/xml]

Perceba que ao gerar a Servlet Java, é passado por parâmetro um arquivo dentro da pasta WebContentWEB-INFflex, crie um arquivo chamado services-config.xml como referênciado, este arquivo é o que contém Factorys, Channels, LogConfigs. Nós vamos usar apenas um tipo de serviço que o BlazeDS implementa, que o canal de AMF3 simples, para isso adicione o seguinte conteúdo:

services-config.xml

[xml]

false

[BlazeDS]
false
false
true
false

<!–Endpoint.*–>
<!–Service.*–>
Message.*
DataService.*
Configuration

true
20
{context.root}/WEB-INF/flex/services-config.xml
{context.root}/WEB-INF/flex/remoting-config.xml
{context.root}/WEB-INF/web.xml

[/xml]

Perceba que é feito um include em um arquivo chamado: remoting-config.xml, então crie um arquivo com este nome na pasta WebContentWEB-INFflex. Este arquivo contém alguns adapters, e nossos destinations, que nada mais é que o mapeamento das nossas classes de serviços no java. Para isso adicione o seguinte conteúdo:

remoting-config.xml

[xml]

com.digows.artigos.JavaFlex.model.service.CargoService

[/xml]

A estrutura deverá ficar igual apresentado abaixo:

image

Para testar se tudo está ok, de um botão direito sobre o Projeto JavaFlex, e clique em Run As -> Run on Server. Na proxima janela aberta, em server runtime deixe seleciona o “Apache Tomcat v6.0 e clique em finish, o Servidor irá iniciar, observer a aba Console para verificar possíveis erros. Se alguma Exception tiver ocorrida, verifique os passos e faça novamente.

Acessando o serviço Java através do remoting do BlazeDS

Como nosso serviço já foi levantado, basta gerarmos um form simples para testar nosso serviço, para isso na pasta src_flex, crie a seguinte estrutura de pastas:

com/digows/artigos/JavaFlex/view/entity/
com/digows/artigos/JavaFlex/view/screen/

Dentro do package Entity crie uma Classe ActionScript com o nome de Cargo com o seguinte conteúdo:

Cargo.as
[as]

package com.digows.artigos.JavaFlex.view.entity
{
[RemoteClass(alias=”com.digows.artigos.JavaFlex.model.entity.Cargo”)]
[Bindable]
public class Cargo
{
public var idCargo:Number;
public var dsCargo:String;
}
}

[/as]

A Classe Cargo do Flex, é nada mais nada menos do que o espelho do Entity do java, nesta classe não realizei get’s set’s. Para fazer o espelho dos objetos usei a metatag [RemoteClass] mapeando a localização exata (Com package e nome da Classe) da mesma classe no java. A metatag Bindable é uma annotation muito importante, mais agora vamos apenas abstrair ela.

E dentro do package Screen, crie um arquivo MXML com o nome de CargoForm com o seguinte conteúdo:

CargoForm.mxml

[xml]

[/xml]

Perceba que acoplei muito código neste arquivo, isto não é uma boa prática, nos próximos artigos irei desaclopar as responsabilidades em camadas.

Para testar se tudo está ok, no arquivo JavaFlex.mxml que está na raiz da pasta src_flex renomeie para index.mxml, de um botão direito e clique em Set as Default Application, e deixe ele com o seguinte conteúdo:

index.mxml

[xml]

[/xml]

E para finalizar vamos dizer ao compilador do Flex que existe um servidor de AMF levantado, para isso de um botão direito no projeto JavaFlex -> Properties -> Selecione Flex Compiler -> em Additional compiler arguments adicione a linha e ok:

-services “../WebContent/WEB-INF/flex/services-config.xml”

Para Executar, de um botão direito sobre o projeto JavaFlex, e clique em Run As -> Run on Server e Finish.

Se tudo correr bem, você verá a descrição que você digitou no flex aparecerá no console do Tomcat.

Bom finalizo aqui a primeira parte desta poderosa integração, logo logo posto o resto.

Link do Source do Projeto:
Download

Abraço Pessoal!!

o/

Te Amuh Liz!! =******

93 thoughts on “Integrando Adobe Flex + BlazeDS + SpringFramework + Hibernate – Uma Solução OpenSource para Sistemas Web. (Parte 1)

  1. marcio

    Ola, pessoal eu fiz e refiz o projeto e sempre estou tendo os mesmo erro.

    Alguém que conseguir rodar poderia entrar em contato ?

    Ou eu poderia colar o log do tom cat aqui ?

    Obrigado.

    Like

    Reply
  2. Tiago Luis

    Ola se alguem teve este mesmo problema, e puder mandar email tiago_vtg@yahoo.com.br

    O Araujo, fala la em cima de uma msg de erro do flex, Channel.Connect.Failed error NetConnection.Call.Failed.

    Dai o Rodrigo manda fazer um teste, e deu aqui justamente o erro 404 no http.

    Dai aqui uma msg de erro do tomcat, se alguem puder ajudar…

    WARNING: [SetPropertiesRule]{Server/Service/Engine/Host/Context} Setting property ‘source’ to ‘org.eclipse.jst.j2ee.server:MeuSistema’ did not find a matching property.

    Obrigado!

    Like

    Reply
  3. Pingback: Leonardo França » Adobe Flex e Java

  4. Júlio

    Olá,

    Estou tentando fazer esse exemplo, porem o erro “Cannot create HTML wrapper. Right-click here to recreate folder html-template.” clico com o botão direito, e não encontro o Recreate HTML Templates.

    Ja refiz umas 3 vezes o exemplo todo e nada!

    Se puder me ajudar!

    Obrigado

    Like

    Reply
  5. Emanoel

    Olá a todos,

    Estou com o mesmo problema do Júlio… não encontro a opção de ‘Recreat HTML Templates’. Poderia me ajudar?

    T+.

    Like

    Reply
  6. Keynes

    Digows,
    Parabens… Seu artigo ficou ótimo. Seguindo o tutorial consegui fazer a interação que a dias vinha tentando… Continue assim.

    Like

    Reply
  7. patricia

    Uma dúvia…Sou iniciante com o flex…esta associação entre Classe Java e Classe Action Script é sempre necessária para se acessar os dados da Classe Java, não existe ou forma?????

    Like

    Reply
  8. Wesley

    Ta dando esse erro!
    faultCode:Client.Error.MessageSend faultString:’Send failed’ faultDetail:’Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Status 404: url: ‘http://localhost:8080/JavaFlex/messagebroker/amf”

    To começando, alguem pode me ajudar?

    Like

    Reply
  9. Junior

    Ola Rodrigo!
    Estou entrando na onda do Flex agora, gostei muito do seu artigo, aprendi bastante nesta primeira parte, porém estou com um pequeno problema.
    É o seguinte, fiz do mesmo jeito que voce, s única diferença é que não criei um Dinamyc Web Project, criei um Flex Project, deste modo ja vem com vários arquivos prontos (services-config.xml por exemplo).
    Eu executo o meu projeto, ele roda no browser normalmente, mas quando digito valores nos campos e clico no botão salvar, esta dando falha ao chamar o serviço, entrando no método onFault.
    Sabe o que pode estar acontecendo?Como resolvo para continuar meus estudos com a parte 2?

    Desde já te agradeço

    Like

    Reply
  10. Marcos Fraga

    Rodrigo, tenho uma dúvida acerca da publicacao do cahnnel do amf, como vemos na abaixo no teu services-config.xml não foi colocado “localhost:8080”

    Então como o channel do amf pode ser publicado? Tem algum código setando “servidor:porta” em algum lugar no tutorial que eu não vi?

    Like

    Reply
  11. Elaildo Carvalho

    Caro Rodrigo
    Achei muito bacana Java+Flex tanto é que estou entrando nessa já fazendo seu exemplo acima, porém obtive um erro na hora de publicar o exemplo que foi o seguinte no Flex: !ENTRY org.eclipse.equinox.p2.reconciler.dropins 4 0 2009-01-28 23:26:50.034
    !MESSAGE Unable to determine link location from file: C:eclipselinkscom.adobe.flexbuilder.feature.core.link

    !ENTRY org.eclipse.core.resources 2 10035 2009-01-28 23:27:00.330
    !MESSAGE The workspace exited with unsaved changes in the previous session; refreshing workspace to recover changes.

    !ENTRY org.eclipse.jdt.ui 4 10001 2009-01-28 23:38:43.082
    !MESSAGE Internal Error
    !STACK 1
    Java Model Exception: Core Exception [code 368] Resource '/JavaFlex/src_java' does not exist.
    at org.eclipse.jdt.internal.core.MovePackageFragmentRootOperation.moveResource(MovePackageFragmentRootOperation.java:173)
    at

    E para o Tomcat deu este erro:
    !ENTRY org.eclipse.equinox.p2.reconciler.dropins 4 0 2009-01-28 23:43:07.765
    !MESSAGE Unable to determine link location from file: C:eclipselinkscom.adobe.flexbuilder.feature.core.link

    !ENTRY org.eclipse.jst.server.tomcat.core 4 0 2009-01-28 23:44:53.264
    !MESSAGE The Tomcat server configuration at ServersTomcat v6.0 Server at localhost-config is missing. Check the server for errors.

    Pode me ajudar ou alguém que esteja fazendo o exemplo também?

    Um abraço e parabéns!

    Like

    Reply
  12. Alessandro Moreira

    Caro Rodrigo,

    É possível fazer uso de interfaces como destino para o remote object? Acho o uso de interfaces o mais natural para serviços.

    Peço sua ajuda para entender esta questão. Exemplo e referências ajudariam muito.

    Agradeço muito sua ajuda!

    Like

    Reply
  13. Pingback: Adobe Flex e BlazeDS | CWBFX

  14. Anderson Pereira

    Eu fiz o seu exemplo aprendi muito mais na hora que vou salvar as informações do formulario ele dá seguinte mensagem de erro no pop-up.

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

    Like

    Reply
  15. Pingback: TUTORIAL JAVA + FLEX NA PRÁTICA 1/6 | SaberProgramar.com

  16. Rodrigo Valentim

    Rodrigão!!!

    Velho, queria agradecer pelo trabalho e dedicação em aprender e conseguir passar o conteúdo com facilidade…

    Obrigado, estive rodando a net e achei o seu conteúdo um dos mais ricos.
    Abraços!!

    Like

    Reply
  17. Andersen

    Bom, meu nome é Andersen, sou estudante da PUCRS, li o tutorial do digows (Didático e util, parabens!) sobre flex a algumas
    semanas atras, desde então venho estudando.
    A partir do tutorial estou criando uma aplicação, estou na parte que tenho
    duas tabelas, vendedor e produto, as tabelas estão bem configuradas no
    banco com o relacionamento, chave estrangeira, funcionando. Resumindo, um
    vendedor pode ter n produtos.
    Tenho uma tela onde coloco o ID, por exemplo, do 1 ao 100 e outro campo que
    coloco o nome do vendedor.
    Agora, estou no meu AC, crudProduto, lá possuo um metodo associar(), esse
    metodo ira chamar o associarService(vendedor, produto).
    A questão é que nao sei como fazer essa associação no meu AS, tens algum
    caminho que possa seguir, ou alguma dica?
    No AS, vou receber o vendedor e preciso tratar ele para trabalhar com o ID…

    Obrigado,
    Andersen.

    Like

    Reply
  18. Mauro

    Olá Rodrigo. Gostei muito do tutorial, parabéns mesmo. Mas meu execício está gerando um erro, o qual o Cristiano(também postou um comentário) também encontrou. O erro é o seguinte
    “The processing instruction target matching “[xX][mM][lL]” is not allowed.”
    Tenho tentado de todas as formas corrigi-lo mas todas sem sucesso, se puder me ajudar ficarei grato!

    Obrigado.

    Mauro.

    Like

    Reply
  19. Valdemar Jr

    Bom, estou curtindo seu tutorial, mas comigo aconteceu um erro que aconteceu com outras pessoas. 404: url: ‘http://localhost:8080/JavaFlex/messagebroker/amf” mas o meu contexto do tomcat não é esse, onde eu mudo essa referência ao contexto “JavaFlex”?

    Parabéns

    Like

    Reply
  20. Borges

    Referente ao HTML Wrapper. Clique com o botão direito do mouse no projeto, vá em Properties. Clique em Flex Compiler, e em HTML Wrapper, desmaruqe Generate HTML Wrapper File, clique em Apply, marque novamente e clique em Apply denovo. Problema resolvido.

    Like

    Reply
  21. Rener

    To com esse erro alguem pode me dar uma dica?

    faultCode:Client.Error.MessageSend faultString:’Send failed’ faultDetail:’Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Status 404: url: ‘http://localhost:8080/JavaFlex/messagebroker/amf”

    Like

    Reply
  22. Débora

    Olá Rodrigo!! 1ªmente quero te dar os parabéns…acompanho teu blog, algumas matérias na JavaMagazine e te sigo no twitter, estou começando agora com flex+java e esse teu post me ajudou muuuito!!!Obrigado mesmoO! Continue compartilhando seus conhecimentos, além de ajudar vc aprende tbm! Até o próximo post!!

    Like

    Reply
  23. Luiz Henrique Fávaro

    Muito Obrigado pelas dicas! Me ajudando muito! Segue MXML no Flash Builder 4 pra quem quiser. Pois precisei fazer algumas alterações para rodar!! Se alguem encontrar erros ou tiver dicas referente ao código abaixo, pode encaminhar no meu e-mail, por favor.

    Like

    Reply
  24. Icaroqr

    Muito bom o exemplo rodrigo! Obrigado pela colaboração. Eu só tive um problema..tentei fazer com que o eclipse gerasse o projeto do jeito que está no seu screencast, mas não consegui! Então pra funcionar mesmo, só Descompactei o seu rar e importei pro workspace…tem como voce mandar no meu email, ou responder aqui um passo a passo de como criou as estruturas do projeto?

    Like

    Reply
  25. Icaroqr

    Pra quem está com esse erro:

    :[faultCode:Client.Error.MessageSend faultString:’Send failed’ faultDetail:’Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Failed: url: ‘http://localhost:8080/JavaFlex/messagebroker/amf”]

    No arquivo que o rodrigo disponibilizou como fonte, não foi incluido os JAR’s do BlazeDS, na pasta WEB-INFlib
    Então ele não encontra a servlet “messagebroker” ..copiem os JAR’s da pasta lib do BlazeDS e colem na lib do WEB-INF de voces!
    Pra mim resolveu!
    Abraços!

    Like

    Reply
  26. Pingback: Spring « Bruno bg + ADOBE FLEX

  27. Alan

    Seria possível desenvovler o mesmo tutorial trabalhando eclipse e flex builder como instalaçõesdistintas, ou seja se o uso do Flex Builder Plugin???

    No aguado!

    Like

    Reply
  28. Sacramento Chamber

    I experimented with viewing your website on my iphone and the format doesnt seem to be right. Might wanna check it out on WAP as well as it seems most cell phone layouts are not really working with your web page.

    Like

    Reply
  29. gun classifieds

    I was just doing some web browsing on my iPhone during my break at my work place, and I happened across something I thought was interesting . It linked to your website so I jumped over. I can’t really find the relevance between your site and the one I came from, but your site good none the less .

    Like

    Reply
  30. Pingback: Iniciando no FLEX » Bruno bg + ADOBE FLEX

  31. Pingback: TUTORIAL JAVA + FLEX NA PRÁTICA 1/6 | jandersonfc

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s