Integração Adobe Flex + .NET

Nesta coluna irei demonstrar como fazemos para integrar a linguagem Adobe Flex com a liguagem C# .net.

Por | @oficinadanet Programação
É com muito prazer que venho publicar minha primeira coluna, quero que esa coluna seja de grande avalia para todos que virão a ler. Bom, nessa coluna irei demonstrar como fazemos para integrar a linguagem Adobe Flex com a liguagem C# .net.

Primeiramente temos que ter alguns softwares Instalados:
  • Flex Builder ou Eclipse com o Puglin do Flex instalado
  • Visual Studio


Bom, nessa coluna irei desenvolver um aplicativo que irá verificar se o numero é impar ou par, porém a verificação será feita em nosso Back-End, portanto o foco dessa coluna não é mostrar se o numero é par ou impar e sim demonstrar a integração dessas tecnologias.

Bom para começar, a primeira coisa que iremos fazer será instalar o FluorineFX, faça o Download no site indicado acima e execute o setup de instalação, o processo de instalação é bem simples. Após ter instalado o FluorineFX com sucesso vamos começar a programar.

Abra o Visual Studio e crie um novo Web Site, para isso faça o seguinte:
File – New – Web Site.
Escolha a opção Asp.Net Web Site, coloque o nome do projeto como ParOuImpar e escolha a linguagem C#. Nosso projeto ficará com a seguinte estrutura.

Integração Adobe Flex + .NET


Com o projeto criado a primeira coisa que iremos fazer será renomear o nome do arquivo Default.aspx para Gateway.aspx (padrão). Também clique com o botão direito encima do Gateway.aspx e clique em Set As Start Page, isso ira fazer com que esse arquivo seja o arquivo que será aberto por primeiro quando esse projeto for iniciado.

Agora, temos que indicar para o nosso projeto de Back-end que ele irá utilizar o fluorineFX, para isso iremos adicionar a referencia do fluorineFX dentro do nosso projeto. Para isso clicamos com o botão direito sobre o nosso WebSite -> Add References ... Se o Fluorine estiver devidamente instalado você irá encontrar um DLL chamada FluorineFX  for .NET Framework 2.0, selecione ela e clique em Add. Pronto agora nosso projeto irá conseguir utilizar o recursos do FluorineFX, ou seja, irá conseguir transmitir informações do Front-end para o Back-end de forma extremamente rápida (conforme citado acima he utilizado o formato AMF3, mas não vou entrar em detalhes). Agora se você verificar na estrutura do projeto irá ver que foi criada uma pasta chamada Bin, onde nossas DLL foram adicionadas.

O próximo passo que iremos fazer, será criar um arquivo de configuração chamado Web.config, onde iremos guardar algumas informações que serão utilizadas. Para criarmos ele, clicamos com o botão direito sobre o Web Site e clicamos em Add New Item. Irá abrir uma tela para encolhermos o tipo de arquivos que iremos adicionar, selecione a opção Web Configuration File. Por default ele já dará o nome como Web.config, clique em Add.  Abra esse arquivo apague todo o seu conteúdo e coloque o seguinte código:


    
        
            
            type="FluorineFx.Configuration.XmlConfigurator, FluorineFx"/>
        
    
    
    


    
        
                         type="FluorineFx.FluorineGateway, FluorineFx"/>
        

        
            
                
                
                
                
                
                
                
            

        

    



Agora vamos criar a classe que irá armazenar o nosso serviço. Clique com o botão direito encima do nosso web site e clique em add new item. Agora na janela que ira se abrir escolha a opção Class e atribua o nome de Verifica.cs. A primeira coisa que iremos ter que fazer nessa classe será adicionar o Using using FluorineFx; , pois iremos dizer que essa classe será uma RemotingClass, e  através disso ficará disponível para conseguirmos acessar por fora. Antes da declaração da classe iremos adicionar [RemotingService], você somente conseguira adicionar o RemotingService se tiver adicionado a using FluorineFX, portanto se não aparecer ou der algum erro, verifique se o using esta correto. Agora vamos adicionar o método que será chamado do nosso Front-end e nossa classe ficará assim:
using FluorineFx;
using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

///
/// Summary description for Verifica
///


[RemotingService]
public class Verifica
{
    public Verifica()
    {
    }

    public String verificaNumero(int pNumero)
    {
        //Será a nosso retorno
        String ret = "";

        //Se o o resto da divisao do numero (passado por parametro)
        //por 2 for igual a zero, significa que o numero é par
        //caso contrário o numero é impar
        if(pNumero % 2 == 0)
        {
            ret = "O número "+ pNumero.ToString() +" é par";
        }
        else
        {
            ret = "O número " + pNumero.ToString() + " é impar";
        }
    
        //Retorno que será captado pelo Front-End
        return ret;
    }
}


