5 Tutoriais de integração Flex + Rails (Flex on Rails)

Para você que deseja aprender e praticar mais a integração das tecnologias Flex e Rails (flex on rails), aqui vai a lista dos 5 melhores tutoriais de flex on rails:

1) Meu tutorial, aqui no meu blog, com exemplo completo de integração flex on rails.
http://silvadeveloper.wordpress.com/2008/04/24/integrando-flex-3-com-…

2) Artigo tutorial da Adobe, escrito por Derek Wischusen do blog flexonrails.net:
http://www.adobe.com/devnet/flex/articles/flex2_rails.html

3) Stuart Eccles do liverail.com, postou a mini série de artigos sobre a integração do Ruby on Rails e Flex.
Parte 1 => http://www.liverail.net/articles/2006/04/16/rubyonrails-1-1-and-flex-…
Parte 2 => http://www.liverail.net/articles/2006/5/6/rubyonrails-1-1-and-flex-2-…
Parte 2 Extra => http://www.liverail.net/articles/2006/05/13/flex-and-rails-part-2-ext…

4) Automatizando a comunicação entre o cliente eo servidor. Foi escrito por Harris Reynolds. O servidor tecnologia que é utilizado por Midnight WebORB codificadores (www.themidnightcoders.com). WebORB.
Esta abordagem é um pouco diferente, porque o lado do servidor tem sido tratado por não apenas spiting out XML, sim, um pouco mais robusto. Se você tem um tráfego de dados com grande escala, esta solução lhe atenderá.

http://webddj.sys-con.com/read/295396.htm

5) Video que mostra como combinar o poder do flex com o rails:
http://www.valtech-tv.com/permalink/2345/combining-the-power-of-flex-…

 

Aprenda, Inicie e Envolva-se com Flex on Rails

Aos meus amigos desenvolvedores, mais uma contribuição para a comunidade, criei uma série reunindo tudo o que você precisa saber sobre Flex, Ruby, Rails e Flex on Rails. Tudo de maneira resumida, simples e específica, dividida em 3 posts:

Flex on Rails: Aprenda

Flex on Rails: Inicie

Flex on Rails: Envolva-se

Espero que gostem e que possa ajudar e contribuir no seu dia-a-dia ou nos seus estudos.

Abraço a todos,

Silva Developer

 

Flex on Rails – Aprenda

Interessado em aprender Ruby on Rails, Flex e Flex on Rails?. Delicie-se então com estas super dicas com as melhores opções disponíveis em livros e cursos.

Aprenda Ruby on Rails:

Livro: The Rails Way, by Obie Fernandez. Clique aqui para comprar ou saber + informações.

Curso: Curso on-line sobre a plataforma TreinaTOM, da e-Genial, veja aqui + informações sobre o curso de Ruby on Rails do básico ao avançado da e-Genial.

Aprenda Flex:

Livro: Adobe Flex 3.0 for Dummies, by Doug McCune. Clique aqui para comprar ou saber + informações.

Curso: Curso on-line sobre a plataforma TreinaTOM, da e-Genial, veja aqui + informações sobre o curso Flex 3 do básico ao avançado da e-Genial.

Aprenda Flex on Rails:

Livro: Flexible Rails, by Peter Armstrong. Clique aqui para comprar ou saber + informações.

Curso: Curso on-line sobre a plataforma TreinaTOM, da e-Genial, veja aqui + informações sobre o curso de Flex + Ruby on Rails da e-Genial.

 

Flex on Rails – Envolva-se

Tudo o que você precisa saber sobre como se envolver ainda mais com as tecnologias Flex e Ruby on Rails esta aqui, de forma clara, simples e objetiva, em um único post:

Envolva-se com Ruby:

Documentação: Consulte aqui.
Fórum: Ruby-Fórum.
Grupos: Ruby-talk-google.
e-Books: Aprenda a programar Ruby.

Envolva-se com Rails:

Documentação: Consulte aqui.

Foruns: Rails Brasil, Ruby on Br, Ruby-Fórum Rails.

Grupos: rails-br e Ruby on Rails:Talk

Tutorial: Rolling with Rails 2.0 by Fabio Akita: Parte 1 e Parte 2.

Podcasts: Rails Podcast Brasil

Screencasts: PeepCode (pago) e Railscasts (grátis)

Melhores blogs: Fabio Akita, Carlos Brando e Carlos Eduardo e-Genial.

Envolva-se com Flex:

Documentação: Consulte aqui.

Foruns: Fórum FlexBrasil e Fórum Informe Flex-Brasil

Grupos: Flex-Brasil Google, Flex-Brasil Yahoo, e Flexdev.

Tutorial: Seleção de 10 tutoriais sobre flex e flex on rails.

Podcasts: The flex show podcasts.

Screencasts: Adobe Flex Media Screencast.

Melhores blogs: The flex show, Fabio Terracini, Carlos Eduardo e-Genial.

Extras: Portal Flex, Flex Showcases.

 

Flex on Rails – Inicie

Kit essencial para desenvolvimento Flex on Rails

Como uma forma de tentar evitar que meus caros amigos desenvolvedores iniciantes em ruby on rails e Flex percam seus preciosos tempos e queimem neurônios, criei este tutorial passo-a-passo, onde mostro quais softwares e versões que você precisa ter instalado em sua máquina para desenvolvedor aplicações RIA, flex on rails.

