Abril 2008


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 :x ml => @bugs.errors.to_xml_full
    end        

  end

  def consulta

    @bugs = Bug.find(:all)

    if (@bugs.size > 0)
      render :x 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 :x ml => @bugs.errors.to_xml_full
     end    

  end

  def deleta

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

    if @bugs
       render :x 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.
8) 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!.

Iniciando

É com muito orgulho que apresento a vocês mais uma contribuição, este tutorial de como criar uma aplicação Rails 2.0 em poucos cliques, utilizando ferramenta RadRails.
Este tutorial utiliza, Ruby 1.8.6-26, Rails 2.0.2 e a IDE Aptana Studio RadRails 1.0.1, todos rodando sobre o Windows XP.Estou partindo do princípio de que você tenha os mesmos devidamente instalados em seu computador e que você tenha conhecimentos básicos necessários de Ruby e Rails.

Primeiro clique: Abrindo o RadRails

Abra a IDE Aptana Studio RadRails, para isso vá em Inicar / Programas / Aptana / Aptana Studio.

Pra quem ainda nunca utilizou o RadRails, eis uma breve explicação sobre seu ambiente:

Clique na imagem para vê-la ampliada

Segundo clique: Criando novo projeto

Para criar nosso projeto é bem simples, clique em File / New / Rails Project.

Em seguida irá abrir a seguinte janela de opções para seu novo projeto que será criado:

Veja em seguida que seu projeto foi gerado e o servidor iniciado automaticamente.

Terceiro clique: Configurando o acesso do seu projeto ao banco de dados

A primeira coisa que se deve fazer ao gerar o seu projeto, é definir o modo em que ele irá fazer acesso ao banco de dados.Para isso, abra o arquivo database.yml, que se encontra na estrutura do seu projeto rails, dentro da pasta config.

Quarto clique: Criando o banco de dados

Configurado o acesso do seu projeto ao banco de dados, já podemos mandar o Rails criar o nosso banco de dados de acordo com a configuração informada no arquivo database.yml, para isso, clique na guia Rake tasks, em seguida selecione o comando db:create:all e clique no botão GO.

Feito isso, abra sua ferramenta de visualização do Mysql e veja os banco de dados gerados pelo rails para seu projeto, conforme indicado no arquivo database.yml

Quinto clique: Criando um Model

Model é o código que envolve uma tabela em seu banco de dados, para gerar um módulo no RadRails é muito simples, clique na guia generators, na caixa de listagem generator, selecione a opção model.Em seguida, insira no campo Parameters, o nome que deseja dar ao seu model e por fim clique no botão GO.Lembrando que, por convenção e pelo fato de o Rails possuir um sistema automático de pluralização, ou seja, por exemplo, se você deseja criar um model para acessar a tabela de clientes, o nome do módulo deve ser cliente, no singular, assim, automaticamente o rails irá entender que a tabela a ser gerada e manipulada pelo model será clientes.

Veja como você pode acompanhar na guia Console, o andamento das ações e os comandos que estão sendo executados pelo rails, durante a geração do model.

Ao criar um model, o Rails cria dentro da pasta db, uma pasta com nome migrate, e um arquivo com nome predefinido: 001_create_nomedasuatabela.rb, arquivo este que será responsável por conter as definições que serão aplicadas na tabela que o model gerado manipulará, no nosso caso, o model cliente, manipulará a tabela clientes, e foi gerado o arquivo 001_create_clientes.rb, Através do Ruby Explorer, você pode visualizar e editar este arquivo.

Clique duas vezes sobre o nome do arquivo no ruby explorer, ao abrir o arquivo na tela principal do RadRails, insira a composição que você deseja em sua tabela, no nosso caso será assim:


class CreateClientes < ActiveRecord::Migration
  def self.up
    create_table :clientes do |t|
    t.string :razao, :fantasia, :endereco, :bairro, :cep,
             :cidade, :estado, :fone, :email, :cnpjcpf, :ierg
    t.timestamps
    end
  end

  def self.down
    drop_table :clientes
  end
end

O método self.up, cria uma tabela chamada clientes com 11 colunas:
* Id (gerado automaticamente chave primária);
* razao;
* fantasia;
* endereco;
* bairro;
* cep;
* cidade;
* estado;
* fone;
* email;
* cnpjcpf;
* ierg;

O método down, remove a tabela.

Sexto clique: Realizando migração

Alterada as definições de criação da tabela clientes no arquivo 001_create_clientes.rb, basta realizarmos a migração para que o Rails crie a tabela de acordo com as especificações inseridas no arquivo.Para fazer a migração, clique na guia rake tasks, na caixa de opções tasks, selecione o comando db:migrate e em seguida clique no botão GO.

Para conferir a migração, abra sua ferramenta de visualização do Mysql e veja a tabela gerada pelo rails:

Sétimo clique: Criando um controller

O controlador contém a código (lógica) da interação entre o ponto de vista e do model.Para criar um controlador, basta clicar na guia generators, na caixa de opções generate, selecione controller, no campo Parameters insira o nome do controlador e por fim clique em GO.

Após criado o controlador, você poderá visualizado e editá-lo no ruby explorer, dentro da pasta app/controllers.

No controlador é inserido os métodos (actions).Iremos inserir os seguintes métodos (actions) no controlador do nosso exemplo, veja o código:


class ClientesController < ApplicationController
  protect_from_forgery :except => []

  def index     

    render :text => "Home - Página principal"

  end

  def consulta

    @clientes = Cliente.find(:all)

    render :x ml => @clientes.to_xml

  end

end

No código acima, é criado 2 métodos (actions), o index que retornará um texto quando for invocado, e o consulta, que retornará em formato xml todos os registros da tabela clientes.

Repare que 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.

Oitavo clique: Criando rotas (routes.rb)

Criado seu controlador, devemos fazer o roteamento das actions no nosso arquivo de rotas, routes.rb, ele se encontra dentro da pasta config.Você poderá visualizá-lo e editá-lo através do ruby explorer:

A ordem no mapeamento do projeto deve ser, primeiro o caminho, depois o nome do controlador e o nome da action.Nele devemos inserir os seguintes códigos:



  map.connect 'clientes/index',
              :controller => 'clientes',
              :action => 'index'

  map.connect 'clientes/consulta',
              :controller => 'clientes',
              :action => 'consulta'

Nono clique: Iniciando ou reiniciando o servidor

Depois de criado as rotas e para que você possa visualizar e testar seu controlador e suas actions, você precisa iniciar ou reiniciar o servidor do seu projeto, para isso, clique na guia Servers e posteriormente no botão start server ou restart server, se caso o seu servidor já estiver sido iniciado anteriormente.Ao fazer isto, você deve lembrar-se do host e da porta em que o servidor foi iniciado.

Décimo clique: Testando o controlador e a action

Finalmente agora podemos visualizar e testar o funcionamento do nosso controlador e da nossas actions, depois de iniciado ou reiniciado o servidor do seu projeto, lembrando-se do host e da porta, a estrutura padrão da url do seu projeto é http://host:porta/nomecontrolador/nomeaction, sabendo disso, abra seu navegador e digite nele o endereço de suas actions:

*Para acessar a action Index: http://localhost:3000/clientes/index

*Para acessar a action consulta: http://localhost:3000/clientes/consulta