Flex com C# Parte 1 - Utilizando FluorineFx

Sexta-Feira, 26 de Maro de 2010 s 14:00

Esta a primeira parte do tutorial que iremos ver como utilizar o C# com o Flex. Nesta primeira parte voc s necessitar das ferramentas abaixo:

FluorineFX http://www.fluorinefx.com/ Visual Web Developer 2008 Express Edition http://www.microsoft.com/express/

Lembrando que na segunda parte do artigo necessitaremos do Adobe Flex instalado. Suponho que voc j tenha instalado tudo (uma dica, instale primeiro o Visual Web Developer, depois o FluorineFx), e como no o propsito deste tutorial, no veremos como se instala estas ferramentas. Com tudo instalado, abra o Visual Web Developer 2008 Express Edition. V em File > New Project, conforme a imagem abaixo:

Ir abrir a tela como os templates instalados, selecione a opo FluorineFx SeviceLibary (S ir aparecer se voc j estiver instalado o FluorineFx) e nomeie o projeto como TesteProject, conforme a imagem abaixo:

Clicando em OK teremos o nosso FluorineFx ServiceLibary que ser onde criaremos as nossas classes. Ele j cria um sample, este que usaremos em nosso teste. Como estamos utilizando uma verso Express, teremos que fazer um gato para poder dar continuidade ao tutorial: V em File > New Project, e na tela que surgir, escolha qualquer template, no meu caso escolhi Web site e defini seu nome como teste (j que iremos exclu-lo futuramente), antes de clicar em OK, selecione a opo Add to Solution no campo Solution, conforme a imagem abaixo:

Clique em OK e a nossa soluo estar criada, conforme a imagem:

Agora com a soluo criada, clique com o boto direito do mouse sobre ela e selecione a opo Add > New Website, conforme a imagem:

Na tela que surgir iremos selecionar a opo FluorineFx ASP.NET Web Site, chamaremos de TesteWebSite:

Ao clicarmos em OK, teremos a nossa FluorineFlx Web criada. Tero algumas pastas com umas dlls, alguns aspx. A principal pasta a Web-INF que contm uma subpasta chamada flex onde temos alguns XML. O XML services-config.xml far com que a comunicao com o Flex seja possvel. Agora podemos excluir o projeto que criamos para fazer o gato. Clique com o boto direito do mouse sobre ele e selecione a opo Remove:

Aps remover o projeto da soluo, remova a pasta que foi criada no mesmo local da soluo:

Agora vamos incluir as referencias para as dlls do FluorineFx no nosso projeto TesteProject, clique com o boto direito do mouse sobre ele e selecione a opo Add Reference:

Na tela que surgir selecione a aba Browser e adicione todas as dlls da pasta FlourineFx/Bin/net/3.5, que comear com FlourineFx, conforme a imagem abaixo:

Clique OK e pronto. Na figura abaixo temos como ir ficar a estrutura da Soluo depois de pronta:

Como podemos ver na imagem acima, nas Properties do nosso TesteWebSite temos

algumas opes, e dentre as quais vamos alterar duas para fixarmos a porta no nosso servidor para facilitar os testes. Altere as seguintes propriedades:

Clique com o boto direito do mouse sobre o projeto Web (TesteWebSite) e selecione New Folder e coloque o nome na pasta de Flex

Mude a propriedade Use Dynamic Port de True para Flase

Mude a propriedade Port Number para uma porta qualquer, neste exemplo, iremos utilizar 2222.

Clique com o boto direito do mouse sobre o arquivo Console.aspx e selecione a opo Set As Start Page

Pressione F5 para debuggar e abrir o projeto no Browser. D uma olhada na pgina que se abrir. Na prxima parte deste artigo, veremos o que fazer com o Flex.

Flex com C# Parte 2 - Utilizando FluorineFx

Segunda-Feira, 29 de Maro de 2010 s 15:08

Dando continuidade ao nosso artigo anterior Flex com C# Parte 1 - Utilizando FluorineFx vamos ver agora o que devemos fazer no Flex. Lembrando que nesta segunda parte, voc necessita ter:

Adobe Flex Builder 3

