Usando Ajax com Ruby on Rails
Contribuição de Brian Leonard, manutenção de Natalie Jeremy
Fevereiro de 2008 [Número da revisão: V6.0-7]
Neste tutorial, você adiciona o suporte a Ajax a um projeto Ruby on Rails do NetBeans. O exemplo mostra como adicionar dinamicamente os comentários a um log da Web.
Conteúdo
Para concluir este tutorial, você precisa dos seguintes recursos e softwares.
* Este tutorial, escrito para o Rails 1.2.5, envolve scaffolding. Como o scaffolding não tem suporte no Rails 2.0, você não pode concluir este tutorial usando Rails 2.0.
Criando o banco de dados de amostra
Este tutorial se baseia no tutorial Construindo relacionamentos entre modelos Rails.
Se você tiver concluído este tutorial, poderá começar com o projeto que construiu quando terminou o tutorial e ir para a próxima seção. Do contrário, baixe o arquivo RubyWebLogModel.zip e siga estas etapas para criar o banco de dados de amostra.
Observação: este tutorial usa o servidor de banco de dados MySQL. Consulte o artigo Instalando e configurando suporte a Ruby para obter informações sobre o uso de um servidor de banco de dados MySQL em um aplicativo Ruby.
O artigo também descreve como usar o servidor de banco de dados Java DB.
- Abra uma janela de comando.
- Caso ainda não tenha sido iniciado, inicie o servidor de banco de dados MySQL.
Digite o seguinte comando para criar o banco de dados de desenvolvimento e pressione Enter.
mysqladmin -u root -p create rubyweblog_development
Observação: se o usuário raiz não tiver uma senha obrigatória, omita o argumento -p.
Abra o projeto rubyweblog no IDE.
Observação: na primeira vez que um projeto Ruby é aberto ou criado no IDE, o IDE verifica se há outras instalações do Ruby além do software JRuby fornecido. Caso haja, o IDE exibe uma caixa de diálogo solicitando que você selecione qual software deseja usar. Escolha JRuby se você desejar usar o intérprete JRuby fornecido ou escolha a sua instalação do Ruby, caso prefira utilizá-la. Para obter mais informações, consulte Configurando o IDE para usar sua própria instalação do Ruby no tutorial Instalando e configurando Ruby.
Se o banco de dados solicitar senha, edite o arquivo database.yml e forneça a senha na configuração do desenvolvimento. Salve o arquivo.
Para acessar rapidamente o arquivo database.yml, pressione Alt+Shift+O (Ctrl+Shift+O no Mac), digite database.yml no campo de texto Nome do arquivo e pressione Enter.-
Clique com o botão direito do mouse no nó do rubyweblog e escolha Migrar banco de dados > Para versão atual.
Esta ação atualiza o banco de dados para incluir a tabela de postagens e a tabela de comentários. A janela Saída indica quando a migração está completa.
-
Execute a aplicação e crie uma nova postagem.
Clique em Permalink e adicione um comentário à postagem.
Observe que a página inteira é recarregada quando você adiciona o comentário.
Criando um modelo parcial
Atualmente no projeto rubyweblog, sempre que um leitor adiciona um comentário à página, a entrada do blog e os comentários são recarregados na página. Uma melhor solução é carregar os comentários dinamicamente, usando o suporte a Ajax que é parte do framework Ruby on Rails. Para preparar o uso do Ajax, crie um modelo parcial para armazenar o código para exibir os comentários. O benefício do uso de um modelo parcial é que você pode chamá-lo várias vezes (uma vez para cada comentário no blog) sem renderizar a entrada do blog em si.
-
Clique com o botão direito do mouse no nó rubyweblog e escolha Novo > Arquivo RHTML. Chame o arquivo de _comments e coloque-o na pasta app\views\blog.
O IDE cria o arquivo _comments e o abre na área de edição. Observe que o modelo parcial começa com um sublinhado (_) para distingui-lo de um modelo completo.
No momento, o código para exibir os comentários está no arquivo show.rhtml. Na próxima etapa, remova este código de show.rhtml e cole-o no modelo parcial _comments.rhtml.
-
Vá para rubyweblog > Visualizações > pasta blog e abra show.rhtml. Recorte o código para exibir os comentários (mostrado na Amostra de código 1). Cole o código em _comments.rhtml, substituindo todo o conteúdo existente no arquivo.
<li><%= h comment.comment %><br>
<div style="color: #999; font-size: 8pt">
Posted on <%= comment.created_at.strftime("%B %d, %Y at %I:%M %p") %>
</div>
</li>
-
Retorne ao arquivo show.rhtml e remova as duas linhas seguintes.
<% @post_comments.each do |comment| %>
<% end %>
-
Insira o elemento <div> que é mostrado em negrito na amostra de código seguinte. Adicione o código no ponto em que você removeu as duas linhas anteriormente.
<hr>
<h4>Comments</h4>
<ul>
<div id="comments">
<% @post_comments.each do |comment| %>
<%= render :partial=>"comment", :object => comment %>
<% end %>
</div>
</ul>
Esse código cria um elemento <div> chamado comentários. A variável @post_comments contém os comentários que o modelo parcial _comments exibe.
-
Escolha Arquivo > Salvar todos, em seguida, execute a aplicação.
-
Clique em Permalink e adicione um comentário a uma postagem.
Nesse momento, a aplicação se comporta exatamente como antes. Entretanto, agora a sua aplicação é projetada de forma que você possa começar a usar o suporte a Ajax.
Adicionando o suporte a Ajax
A primeira etapa na adição de suporte a Ajax ao seu projeto é incluir as bibliotecas JavaScript,
Prototype e script.aculo.us. Essas bibliotecas são incluídas no Ruby on Rails. A biblioteca Prototype fornece a base para a implementação do Ajax no Ruby on Rails, enquanto a biblioteca script.aculo.us fornece efeitos visuais que você pode adicionar à sua aplicação.
-
Expanda Visualizações > layouts e abra o arquivo
blog.rhtml.
-
Adicione a seguinte linha de código, abaixo da linha que contém stylesheet_link_tag.
<%= javascript_include_tag :defaults %>
Esse código inclui as bibliotecas JavaScript, Prototype e script.aculo.us, que são incluídas no Ruby on Rails. A próxima etapa é criar um form_remote_tag para disparar a ação do Ajax.
-
Abra o arquivo
show.rhtml. Remova a form_tag existente, que realiza uma HTTP POST, e substitua pelo form_remote_tag seguinte,
que realiza uma XMLHTTPRequest.
<% form_remote_tag :url => {:action => "post_comment"} do %>
Esse código dispara a ação Ajax da ação post_comment no arquivo blog.controller.rb. Nesse momento, a página inteira ainda é recarregada quando um leitor envia um comentário. Quando form_remote_ tag é usado e as bibliotecas do Javascript são incluídas, a pasta não é mais postada. Ele agora está procurando por algum Javascript para executar, que ainda não foi codificado. Se você forçar uma atualização de página, poderá verificar se os comentários forram adicionados.
-
Expanda o nó Controladores e abra o arquivo
blog_controller.rb.
Role para a ação post_comment e substitua a chamada do método redirect_to existente pelo código seguinte.
render :update do |page|
page.insert_html :bottom, 'comments', :partial => 'comment'
page[:comment_comment].clear
flash.keep(:post_id)
end
O código acima está inserindo dinamicamente o parcial _comment.rhtml na parte inferior da marca <div> dos comentários. É importante manter post_id na flash, caso contrário, quaisquer comentários adicionais que o usuário decidir inserir terão um post_id nulo, e, portanto, ficarão órfãos (não há integridade referencial definida na tabela de comentários). -
Execute o projeto e verifique se os comentários são atualizados dinamicamente.
Fazendo mais: aplicando efeitos visuais
A biblioteca script.aculo.us, que você incluiu anteriormente em seu projeto, fornece efeitos visuais que você pode usar para aprimorar a aparência da sua aplicação. Aqui você aplica um efeito para realçar
o comentário mais recente no blog. Depois que você aplicar esse efeito, poderá facilmente trocá-lo e experimentar outros efeitos da biblioteca script.aculo.us.
-
Abra o arquivo _comment.rhtml e adicione a seguinte propriedade id mostrada em negrito na marca <li> existente.
<li id=<%= "comment_#{comment.id}" %>>
Essa linha de código rotula o comentário ao qual você deseja aplicar o efeito visual.
-
Alterne para o arquivo blog_controller.rb e adicione o seguinte ao fim do bloco fornecido por render :update.
page["comment_#{@comment.id}"].visual_effect :highlight, :duration => 3.5
-
Escolha Arquivo > Salvar todos, atualize o navegador (necessário para o Rails gerar e enviar o código Javascript para manipular o efeito visual para o navegador). Adicione um comentário e observe como o novo comentário é resumidamente realçado.
Próximas etapas
>> Mais documentação do NetBeans Ruby
