Nesse primeiro artigo aqui no iMasters, vou apresentar uma característica muito interessante presente no Ruby on Rails: a facilidade de integração com AJAX.

Atualmente, o número de aplicações web com AJAX vem crescendo exponencialmente por diversas razões. Aplicações com recursos AJAX melhoram a usabilidade da aplicação e a torna mais agradável, além de permitir chamadas de métodos de maneira assíncrona.

Esse artigo pretende mostrar a facilidade de integração do framework Ruby on Rails com AJAX. No lugar de postar um artigo extremamente teórico, optei por bolar um exemplo prático, utilizando drag and drop para exemplificar essa integração.

Para esse artigo, assumo que você já tenha o framework instalado e corretamente configurado, além de um servidor rodando. No meu caso, estou usando RoR 1.8.4 e rodando WEBrick 1.3.1 em uma máquina GNU/Linux. Ah! E como browser, estou usando Firefox. Bem, chega de apresentações e vamos ao que interessa...

A primeira coisa que devemos fazer em nosso .RHTML é incluir uma tag indicando que estaremos utilizando os recursos AJAX em nossa página. Podemos fazer isso da seguinte forma:

<%= javascript_include_tag :defaults %>

Com essa instrução, estamos preparando a página para utilizarmos qualquer recurso da biblioteca. Uma outra alternativa, é carregarmos apenas os recursos desejados. Dessa forma, poderíamos, para esse nosso exemplo (como vamos usar apenas drag and drop) utilizar o seguinte:

<%= javascript_include_tag 'dragdrop.js' %>

Bom, agora podemos mostrar na nossa página as informações que desejamos “arrastar”. Essa informação pode ser imagens, textos, linhas, células de tabelas, etc... Para nosso exemplo, vou fazer o seguinte:

<ul id="lista">   <% 5.times do |i| -%>   <li id="item_<%= i+1 %>">Sou a linha numero <%= i+1 %></li>   <% end -%> </ul> <p id="lista-info"></p>

Bom, se chamarmos nossa página agora, veremos algo parecido com o seguinte:

Mas até agora, não temos nada nem próximo de um drag and drop. Para colocarmos ação nessa nossa aplicação, vamos adicionar o seguinte trecho, ainda no nosso .RHTML, logo abaixo do trecho citado anteriormente:

<%= sortable_element 'lista',       :update => 'lista-info',        :complete => visual_effect(:highlight, 'list'),       :url => { :action => "ordenar" } %>

E é exatamente nesse momento que a “mágica” se faz presente! Se analisarmos o trecho acima, veremos que estamos dizendo que o elemento “lista” é um “sortable_element”, isto é, poderemos “ordená-lo” da maneira que desejarmos (no caso, drag and drop). Outra informação importante é que estamos chamando o método “ordenar” do nosso controller sempre que alguma modificação na ordem dos itens for realizada.

Vamos salvar nosso .RHTML e chamá-lo em nosso browser. Tente agora clicar sobre uma das linhas e arrastar! Ótimo! Já temos nosso drag and drop:

Você deve estar se perguntando: “Mas Rafael, está dando erro!”. Pois é! Lembram daquele método “ordenar”?! Temos que alterar nosso controller para criar esse método.

Nele, poderíamos realizar algum processamento, atualizações na base de dados ou qualquer outra coisa. Para esse exemplo, vou apenas apresentar a nova ordenação gerada. No controller, vamos adicionar o seguinte método:

def ordenar     @ordem = params[:lista]     render :partial => 'lista'   end

O método popula uma variável chamada “ordem” com o resultado da ordenação e renderiza o arquivo partial “_lista.rhtml” que deverá ter o seguinte conteúdo:

A ordem atualizada eh a seguinte: <%= @ordem.join(', ') %>.

Pronto, agora sim! Temos uma aplicação funcionando com drag and drop. Salve os arquivos e atualize o seu browser. Tente novamente arrastar uma das linhas! Você verá um resultado semelhante a esse:

Esse foi apenas um simples exemplo do poder de integração do RoR com AJAX. Espero que você tenha conseguido fazer sua aplicação funcionar corretamente... Mas caso tenha algum problema ou dúvida, meu e-mail está a sua disposição!

Um forte abraço e até o próximo artigo!