Infelizmente o Adobe Flex Builder no possui verso free, somente uma verso Trial de 60 dias, ento quando voc efetuar o download, aproveite bastante. Agora vamos a nossa explicao: Com o Flex Builder aberto, crie um novo projeto no link: File > New > Flex Project, conforme a imagem abaixo:

Na tela que surgir, preencha o nome do projeto do TesteFlex e selecione a pasta que criamos l no nosso projeto do Visual Web chamada Flex, conforme a imagem abaixo:

Clique em Next, na prxima janela, na opo Server selecione Use Internet Information Services (IIS), em Web application root informe o diretrio raiz da aplicao web que criamos no Visual Web Developer e no campo Web application URL informe o endereo da aplicao no IIS. Aps clicar no boto Validate Configuration, na parte superior da janela o Flex Builder deve aparecer: The web application root and URL are valid, caso aparea outra mensagem, os endereos informados no esto corretos, corrija antes de prosseguir:

Clique em Next, e na prxima tela, no campo Output folder URL, vamos colocar: http://localhost:2222/TesteFlex/flex_bin Conforme pode ser visto na imagem abaixo:

Clique em Finish e o nosso projeto est criado. Agora vamos ao nome do nosso projeto no Flex (TesteFlex) e clicamos com o boto direiot e selecionamos Properties. Na tela que surgir selecionamos na coluna da esquerda a opo Flex Compiler. Na opo Addtional compiler arguments vamos colocar a seguinte linha:
-locale en_US -services "..\WEB-INF\ flex\ services-config.xml" context-root /Teste WebSite

Na diretiva services informamos o endereo do nosso arquivo services-config.xml, aquele que o nosso projeto Web criou, o arquivo que faz a ligao do Flex com o C#. J em context-root informamos onde esta o nosso projeto Web:

Clique em OK e vamos ao que interessa. Coloque um TextInput e um Button na nossa interface. Na propriedade ID do TextInput coloque msg e na propriedade label do Button coloque Mensagem. No clik do Button coloque: {Envia(msg.text)} V ao modo Source e coloque o seguinte cdigo:
<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 de qualquer para o nosso RemoteObject;

Destination: ser sempre fluorine, no nosso caso;

ShowBusyCursor: est em true para aparecer aquele relgio quando esta processando algo;

Source: o nome do nosso projeto (Namespace) criado no Visual Web Developer TesteProject. E depois do ponto-final nome da nossa classe. Estou usando a que foi criada automaticamente e se chama Sample;

Fault: onde ser informado o nome da nossa funo que ir retornar em caso de erro;

Method: onde iremos informar o nome do nosso mtodo que iremos chamar.

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

Agora vamos criar as nossas funes:

<mx:Script> <![CDATA[ import import import public } public function ResultEcho(e:ResultEvent){ Alert.show(e.result.toString()); } public function Envia(sMsg:String){ roEcho.Echo(sMsg); } ]]> </mx:Script>

mx.rpc.events.ResultEvent; mx.rpc.events.FaultEvent; mx.controls.Alert; function FaultEcho(e:FaultEvent){ Alert.show(e.fault.toString());

Temos os imports, a nossa funo que ir retornar em caso de erro chamada FaltErro, em caso de acerto chamada ResultEcho, e a funo que ir mensagem ao C# chamada

Envia com um parmetro. Agora vamos ver o cdigo completo:

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Button x="188.5" y="37" label="Mensagem" click="{Envia(msg.text)}"/> <mx:TextInput x="152" y="80" id="msg"/> <mx:RemoteObject id="roEcho" destination="fluorine" showBusyCursor="true" source="TesteProject.Sample" fault="FaultEcho(event)"> <mx:method name="Echo" result="ResultEcho(event)"/> </mx:RemoteObject> <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> </mx:Application>

Com tudo pronto, vamos executar a nossa aplicao com o atalho Ctrl+F11, no esquea que necessrio ter a nossa aplicao rodando no Visual Web Developer.

Agora faa os testes e aproveite a sua aplicao. No prximo artigo vamos falar sobre banco de dados e como us-los em nossa aplicao Flex.