Adobe Flash Builder + Flex 4 + BlazeDS 4 _ Erko Bridee

Embed Size (px)

Citation preview

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Principal Sobre Posts Sitemap Subscrever: Posts

Erko BrideeProcurar

Desenvolvimento Adobe AIR Flex Banco de Dados Java PHP Geral Anime Curiosidade Filme Game Geek Novidade Para rir Veculo Media Audio Vdeo Portiflio Palestra & Evento Projeto Tecnologia Energia Limpa Mobile Sistema Operacional

Uma viso particular de assuntos atuais

erkobridee.com//adobe-flash-buil

1/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Flex, Java, Projeto

Adobe Flash Builder + Flex 4 + BlazeDS 4domingo, 28/03/2010 5:39 am Post sobre como criar um projeto no novo Adobe Flash Builder 4, de um projeto Flex 4 com BlazeDS 4 e um exemplo de comunicao via Remoting, segue

6tweets

retw eet

Para este post sero necessrios os items: - Eclipse Galileo JEE - Adobe Flash Builder 4 plugin - Apache Tomcat 6 - BlazeDS 4 ( verso Beta utilizada: Nightly Builds > 4.0.0.14910 )

Criando projeto: Parar criar o projeto iremos precisar do BlazeDS.war previamente, da verso indicada neste post, ento, na perspectiva Flash, iremos criar nosso projeto:

erkobridee.com//adobe-flash-buil

2/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Temos 2 alternativas para criar um novo projeto Flex: - Atravs do menu: File > New > Flex Project - Clicar com boto direito, na rea em branco do Package Explorer, no popup menu: New > Flex Project

Nessa primeira tela iremos definir o nome do projeto, indicando que ser um projeto Flex, indicando que ter o back-end (lado Java que ir utilizar o BlazeDS) e ser um projeto combinando o Flex e o WTP no mesmo projeto, onde o diretrio do java ser o indicado no campo (no meu caso utilizo como padro java_src ), configurado o que for necessrio, clique no boto Next >

erkobridee.com//adobe-flash-buil

3/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Nessa tela importante observar, uma dica que ir lhe poucar horas de dor de cabea, nos campos: Context root e Context folder obrigatoriamente devem ter o mesmo nome, para que na hora da execuo funcione sem necessidade de nenhuma configurao adicional. Porm a parte ruim disto , para quem cria, e/ou, j criou projetos Java Web no Eclipse JEE est acostumado com os projetos onde o diretrio onde ficam o contedo de pginas o /WebContent, ento nesse projeto esse diretrio ser o nome definido no Context folder Lembrando tambm que nessa tela voc dever indicar o locar do BlazeDS.war, que ser usado na gerao da estrutura do seu projeto.

ltimo passo da criao do projeto, aqui, eu por padro defino: - Framework linkage: Runtime shared library (RSL) - Main application file: index.mxml Depois basta clicar no boto

Com isso temos o projeto criado:

erkobridee.com//adobe-flash-buil

4/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Como comentado anteriormente, podemos ver que o diretrio web, ao invs do tradicional /WebContent temos o diretrio nesse exemplo: /helloworld

Mas nem tudo so flores agora que temos o projeto pronto, precisamos fazer alguns ajustes, os famosos ajustes finos

Configurando o BlazeDS: Primerio, vamos comear removendo os lixos (o que no iremos utilizar) no BlazeDS do projeto. Iremos comear removendo os itens:

Feito isso, iremos remover as bibliotecas (diretrio /lib) do Spring que no sero utilizadas:

erkobridee.com//adobe-flash-buil

5/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Ficando apenas:

Outra configurao que normalmente fao nos projetos, para evitar problemas quando trabalho com vrios desenvolvedores em equipes na configurao das propriedades do projeto onde indica o local do servicesconfig.xml e me certifico que o locale esteja em en_US, o que me evita algumas dores de cabea. Para isto, clique com boto direito do mouse sobre o projeto:

erkobridee.com//adobe-flash-buil

6/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Clique na opo Properties do popup menu. Com isso ir abrir uma janela com as propriedades. Nessa janela selecione o item:

Ento nessa tela configure o item:

erkobridee.com//adobe-flash-buil

7/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Additional compiler arguments: -services "../helloworld/WEB-INF/flex/services-config.xml" -locale en_US Feito isso, clique no boto OK

Para finalizar os ajustes finos ainda necessrio atualizar o web.xml da aplicao, pelo que est dentro do BlazeDS.war que foi utilizado para criar o projeto, pois de alguma forma o Wizard de criao do projeto gera um outro contedo para o web.xml.

Segue o contedo atualizado do web.xml?View Code XML

Agora vamos colocar a mo na massa e fazer o que interessa Como vou apenas mostrar como utilizar Remote Object, irei fazer uma comunicao bem simples entre o Flex e o Java

Segue a classe Java do servio:?View Code JAVA

Agora precisamos cadastrar essa nossa classe como um servio disponvel no BlazeDS, e isto dever ser feito no arquivo: remoting-config.xml

erkobridee.com//adobe-flash-buil

8/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Segue a configurao do servio:?View Code XML 1 2 3 com.erkobridee.helloworld.flex.service.HelloWorld 4 5

At aqui j temos o lado do servidor pronto, hora de ir para o lado Flex da aplicao

Nessa nova verso do Flex existem 2 maneiras de trabalhar com os Remote Objects, a forma antiga que estamos acostumados atravs das mesmas tags do Flex 3 ou atravs dos Data Wizard presente no Adobe Flash Builder que gera para ns um suporte para trrabalhar com os Remote Objects

