Você está na página 1de 13

Categoria: C#.net, Flex, FluorineFx — Vinícius Sandim @ 12:32

Olá pessoal, hoje estou aqui para falar sobre a integração de três ótimos frameworks para desenvolvimento de aplicativos web atualmente:

Adobe Flex FluorineFx Microsoft C#.net

Introdução

Existem diversas formas de integrar o Flex com nossa camada de dados, neste tutorial usarei a integração via RemoteObject utilizando o framework open source FluorineFx. Este tipo de método é em média 50% mais rápido do que outros métodos, como por exemplo via HTTP service, ou WebService. Veja um teste com outras formas de integração.

Requerimentos

Vamos lá

Tendo em mente que vc já possua os componentes necessários instalados vamos iniciar o tutorial.

1 - Crie uma pasta em um diretório de sua preferência com o nome de IntegracaoFlex.

2 - Dentro desta pasta, crie duas subpastas com os nomes Interface e Negocio.

3 - Crie um projeto no VisualStudio do tipo ASP.NET WebSite dentro da pasta Negocio:

4 - Exclua a pasta App_Data que foi criada automaticamente pelo template

5 - Renomeie o arquivo Default.aspx, criado automaticamente, para Gateway.aspx. Este servirá como ponte para o acesso dos objetos asp.net.

6 - Adicione uma pasta App_Code. (Botão direito do mouse sobre o projeto, Add ASP.NET Folder… > App_Code)

7 - Crie um arquivo do tipo Web.config. (Botão direito do mouse sobre o projeto, Add New Item… > Web Configuration File)

8 - Deixe o arquivo Web.config da seguinte forma:

<?xml version="1.0"?>

<configuration>

<configSections>

< sectionGroup name ="fluorinefx">

<sectionGroup name="fluorinefx">

<section name="settings"

type ="FluorineFx.Configuration.XmlConfigurator, FluorineFx"/>

type="FluorineFx.Configuration.XmlConfigurator, FluorineFx"/>

</ configSections > < system.web > < httpModules > < add name ="FluorineGateway" type

</configSections>

<system.web > system.web>

</ configSections > < system.web > < httpModules > < add name ="FluorineGateway" type

<httpModules>

<add name="FluorineGateway"

type ="FluorineFx.FluorineGateway, FluorineFx"/>

type="FluorineFx.FluorineGateway, FluorineFx"/>

</httpModules>

<compilation debug="true" />

</system.web>

</configuration>

Esta é a configuração mínima para que o Fluorine funcione.

9 - Agora crie uma referência do seu projeto ao FluorineFx. (Botão direito do mouse sobre o projeto, Add Reference…) :

Caso vc não tenha alterado a pasta de instalação do fluorine padrão é C:\Arquivos de

programas\FluorineFx\Bin\net\2.0

10 - Crie uma classe chamada Pessoa.cs (Botão direito do mouse sobre a pasta App_Code, Add

New Item… > Class):

11 - O seu Solution Explorer deverá ficar assim.

12 - Agora finalmente vamos implementar a classe Pessoa.cs:

using System;
using System;

using FluorineFx;

using System.Collections.Generic;

namespace IntegracaoFlex

{

/// <summary>

 

/// Representa uma Pessoa.

/// </summary>

 

[RemotingService]

public class Pessoa

public class Pessoa

#region Atributos

#region Atributos

private int _id_Pessoa;

private int _id_Pessoa;

/// Id da Pessoa.

/// <summary>

/// <summary>

/// </summary>

/// </summary>

public int Id_Pessoa

{ get { return _id_Pessoa; } set { _id_Pessoa = value; } }
{
get { return _id_Pessoa; }
set { _id_Pessoa = value; }
}
private string _nome;

private string _nome;

/// <summary>

/// <summary>

/// Nome da Pessoa.

/// </summary> public string Nome { get { return _nome; } set { _nome =
/// </summary>
public string Nome
{
get { return _nome; }
set { _nome = value; }
}
private string _telefone;

private string _telefone;

/// <summary>

/// <summary>

/// Telefone da Pessoa.

/// </summary>

/// </summary>

public string Telefone

{ get { return _telefone; } set { _telefone = value; } } #endregion #region
{
get { return _telefone; }
set { _telefone = value; }
}
#endregion
#region Construtores

/// <summary>

/// Construtor padrão da classe.

/// Construtor padrão da classe.

/// </summary>

public Pessoa()

{

}

/// <summary>

/// Construtor que alimenta todos os atributos da classe.

/// Construtor que alimenta todos os atributos da classe.

/// </summary>

/// <param name="id_Pessoa">Id da Pessoa.</param>

/// <param name="id_Pessoa">Id da Pessoa.</param>

/// <param name="nome">Nome da Pessoa.</param>

/// <param name="telefone">Telefone da Pessoa.</param>

/// <param name="telefone">Telefone da Pessoa.</param>

public Pessoa(int id_Pessoa, string nome, string telefone)

{

this

id_Pessoa

= id_Pessoa;

this nome = nome;

this

nome

= nome;

this telefone = telefone; } #endregion #region Metodos /// <summary>
this
telefone
= telefone;
}
#endregion
#region Metodos
/// <summary>

