Olá pessoal
A grande sensação ontem (23/03) foi a publicação pelo guru Christophe Coenraets demonstrando um vídeo aonde através do Flash Builder ele consumiu recursos de um projeto Java sem codificação no ambiente Flex. Nesse artigo vou demonstrar como trabalhar com esse recurso passo-a-passo.
Bom, primeiro passo é você ter em seu computador todas as ferramentas necessárias. Neste caso, você irá utilizar o Eclipse Galileu JEE, Flash Builder (stand-alone ou plugin) e do BlazeDS 4 Beta.
A aplicação que desenvolveremos nesse tutorial é a mesma desenvolvida no post anterior, com a diferença que aonde foi feito codificação manual no ambiente Flex, agora, iremos utilizar o Flash Builder para a geração do código fonte.
Bom, no Eclipse Galileo para iniciar um projeto, eu escolhi a opção File -> New -> Web -> Dynamic Web Project, conforme abaixo:
E depois configurei o projeto da seguinte maneira:
Bom, depois de configurar o projeto, iremos criar um Bean para serializarmos algumas informações que serão enviadas para o Flex. A idéia é bastante simples, irei criar um model para uma simples agenda de contato.
package br.com.horochovec.model;
import java.io.Serializable;
/**
* Modelo para agenda de contato
* @author Stefan Horochovec
*/
public class Contato implements Serializable {
/**
*
*/
private static final long serialVersionUID = 1L;
private String nome;
private String email;
public String getNome() {
return nome;
}
public void setNome(String nome) {
this.nome = nome;
}
public String getEmail() {
return email;
}
public void setEmail(String email) {
this.email = email;
}
}
E em seguida, criarei um serviço que irá adicionar em um ArrayList os contatos que serão enviados do Flex para o Java.
package br.com.horochovec.service;
import java.util.ArrayList;
import br.com.horochovec.model.Contato;
/**
* Serviço para manutenção dos contatos
* @author Stefan Horochovec
*/
public class ContatoService {
private static ArrayList listContato = new ArrayList();
/**
* Adiciona um contato a lista
* @param contato
*/
public void addContato(Contato contato) {
listContato.add(contato);
}
/**
* Retorna a lista de contatos
* @return
*/
public ArrayList getListContato() {
return listContato;
}
}
Após isso, já temos uma simples aplicação pronta para trabalhar com o Flex, basta apenas configurar os arquivos .XML para que o BlazeDS possa funcionar.
A partir de agora é necessário que você já tenha descompactado o arquivo blazeds-bin-4.0.0.14910.zip. Após descompactá-lo, você terá que descompactar o arquivo blazeds.war que surgiu da descompactação anterior. Como resultado, obterá o seguinte:
Bom, podemos copiar para o diretório WebContent/WEB-INF de nosso projeto Java, os diretórios: flex/, lib/, spring/ e os arquivos: flex-servlet.xml e web.xml. Após copiar esse conteúdo, o primeiro arquivo que iremos configurar, é o arquivo web.xml que fica dentro da pasta WebContent/WEB-INF/.
Para essa configuração, iremos alterar o conteúdo do arquivo web.xml que veio dentro do arquivo blazeds.war que foi previamente descompactado.
Perceba que os parametros da aplicação foram alterados e também foi alterado o valor da propriedade useAppserverSecurity para false. O resultado será:
FlexDuck
FlexDuck
flex.messaging.HttpFlexSession
MessageBrokerServlet
MessageBrokerServlet
flex.messaging.MessageBrokerServlet
services.configuration.file
/WEB-INF/flex/services-config.xml
1
RDSDispatchServlet
RDSDispatchServlet
flex.rds.server.servlet.FrontEndServlet
useAppserverSecurity
false
10
RDSDispatchServlet
/CFIDE/main/ide.cfm
MessageBrokerServlet
/messagebroker/*
index.html
index.htm
Feito isso, iremos adicionar dentro da pasta WebContent a pasta flex que foi previamente descompactada do arquivo blazeds.war, e também todo o conteúdo da pasta lib para dentro do diretório WebContent/WEB-INF/lib , obtendo o seguinte resultado:
Feito isso, iremos configurar o único arquivo .xml do BlazeDS para que esse exemplo funcione. O arquivo WEB-INF/flex/remoting-config.xml. Iremos adicionar uma configuração para informar ao BlazeDS sobre o serviço ContatoService que foi criado anteriormente, conforme abaixo:
class="flex.messaging.services.RemotingService">
br.com.horochovec.service.ContatoService
Após essa última configuração, podemos exportar o nosso projeto para um servidor web. Nesse caso, utilizaremos o Tomcat 6.x. Neste artigo não entrarei em detalhes de sua instalação e configuração.
Bom, as configurações no projeto Java já foram finalizadas, e considerando que o deploy da aplicação dentro do Tomcat já foi realizado, a partir deste momento iremos trabalhar diretamente com o Flash Builder.
Neste artigo irei demonstrar a comunicação utilizando o Flash Builder e a versão do Flex 4. Você pode fazer o download da versão 4.0 do Flash Builder e do Flex 4 SDK aqui.
Após instalado e iniciado o Flash Builder, iremos criar um projeto no seguinte molde:
As configurações feitas na segunda tela de configuração são bastante importantes. Fazendo elas da forma correta, você estará apto a iniciar o projeto sem fazer novas configurações.
Na primeira linha, em Root Folder, foi apontado o diretório de deploy da minha aplicação dentro do meu servidor de aplicação.
Na segunda linha, em Root URL, foi apontado o caminho da URL para abertura da aplicação em meu navegador de internet.
Na terceira linha, em ContextRoot, apontamos o nome da nossa aplicação.
Na quarta e ultima linha, em Output folder, apontamos o diretório de onde deve ser exportados os arquivos quando compilados. Para esse tutorial, foi apontado diretamente o diretório de minha aplicação dentro do meu servidor Tomcat.
Como resultado, o Flash Builder irá criar e disponibilizar no workspace um projeto da seguinte forma:
É muito importante fazer a conferência de uma configuração gerada automaticamente pelo Flash Builder em cima dos parametros informados na segunda etapa da criação do projeto. No menu 'Project' vá na opção 'Properties' e confira as propriedades de acordo com a imagem abaixo:
Iremos criar uma tela no Flash Builder que contenha dois campos text input para preencher as informações do nome e email do contato, e também um grid para conter a lista dos contatos que serão adicionados no Java e retornarão ao Flex através do BlazeDS.
Segue sua implementação
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" height="419">
A partir deste momento, usaremos os recursos de Data/Services presentes no Flash Builder 4 para a geração da comunicação com o Java.
Primeiro, iremos conectar o Flash Builder com o BlazeDS. Para isso, na aba "Data/Services" clique na opção "Connect to Data/Service". Caso ela não esteja disponivel em seu workspace, vá ao menu "Window" e marque a opção "Data/Services".
Feito isso, na próxima tela, marque a opção "BlazeDS", clique em Next e marque a opção para não utilizar controle de acesso. Conforme as telas abaixo:
Na última tela, você deve marcar os serviços que deseja adicionar a aplicação, com opção de definição de endereços de pacotes e depois finalizar a criação do Objeto, conforme:
Após finalizar a configuração do serviço remoto, obtemos o seguinte resultado no Flash Builder.
Agora, iremos definir que no momento do click no botão logo abaixo do DataGrid, a aplicação deverá invocar o método getListContato().
O primeiro passo para isso, é clicar com o botão direito sobre o botão com do painel que contem o DataGrid e marcar a opção "Generate Service Call". Feito isso configure a tela do serviço conforme apresentado abaixo:
Feito isso, selecione o DataGrid e clicando com o botão direito dentro dele, selecione a opção "Bind to Data" e configure a tela conforme informado abaixo:
Nesse momento, o painel responsável por listar as informações da nossa agenda de contato já está finalizado.
Agora, clicando novamente com o botão direito em cima do DataGrid, clique na opção "Generate Details Form" e configure a tela conforme abaixo:
O formulário gerado será adicionado no mesmo container que estiver o DataGrid, portanto, será necessário reposicioná-lo dentro do Panel já criado, conforme imagem abaixo:
Ok, agora basta configurarmos o clique do botão de salvar para que adicione novos contatos.
O primeiro passo é alterar o label do botão para "Cadastrar".
O segundo passo é clicar com o botão direito sobre o botão de cadastro e selecionar a opção "Generate Service Call" e configure a opção da seguinte forma:
Ao terminar essa configuração, você será direcionado diretamente para a implementação do click do botão com a chamada do serviço remoto. A implementação gerada do método será a seguinte:
protected function button2_clickHandler(event:MouseEvent):void
{
contato.email = emailTextInput.text;
contato.nome = nomeTextInput.text;
addContatoResult.token = contatoService.addContato(/*Enter value(s) for */ arg0);
}
E você deverá fazer a seguinte alteração. Adicionar o parametro a ser enviado no método addContato() e inicializar o objeto contato, da seguinte forma:
protected function button2_clickHandler(event:MouseEvent):void
{
contato = new Contato();
contato.email = emailTextInput.text;
contato.nome = nomeTextInput.text;
addContatoResult.token = contatoService.addContato(contato);
}
Com isso, nosso projeto estará enviado as informações para o Java. Agora, para finalizar, iremos adicionar um evento para disparar um método quando tivermos o resultado do serviço remoto.
No CallResponder com o id "addContatoResult" pressione o CTRL + SPACE para acionar o code complete e acione o event "result", e em seguida, solicite para que seja adicionado o ResultHandler para o event adicionado, conforme imagens abaixo:
E na função adicionada no código devemos fazer a seguinte implementação:
protected function addContatoResult_resultHandler(event:ResultEvent):void
{
contato = new Contato();
getListContatoResult.token = contatoService.getListContato();
}
Rodando a aplicação, teremos como resultado no navegador o seguinte:
E como resultado final no código fonte:
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" height="419" xmlns:services="services.*" xmlns:valueObjects="valueObjects.*">
import mx.controls.Alert;
import mx.rpc.events.ResultEvent;
protected function button_clickHandler(event:MouseEvent):void
{
getListContatoResult.token = contatoService.getListContato();
}
protected function button2_clickHandler(event:MouseEvent):void
{
var contato : Contato = new Contato();
contato.email = emailTextInput.text;
contato.nome = nomeTextInput.text;
addContatoResult.token = contatoService.addContato(contato);
}
protected function addContatoResult_resultHandler(event:ResultEvent):void
{
contato = new Contato();
getListContatoResult.token = contatoService.getListContato();
}
]]>
Para fazer o download do projeto clique aqui.
Espero ter ajudado, um abraço :)
Comentários