Roberto

Tirei um tempinho para testar o Flex e sua integração com o Rails utilizando o plugin WebOrb. Segue o passo a passo que realizei, que deve servir para quem quer iniciar e não sabe como. Boa leitura! :D

Antes de começar, aqui vai uma imagem do resultado:

Utilizei o Flex2 SDK e o plugin 9 do Flash no Windows. Como só utilizaremos o SDK no final, pode deixar baixando enquanto está implementando. :)

Crie o projeto:

rails demo_flex

Instale o plugin WebOrb (lembre de executar na pasta raiz do projeto):

ruby script/plugin install http://themidnightcoders.net:8089/svn/weborb

Para verificar se tudo ocorreu bem já pode iniciar o servidor (ruby script/server ) e acessar: http://localhost:3000/examples/main.html ou http://localhost:3000/examples/example.html.

Entre os arquivos e pastas adicionados pela instalação do plugin temos:

• A pasta app/services onde implementamos os serviços disponíveis para serem acessados via RPC. Nela encontramos alguns exemplos.
• O arquivo config/WEB-INF/flex/remoting-config.xml onde declaramos os serviços implementados.
• A pasta public/examples onde temos o código dos exemplos.

Partindo para a criação do nosso próprio exemplo: listar registros de uma tabela de usuários, crie seu database e edite o config/database.yml de acordo.

Caso esteja usando MySQL, segue uma ajuda:

create database demo_flex_dev;
grant all on demo_flex_dev.* to 'demo_flex'@'localhost' identified by '123';
flush privileges;

E no database.yml:

development:
  adapter: mysql
  database: demo_flex_dev
  username: demo_flex
  password: 123
  host: localhost

Depois:

ruby script/generate model Usuario login:string senha:string nome:string
rake db:migrate

Para verificar se até agora está tudo ok e aproveitar para adicionar alguns dados:

ruby script/console
Usuario.create!(:login => 'roberto', :senha => '123', :nome => 'Roberto Soares')

Agora crie o arquivo app/services/UsuarioService.rb:

require 'weborb/context'
require 'rbconfig'

class UsuarioService
  def list
    Usuario.find(:all)
  end
end

E declare-o no arquivo config\WEB-INF\flex\remoting-config.xml:

    <destination id="UsuarioService">
        <properties>
            <source>UsuarioService</source>
        </properties>
    </destination>

Copie o arquivo public/examples/example.html para public/examples/usuarios.html substituindo todos ‘example’ por ‘usuarios’ para ganhar tempo. :)

Para finalizar crie o arquivo public/examples/usuarios.mxml que pode ser baixado aqui.

<?xml version="1.0"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
    creationComplete="setUp();loadList();">

    <mx:Script>
    <![CDATA[    
        import mx.rpc.remoting.RemoteObject;
        import mx.controls.Alert;
        import mx.rpc.events.ResultEvent;
        import mx.rpc.events.FaultEvent;     

        private var remoteObject:RemoteObject;

        public function setUp():void
        {
            //objeto que representa o nosso servico
            remoteObject = new RemoteObject();
            remoteObject.destination = "UsuarioService";

            //em caso de sucesso do método list do servico,
            //será chamado o método onList recebendo o resultado
            remoteObject.list.addEventListener("result", onList);

            //em caso de falha será chamado o onFault
            remoteObject.addEventListener("fault", onFault);        
        }

        public function loadList():void
        {
            //aqui é chamado o list do UsuarioService
            remoteObject.list();               
        }

        public function onList(event:ResultEvent):void
        {
            var usuarios:Array = event.result as Array;

            //atualizando o DataGrid
            listDataGrid.dataProvider = usuarios;
        }

        public function onFault (event:FaultEvent):void 
        {
            Alert.show(event.fault.faultString, 'Error');
        }

    ]]>
    </mx:Script>

    <mx:TitleWindow title="Exemplo" layout="vertical" height="100%" width="100%">

            <mx:Button label="Atualizar Lista" click="loadList()"/>

            <mx:DataGrid id="listDataGrid" width="100%" height="100%">
                <mx:columns>
                    <mx:DataGridColumn dataField="login" headerText="Login"/>
                    <mx:DataGridColumn dataField="senha" headerText="Senha"/>
                    <mx:DataGridColumn dataField="nome" headerText="Nome"/>
                </mx:columns>
            </mx:DataGrid>

    </mx:TitleWindow>

</mx:Application>

Para terminar, compile o usuarios.mxml usando o mxmlc do Flex2SDK:

endereco_do_sdk\bin\mxmlc --compiler.services ../../config/WEB-INF/flex/services-config.xml -compiler.context-root ../../config/WEB-INF/flex usuarios.xml

Dica: coloque a pasta bin do FlexSDK no PATH do sistema. ;)

Pronto! É só rodar o servidor ( ruby script/server ) e acessar http://localhost:3000/examples/usuarios.html.

Download do projeto completo do exemplo(1,09MB).

Gostou? Vá dar uma olhada em outras fontes: http://blog.egenial.com.br #olá instrutor :D http://flexonrails.net http://flexiblerails.com #primeiro livro FlexOnRails http://flex.org http://livedocs.adobe.com/flex/2/langref/ #doc das classes do flex

Na próxima testarei com o FoRc que não utiliza RemoteObject, mas sim HTTPService.

t+!