Composição do kit:

Basicamente o kit de softwares necessários para você desenvolver aplicações Flex on Rails, é o seguinte:

1) Mysql;

Versão recomendada: 5.0
Observação: Recomendo posteriormente a instalação da ferramenta Mysql-front para visualização mais rápida e dinâmica.
Clique aqui para baixar.

2) Ruby;

Versão recomenda: 1.8.6 última estável
Observação:
Clique aqui para baixar.

3) Rails;

Versão recomendada: 2.0.2 última estável
Observação: Deve ser instalado obrigatoriamente depois do ruby.
Link para download: abrir o cmd e digitar o seguinte comando: gem install rails –include-dependencies

4) Java Runtime;

Versão: 6 atualização 5
Observação: Utilizado pelo Flex 3 Builder e do Aptana RadRails, todos os 2 são derivados do eclipse.
Clique aqui para baixar.

5) Aptana Studio RadRails;

Versão: Aptana Studio 1.1 e do plugin RadRails 1.0.1
Observação: Primeiramente você deve baixar o Aptana Studio 1.1 e depois, do próprio software instale o plugin RadRails versão 1.0.1.
Clique aqui para baixar.

6) Adobe Flex 3 Builder;

Versão: 3.0
Observação: Este software é pago, porém no site do fabricante, Adobe, você poderá realizar um cadastro para obter versão trial por 90 dias.
Clique aqui para baixar.

Cronograma e Ordem da instalação:

1) Mysql, instale primeiramente o mysql 5.0 server na sua máquina, pois, durante a instalação dos softwares server-sides, como rails, ele buscará pelo mysql instalado para incluir o caminho (path) em sua biblioteca interna;

2) Ruby, todos sabemos que o rails é um framework da linguagem ruby, portanto para que o rails funcione você deve instalar primeiramente sua base, que é
o ruby.

3) Rails, depois de instalado o ruby, instale o rails que é muito simples e a instalação não poderia ser menos dinâmica que o framework, para instalá-lo basta abrir o cmd e digitar o seguinte comando:

gem install rails –include-dependencies

4) Java Runtime, como iremos trabalhar com IDE Aptana RadRails, cuja qual iremos instalar no próximo passo, como todos sabemos, todo aplicativo baseado no eclipse, usa a plataforma java, por isso, caso ainda não tenha, instale-a previamente antes do Aptana RadRails.

5) Aptana RadRails, como sabemos no mundo de hoje tempo é dinheiro, por isso, existem diversas editores que automatizam ainda mais as funções do rails, dentre elas está o Aptana Studio RadRails, que para mim, é a melhor ferramenta.

6) Adobe Flex 3 Builder, depois de tudo pronto agora só falta a parte charmosa e visual do seu kit, instale o flex 3 builder, que será a camada de visualização de sua aplicação feita em rails. Como todos sabemos, todas as apps rails utilizam a estrutura MVC, que significa, Model, View, Controller. Quando juntamos as tecnologias client-side Flex e server-side Rails, o flex incorpora a função das views da aplicação rails, que é no meu entender, o grande charme e transformação visual das aplicações, o que difere sua app das comuns estáticas que se vê por aí.

Bom por agora é só, espero que tenham gostado de mais esta contribuição. Abraço a todos!.

 

Formatando data no flex e no rails

Bom, como todos sabemos, tanto o flex quanto o rails, utilizam o sistema de data americano. E para podermos utilizar o nosso temos que fazer os seguintes procedimentos:
Formatando data no flex:

1) Primeiramente devemos incluir o componente não visual chamado DateFormatter, para isso você deverá inserir o seguinte código no seu arquivo mxml:

 <mx:DateFormatter id="_dfFormatador" formatString="DD/MM/YYYY"  />

Note que definimos o novo formato através da propriedade formatString, do componente DateFormatter.

2) Feito isso, agora devemos criar uma pequena função no nosso código actionscript:

 	[Bindable]
 	public var formatador: DateFormatter = new DateFormatter();

    public function formataData(item:Object,column:DataGridColumn):String
    {
         formatador.formatString= "DD/MM/YYYY";
         return formatador.format(item["data"].toString());
    }

Vamos partir do principio que o componente que está mostrando a data que queremos formatar é um datagrid.

3) Criada a função, agora basta invocá-la de nosso componente que está mostrando a data a ser formatada, no nosso caso, iremos chamar a função da nossa datagrid, para isso ela já possui uma propriedade especial chamada labelFunction, já designada para estes fins, veja como fica o código para isso:

<mx:DataGrid id="_dgConsulta" >
<mx:columns>
<mx:DataGridColumn headerText="Usuário" dataField="nomeuser"/>
<mx:DataGridColumn headerText="Id do cliente" dataField="idcli"/>
<mx:DataGridColumn headerText="Nome do cliente" dataField="nomecli"/>
<mx:DataGridColumn headerText="Data da apresentação" dataField="datareuniao" labelFunction="{formataData}" />
<mx:DataGridColumn visible="false" headerText="Id" dataField="id"/>
</mx:columns>
</mx:DataGrid>

