Back-End

15 mar, 2010

Hello World Flex + BlazeDS

Publicidade

Salve Galera!

Após quase um ano afastado recebi alguns emails com dúvidas, e foi essa vontade das pessoas aprenderem que me motivou voltar a escrever, quero colaborar com a comunidade Brasileira de Flex, com um pouco do que aprendi nesse período.

Vamos começar do ínicio (obviamente).Em vez de ensinar como configurar o Flex com o Java e o framework X usando também o framework Y (todos ficam meio perdidos entre tantos frameworks que o Java tem).Vamos começar fazendo o básico e depois evoluindo.

Hoje iremos configurar um Hello World ( o famoso Hello World ) integrando o Flex com o Java, nessa integração iremos utilizar o BlazeDS, que considero ser o melhor modo para integrar essas duas tecnologias (temos outras opções no Java como GraniteDS, WebOrb, entre outros).

Esse tutorial terá um diferencial para alguns que são encontrados na internet.Eles apresentam o projeto Java integrado ao projeto Flex, nesse iremos criar separado que nos facilita em muitos aspectos que vocês irão perceber na hora de dar manutenção do sistema.

Requerimentos mínimos para esse tutorial:
Ambiente configurado.
Eclipse + Plugin Flex Builder
ou Eclipse + Flex Standalone

Primeiramente, vamos criar o nosso projeto JAVA no Eclipse.

Crie um novo projeto do Java: File -> New -> Other? -> Web -> Dynamic Web Project
Abra o projeto do BlazeDS ¹.Dentro dele tem um arquivo: blazeds.war com um projeto padrão.Abra a pasta WEB-INF e copie seu conteúdo para a pasta WEB-INF do seu projeto.

O que são esses arquivos?

Na pasta flex contém os arquivos de configuração, a pasta libs contém as bibliotecas, e no web.xml contém a configuração do servlet para o BlazeDS fazer a conexão do Flex com o Java.

Projeto configurado.Vamos criar algo para o Flex acessar.

Agora, crie uma nova package helloWorld, e dentro dela crie uma classe HelloWorld.java, essa classe será acessada no Flex.
package helloworld;

public class HelloWorld {

public String chamarHelloWorld() {

return “Hello World!”;

}

}

Essa classe é o famoso HelloWorld, tem um método que retorna uma string.Tudo que um método retorna nós podemos pegar no Flex.

Antes de ir para o Flex, precisamos informar ao BlazeDS que criamos essa classe no Java para ela ficar disponível.Essa configuração é feita no arquivo remoting-config.xml
<destination id=”helloWorldService”>
<properties>
<source>helloworld.HelloWorld</source>
</properties>
</destination>

Vamos criar o projeto Flex, que irá chamar esse serviço que criamos no Java:

File -> New -> Other? -> Flex -> Flex Project

Project Name: ExemploFlexI

Application Type: Web Application

Application Server Type: None (porque temos o nosso projeto Java separado, caso o projeto Java fosse junto com o projeto Flex iriamos colocar aqui J2EE)

Agora é só ir até o fim!

Foi criada uma aplicação principal, nela iremos criar um remote object que chamará o serviço criado no Java, e iremos exibir o retorno dele em uma Alert.
<?xml version=”1.0? encoding=”utf-8??>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute”>

<!? A destination é aquele caminho que criamos no remoting-config.xml ?>
<mx:RemoteObject id=”helloWorld” destination=”helloWorldService” showBusyCursor=”true” fault=”onFault(event)”>
<mx:method name=”chamarHelloWorld” result=”onResult(event)”/>
</mx:RemoteObject>

<mx:Button click=”onButtonClick()” label=”Chamar Hello World”/>

<mx:Script>

<![CDATA[ import mx.rpc.events.FaultEvent; import mx.controls.Alert; import mx.rpc.events.ResultEvent; private function onButtonClick():void{ helloWorld.chamarHelloWorld(); } private function onResult(event:ResultEvent):void{ Alert.show( event.result as String ); } private function onFault(event:FaultEvent):void{ Alert.show( “Deu erro, temos que verificar o que aconteceu” ); } ]]>
</mx:Script>

</mx:Application>

Está pronto? Posso executar? Ainda não? Como o projeto Java está separado do Flex, como o Flex irá saber onde está a classe do Java?

Simples.Basta nós configurarmos o channelSet desse remote object, com esse função:

private function configurarChannelSet():void
{

var cs:ChannelSet=new ChannelSet();
var customChannel:Channel=new AMFChannel(“my-amf”, “http://localhost:8025/ExemploJavaI/messagebroker/amf”);
cs.addChannel(customChannel);
helloWorld.channelSet = cs;

}

Obs: Percebam que o caminho irá depender de onde sua aplicação Java está rodando, qual porta, e qual o nome da aplicação.

E vamos chamá-la assim que a aplicação iniciar:
<?xml version=”1.0? encoding=”utf-8??>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” layout=”absolute” creationComplete=”configurarChannelSet()”>

Está pronto! Seu projeto Flex está se comunicando com o seu projeto Java.

No próximo artigo irei explicar como fazer a conexão do Java com o MySQL sem o uso de frameworks.

¹ ? Versão Turnkey. Link: http://opensource.adobe.com/wiki/display/blazeds/Release+Builds