Tutorial Flex4 + BlazeDS + Java do zero #1

Tutorial Flex4 + BlazeDS + Java do zero #1

Como já tinha falado antes, entrei numa nova fase de alargar um pouco mais os meus conhecimentos; Quem conhece o blog sabe que o meu principal foco sempre foi o desenvolvimento em flash / flex com php / mysql. Tudo tecnologias completamente gratuitas, mas decidi entrar no mundo do java principalmente devido a um projeto no qual estou envolvido e que tive que criar uma aplicação de playlists em Java para o servidor de streaming Red5. Para aqueles que desconhecem o red5, ele é um servidor de streaming e remoting feito em java (baseado em grande parte no tomcat) com funcionalidades especificas para streamming.

Depois de muitas cabeçadas la consegui fazer o que se pedia e mais, ainda ganhei o tal bichinho do Java. Foi aqui que tudo começou!

Nesta primeira parte vou falar do que mais me deu voltas à cabeça a quando de isolar por completo o red5 e começar do zero no java com o flex. Acreditem que as configurações podem ser a maior dor de cabeça a quando de iniciar no java, principalmente no remoting.

Todos os passos que aqui vou apresentar com certeza serão alvo de criticas, desagrado, más interpretações e até maus hábitos, no entanto esta foi a forma que consegui, por isso se acharem que não está correto eu até agradeço que me informem da forma correta de o fazer. Então aqui vamos nós deste a instalação, configuração, primeira app java, primeira app flex e comunicação entre elas!

#1 . Requesitos

São necessários alguns procedimentos antes de iniciarmos a integração entres estas tecnologias, pelo que o primeiro passo é fazer o download de:

  • Eclipse IDE for java Developers, Pagina de download aqui.
  • Java Development Kit, Versão Atual JDK6, Pagina de download aqui.
  • Adobe Flhas Builder 4 Trial, Pagina de download aqui. Versão Stand Alone.
  • BlazeDS Turnkey, Pagina de download aqui. (Necessita uma conta gratuita na adobe). Download da versão “BlazeDS turnkey” de 47 MB que já traz consigo o servidor tomcat, desta forma não necessitamos de o configurar à parte.
  • No meu caso eu uso o Windows 7 32 bits, mas funcionará em qualquer versão do windows 32bits, no entanto se for 64bits devem fazer atenção nos downloads e escolherem a versão correta pro vosso sistema.

#2. Instalação e Configuração do JDK6

Bom, o ficheiro que vai terminar o seu download primeiro, é provavelmente o JDK, e é por esse mesmo que vamos começar. Abram o arquivo, siga os passos de instalação normais (clicando duas ou 3 vezes no Next / Seguitne). A instalação do java far-se-à automaticamente nas pastas por defeito e com as opções por defeito, aqui nada precisamos de alterar. (Deixem o caminho por defeito: C:\Program Files\Java\jre6) ou então mais tarde lembrem-se de usarem os caminhos corretos da vossa instalação.

No final precisamos de confirmar duas variaveis do sistema, o JAVA_HOME e o PATH que pode parecer complicado mas não o é. O JAVA_HOME aponta para a localização do Java no sistema operativo e o PATH para a localização do executàvel da maquina virtual do java.

Para definir o JAVA_HOME basta abrirem a linha de comandos do MS DOS, no menu iniciar do windows no campo procura escrevam “cmd” sem as aspas, e cliquem no resultado cmd que aparece. Depois basta escreverem o seguinte:

set JAVA_HOME=C:\Program Files\Java\jdk1.6.0_22

e está feito. Agora para definir o path, tambem o poderíamos fazer pela linha de comandos, no entanto o PATH também é usado para outras aplicações e já tem alguns caminhos definidos, desta feita temos que apenas acrescentar aos existentes, para isso façam o seguinte:

Menu Iniciar -> Painel de Controlo -> Sistema -> Sistema -> Definições avançadas do sistema -> Avançado -> Variaveis do sistema

Cliquem na variavel PATH e Façam alterar, juntem no final dela o seguinte (incluindo o ponto e virgula) (Não apagem nenhuma das entradas que la existe):

;C:\Program Files\Java\jre6\bin

E está feito! Cliquem ok. Temos o java Configurado!

#3. Instalação e Configuração do BlazeDS