Se quisessemos nem precisamos especificar o datafield para a coluna da grid em que invocamos a função formataData através da propriedade labelFunction, pois, repare que na própria função já está sendo especificado entre colchetes qual o campo que será formatado.

Formatando data no rails:

Amigos pelo fato do rails ser ainda mais dinamico que o flex, por ter incorporado em suas bibliotecas internas diversas funções que automatizam e facilitam a vida do programador, veja como é muito mais simples:

Basta adicionar o seguinte código:

Time.now.strftime("%Y-%m-%d")

Vamos partir do princípio de que queremos converter a data de nossa action de consulta de reunião, que irá retornar dados para o flex, preenchendo posteriormente nossa datagrid acima criada e codificada para receber estes dados, veja este código como fica dentro da action:

def verificareuniao
@atendimentos = Atendimento.find(:all, :conditions =>
["datareuniao like ? and status like ?",
Time.now.strftime("%Y-%m-%d"), "nao realizada"])

if (@atendimentos.size > 0)
render  ml => @atendimentos.to_xml
else
render :text => "registro_nao_encontrado"
end

end

 

Garantindo a comunicação de sua aplicação Flex com sua aplicação Rails

Segue abaixo dicas para você seguir e evitar o acontecimento de falhas na comunicação da sua aplicação flex com sua aplicação rails:

1) Inserir seu projeto flex dentro da pasta PUBLIC do seu projeto rails;
2) Importe novamente seu projeto flex do novo local e altere o Build Path (botão direito do mouse em cima do projeto), do seu projeto flex para o novo local, atentando-se para o número da porta de saida do servidor rails, exemplo: http://localhost:3000/nomedapastadoseuprojetoflex/bin-debug;
3) Para ficar mais claro e garantir maior controle seu na comunicação com o rails via HTTPService, primeiro certifique-se que esteja usando o componente HTTPService mxml, pois caso não saiba, no flex possui 2 tipos de componentes e sempre devemos usar o mxml, veja sua biblioteca que deve importar: import mx.rpc.http.mxml.HTTPService.
Tendo conferido que a classe que você esta usando é a mxml, crie seu componente HTTPService dinamicamente, direto no seu código actionscript, como no exemplo abaixo, veja como é simples:

Esta funcão envia pro rails um objeto chamado obj, que é montado pela função montaobjeto():

[Bindable]
private var httpRails:HTTPService = new HTTPService();

private function cadastra():void{
     httpRails = new HTTPService();
     httpRails.url = “/atendimentos/cadastro”;
     httpRails.method = “POST”;
     httpRails.useProxy = false;
     httpRails.showBusyCursor = true;
     httpRails.resultFormat = “e4x”;
     httpRails.addEventListener(ResultEvent.RESULT, msgResult);
     httpRails.addEventListener(FaultEvent.FAULT, msgFault);
     montaobjeto();
     httpRails.send(obj);
}