/// Insere um novo cliente no banco de dados.

/// </summary>

/// </summary>

/// <returns>Cliente inserido no banco de dados.</returns>

public string Insere(Pessoa _pessoa)

public string Insere(Pessoa _pessoa)

{

string _retorno = "--- Pessoa Inserida ---\n" ;

string _retorno = "--- Pessoa Inserida ---\n";

_retorno += "Id_Pessoa: " + _pessoa id_Pessoa.ToString() + "\n" ;

_retorno += "Id_Pessoa: " + _pessoa

id_Pessoa.ToString()

+ "\n";

_retorno += "Nome: " + _pessoa

nome

+ "\n";

_retorno += "Telefone: " + _pessoa telefone;

_retorno += "Telefone: " + _pessoa telefone;

return _retorno;

return _retorno;

}

/// <summary>

/// Seleciona uma lista de pessoas no banco de dados.

/// Seleciona uma lista de pessoas no banco de dados.

/// </summary>

/// <returns>Lista de pessoas cadastradas.</returns>

/// <returns>Lista de pessoas cadastradas.</returns>

public List<Pessoa> Lista()

{ List<Pessoa> _lista = new List<Pessoa>(); //Adiciona algumas pessoas para exemplificar _lista.Add(new
{
List<Pessoa> _lista = new List<Pessoa>();
//Adiciona algumas pessoas para exemplificar
_lista.Add(new Pessoa(1, "Vinicius", "(16)3711-1111"));
_lista.Add(new Pessoa(5, "Cristian", "(16)3722-2222"));
_lista.Add(new Pessoa(9, "Juliano", "(16)3733-3333"));
_lista.Add(new Pessoa(15, "Ricardo", "(16)3744-4444"));
_lista.Add(new Pessoa(3, "Euripedes", "(16)3755-5555"));
return _lista;
}
#endregion
}

}

Note a tag [RemotingService] na declaração da classe, esta serve para que o Fluorine saiba que esta classe é remota e será acessada por um método do flex.

Bom pessoal, nesta primeira parte criamos o nosso projeto no Visual Studio o configuramos o Fluorine para que possamos chamar os métodos via flex.

No próximo tutorial iremos fazer o projeto no Flex chamar nossos métodos Insere e Lista do .net.

Agradeço a todos e até a próxima!

Categoria: C#.net, Flex, FluorineFx — Vinícius Sandim @ 14:47

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á…

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" )]

[RemoteClass(alias="IntegracaoFlex.Pessoa")]

public class Pessoa

{
{

private var _id_Pessoa:int;

public function get Id_Pessoa(): int { return this id_Pessoa; }

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
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 get Telefone():String { return this

telefone;

}

public function Pessoa()

public function Pessoa()

{

public function Pessoa() { } } } Desta forma temos a classe Pessoa com os atibutos

}

public function Pessoa() { } } } Desta forma temos a classe Pessoa com os atibutos

}

}
}

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>

="UTF-8" ? > < services-config > < services > < service id

<services>

? > < services-config > < services > < service id ="remoting-service" class

<service id="remoting-service"

services > < service id ="remoting-service" class ="flex.messaging.services.RemotingService"

class="flex.messaging.services.RemotingService"

messageTypes="flex.messaging.messages.RemotingMessage">

="flex.messaging.messages.RemotingMessage"> < destination id ="fluorine"> <

<destination id="fluorine">

< destination id ="fluorine"> < channels > < channel ref

<channels>

< channel ref ="my-amf"/>

<channel ref="my-amf"/>

< properties >

<properties>

< source > * </ source >

<source>*</source>

</properties>

source > * </ source > </ properties > </ destination > </ service > </

</destination>

> </ properties > </ destination > </ service > </ services > <

</service>

> </ destination > </ service > </ services > < channels > <

</services>