Depois do download, abram o arquivo que deve ser algo como blazeds-turnkey-4.0.0.14931 e extraiam o seu conteúdo para por exemplo c:\blazeds e voilá! Está feito! A magica é que  vem tudo a funcionar out-of-box! Temos então o tomcat e o blazeDS completamente funcionais, mas vamos testar mesmo se tudo correu bem porque por vezes a não definição do JAVA_HOME e PATH podem trazer erros para a inicialização do tomcat. Para testar se tudo correu bem, abram de novo a janelinha “cmd” do MS DOS e naveguem até a pasta do blazeDS fazendo os seguintes comandos para iniciar o tomcat:

cd c:/blazeds/tomcat/bin [TECLA ENTER]

catalina start [TECLA ENTER]

E o vosso servidor deve iniciar-se sem qualquer problema. Devem visualizar algo como a janela ao lado.

#4. Instalação do Eclipse

O download do eclipse virá num arquivo “ready-to-use” também, basta extrairem o conteudo do arquivo para por exemplo c:\ criando assim a pasta do eclipse em c:\eclipse.

#5. Finalmente, a instalação do flash builder 4

Depois do longo download, abram o executável e instalem tudo com as opções por defeito, o Flash Builder Será instalado sem qualquer necessidade de configuração. É uma versão Trial de 60 dias que estará inteiramente funcional durante esse periodo.

E bom, terminamos a parte das instalações e configurações iniciais. Agora vamos ver como criar uma simples aplicação Ola Mundo e como proceder para todas as configurações desta aplicação para servir o flex via blazeDS + Tomcat.

#6. Criando o primeiro projeto java.

Abram o eclipse, se vos pedir para escolherem o Workspace, apontem para uma pasta no sistema, que será usada para guardar todos os vossos projetos criados com o eclipse. Depois de aberto, cliquem no menu File->New->Java Project, Como nome escrevam olaMundo e depis em Finish.

O Vosso projeto Java será criado rapidamente, e irá aparecer-vos a estrutura dele na lateral, algo como a imagem ao lado mostra.

Agora uma das partes onde mais gente varia nas suas explicações, eu vou fazer à minha maneira, pelo que se discordarem ou quiserem indicar uma outra forma basta informarem. Aminha app vai funcionar com as classes expostas, não vou gerar qualquer jar para colocar jo servidor, nem vou gerar a app imediatamente no servidor tomcat (embora isso possa ser uma boa prática). Cliquem com o botão direito no olaMundo e escolham New -> Folder e escrevam WEB-INF e depois Finish. Voltem a clicar neste WEB-INF com o botão direito e novamente em New-> Folder e escrevam classes e finish. Voltem a repetir este passo para uma pasta chamada src. Devemn no final conseguir uma estrutura em tudo semelhante à imagem aqui à direita.

Agora cliquem com o botão direito em src ->Build Path -> Use as Source Folder para definir esta pasta como pasta de origem das classes, todas as classes serão criadas aqui e este será usado como base da nossa aplicação.

Finalmente cliquem no menu Project do eclipse -> Properties -> Java Build Path -> Source e ao fundo em Default Output Folder coloquem: olaMundo/WEB-INF/classes e cliquem em ok. Desta forma todas as classes compiladas da nossa aplicação serão criadas aqui, classes que o blazeDS vai usar.

Bom, agora fica a faltar cria a primeira class e completar a nossa pasta com alguns ficheiros extra de configuração.

#6.1 Criando a primeira class ola.Mundo

Cliquem com o botão direito no projecto olaMundo->New->Class e na janela que se abre em Source folder: olaMundo/WEB-INF/src em Package coloquem ola e em name Mundo e depois em finish. Temos agora a nossa primeira class pronto para usar, vamos criar apenas uma simples função olaJava:
[coolcode lang=”java”] package ola;
public class Mundo {

public String olaJava(String nome) {
return “Olá Mundo! Olá “+nome;
}
}

[/coolcode]

Esta será a função que iremos chamar do nosso projecto flex. E pronto, agora só terminar a nossa criaçâo da app com alguns ficheiros extra de configurações, librarias, etc’s… são

bastantes arquivos, mas não se preocupem que eles já estão até preparados. O primeiro passo é abrir o arquivo c:\blazeds\blazeds.war com o winzip ou winrar e extraiam o conteudo por exemplo para c:\blazeds\ConfigBaseJavaBlazeDS