private var obj:Object = new Object();
private function montaobjeto():void{
obj = new Object();
try
{
if(_dgConsulta.selectedItem != null){
obj["id"] = _dgConsulta.selectedItem.id;
}
}catch (e:Error){
}

     obj["pacote[idcli]“] = _tIdcli.text;
     obj["pacote[nomecli]“] = _tNomecli.text;
     obj["pacote[nomeuser]“] = ModelLocator.usuario;
     obj["pacote[agendaapres]“] = _cbagendaApres.selectedItem.data;
     obj["pacote[dataapres]“] = _dfdataApres.text;
     obj["pacote[status]“] = _cbStatus.selectedItem.data;
     obj["pacote[historico]“] = _tHistorico.text;
}

Na parte do flex é só isso que precisa se certificar, posteriormente basta colocar no resultevent do seu componente httpservice, aqui neste exemplo chamado de msgResult para a sua datagrid receber a resposta do rails, veja como é simples:

private function msgResult(obj:ResultEvent):void{
_minhadataGrid.dataProvider = obj.result.atendimentos.atendimento;
}

4) Na parte do rails é mais simples ainda, sua action deverá receber os parametros enviados como acima demonstrado, ele deve ficar assim:

def cadastro
     @clientes = Cliente.create(params[:pacote])

     if (@clientes.save)
        render :text => “ok”
     elsif
        render  ml => @clientes.errors.to_xml_full
     end

end

 

Integrando Flex 3 com Rails 2.0 – Exemplo completo

Introdução

Quando se utiliza Flex você tem várias opções de linguagens de programação para desenvolver o seu back-end.Então por que escolher Rails?.Ruby on Rails é um framework para desenvolvimento ágil de aplicações web, onde utiliza em sua estrutura um conjunto de helpers e geradores de código para automatizar e tornar fácil a integração com vários bandos de dados abstraindo o maximo do sql.

Além disso, quando você usa o Rails, ao mesmo tempo estará trabalhando com Ruby, que é a linguagem de programação base do framework Rails, Ruby é ao mesmo tempo extremamente poderosa, dinamica e fácil de usar.Integrando Flex e Ruby on Rails, você será capaz de obter muito mais feitos com muito menos código.

Para que você tenha um melhor entendimento e aproveitamento deste exemplo, iremos fazê-lo em 3 passos:

1) Construindo a interface do usuário;
2) Configurando sua aplicação Rails;
3) Realizando integração e comunicação, Flex com Rails;

1) Construindo a interface do usuário

Para começar, você deve criar a interface do usuário para exibir os dados. Abra o Flex Builder e vá em Arquivo> Novo> Flex Application para criar um novo projeto que iremos chamar aqui de Controlabugs.Depois que o projeto foi criado, abra o arquivo principal da sua aplicação, Controlabugs.mxml e adicione o código a seguir:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	    backgroundGradientAlphas="[1.0, 1.0]"
	    backgroundGradientColors="[#5D6264, #000000]"
	    layout="absolute" creationComplete="consulta()" > 

<mx:Script>
	<![CDATA[

		[Bindable]
		private var Arraystatus:Array = ["Aberto", "Atribuido", "Fechado"];

		[Bindable]
		private var Arrayprioridade:Array = ["Bloqueador", "Crítico", "Importante", "Menor", "Trivial"];

	]]>
</mx:Script>

<mx:ApplicationControlBar x="0" y="0" dock="true" height="35" fillAlphas="[1.0, 1.0]"
			  fillColors="[#333333, #050505]">
	<mx:Label text="FLEXível - Controla Bugs" fontWeight="bold" color="#FFFFFF"/>
</mx:ApplicationControlBar>

<mx:Panel height="354" layout="absolute" title="Criar/Atualizar Bugs"
	  borderColor="#CCCCCC" color="#FFFFFF" top="23" width="746.5" horizontalCenter="0">
	<mx:Form x="127.75" y="10" width="471" height="250" color="#000000" horizontalScrollPolicy="off"
		 verticalScrollPolicy="off">

	<mx:FormItem label="Reportado por">
		<mx:TextInput id="_tReportadopor"
		  width="220" text="{_dgBugs.selectedItem.reportadopor}" color="#000000"/>
	</mx:FormItem>

	<mx:FormItem label="Atribuido por">
		<mx:TextInput id="_tAtribuidopor"
		  width="220" text="{_dgBugs.selectedItem.atribuidopor}" color="#000000"/>
	</mx:FormItem>

	<mx:FormItem label="Descrição">
		<mx:TextArea id="_tDescricao"
		 width="336" height="111" text="{_dgBugs.selectedItem.descricao}" color="#000000"/>
	</mx:FormItem>

	<mx:FormItem label="Status" width="300">
		<mx:ComboBox id="_cbStatus"
		 selectedIndex="{Arraystatus.indexOf(_dgBugs.selectedItem.status)}"
		 dataProvider="{Arraystatus}" width="199" color="#000000">
		</mx:ComboBox>
	</mx:FormItem>

	<mx:FormItem label="Prioridade">
		<mx:ComboBox id="_cbPrioridade"
		 selectedIndex="{Arrayprioridade.indexOf(_dgBugs.selectedItem.prioridade)}"
		 dataProvider="{Arrayprioridade}" width="199" color="#000000">
		</mx:ComboBox>
	</mx:FormItem>

        </mx:Form>

	<mx:ControlBar horizontalAlign="right" color="#000000">
	        <mx:Button label="Limpar" click="limpa()"/>
		<mx:Button label="Atualizar" click="atualiza()"/>
		<mx:Button label="Criar" click="cadastra()"/>
	</mx:ControlBar>

</mx:Panel>

<mx:Panel height="354" layout="absolute" title="Visualiza Bugs" borderColor="#CCCCCC"
	  color="#FFFFFF" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="746.5"
	  top="395" horizontalCenter="0">

<mx:DataGrid id="_dgBugs" x="0" y="0" width="100%" height="100%" color="#000000">
<mx:columns>
	<mx:DataGridColumn headerText="Reportado por" dataField="reportadopor"/>
	<mx:DataGridColumn headerText="Atribuido por" dataField="atribuidopor"/>
	<mx:DataGridColumn headerText="Descrição" dataField="descricao"/>
	<mx:DataGridColumn headerText="Status" dataField="status"/>
	<mx:DataGridColumn headerText="Prioridade" dataField="prioridade"/>
</mx:columns>
</mx:DataGrid>

<mx:ControlBar horizontalAlign="right" color="#000000">
	<mx:Button label="Consultar" click="consulta()" />
	<mx:Button label="Deletar" click="deleta()"/>
</mx:ControlBar>

</mx:Panel>

</mx:Application>

Este é o código completo da interface de nossa aplicação, Agora iremos dividí-lo em grupos para explicar o que este arquivo MXML faz:

1) Ele cria um formulário básico para enviar novos bugs e edição de bugs existentes.

Nota:Os valores no FormItems são atualizados automaticamente usando databinding baseado nos valores do item selecionado na datagrid discutido nas seções seguintes.O formulário é acondicionado dentro de um componente Panel.Usando o componente panel, você tem duas vantagens:

2) Geralmente ele produz uma interface mais bonita e fornece um rótulo para você descrever o conteúdo / objetivo do painel.

Você pode inserir um ControlBar no seu painel de modo que você pode adicionar mais controles que trabalham com o conteúdo.O ControlBar no final deste painel possui três botões. Aquele que cria novos bugs, outro para atualizar um bug, e por fim um botão para limpar o formulário.Até o momento, estes botões não fazem nada, eles são apenas placeholders, pelo menos até que você configure seu Rails back-end para a aplicação.

