[ Assista agora a palestra sobre este post realizada durante a Flex Mania 2009 ]
Olá pessoal, hoje finalmente vou postar a segunda parte do artigo, neste post vamos utilizar os nossos métodos Insere e Lista, criados anteriormente no asp.net.
Então vamos lá…
1 - Crie um projeto no Flex do tipo Flex Project e nomeie como IntegracaoFlex.
2 - Crie uma pasta chamada mapeamento dentro da pasta src do projeto. (Botão direito do mouse sobre a pasta src New>Folder). O Flex interpreta esta pasta como um package, é um conceito muito parecido com o das Namespaces no Visual Studio. Dentro desta pasta vamos mapear as nossas classes criadas no asp.net, como no nosso exemplo temos uma classe só, a Pessoa, vamos implementa-la.
3 - Crie uma nova classe dentro de nossa pasta/package mapeamento, dê o nome de Pessoa, este nome deve ser idêntico ao da classe criada anteriormente no asp.net. (Botão direito sobre a pasta mapeamento New>ActionScript Class), preencha apenas o campo Name com o valor Pessoa.
4 - Agora vamos implementar apenas os atributos da nossa classe criada no asp.net, portanto deixe a classe pessoa da seguinte maneira:
package mapeamento
{
[RemoteClass(alias="IntegracaoFlex.Pessoa")]
public class Pessoa
{
private var _id_Pessoa:int;
public function get Id_Pessoa():int { return this._id_Pessoa; }
public function set Id_Pessoa(valor:int):void { this._id_Pessoa = valor; }
private var _nome:String;
public function get Nome():String { return this._nome; }
public function set Nome(valor:String):void { this._nome = valor; }
private var _telefone:String;
public function get Telefone():String { return this._telefone; }
public function set Telefone(valor:String):void { this._telefone = valor; }
public function Pessoa()
{
}
}
}
Desta forma temos a classe Pessoa com os atibutos Id_Pessoa, Nome e Telefone, note que o conceito para o desenvolvimento dos nossos atributos é muito parecido com a do C#.net, ou seja, temos as palavras reservadas get e set para que o complilador entenda que determinada function é um atributo da classe, e não uma function convencional.
Assim como no nome da classe, o nome dos atributos também devem ser idênticos no C#.net e no ActionScript, inclusive os tipos, para que o fluorine fa’xa a serialização C#.net>ActionScript corretamente. Veja mais na documentação oficial do fluorine a tabela completa de serialização.
5 - Agora vamos realmente fazer o mapeamento dos objetos ActionScript>C#.net, para isso, crie um arquivo XML dentro da pasta src do nosso projeto e dê o nome de services-config.xml (Botão direito do mouse sobre a pasta src New>File). Preencha o campo File name com o valor services-config.xml. Deixe o arquivo da seguinte maneira:
<?xml version="1.0" encoding="UTF-8"?>
<services-config>
<services>
<service id="remoting-service"
class="flex.messaging.services.RemotingService"
messageTypes="flex.messaging.messages.RemotingMessage">
<destination id="fluorine">
<channels>
<channel ref="my-amf"/>
</channels>
<properties>
<source>*</source>
</properties>
</destination>
</service>
</services>
<channels>
<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">
<endpoint uri="http://localhost:3024/Negocio/Gateway.aspx"
class="flex.messaging.endpoints.AMFEndpoint"/>
</channel-definition>
</channels>
</services-config>
Agora execute o seu website criado no VisualStudio anteriormente, ele deverá exibir a lista de arquivos encontrados, isso acontece por que não temos uma página Default.aspx, clique sobre a página Gateway.aspx no navegador, ele abrirá uma pagina em branco, pois não temos nada de interface na Gateway.aspx, o que precisamos agora é do endereço dessa página, copie na barra de endereços do navegador, deve ser algo parecido com (http://localhost:3024/Negocio/Gateway.aspx), o que vai alterar é apenas o número da porta gerado pelo servidor web do VisualStudio, e coloque o endereço na tag uri do atributo endpoint, para este endereço de sua página Gateway no arquivo XML criado agora.
6 - Agora para finalizarmos o mapeamento, precisamos informar ao compilador do Flex que a configuração de serviços remotos que utilizamos em nosso projeto é o arquivo services-config.xlm, para isso, vá até o Flex Navigator, clique com o botão direito do mouse sobre o projeto IntegracaoFlex>Properties, ele abrirá a janela de propriedades de seu projeto, vá até o menu FlexCompiler e deixe o campo Additional compiler arguments com o seguinte valor:
-locale en_US -services services-config.xml
7 - Pronto, o nosso projeto está configurado e vai enxergar a nossa classe no asp.net, agora vamos testar.
8 - Abra o arquivo principal de nosso projeto, o IntegracaoFlex.mxml e adicione uma tag <mx:Script></mx:Script>.
Dentro da tag importe os seguintes packages:
import mx.collections.ArrayCollection;
import mx.rpc.remoting.mxml.RemoteObject;
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
import mapeamento.Pessoa;
Logo abaixo, crie duas functions:
/**
* Prepara um objeto remoto para executar um método no asp.net.
**/
private function preparaRemoteObj(fncFalha:Function, fncOk:Function = null):RemoteObject{
//Instancia um objeto remoto pegando as configurações do nosso arquivo services-config.xml
var remoteObj:RemoteObject = new RemoteObject("fluorine"); //<destination id="fluorine">
remoteObj.source = "IntegracaoFlex.Pessoa"; // Namespace.NomeDaClasse no ASP.net
remoteObj.showBusyCursor = true; // Exibe o relogio no lugar do cursor durante a requisição
//Adiciona o evento falha na lista de eventos do ojeto remoto
remoteObj.addEventListener(FaultEvent.FAULT, fncFalha);
//Verifica se é null porque nem sempre um método vai retornar algum valor.
if (fncOk != null)
//Adiciona a funcao passada como parametro neste método,
//ela é responsável por tratar o retorno do método asp.net
remoteObj.addEventListener(ResultEvent.RESULT, fncOk);
return remoteObj; //retorna o objeto remoto configurado.
}
/**
* Tratamento de erro do método executado no asp.net.
**/
private function rstFalha(evt:FaultEvent):void{
Alert.show("Ocorreu o seguinte erro ao tentar executar o método:\n" +
evt.fault.message, "Erro");
}
A function preparaRemoteObj instancia um objeto do tipo RemoteObject e o configura para executar os métodos do asp.net. (vide comentários)
A function rstFalha trata um possível erro durante a chamada do método asp.net.
TESTANDO O MÉTODO INSERE
9 - Como vocês devem ter visto, por enquanto não executamos nenhum método do asp.net ainda, vamos fazer isto agora. Primeiramente vamos testar o método Insere criado anteriormente chamando-o em um evento click de um button, portanto adicione 3 componentes Label, 3 componentes TextInput e 1 componente Button. Renomeie os componentes da seguinte forma:
TextInputs: txtId_Pessoa, txtNome, txtTelefone
Button: btnInserir
10 - Agora vamos criar mais duas functions dentro de nossa tag <mx:Script></mx:Script>:
/**
* Tratamento do retorno do método Insere executado no asp.net.
**/
private function rstSucessoInsere(evt:ResultEvent):void{
if (evt.result != null){
Alert.show("Método executado com sucesso!\n\n" +
(evt.result as String), "Ok");
}
}
/**
* Evento click do botão Inserir.
**/
private function btnInserir_click(evt:MouseEvent):void{
if (evt.type == MouseEvent.CLICK){
//Configura a Pessoa
var pessoa:Pessoa = new Pessoa;
pessoa.Id_Pessoa = int(txtId_Pessoa.text);
pessoa.Nome = txtNome.text;
pessoa.Telefone = txtTelefone.text;
//Executa o método no asp.net
var remoteObj:RemoteObject = preparaRemoteObj(rstFalha, rstSucessoInsere);
remoteObj.getOperation("Insere").send(pessoa);
}
}
11 - Agora adicione a tag click="btnInserir_click(event);" no button btnInserir, ele ficará da seguinte forma:
<mx:Button x="167" y="96"
label="Inserir"
id="btnInserir"
click="btnInserir_click(event);"/>
12 - Para testarmos a aplicação, primeiramente execute o website no visual studio, depois compile o projeto no flex. O navegador será aberto, preencha os campos e clique sobre o botão Inserir. Vocé deverá ver uma mensagem na tela com dos dados do cliente inserido. Caso ocorreu algum erro, verifique se todos os passos foram feitos corretamente.
TESTANDO O MÉTODO LISTA
13 - Finalmente vamos testar o nosso método Lista que retorna um List<Pessoa> do asp.net. Para isso adicione 1 componente DataGrid e 1 Componente Button. Renomeie os componentes da seguinte forma:
DataGrid: grdPessoas
Button: btnLista
14 - Edite as colunas do DataGrid deixando-as da seguinte forma:
<mx:DataGrid y="42" width="489" right="10" id="grdPessoas" height="200">
<mx:columns>
<mx:DataGridColumn headerText="Id" dataField="Id_Pessoa" width="20"/>
<mx:DataGridColumn headerText="Nome" dataField="Nome" width="40"/>
<mx:DataGridColumn headerText="Telefone" dataField="Telefone" width="40"/>
</mx:columns>
</mx:DataGrid>
Note que o atributo dataField deve ser idêntico ao atributo da classe Pessoa que será retornado.
15 - Agora vamos criar duas functions para a execução do evento, uma é para o click do botao btnLista, e outra para tratar retorno do método:
/**
* Tratamento do retorno do método Lista executado no asp.net.
**/
private function rstSucessoLista(evt:ResultEvent):void{
if (evt.result != null){
grdPessoas.dataProvider = (evt.result as ArrayCollection);
}
}
/**
* Evento click do botao Lista
**/
private function btnListar_click(evt:MouseEvent):void{
if (evt.type == MouseEvent.CLICK){
//Executa o método no asp.net
var remoteObj:RemoteObject = preparaRemoteObj(rstFalha, rstSucessoLista);
remoteObj.getOperation("Lista").send();
}
}
16 - Finalmente adicionamos a tag click no botao btnLista assim como foi feito no btnInserir, deixando-o da seguibte forma:
<mx:Button y="12" right="10"
label="Listar"
id="btnListar"
click="btnListar_click(event);"/>
17 - Para testar, caso a aplicação web não esteja rodando, execute-a no VisualStudio, depois compile o Flex para roda-la. Clique sobre o botão Listar, note que o grid será populado com os dados que inserimos na lista do asp.net.
Bom pessoal, é isso, um tutorial básico para integração do flex com o .net, executando métodos que esperam parâmetros complexos, e retornam lista. Espero ter ajudado, qualquer dúvida é só deixar um comentário.
Até a próxima.
