View
229
Download
0
Category
Preview:
Citation preview
8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
1/15
1
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
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 se guintes ferram entas
FluorineFXwww.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
mo strar a instalaode nenhum dos trs, por sermu ito 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 vam os criar um a Blank Solution
File > New > Project
http://www.fluorinefx.com/http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
2/15
2
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
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 F luorineFX)
Iremos chamar de TesteProject como na figura abaixo. Deve estar na mesma
pasta da sua Solution
http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
3/15
3
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
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 a nterior.
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 TesteW ebSite. Com o na figura abaixo
http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
4/15
8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
5/15
5
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
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
(TesteWebSi te) e selecione New Folder e coloque o nom e na pa sta de Flex
Use Dynamic Port de True para False.
Port Number para uma porta qualquer eu vou usar a 2222neste 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 a o Flex 2
http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
6/15
6
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
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 nom e de Te steFlex, como na figura abaixo
Figura 6 Criando o projeto Flex
Clicamos em Next
http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
7/15
7
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
Na tela seguinte:
Vamos renomear o campo Main application file para main.mxml
Em Output folder URL vamo s colocar:
http://localhost:2222/TesteWebSite/Flex/Bin/main.html
como podem os ver na f igura abaixo
Figura 7 Informando o endereo do nosso projeto Flex no localhost
Pronto clicam os em OK.
http://localhost:2222/TesteWebSite/Flex/Bin/main.htmlhttp://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
8/15
8
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
Agora vamos no nome do nosso projeto no Flex (TesteFlex) e clicamos com o
boto direito e selecionamo s Properties
Na tela que se abrira selecionamo s 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
/TesteWebSite
Na diretiva -services informamos o endereo do nosso arquivo services-
config.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 We b.
Com o na tela abaixo
Figura 8 Configuracao da comunicacao do Flex com C#
Clique em OK
http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
9/15
9
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
Feito essa etapas vamo s 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:
Onde:
Id um nome qualquer para nosso RemoteObject;
Destinationser sem pre fluorine e os m otivos 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 cr iada com o autom tica de exem plo e chama Sam ple;
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
com o la na classe);
http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
10/15
10
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
Result onde ser informado o nome da nossa funo em caso de
resposta correta.
Agora vamos criar funes
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 Re sultEcho(e:Resu ltEvent){
Alert.show(e.result.toString());
}
public function Envia(sMsg:String){
roEcho.Echo(sMsg);
}
]]>
Tem os os import s
http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
11/15
11
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
Temos a nossa funo que ira retornar em caso de erro chamada F aultErro
Temo s 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 com pleto ficaria assim:
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 Re sultEcho(e:Resu ltEvent){
Alert.show(e.result.toString());
}
public function Envia(sMsg:String){
http://www.adobe.com/2006/mxmlhttp://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
12/15
12
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
roEcho.Echo(sMsg);
}
]]>
Clicamos em Run ou apertamos CTRL+F11.
Se nada de r errado ai temo s a seguinte tela
http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
13/15
13
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
Figura 9 Aplicao Flex no Browser
Digitamos a me nsagem no Input cl icamo s no boto e teremos
http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
14/15
14
Tutorial Para Utilizar Flex com C# - Parte 1
Vincius Alves Velasco
Em Breve www.viniciusvelasco.comRondonpolis - MT
Figura 10 Resul tado
Bom pesso al por hora s.
Mas eu volto para mo strar um exem plo util izando banco de dados.
Ca rregar a grid e talz.
Espero ter ajudado.
http://www.viniciusvelasco.com/8/3/2019 Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1
15/15
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.
http://www.win2pdf.com/http://www.win2pdf.com/http://www.win2pdf.com/http://www.win2pdf.com/http://www.win2pdf.com/Recommended