<mx:ApplicationControlBar x="0" y="0" dock="true" height="35" fillAlphas="[1.0, 1.0]"
			  fillColors="[#333333, #050505]">
	<mx:Label text="FLEXível - Controla Bugs" fontWeight="bold" color="#FFFFFF"/>
</mx:ApplicationControlBar>

<mx:Panel height="354" layout="absolute" title="Criar/Atualizar Bugs"
	  borderColor="#CCCCCC" color="#FFFFFF" top="23" width="746.5" horizontalCenter="0">
	<mx:Form x="127.75" y="10" width="471" height="250" color="#000000" horizontalScrollPolicy="off"
		 verticalScrollPolicy="off">

	<mx:FormItem label="Reportado por">
		<mx:TextInput id="_tReportadopor"
		  width="220" text="{_dgBugs.selectedItem.reportadopor}" color="#000000"/>
	</mx:FormItem>

	<mx:FormItem label="Atribuido por">
		<mx:TextInput id="_tAtribuidopor"
		  width="220" text="{_dgBugs.selectedItem.atribuidopor}" color="#000000"/>
	</mx:FormItem>

	<mx:FormItem label="Descrição">
		<mx:TextArea id="_tDescricao"
		 width="336" height="111" text="{_dgBugs.selectedItem.descricao}" color="#000000"/>
	</mx:FormItem>

	<mx:FormItem label="Status" width="300">
		<mx:ComboBox id="_cbStatus"
		 selectedIndex="{Arraystatus.indexOf(_dgBugs.selectedItem.status)}"
		 dataProvider="{Arraystatus}" width="199" color="#000000">
		</mx:ComboBox>
	</mx:FormItem>

	<mx:FormItem label="Prioridade">
		<mx:ComboBox id="_cbPrioridade"
		 selectedIndex="{Arrayprioridade.indexOf(_dgBugs.selectedItem.prioridade)}"
		 dataProvider="{Arrayprioridade}" width="199" color="#000000">
		</mx:ComboBox>
	</mx:FormItem>

        </mx:Form>

	<mx:ControlBar horizontalAlign="right" color="#000000">
	        <mx:Button label="Limpar" click="limpa()"/>
		<mx:Button label="Atualizar" click="atualiza()"/>
		<mx:Button label="Criar" click="cadastra()"/>
	</mx:ControlBar>

</mx:Panel>

Agora, já o código abaixo cria um componente Datagrid, que tanto exibe informações sobre bugs existentes como permite que você selecione um registro de bug, atualize, consulte ou delete.O aplicativo usa o parâmetro DataField nas colunas para especificar o nome do atributo no Dataprovider, que a aplicação irá usar para preencher esta coluna.É importante que se tenha em mente que os nomes das colunas na sua tabela deva corresponder aos valores especificados aqui.O componente DataGrid também está envolvido em um painel com um control bar, este tem 2 botões sendo que um será usado para deletar o bug que está selecionado no componente DataGrid e outro para realizar uma nova consulta.

<mx:Panel height="354" layout="absolute" title="Visualiza Bugs" borderColor="#CCCCCC"
	  color="#FFFFFF" horizontalScrollPolicy="off" verticalScrollPolicy="off" width="746.5"
	  top="395" horizontalCenter="0">

<mx:DataGrid id="_dgBugs" x="0" y="0" width="100%" height="100%" color="#000000">
<mx:columns>
	<mx:DataGridColumn headerText="Reportado por" dataField="reportadopor"/>
	<mx:DataGridColumn headerText="Atribuido por" dataField="atribuidopor"/>
	<mx:DataGridColumn headerText="Descrição" dataField="descricao"/>
	<mx:DataGridColumn headerText="Status" dataField="status"/>
	<mx:DataGridColumn headerText="Prioridade" dataField="prioridade"/>
</mx:columns>
</mx:DataGrid>

<mx:ControlBar horizontalAlign="right" color="#000000">
	<mx:Button label="Consultar" click="consulta()" />
	<mx:Button label="Deletar" click="deleta()"/>
</mx:ControlBar>

</mx:Panel>

Bom, aqui finalizamos a criação da interface do usuário, se você acompanhou e digitou corretamente os códigos acima informados, sua interface ficará assim:

2) Configurando sua aplicação Rails

Agora que você criou a interface, o próximo passo é criar a sua aplicação Rails, antes, é necessário que você confira se a versão do Rails instalado em seu computador é a última versão, Rails 2.0.2, para isso, abra uma janela de linha de comando (cmd) e digite o seguinte comando: Rails -v, logo abaixo o rails retornará a versão atual instalado no seu computador.

Tendo a versão atual, então, ainda na janela de linha de comando (cmd), altere o diretório atual para o local que você gostaria de usar para sua aplicação. Eu uso geralmente C:\Projetos\Rails. Estando dentro do diretório onde você deseja gerar sua aplicação, digite a seguinte linha:

rails -d mysql controlabugs

Este comando gera todas as pastas e arquivos que você precisa para sua aplicação Rails, e o parâmetro -d mysql significa que minha aplicação será gerada tendo como padrão de banco de dados, o Mysql.Parte do poder do Rails é que ele promove consistência em todo projeto, assegurando para que todas as aplicações Rails tenham a mesma estrutura.

