Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1

download Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1

of 15

Transcript of Tutorial+Para+Utilizar+Flex+Com+C#+ +Parte+1

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