1 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Tutorial Para Utilizar Flex com C# Utilizando FluorineFX Parte 1

Neste tutorial vamos ver passo a passo como utilizar o Adobe Flex juntamente com a linguagem C#.NET. Voc deve ter instalado as seguintes ferramentas FluorineFX www.fluorinefx.com Adobe Flex 2 ou superior Visual Studio 2005 ou superior Suponho que j saiba instalar utilizando Next, Next, Next, Finish. Como o propsito deste tutorial mostrar a comunicao entre Flex e C# no vou mostrar a instalao de nenhum dos trs, por ser muito simples. Neste tutorial estou usando Flex 2, Visual Studio 2008, Framework .NET 3.5 e FluorineFX 1.0.0.5 Primeiro Passo: No visual Studio vamos criar uma Blank Solution File > New > Project

Em Breve www.viniciusvelasco.com Rondonpolis - MT

2 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Figura 1 Criando nossa Solution chama TesteSolution

Figura 2 Nossa Solution Criada

Com a nossa solution criada vamos clicar o boto direito em cima dela e selecionamos: Add > New Project Em templates escolha FluorineFx ServiceLibary (S ira aparecer se voc j estiver instalado o FluorineFX) Iremos chamar de TesteProject como na figura abaixo. Deve estar na mesma pasta da sua Solution

Em Breve www.viniciusvelasco.com Rondonpolis - MT

3 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Figura 3 Criando o Project FluorineFX ServiceLibary

Clicando em OK teremos o nosso FluorineFX Service Libary que ser onde iremos criar as nossas classes. Ele j cria com uma de exemplo que ser utilizada em nosso teste. Agora repetimos o passo anterior. Clicamos com o boto direito na nossa Solution e escolhemos: Add > New Website Selecionamos FluorineFX ASP.NET Web Site Temos que selecionar a pasta da nossa solution e colocarmos um nome que aqui chamei de TesteWebSite. Como na figura abaixo

Em Breve www.viniciusvelasco.com Rondonpolis - MT

4 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Figura 4 Criando a nossa FluorineFX Web

Ao clicarmos em OK teremos a nossa FluorineFX Web criada. Ter algumas pastas com umas dlls, algumas aspx. A principal pasta a WEB-INF que contem uma sub pasta chamada flex onde temos alguns XML. O XML servicesconfig.xml que ira fazer com que a conversa Flex C#seja possvel. Na figura abaixo temos como ira ficar a estrutura da Solution depois de pronta

Em Breve www.viniciusvelasco.com Rondonpolis - MT

5 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Figura 5 Solution Criada

Como podemos ver na figura acima, nas Properties do nosso TesteWebSite temos alguma opo dentre as quais vamos alterar duas para fixarmos a porta no nosso servidor pra facilitar os teste. Altere as seguintes propriedades Clique com o boto direito do mouse em cima do nosso projeto Web (TesteWebSite) e selecione New Folder e coloque o nome na pasta de Flex Use Dynamic Port de True para False. Port Number para uma porta qualquer eu vou usar a 2222 neste exemplo. Clicamos com o boto direito no arquivo Console.aspx e selecionamos Set As Start Page Pressione F5 Ir debuggar o projeto abrindo o browser. De uma olhada nessa pagina que abrir. Que agora vamos ao Flex 2

Em Breve www.viniciusvelasco.com Rondonpolis - MT

6 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

No Flex Vamos em: File > New > Flex Project Na tela que ir aparecer clicamos em Next (Deixando a opo Basic selecionada) Selecione a pasta que criamos la no nosso TesteWebSite chamada de Flex e Salve dentro dela. Eu coloque o nome de TesteFlex, como na figura abaixo

Figura 6 Criando o projeto Flex

Clicamos em Next

Em Breve www.viniciusvelasco.com Rondonpolis - MT

7 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Na tela seguinte: Vamos renomear o campo Main application file para main.mxml Em Output folder URL vamos colocar: http://localhost:2222/TesteWebSite/Flex/Bin/main.html como podemos ver na figura abaixo

Figura 7 Informando o endereo do nosso projeto Flex no localhost

Pronto clicamos em OK.

Em Breve www.viniciusvelasco.com Rondonpolis - MT

8 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Agora vamos no nome do nosso projeto no Flex (TesteFlex) e clicamos com o boto direito e selecionamos Properties Na tela que se abrira selecionamos na coluna esquerda a opo Flex Compiler.