Dica:Para editar arquivos de sua aplicação Rails, é necessário que você tenha qualquer editor de texto simples, porém quando você instala o Ruby, ele inclui em seu pacote de instalação o editor de textos SciTE.No windows, você pode localizá-lo em Iniciar / Programas / Ruby / SCITE.

O primeiro passo que se deve seguir depois de gerada a sua aplicação Rails, é especificar como o Rails irá realizar o acesso a banco de dados. Para fazer isso, vá para a pasta de sua aplicação Rails (neste exemplo, C:\Projetos\Rails\controlabugs) e abra a pasta Config. Localize o arquivo database.yml e abra-o.No momento em que o Rails gera a sua aplicação Rails, ele por padrão, deixa pré-estabelecido a configuração do seu banco de dados de acordo com o nome do projeto que você passou e de acordo com o tipo do banco de dados que será usado, este também, de acordo com o que você informou no momento de gerar a aplicação, no nosso caso Mysql.Ainda também deixa pré-estabelecido a configuração de 3 banco de dados no seu projeto, um para desenvolvimento, outro para teste e outro para produção.Veja como fica, por padrão, a estrutura do arquivo database.yml, gerado pelo Rails:

development:
  adapter: mysql
  encoding: utf8
  database: Controlabug_development
  username: root
  password:
  host: localhost

test:
  adapter: mysql
  encoding: utf8
  database: Controlabug_test
  username: root
  password:
  host: localhost

production:
  adapter: mysql
  encoding: utf8
  database: Controlabug_production
  username: root
  password:
  host: localhost

Certifique-se de preencher corretamente o seu username e password.Agora que já editamos e atualizamos o arquivo de configuração do nosso banco de dados (database.yml), já podemos mandar o Rails criar o nosso banco de dados de acordo com a configuração informada no arquivo database.yml, para isso basta digitar o seguinte código na janela de linha de comando (cmd):

Lembrete: A partir daqui, para executar os comandos do ruby e do rails você deve certificar-se antes de que você está na raiz do diretório da sua aplicação Rails, para isso utilize o comando cd controlabugs, caso contrário para todos será lhe retornado uma mensagem de erro.

rake db:create:all

Utilizando uma ferramenta de visualização de dados do Mysql, logo após o comando, podemos conferir os bancos de dados criados:

Em seguida, crie o Model para sua aplicação. No Rails, o Model é o código que envolve uma tabela em seu banco de dados. Para criar o seu Model, dentro da raiz do diretório de sua aplicação Rails, digite a seguinte linha de comando:

ruby script/generate model bug

A partir deste momento, nossa aplicação Rails já pode acessar seu banco de dados, o próximo passo é adicionar uma tabela ao seu banco de dados para armazenar seus bugs. A maneira mais fácil de fazer isso é usar Rails migration. Migrações praticamente eliminam a necessidade de utilizar comandos SQL para criar seu banco de dados.

Para implementar a migração na sua aplicação Rails, , vá para db> migrate. Você verá um arquivo chamado 001_create_bugs.rb que foi criado automaticamente quando você criou o seu Model. Edite este arquivo da seguinte maneira:

class CreateBugs < ActiveRecord::Migration

  def self.up
    create_table :bugs do t
      t.string :reportadopor
      t.string :atribuidopor
      t.string :descricao
      t.string :status
      t.string :prioridade
    end
  end

  def self.down
     drop_table :bugs
  end

end

O método self.up, cria uma tabela chamada bugs com seis colunas:
* Id (gerado automaticamente chave primária);
* Reportadopor;
* Atribuidopor;
* Descricao;
* Status;
* Prioridade;

Note que os nomes das colunas correspondem aos valores no dataField atributos no DataGrid coluna que você criou na sua interface no Flex.O método down, remove a tabela.

Para executar a migração, vá para a linha de comando (cmd) e digite o seguinte código:

rake db:migrate

Abra a sua ferramenta de visualização do banco de dados Mysql e veja a estrutura da tabela criada pelo Rails:

Finalmente, você criará o controlador. O controlador contém a lógica de interação entre o ponto de vista (neste caso Flex) e do modelo. Para criar o seu controlador insira as seguintes linhas:

ruby script/generate controller bugs

Agora, dentro da pasta de sua aplicação Rails, vá para app > controller. Você verá o arquivo que você acabou de gerar, bugs_controller.rb. Abra este arquivo com o editor de texto de sua preferência e adicione o código a seguir:

class BugsController < ApplicationController
  protect_from_forgery :except => [:cadastra,:atualiza,:deleta]

  def cadastra

    @bugs = Bug.create(params[:pacote])

    if (@bugs.save)
       render :text => "Registro cadastrado com sucesso."
    elsif
       render  ml => @bugs.errors.to_xml_full
    end        

  end

  def consulta

    @bugs = Bug.find(:all)

    if (@bugs.size > 0)
      render  ml => @bugs.to_xml
    else
      render :text => "Não foi encontrado nenhum registro."
    end

  end

  def atualiza

     @bugs = Bug.find(params[:id])
     @resultado = @bugs.update_attributes(params[:pacote])

     if (@resultado)
        render :text => "Registro cadastrado com sucesso."
     elsif
        render  ml => @bugs.errors.to_xml_full
     end    

  end

  def deleta

    @bugs = Bug.find(params[:id]).destroy

    if @bugs
       render  ml => Bug.find(:all).to_xml
    end    

  end

