Olá Pessoal,
Hoje vou começar algo que estou prometendo há um bom tempo! A integração dos seguintes frameworks:
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:
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.
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:
*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:
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!! =******
Rodrigo P. Fraga 
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.
LikeLike
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!
LikeLike
Pingback: Leonardo França » Adobe Flex e Java
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
LikeLike
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+.
LikeLike
Digows,
Parabens… Seu artigo ficou ótimo. Seguindo o tutorial consegui fazer a interação que a dias vinha tentando… Continue assim.
LikeLike
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?????
LikeLike
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?
LikeLike
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
LikeLike
Ola de novo Rodrigo!
Retornei seu email, se puder dar uma olhada, mandei o anexo do projeto.
Valeu!!!
LikeLike
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?
LikeLike
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!
LikeLike
Muito bom.. tudo funcionando.. parabéns…
LikeLike
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!
LikeLike
Pingback: Adobe Flex e BlazeDS | CWBFX
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”
LikeLike
Pingback: TUTORIAL JAVA + FLEX NA PRÁTICA 1/6 | SaberProgramar.com
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!!
LikeLike
Parabéns Rodrigo ótimo tutorial
LikeLike
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.
LikeLike
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.
LikeLike
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
LikeLike
Caros amigos instalei o eclipse, mas estou com dificuldade de baixar o plugin do flex pelo eclipse…podem me ajudar ?
Valeu
LikeLike
MUITO BOM MESMO.. vlw
LikeLike
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.
LikeLike
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”
LikeLike
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!!
LikeLike
por que nao anotaste a entidade como @Entity?
LikeLike
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.
LikeLike
Um sucesso! Maravilha de tutorial! Agora vou pro 2! Valeu mermão!
LikeLike
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?
LikeLike
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!
LikeLike
Pingback: Spring « Bruno bg + ADOBE FLEX
Ótimo post, suas informações são muito importantes, boa iniciativa
Abraços,
Ranieri Marinho de Souza
SEGR – Segurança da Informação
http://blog.segr.com.br
LikeLike
Thanks to all….
LikeLike
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!
LikeLike
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.
LikeLike
I adore this website layout ! How was it made!? It is rather good.
LikeLike
I typically don’t respond upon web-sites however , you contain some first-rate legible stuff.
LikeLike
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 .
LikeLike
Pingback: Iniciando no FLEX » Bruno bg + ADOBE FLEX
Boa noite Estou tendo o mesmo problema de http://localhost:8400/ICMais/messagebroker/amf
Parece que Iacaroqr resolvei colocando JAR do Blazeds na pasta lib vc poderia informa quais os nomes dos jar que vc colocou pois estou tendo o mesmo problema e já coloquei os jar na pasta
Desde já agradeço atenção de todos!
LikeLike
Pingback: TUTORIAL JAVA + FLEX NA PRÁTICA 1/6 | jandersonfc