Execute o programa e veja se não ocorre nenhum erro de compilação, caso ocorra verifique os passos anteriores novamente para ver se não se esqueceu de nada. Caso não ocorra nenhum erro, uma pagina de Internet em branca será aberta e no system Tray (bandeja, onde fica o relógio =P ) do Windows irá mostrar o ícone de um serviço que está no ar. De dois cliques nele e absorve as informações:
Integração Adobe Flex + .NET

Pegue o valor do RootURL e armazena em algum lugar, pois isso será muito importante em um próximo passo um pouco mais a frente.

Abra o Programa utilizado para programar em Adobe Flex (Flex Builder ou Eclipse – desde que esteja com o plugin instalado). A primeira coisa que vamos fazer será criar um projeto e para isto fazemos o seguinte:
File – New – Flex Project
Quando clicado irá abrir uma tela para configurar o nosso projeto, a única coisa que iremos alterar o sera o nome do nosso projeto que irá se chamar “ParOuImpar” , após isso teremos a seguinte estrutura

Integração Adobe Flex + .NET


Essa é uma estrutura padrão na criação de projetos, ou seja,explicando:
Bin-debug: São armazenados os arquivos que são gerados através da compilação.
Html-template: São armazenados o arquivos responsáveis pela publicação.
Libs: Caso seja necessário adicionar alguma lib (biblioteca), é aqui que iremos inseri-las.
Src: o nosso fonte desenvolvido ficará aqui.

Agora vamos criar o arquivo que irá se comunicar com o nosso Back-end. Esse arquivo tem como nome services-config.xml. Nesse arquivo irá ser configurada a forma de comunicação do nosso Back-end com o nosso Front-End e onde estará disponível o nosso Back-end para nosso Front-End conseguir acessá-lo. Para isso clique com o botão direito sobre a pasta src -> New ->File... Na janela que ira se abrir se o nome do arquivo de services-config.xml e clique em Finish. Após criado de duplo clique no arquivo e coloque o seguinte código dentro dele


    
        
                         class="flex.messaging.services.RemotingService"
            messageTypes="flex.messaging.messages.RemotingMessage">
                
                    
                        
                    

                    
                        *
                    

                

            

        

        
                 class="mx.messaging.channels.AMFChannel">
                         class="flex.messaging.endpoints.AMFEndpoint"/>        
        
            
    
    

Nesse arquivo utiliaremos o valor que guardamos do RootURL anteriormente. Procurem a tag endPoint, reparem que dentro dela existe uma tag chamada endpointe dentro dela na propriedade “uri” iremos colocar o valor do RootURL adicionando o final “/Gateway.aspx”.

Algo importante a ser citado aqui, é que esse arquivo services-config.xml é utilizado no momento da compilação do nosso projeto, portanto precisamos indicar para o Flex que esse arquivo será compilado junto com a nossa aplicação .Para isso clique com o botão direito no nosso projeto -> Properties .... Na janela que ira se abrir selecione a opção Flex Compiler. Repare que existe um campo chamado Additional Compiler Arguments, nesse lugar indicaremos o arquivo a ser compilado, portante ira passar de -locale en_US  para -locale en_US -services services-config.xml.

Agora colocando o código no nosso Front-End,  de um duplo clique no arquivo ParOuImpar.mxml e entre com o seguinte código:



    
    
             /*Aqui são os importes que o Flex realiza para utilizar as classes
        Existem duas maneiras de adicionar imports
        1-> Você decorar as classes colocar aqui os pacotes que elas
            pertencer (opcao não viável)
        2-> Você começa a preencher o nome da classe pressionar
            CTRL + Barra Espaço, irá aparecer uma lista com todas as
            classes possíveis e quando você seleciona a que deseja utilizar
            o import da mesma é adicionado atutomaticamente
            (bem mais viável)*/

        import mx.controls.Alert;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.events.FaultEvent;

        /*Caso ocorra algum erro em nosso serviço
        essa função será disparada*/

        private function errorFault(evt:FaultEvent):void
        {
            /*Todo o valor de erro de qualquer metodo
            /estara dentro do evt.fault.faultString*/
            Alert.show(evt.fault.faultString);
        }

        /*Caso ocorra tudo certo em nosso serviço
        essa função será disparada - No caso nosso
        servico ira retornar um string e estou passando ela
        para o valor do texto do  Label - lblresultado*/

        private function resultParOuImpar(evt:ResultEvent):void
        {
            /*Todo o valor de retorno de qualquer metodo
            estara dentro do evt.result
            Sempre é importante fazer o casting (conversao)
            quando pegamos o valor de um result, pois
            Flex é um object generico*/

            lblResultado.text = evt.result as String;
        }

        /*Função que será disparada no click do nosso botão*/
        private function clickValidar():void
        {
            /*Chama o metodo no nosso Back-End*/
            roParImpar.verificaNumero(parseInt(txtNumero.text));
        }

        ]]>
    


    

    
    

    
    

    
         color="#FF0000" width="372" fontWeight="bold"
    id="lblResultado"/>

          destination="fluorine" showBusyCursor="true">
                 result="{resultParOuImpar(event)}" fault="{errorFault(event)}"/>
    




