Quinta-feira, Maio 15th, 2008


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!.

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 :x ml => @atendimentos.to_xml else render :text => "registro_nao_encontrado" end end

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