Na opo Additional compiler arguments vamos colocar o seguinte -locale en_US -services "..\ WEB-INF\ flex\ services-config.xml" -context-root / Teste WebSite Na diretiva -services informamos o endereo do nosso arquivo servicesconfig.xml, aquele que o nosso projeto Web criou, o arquivo que faz ligao entre Flex e C# . Lembra n? Ento beleza. O contect-root informamos onde esta o nosso projeto Web. Como na tela abaixo

Figura 8 Configuracao da comunicacao do Flex com C#

Clique em OK
Em Breve www.viniciusvelasco.com Rondonpolis - MT

9 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Feito essa etapas vamos ao que nos interessa. Coloque um TextInput e coloque na ID msg. Coloque um Button e no label Mensagem No click no buton coloque o seguinte {Envia(msg.text)}

Vai em modo Source e coloque o seguinte: <mx:RemoteObject id="roEcho" destination="fluorine" showBusyCursor="true" source="TesteProject.Sample" fault="FaultEcho(event)"> <mx:method name="Echo" result="ResultEcho(event)"/> </mx:RemoteObject> Onde: Id um nome qualquer para nosso RemoteObject; Destination ser sempre fluorine e os motivos so bvios n?; ShowBusyCursor esta true pra aparecer aquele relgio quando esta processando algo; Source o nome do nosso projeto (Namespace) criado no visual Studio. TesteProject. E depois do ponto nome da nossa classe. Estou usando a que foi criada como automtica de exemplo e chama Sample; Fault onde ser informado o nome da nossa funo que ira retornar em caso de erro; Method esse fcil onde iremos informar o nome do nosso mtodo que iremos chamar, que no nosso caso ser Echo que foi criado automaticamente no nosso projeto como exemplo. (Deve ser escrito como la na classe);
Em Breve www.viniciusvelasco.com Rondonpolis - MT

10 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Result onde ser informado o nome da nossa funo em caso de resposta correta.

Agora vamos criar funes <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import mx.controls.Alert; public function FaultEcho(e:FaultEvent){ Alert.show(e.fault.toString()); } public function ResultEcho(e:ResultEvent){ Alert.show(e.result.toString()); } public function Envia(sMsg:String){ roEcho.Echo(sMsg); } ]]> </mx:Script> Temos os imports

Em Breve www.viniciusvelasco.com Rondonpolis - MT

11 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Temos a nossa funo que ira retornar em caso de erro chamada FaultErro Temos a nossa funo que ira retornar em caso de acerto chamada ResulEcho Temos a nossa funo que ira enviar a mensagem ao C# chamada Envia com um parmetro.

O cdigo completo ficaria assim: < mx:Application xmlns:mx=http://www.adobe.com/2006/mxml layout="absolute"> <mx:Script> <![CDATA[ import mx.rpc.events.ResultEvent; import mx.rpc.events.FaultEvent; import mx.controls.Alert;

public function FaultEcho(e:FaultEvent){ Alert.show(e.fault.toString()); }

public function ResultEcho(e:ResultEvent){ Alert.show(e.result.toString()); } public function Envia(sMsg:String){

Em Breve www.viniciusvelasco.com Rondonpolis - MT

12 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

roEcho.Echo(sMsg); } ]]> </mx:Script> <mx:TextInput x="205" y="46" id="msg"/> <mx:Button x="248" y="76" label="Mensagem" click="{Envia(msg.text)}"/> <mx:RemoteObject id="roEcho" destination="fluorine" showBusyCursor="true" source="TesteProject.Sample" fault="FaultEcho(event)"> <mx:method name="Echo" result="ResultEcho(event)"/> </mx:RemoteObject> </mx:Application>

Clicamos em Run ou apertamos CTRL+F11. Se nada der errado ai temos a seguinte tela

Em Breve www.viniciusvelasco.com Rondonpolis - MT

13 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Figura 9 Aplicao Flex no Browser

Digitamos a mensagem no Input clicamos no boto e teremos

Em Breve www.viniciusvelasco.com Rondonpolis - MT

14 Tutorial Para Utilizar Flex com C# - Parte 1 Vincius Alves Velasco

Figura 10 Resultado

Bom pessoal por hora s. Mas eu volto para mostrar um exemplo utilizando banco de dados. Carregar a grid e talz. Espero ter ajudado.

Em Breve www.viniciusvelasco.com Rondonpolis - MT

This document was created with Win2PDF available at http://www.win2pdf.com. The unregistered version of Win2PDF is for evaluation or non-commercial use only. This page will not be added after purchasing Win2PDF.