Bom sobre os imports já falei ai encima como devemos adicioná-los. Agora vou falar sobre a Tag RemoteObject que é responsável por chamar o nosso método que está no BackEnd. Bom, a primeira propriedade que setamos é seu “id”, esse nome pode ser qualquer um, pois esse ID será utilizado para referenciarmos esse objeto quando precisarmos. O Segundo parâmetro “source” é a conteúdo dele, ou seja, qual classe do lado do BackEnd esse remote ira acessar, no nosso caso ira acessar a classe Verifica.cs, portante colocamos o valor de Verifica (excluam a extensão) vale lembra que caso vocês estejam trabalhando com projetos dentro da Solution, você deverá indicar o caminho inteiro da classse (ex.: CamadaServico/NomeClasse). O terceiro parâmetro “destination” é o ID que definimos no services-config.xml na tag destination, no nosso caso definimos como fluorine. E por final o parâmetro showBusy, que indica se irá aparecer um cursor com relógio no momento em que o serviço é requisitado ateh o retorno do mesmo.

Reparem que dentro da tag RemoteObject temos a tag method que indica os métodos disponíveis dentro da classe que você indicou no parâmetro source do RemoteObject que é o “pai” desse método. Dentro de um Remote Object podemos ter N métodos, desde que os mesmos estejam na classe citada no source do Remote Object. Dentro do method definimos alguns parâmetros, o primeiro “name” indica o nome do método que esta dentro da classe de nosso BackEnd (vale lembra que o valor passado no name, deve ser idêntico ao método declarado dentro da classe do BackEnd, caso contrario não ira funcionar). Agora se vocês repararem existem dois propriedade uma que chama result e outra que se chama fault, essas propriedades irão funcionar da seguinte maneira: Caso aconteça algum erro desde o disparo do serviço até a chegada do retorno do mesmo,  a função setada no”fault” será acionada, caso contrário a função setada no “result” será acionada. Portanto dentro da tag script defini uma função chamada errorFault e passo o nome dela para a propriedade “fault” do nosso method e também defini uma função chamada resultParOuImpar  e passo o nome  dela para a propriedade “result”. Pronto estamos quase acabando =) !!!!!

Bom para acabarmos, criei uma função chamada clickValidar que será disparada quando no botão foi clicado (portanto, reparem que no evento Click do botão estamos chamando a função clickValidar). Dentro da função temos o seguinte comando:
roParImpar.verificaNumero(parseInt(txtNumero.text));

O que fazemos aqui é simples, apenas chamados o remote Object pelo ID que demos anteriormente seguindo por um ponto (.) e logo à frente o nome de algum método que definimos dentro do Remote Object. Reparem que estou passando um parâmetro do tipo inteiro, pois nosso método no BackEnd  espera um parâmetro desse tipo. Caso vocês passem tipo de parâmetro errado ou a quantidade de parâmetro errada será retornada uma mensagem que o método não foi encontrado!!!!!

Agora executem a aplicação do Back-End(feita no Visual Studio) e logo após rode a aplicação Front-End(Adobe  Flex).

Bom agora é só colocar um numero clicar, iremos ter um retorno se ele é par ou impar.

Galera essa coluna chegou ao fim, espero ter ajudado muito vocês, pois sei como é difícil encontrar esse tipo de material. Quero agradecer muito a todos, peço desculpas se fui muito repetitivo algumas vezes, pois tentei explicar o mais detalhado possível. Como falado anteriormente, a idéia dessa coluna é mostrar a integração dessas duas potentes tecnologias agora usem a criatividade e dirvirtam-se =) !!

Então até a próxima pessoal.... Qualquer dúvida me add no MSN que ajudarei o máximo possível =) !
acca_15@hotmail.com

Mais sobre: flex .net programação
Share Tweet
Recomendado
Comentários
Carregar comentários
Destaquesver tudo

Siga nossas contas no Twitter