La vão encontrar duas pastas, a WEB-INF e META-INF, a que nos interessa é a pasta WEB-INF que contem a configuração por defeito de um projecto java / blazeDS / flex. Nesta pasta WEB-INF copiem as pastas lib, flex e o ficheiro web.xml e voltem ao vosso projeto no eclipse, selecionem a pasta WEB-INF e copiem para aqui as pastas lib, flex e ficheiro web.xml. Devem então obter uma estrutura parecida com a imagem ao lado.  A pasta lib contem todas as librarias do blazeDS que precisamos ou possamos precisar para fazer a ligação com o nosso projecto java, já a pasta flex é usada para guardar os ficheiros de configuração. Nela encontram 4 arquivos xml:

  • messaging-config.xml Usado para configurar canais de menssaging, como no caso de um chat.
  • proxy-config.xml Usado para configurar serviços de proxys, para evitar alguns erros de crossdomain policy
  • remoting-config.xml Usado para configuração de canais remoting e seus destinos / sources.
  • services-config.xml O tal conhecido ficheiro de configuração de remoting, que aqui é usado para carregar também os outros 3 ficheiros de configuração.

O que nos interessa no nosso primeiro exemplo é tão simples como apenas ativar o remoting para a nossa class ola.Mundo, para isso abrimos o ficheiro remoting-config.xml e adicionamos um novo destino de remoting, bastando colocar apenas o seguinte:

[coolcode lang=”xml”]

ola.Mundo

[/coolcode]

Como podem ver o source do nosso serviço aponta para a nossa class java: ola.Mundo. Esta configuração expõe a nossa class ao blazeDS fazendo com que ela possa ser chamada pelo flex. Agora salvem o arquivo e ja está!!

#6.2 Publicando no tomcat a nossa primeira aplicação

Agora é só parar o nosso servidor tomcat, e publicar a nossa aplicação.

Para isso, naveguem até C:\blazeds\tomcat\webapps e criem uma pasta olaMundo. Para dentro desta pasta devem copiar a pasta WEB-INF do vosso eclipse, basta abrirem o eclipse, clicarem com o botão direito no WEB-INF e copiarem, voltando ao C:\blazeds\tomcat\webapps\olaMundo\ colem aqui a pasta.

Re-iniciem o vosso servidor tomcat: catalina stop e depois catalina start.

#7. Criando o nosso projecto flex.

O flash builder 4 é realmente poderoso, e então no que diz respeito à integração com o blazeDS ela é simplesmente muito fácil. Iniciem o Flash Builder, criem um novo projecto:

File->New->Flex Project em nome coloquem olaMundo, mais em baixo em Application Server Type Escolham J2EE e ainda mais em baixo BlazeDS, cliquem agora em Next. Agora a parte de configuração dos caminhos no nosso servidor (certifiquem-se que o servidor está a funcionar; catalina start), Coloquem como em baixo:

  • Root folder: C:\blazeds\tomcat\webapps\olaMundo
  • Root URL: http://localhost:8400/olaMundo
  • Context root: /olaMundo

Cliquem em validate configuration, se tudo correu bem devem receber uma nota no topo a dizer: “The web root folder and root URL are valid.” Sinal que tudo está bem ;)

Cliquem agora em finish, o vosso projeto será criado já configurado com o services-config. Agora só falta mesmo testar!!

#7.1. Comunicando com a class ola.Mundo do java Via BlazeDS.

Agora o mais facil, a nosso cmunicação. Basta criar um remote object, e chamar a função olaJava atravez dele, com o simples código em baixo isso é facilmente conseguido. Coloquem o seguinte código no vosso olaMundo.mxml:

Entre as tags: <fx:Declarations />  coloquem:

[coolcode lang=”xml”]

[/coolcode]

E depois o seguinte:

[coolcode lang=”actionscript”]



[/coolcode]

E pronto, finalmente corram a vossa aplicação e cliquem no botão OlaJava!! ;)

Temos a nossa aplicação a funcionar a 100%!  E que vos seja muito util!

Espero que finalmente tenha desmistificado esta “terrivel configuração” e que agora seja bem mais fácil esta integração!!

Sugestões, criticas ou melhoramentos é só deixar um comentário.

Segue o projecto Java do eclipse e o projecto do Flash Builder para download:

  • Projeto Java: [download id=”34″]
  • Projeto Flex: [download id=”33″]

Duvidas? Use o forum: http://forum.msdevstudio.net

Um abraço!


17 comments