Mas vamos comear definindo a interface da aplicao:

Irei comear pela forma antiga, codificando como era feito no Flex 3, mas algo que no posso deixar de comentar aqui, utilizando o Adobe Flash Builder 4, a produtividade de velocidade de codificao esto muito mais rpidos do que na verso do Adobe Flex Builder 3 Comentei o panel do Data Wizard e implementei os respectivos cdigos para execuo, conforme o cdigo a seguir:erkobridee.com//adobe-flash-buil 9/25

((( i G o R ))) 29/01/2011 ?View Code ACTIONSCRIPT3

Adobe Flash Builder + Flex 4 + BlazeD

Hora de testar para isso clique com boto direito do mouse sobre o projeto e selecione a opo: Run as > Run on Server

Na janela a seguir, assumindo que voc tenha baixado o Apache Tomcat 6, e que esteja disponvel no seu ambiente e que no tenha nenhum outro projeto vinculado

erkobridee.com//adobe-flash-buil

10/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

clique no boto Finish

Com isso basta abrir a aplicao no WebBrowser:

erkobridee.com//adobe-flash-buil

11/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Clicando no boto sayHello

Clicando no boto sayHelloToName

Vimos que a cdificao exatamente a mesma que estamos acostumados, pelo menos as tags, fora a sintaxe, organizao do MXML do Flex 4 ficou mais clara (pelo menos na minha opinio).

erkobridee.com//adobe-flash-buil

12/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Hora de vermos a outra forma de trabalhar, que atravs do Data Wizard Lembre-se de deixar o servidor executando

Clique na aba Data/Services do Adobe Flash Builder

Nessa aba, clique no link Connect to Data/Service

Nessa janela que ser aberta, selecione BlazeDS e clique no boto Next >

erkobridee.com//adobe-flash-buil

13/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Ir lhe aparecer esta janela, solicitando o usurio e senha. Lembrando que configuramos sem autenticao, selecione o check box No password required e clique no boto OK

Nessa janela sero exibidos todos os servios disponves pelo BlazeDS, ento selecione o respectivo servio (Destination), indique o pacote Service package que ser o pacote onde sero gerados os cdigos AS3 para uso do servio. Feito isso, clique no boto Finish

erkobridee.com//adobe-flash-buil

14/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Na aba Data/Services , agora voc ve o seu servio mapeado disponvel

O Adobe Flash Builder tambm te disponibiliza um meio fcil e rpido para testar o seu servio Basta indicar qual servio e respectiva operao que deseja efetuar o teste.

Bom agora que j temos o suporte, basta adicionar o cdigo de uso na nossa aplicao e com esse novo Adobe Flash Builder realmente muito simples de fazer isso

Uma maneira de fazer isto , na rea de desenvolvimento visual, selecionar o item, no caso o boto sayHello ir na paleta de propriedades e na definio do On click, clicar no item indicado em vermelho, ento selecionar o Generate Service Call

erkobridee.com//adobe-flash-buil

15/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Ser aberto uma janela, onde voc dever indicar qual servio e respectiva operao que ser executada, feito isso clique no boto OK

Bom para o outro boto basta realizar o mesmo procedimento, indicando a operao sayHelloTo

Com isso o cdigo da aplicao Flex ficou:?View Code ACTIONSCRIPT3

Ento executando a aplicao pelo Web Browser temos:

erkobridee.com//adobe-flash-buil

16/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

Clicando no boto sayHello

Clicando no boto sayHelloTo

E com isso finalizo este post.

Projeto para download: [HelloWorld] projeto Adobe Flash Builder 4 O projeto est sem as libs, necessrio realizar o download da verso indicada do BlazeDS e adicionar as libs no projeto. Obs.: Essa maneira de montar projeto apenas 1 de 3 que eu conheo, porm at o momento a a mais rpida. Adobe Flash Builder, BlazeDS, Cdigo, Exemplo, Flex 4, Java, Projeto

Veja tambm:[Adobe AIR 2 : NativeProcess + Java] SimpleAirJava [ Adobe AIR ] Local File Explorererkobridee.com//adobe-flash-buil 17/25

((( i G o R ))) 29/01/2011

Adobe Flash Builder + Flex 4 + BlazeD

[Flex & AIR] Swiz Framework + Presentation Model : Exemplo de Projeto ActionScript 3 + Flash Player 10+ : LocalFileHelper Adobe Flex (HttpService) enviando parametros para a aplicao web em Java

Este post foi escrito por:

Erko Bridee - que escreveu 467 post(s).

Entre em contato

Comments (32)Classificar por: Data Classificao ltima Atividade jandersonfc 43p 43 semanas atrs

Logar

+1

timo material Erko, bem didtico ;) meu novo guru no flex 4..hehe vlw pelo post e tenho certeza que a galera vai aprender muito de flex 4 por aqui pelo o que tenho conversado com vc. Abraos ;)Responder

@carloslima_sis 43 semanas atrs Erko parabns pela iniciativa. Muito bom o post. Que venha outros sobre flex 4 =D. Abraos =DResponder

0

rafa 43 semanas atrs vlws pelo tut erko ... me diga uma coisa, o FB4 rodou bem com o eclipse galileo??? pq quando eu estava fazendo alguns testes com galileo + fb4 beta dava uns paus :( ai com gaynemede + fb4 beta rodou bem...... agora que o fb4 ja esta na versao final, nao sei em que p que ta...Responder

0

1 resposta ativo menos de 1 minuto atrs 0

rafa 43 semanas atrs erko.....estou batendo seu exemplo.....mas deu um erro no mxml na linha 102 :