end

Importante: Note que foi adicionado o código protect_from_forgery :except => [:cadastra,:atualiza,:deleta] antes da criação dos métodos, pois na nova versão do ruby para evitar acessos indevidos em seu banco, ele foi incrementado com uma clausula de segurança que por padrão, seu estado é bloqueado para tudo, colocando este comando, você informará ao Rails que ele poderá abrir exceções para os métodos discriminados entre colchetes, podendo assim, os mesmos fazerem inserções e alterações em seus dados.

Estes métodos, implementam a funcionalidade básica de CRUD a sua aplicação, onde o método list corresponde a ler.Veja a seguir, uma breve explicação das principais partes deste código:

1) params: Essa variável é um hash que é automaticamente preenchido com os valores que você deseja passar como argumento para o método Rails.

2) Bug: Refere-se para o ActiveRecord que você criou quando gerou o seu modelo. Note que é uma convenção do Rails o nome da tabela ser no plural do nome do modelo. Usando esta convenção, quando Rails encontrar um modelo chamado “Bug” ela olha para uma tabela chamada de “bugs” na base de dados.

3) find: O método find encontra os registros em um banco de dados para a tabela especificada. Bug.find: :all retorna todos os registros da tabela bugs. Bug.find (parâm [: id]) retorna o primeiro registro na tabela bugs cujo id corresponde ao valor contido no parâmetro hash. Observe que também é uma convenção do Rails para cada tabela ter uma coluna id que é a chave primária.

4) new: Cria uma nova instância ActiveRecord.
5) save: Salva o registro no banco de dados.
6) update_attributes: Atualiza o registro usando valores fornecido por hash.
7) destroy: Deleta o registro do banco de dados.
to_xml: Cria um documento XML do Model.

Por fim, é importante salientar que em Ruby todos os métodos retornam um valor.Quando você não usa return, os métodos retornam o valor da última linha dentro do método.

Finalmente, vamos configurar sua aplicação Rails para rodar (subir) o servidor. Ruby já vem instalado com um servidor padrão chamado WEBrick. Para iniciar WEBrick ir para a linha de comando e inserir: (você precisar estar dentro do diretório da sua app)

ruby script/server

Note que por padrão, o servidor está rodando na porta 3000.Isto será importante no próximo passo.

É isso aí, sua aplicação Rails está pronta. Abra o seu navegador e digite a url = http://localhost:3000/, você verá a página de saudação do Rails:

3) Realizando integração e comunicação, Flex com Rails:

Agora que você já tem sua interface Flex, sua aplicação Rails e seu banco de dados todos criados, o próximo passo é fazer com que o Flex se comunique com o Rails. Felizmente, isso no Flex é realmente fácil.Você irá usar o componente HTTPService (mx.rpc.http.mxml.HTTPService), para chamar as actions/métodos criados na sua aplicação rails: create, list, uptdate, delete, actions/métodos estes que você adicionou no controlador bugs, no arquivo bugs_controller.rb na sua aplicação Rails. Aqui iremos criar os componentes HTTPService de maneira dinamica ou seja, direto no nosso código actionscript, pelo simples fato de ser mais simples, claro e através disso, você possui maior segurança e controle na comunicação.Sendo assim, adicione na sua aplicação Flex, dentro do seu código actionscript, o seguinte código:

import mx.controls.Alert;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.mxml.HTTPService;		

private function consulta():void
{
	httpRails = new HTTPService();
	httpRails.url = "/bugs/consulta";
	httpRails.method = "GET";
	httpRails.useProxy = false;
	httpRails.showBusyCursor = true;
	httpRails.addEventListener(ResultEvent.RESULT, msgResult);
	httpRails.addEventListener(FaultEvent.FAULT, msgFault);
	httpRails.send();

}

private function cadastra():void
{

	httpRails = new HTTPService();
	httpRails.url = "/bugs/cadastra";
	httpRails.method = "POST";
 	httpRails.useProxy = false;
 	httpRails.showBusyCursor = true;
 	httpRails.resultFormat = "e4x";
        httpRails.addEventListener(ResultEvent.RESULT, msgResult);
	httpRails.addEventListener(FaultEvent.FAULT, msgFault);
	montaobjeto();
	httpRails.send(obj);	    	 	

}	

private function atualiza():void
{

	httpRails = new HTTPService();
        httpRails.url = "/bugs/atualiza";
	httpRails.method = "GET";
	httpRails.useProxy = false;
	httpRails.showBusyCursor = true;
	httpRails.resultFormat = "e4x";
	httpRails.addEventListener(ResultEvent.RESULT, msgResult);
	httpRails.addEventListener(FaultEvent.FAULT, msgFault);
	montaobjeto();
	httpRails.send(obj);	            

}

