XAML Br
Silverlight, XAML, WPF

Criando um projeto Flex 3 com FluorineFx e LINQ Parte 1

agosto 4, 2008 17:55 by saintbr

O mercado de R.I.A. está em constante crescimento e as empresas estão adotando cada vez mais o Flex como interface para seus sistema.
Recentemente a Adobe Liberou a especificação do AMF3 oque possibilitou uma melhor safra de middleware e um dos produtos que seguiu essa onda foi o FluorineFx, que faz a chamada de métodos remotos em aplicações dotnet.
Quem acompanha a evolução do DotNet Framework, sabe que foi adicionado na versão 3.0 um novo mecanismo de consulta denominado LINQ, cuja função é servir como camada de acesso à dados, seja ela SQL, XML, Objetos, etc.
Essa semana eu começei um projeto usando essas duas tecnologias e é claro com Flex, por isso resolvi fazer um post sobre como configurar esse projeto para ajudar quem vier a ter dificuldades.

Para esse exemplo usaremos:

  • Visual Web Developer 2008 Express Edition (free, download);
  • FluorineFx Versão 1.0.0.13 (open source,  download);
  • SQL Server 2005 Express Edition (free, download);
  • Flex Builder 3 (trial 60 dias, download);
  • Cairngorm 2.2.1 (open source, download);
  • IIS 6 (vem com o XP, mas dá para usar o ASP.Net Development Server);

Criando o projeto.

Levando em conta que você está com todos os programas instalados vamos começar !!!

Primeira coisa que faremos é criar o projeto FluorineFx ASP.Net Web Site, que nesse caso será hosteado no IIS, mas sinta-se à vontade em usar o ASP.Net Development Server que vem embeded com o Visual WebDeveloper, nesse caso use como Location o "File System" e escolha uma pasta de sua preferência:

Depois de criado o projeto, a seguinte tela é exibida no canto direito da tela:

Bin: Nessa pasta ficam as dlls usadas pelo site, inclusive as do FluorineFx.
Log: Armazena o logo do fluorinefx.
Templates: O FluorineFx gera vários outputs em Flex e os templates ficam nessa pasta.
WEB-INF/flex: Nessa pasta ficam os arquivos de configuração do serviço remoto.
Console.aspx: Executando esse arquivo o site mostra o Service Browser que ajuda a testar os métodos disponíveis, gerar outputs e adicionar data domains.
Gateway.aspx: Arquivo simbólico que serve de ponte entre o Flex e o FluorineFx.

Uma vez criado o projeto, basta compilar (F5) para executar o Service Browser:

Agora vamos ao FlexBuilder, crie um projeto Flex normalmente, porém use o caminho do projeto aspnet e dentro dele crie uma pasta chamada " flex ":

Na próxima tela sete qual a pasta que terá o output flex, eu uso apenas "bin":

E por ultimo basta colocar a url para o Flex Builder abrir o projeto quando compilar:

Pronto, o projeto está criado e pronto para funcionar, mas vamos entender oque o flex builder 3 criou para nós:

.settings: Essa pasta armazena os arquivos de configuração.
bin
: Depois de compilado o projeto é colocado aqui nessa pasta. É essa pasta que vai para o servidor na hora do deploy.
html-template: Templates do Flex para a geração do wrapper html.
src: Pasta onde serão criados os aquivos .mxml/.as e demais, é onde ficam os fontes do projeto.

O projeto está funcionando normalmente, basta compilar (Ctrl + F11), porém o Flex ainda não se cominica com o Fluorinex, para tal, basta adicionar alguns comandos para o compilador se localizar.
Clique com o botão direito no projeto > Properties > Flex Compiler:

Lembrando que o parametro "context-root" é o nome do diretório virtual criado no IIS (FlexASPNet lembra ?).

Testando o FluorineFx

Para testar o Fluorine basta criar uma classe no Projeto Web:

using FluorineFx;

namespace FlexASPNet {

[RemotingService("Nome do Serviço")]
public class ServicoTeste {

public ServicoTeste() { }

public string HelloWorld() {
return "Eu estou no C#";
}

}

}

Agora basta testar no Console.

No lado Flex basta fazer uma chamada mx:RemoteObject normal:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:RemoteObject id="FlexFluorine" source="FlexASPNet.ServicoTeste"
destination="fluorine" showBusyCursor="true" fault="FaultHandler(event);">
<mx:method name="HelloWorld" result="HelloWorldHandler(event);" />
</mx:RemoteObject>
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.controls.Alert;
import mx.rpc.events.FaultEvent;

private function FaultHandler(event:FaultEvent) : void {
Alert.show(event.fault.faultDetail, 'Erro no sistema: ');
}

private function HelloWorldHandler(event:ResultEvent) : void {
Alert.show(String(event.result), 'Resultado: ');
}
]]>
</mx:Script>
<mx:Button label="Chamar Fluorine" horizontalCenter="0" verticalCenter="0"
click="{FlexFluorine.HelloWorld()}" />
</mx:Application>

Bom galera, tá ai, ta configurado e funcionando, agora é so programas suas classes em C# normalmente e utilizá-las no Flex, sempre lembrando que cada tipo de dados retornado do C# deve ter um equivaliente no Flex.

Peraí ? E onde está o LINQ ???
O Linq já está referenciado no seu projeto Web por ser ASP.Net 3.5, na parte 2 eu vou fazer um C.R.U.D. com LInq e usar ele no Flex.

fontes do projeto: http://blog.saintbr.com.br/code/FlexASPNet.rar

[]'s

SaintBr.     =]


5.0 ponto(s). Avaliado por 1 pessoas

  • Currently 5/5 Stars.
  • 1
  • 2
  • 3
  • 4
  • 5