add yours
  • Eduardo Costa December 6, 2010

    Boas,

    Obrigado Mário pelo tutorial, já o fiz e funcionou 100%. Muito bom para quem está a começar, que é o meu caso.

    Abraço

  • Adriano December 16, 2010

    Mário, se quiseres tenho este link (http://dicasdeflex.blogspot.com/2010/10/integracao-java-e-flex.html) que explica esta integração já criando um projeto web no java, terás um pouco menos de dor de cabeça para desenvolver e para gerar a aplicação… Como já aprendi muito aqui, espero que este exemplo te ajude nesta caminhada no Java, qualquer coisa podemos trocar mensagens…

  • Jair Alarcón December 16, 2010

    Saudações!

    Tenho que admitir que na minha primeira tentativa não deu certo, mas na segunda ficou perfeito. Parabéns pelo artigo, só cuidado com os erros de português, pois tira um pouco da credibilidade do texto (opinião minha). []’s! =D

  • Mário Santos December 17, 2010

    Adriano,

    Obrigado, vou dar uma olhadela.

    Jair,
    Obrigado…
    Quanto aos erros talvez por eu escrever Português de Portugal seja um pouco diferente… será por isso? ou passaram assim tantos erros?

    Abraço.

  • Carina March 23, 2011

    Só comentando, realmente ajudou a entender ^^
    Porém no código que se coloca entre o no meu constou um erro que resolvi, estava faltando um ; após chamando o método no result e no fault.
    Ah, e quanto aos erros de português, tem umas diferenças, porém por exemplo você escreveu “atravez” e é através, “requesitos” e é requisitos, são os que eu lembro pelo menos, dê uma observada, creio que estes não são diferentes em Portugal…
    Parabéns pelo post, bem explicativo o passo-a-passo e deu certinho o que não estava conseguindo fazer ^^ só cuide-se mesmo no português ^^
    ;D

  • Carina March 23, 2011

    obs.: ele remove as tags, quando falei o código entre o

  • Carina March 23, 2011

    * removeu novamente, desculpe, fx : Declarations

  • R.Dyego May 10, 2011

    Hehe vlw cara, foi de grande ajuda seu tutorial, abração!

  • R.Dyego May 10, 2011

    Mário, como faço para rodar esse projeto na web ( não sendo local), você já fez algum tutorial antes falando sobre isso? vlw

  • Mário Santos May 17, 2011

    Para o deploy na web, o processo é o mesmo, no entanto a maior dificuldade é encontrar um servidor com suporte a JAVA / Tomcat, a partir daí as configurações e deploy são as mesmas…

    Abraço.

  • Rodrigo Marcelo June 30, 2011

    Meu amigo!!!

    Você não faz ideia do quanto eu me matei com isso aqui e não conseguia fazer…

    Você foi o único que explicou de maneira clara como isso funciona…

    Obrigado meeeeesmo!!!!

  • Mário Santos June 30, 2011

    Opa Rodrigo, ainda bem que pude ajudar!

    Abraço!

  • Rodrigo Marcelo July 1, 2011

    Mário, como eu disse, consegui fazer a conexão java/flex através do seu tutorial. Com isso, consegui conectar a banco de dados, e estou fazendo um cadastro de clientes, que por sinal já está cadastrando e tudo mais, porém não consigo popular o datagrid, consigo na mão, mas em tempo de execução não. Tenho um banco de dados, com uma tabela, quero pegar dados dessa tabela pela minha classe java… exportar pro flex… e exibir no grid… vc tem algum tutorial a respeito? Muito obrigado.. abraço…

  • Fabio Mattes July 31, 2011

    Aqui deu o seguinte erro:

    Error : [FaultEvent fault=[RPC Fault faultString=”[MessagingError message=’Destination ‘olaService’ either does not exist or the destination has no channels defined (and the application does not define any default channels.)’]” faultCode=”InvokeFailed” faultDetail=”Couldn’t establish a connection to ‘olaService'”] messageId=”D7C1CF54-49F0-1EE3-2336-81D536A0D312″ type=”fault” bubbles=false cancelable=true eventPhase=2]

  • Fabio Mattes August 1, 2011

    Desconsidere, já descobri o problema! :)

  • Paulo October 13, 2011

    Alguem sabe me informar se isso funciona no Flex Mobile para android? tentei mas esta dando um err:
    “Channel.Connect.Failed error NetConnection.Call.Failed: HTTP: Failed: url: ‘http://laMundo.swf/olaMundo/messagebroker/amf”
    mas o mesmo codigo funciona em Flex Project

  • Douglas December 10, 2011

    Fábio Mattes, sobre o erro que vc pediu pra desconsiderar, sabe dizer o que era?? Comigo está dando o mesmo erro!

Leave a Comment

Post