private function deleta():void
{

	httpRails = new HTTPService();
	httpRails.url = "/bugs/deleta";
	httpRails.method = "GET";
	httpRails.useProxy = false;
	httpRails.showBusyCursor = true;
	httpRails.addEventListener(ResultEvent.RESULT, msgResult);
	httpRails.addEventListener(FaultEvent.FAULT, msgFault);
	httpRails.send({id: _dgBugs.selectedItem.id});	   		       

	Alert.show("Registro excluído com sucesso!", "Aviso");
	limpa();            	

}

Como você pode perceber na criação do nosso componente HTTPService dinamicamente, adicionamos os eventos result e fault para controle das respostas e falhas com o servidor rails, na nossa aplicação elas tem a função de primeiro, msgResult, preencher o data grid _dgBugs com a resposta do rails e a outra, msgFault informar ao usuário que ouve um erro e ainda mostra a mensagem do erro retornada pelo rails, para isso, insira as duas functions com o seguinte código:

private function msgResult(e:ResultEvent):void
{
	_dgBugs.dataProvider = e.result.bugs.bug;
}

private function msgFault(data:Object, token:Object=null):void
{
	Alert.show("Houve um erro ao tentar processar os dados no servidor\n" + data.message,"Aviso");
}

Cada um dos quatro componentes HTTPService que você adicionou, apenas fazem a solicitação aos métodos de sua aplicação Rails. A url que estamos acessando tem esta estrutura:

http://endereçodoservidor/nome do controlador/nomedométodo

Porém, repare que só colocamos a partir do nome do controlador para frente, isso se deve pelo fato de nossa aplicação já estar dentro da estrutura da aplicação rails, pasta public, por isso, só precisamos informar o caminho: nomedocontrolador/nomedometodo, que o rails acessará o endereço do servidor rails em que nossa aplicação está inserida.

Importante:Um dos passos para integração do Flex com Rails, é que você deve implementar sua aplicação Flex mudando as URL’s de absoluta para relativa, por exemplo url =

http://localhost:3000/bugs/consulta, chama a url = bugs / consulta, onde bugs é o seu controlador e consulta, sua action.

Assim sendo, você deve mover os arquivos estáticos SWF e HTML que são gerados pelo Flex para dentro da pasta public de sua aplicação Rails. No caso de nosso exemplo, nossa aplicação Flex será movida para o diretório:D:\Projetos\Rails\Controlabug\app\public

Agora, em sua aplicação Flex você deve editar os botões: Limpar, Atualizar, Criar, Deletar e Consultar, inserindo os seguintes códigos que chamam as funções limpa(), atualiza(), cadastra(), consulta() e deleta():

<mx:Button label="Limpar" click="limpa()"/>
<mx:Button label="Atualizar" click="atualiza()"/>
<mx:Button label="Criar" click="cadastra()"/>
<mx:Button label="Consultar" click="consulta()" />
<mx:Button label="Deletar" click="deleta()"/>

Agora vá para o início de sua aplicação e adicione um evento creationComplete que chama a função consulta() no momento em que a aplicação é criada, veja como ficará o código após inserção da chamada da função consulta():

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
                             creationComplete="consulta()">

Pra finalizar, adicione mais duas funções dentro do bloco de código action script, uma que limpa o seu form e a outra que monta o objeto que será enviado como parâmetro pelo rails, o código das funções deve ficar assim:

private function limpa():void
{
	_tReportadopor.text = ""
	_tAtribuidopor.text = "";
        _tDescricao.text = "";
	_cbStatus.selectedIndex = 0;
	_cbPrioridade.selectedIndex = 0;
}

private var obj:Object = new Object();

private function montaobjeto():void
{

	obj = new Object();

	//Envia id por fora do objeto para que o rails não tente inserí-lo ou atualizá-lo///////
	try
	{
	    if(_dgBugs.selectedItem != null)
	    {
		obj["id"] = _dgBugs.selectedItem.id;
	    }	

	}catch (e:Error)
	{

	}

	obj["pacote[reportadopor]"] = _tReportadopor.text;
	obj["pacote[atribuidopor]"] = _tAtribuidopor.text;
	obj["pacote[descricao]"] = _tDescricao.text;
	obj["pacote[status]"] = _cbStatus.text;
	obj["pacote[prioridade]"] = _cbPrioridade.text;

}

É isso aí pessoal, com surpreendentemente pouco código, a sua aplicação controlabugs está pronta para rodar. Sua aplicação agora está com um poderoso front-end (Flex), gerando uma interface moderna,robusta e dinâmica, e um back-end (Rails) poderoso, moderno, robusto e dinâmico também, que neste exemplo faz suporte básico para operações CRUD. Para testar sua aplicação, clique em RUN dentro Flex Builder. Depois de executada a aplicação, preencha o formulário com alguns dados de um novo bug. Clique no botão Criar e você verá uma nova entrada aparecendo na datagrid. Adicione mais alguns bugs e, em seguida, feche a aplicação. Volte para Flex Builder e clique em executar novamente. Desta vez, quando a aplicação iniciar, você verá os bugs que você já digitou aparecer na datagrid. Agora, você pode atualizar esses bugs, excluí-los ou criar novos bugs e suas alterações serão automaticamente registradas em seu banco de dados.

Espero que gostem, em breve postarei mais tutoriais, dicas e macetes sobre flex, flex+rails, flex + flash media server, flex+coldfusion.

Abraço a todos!.