</ services > < channels >

<channels>

service > </ services > < channels > < channel-definition id ="my-amf" class

<channel-definition id="my-amf" class="mx.messaging.channels.AMFChannel">

< endpoint uri ="http://localhost:3024/Negocio/Gateway.aspx"

<endpoint uri="http://localhost:3024/Negocio/Gateway.aspx"

class="flex.messaging.endpoints.AMFEndpoint"/>

</ channel-definition >

</channel-definition>

</ channel-definition > </channels> </services-config> Agora execute
</channels>
</channels>
</ channel-definition > </channels> </services-config> Agora execute o seu website
</services-config>
</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

//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.source = "IntegracaoFlex.Pessoa"; // Namespace.NomeDaClasse no ASP.net

remoteObj.showBusyCursor = true; // Exibe o relogio no lugar do cursor durante a requisição

// Exibe o relogio no lugar do cursor durante a requisição //Adiciona o evento falha na

//Adiciona o evento falha na lista de eventos do ojeto remoto

remoteObj.addEventListener(FaultEvent.FAULT, fncFalha);

remoteObj.addEventListener(FaultEvent.FAULT, fncFalha);

remoteObj.addEventListener(FaultEvent.FAULT, fncFalha); //Verifica se é null porque nem sempre um método vai
//Verifica se é null porque nem sempre um método vai retornar algum valor.

//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,

//Adiciona a funcao passada como parametro neste método,

remoteObj.addEventListener(ResultEvent.RESULT, fncOk); return remoteObj; //retorna o objeto remoto configurado. } /** *
remoteObj.addEventListener(ResultEvent.RESULT, fncOk);

remoteObj.addEventListener(ResultEvent.RESULT, fncOk);

remoteObj.addEventListener(ResultEvent.RESULT, fncOk); return remoteObj; //retorna o objeto remoto configurado. } /** *

return remoteObj; //retorna o objeto remoto configurado.

}
}
return remoteObj; //retorna o objeto remoto configurado. } /** * Tratamento de erro do método executado
/**
/**

* 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" +

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 ){

if (evt.result != null){

(evt.result as String), "Ok" );

(evt.result as String), "Ok");

}

}
}
} } /** * Evento click do botão Inserir. **/ private function btnInserir_click(evt:MouseEvent): void { if
/**
/**

* Evento click do botão Inserir.

**/
**/

private function btnInserir_click(evt:MouseEvent):void{

if (evt.type == MouseEvent.CLICK){

if (evt.type == MouseEvent.CLICK){

void { if (evt.type == MouseEvent.CLICK){ //Configura a Pessoa var pessoa:Pessoa = new Pessoa;
//Configura a Pessoa

//Configura a Pessoa

var pessoa:Pessoa = new Pessoa;

pessoa.Id_Pessoa = int (txtId_Pessoa.text);

pessoa.Id_Pessoa = int(txtId_Pessoa.text);

pessoa.Nome = txtNome.text;

pessoa.Telefone = txtTelefone.text;

pessoa.Telefone = txtTelefone.text;

= txtNome.text; pessoa.Telefone = txtTelefone.text; //Executa o método no asp.net var remoteObj:RemoteObject =
//Executa o método no asp.net

//Executa o método no asp.net

var remoteObj:RemoteObject = preparaRemoteObj(rstFalha, rstSucessoInsere);

remoteObj.getOperation( "Insere" ).send(pessoa);

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"

x ="167" y ="96" label ="Inserir" id ="btnInserir" click

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="Id" dataField="Id_Pessoa" width="20"/>

<mx:DataGridColumn headerText="Nome" dataField="Nome" width="40"/>

< mx:DataGridColumn headerText ="Telefone" dataField ="Telefone" width ="40"/>

<mx:DataGridColumn headerText="Telefone" dataField="Telefone" width="40"/>

</mx:columns>

</mx:DataGrid>
</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 ){

if (evt.result != null){

grdPessoas.dataProvider = (evt.result as ArrayCollection);

}
}

}

= (evt.result as ArrayCollection); } } /** * Evento click do botao Lista **/ private function

/**

* Evento click do botao Lista

if (evt.type == MouseEvent.CLICK){

if (evt.type == MouseEvent.CLICK){ //Executa o método no asp.net var remoteObj:RemoteObject =

//Executa o método no asp.net

var remoteObj:RemoteObject = preparaRemoteObj(rstFalha, rstSucessoLista);

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"

y ="12" right ="10" label ="Listar" id ="btnListar" click

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.