Small Steps to Ajax

Introdução a série de artigos “Small Steps to”

Nesta série de artigos chamada “Small Steps to”, pretendo mostrar com bastante objetividade, como implementar e usar um determinado recurso numa pequena aplicação em Rails.
Cada artigo da série “Small Steps to” mostrará o uso da técnica sendo aplicada passo-a-passo, de uma tal forma que, no final do artigo, a aplicação estará integrada e funcionando com uma determinada tecnologia.
Nos artigos da série, a aplicação será bem simples. A tecnologia será implementada em pequenos passos (Small Steps) e serão suficientes para que a tecnologia em questão integre-se a aplicação.

E qual o benefício desses artigos ?

  • No final de cada artigo, teremos uma aplicação dedicada somente para aprender como a tecnologia em questão funciona. Poderá ser guardada e usada futuramente como referência, para saber como a tecnologia funciona isoladamente.
  • Útil para saber como a tecnologia se integra ao framework Rails.
  • Programadores que estão começando a conhecer o framework, podem utilizar-se dos artigos como exemplos.
  • Servem como base para novos estudos.
  • Talvez exista mais algum outro benefício que não percebo agora…

Small Steps to AJAX

Tecnologias usadas neste artigo:
Rails 3.0
Ruby 1.8.7
jQuery 1.6.0 (adaptador para Rails)

A tecnologia (ou conjunto de tecnologias) AJAX, vem sendo cada vez mais usadas para aplicação Web. Por conta dessa popularização, integrar AJAX em aplicações Rails está se tornando cada dia mais comum.
Com certeza o programador Rails vai precisar usar esta tecnologia mais cedo ou mais tarde.

AJAX (acrônimo em língua inglesa de Asynchronous Javascript and XML, em português “Javascript e XML Assíncronos”) é o uso metodológico de tecnologias como Javascript e XML, providas por navegadores,…” (1)

E se você ainda não sabe, uma das vantagens de usar AJAX é “para tornar páginas Web mais interativas com o usuário, utilizando-se de solicitações assíncronas de informações.” (1)

Como é característica dos nossos artigos, após esta breve introdução, vamos rapidamente a construção de nossa aplicação em Ruby On Rails, chamada “People”. E para que o uso de AJAX seja possível, vamos usar bibliotecas jQuery.

I – Construção da aplicação People (sem uso do AJAX por enquanto):

$ rails new people

$ cd people

$ rails generate scaffold person name:string

$ rake db:migrate

$ rails server

Após esses comandos, entre na aplicação People.
Use seu browser e digite na linha de endereços: http://localhost:3000/people

Inclua algumas pessoas na aplicação.

Figura 1

Agora, em alguns passos vamos mostrar como utilizar recursos de AJAX, usando a biblioteca
javascript jQuery.

II – Nesta aplicação, vamos implementar a exclusão de registros em AJAX. Siga os passos:

1o. Passo:
# Ajuste o layout em “app/views/layouts/application.html.erb” para que fique da seguinte forma (2):
<!–DOCTYPE html>
<html>
<head>
<title>People</title>
<%= stylesheet_link_tag :all %>
<%= csrf_meta_tag %>
</head>
<body>
<%= yield %>
<%= javascript_include_tag “https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js&#8221; %>
<%= javascript_include_tag “https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js&#8221; %>
<%= javascript_include_tag “rails.js” %>
<%= javascript_include_tag “application” %>
</body>
</html>

2o. Passo:
# Apague os arquivos em public/javascripts que não usaremos mais (são arquivos da biblioteca Prototype).
# Se você estiver usando sistemas compatíveis com Linux seria:
$ rm controls.js dragdrop.js effects.js prototype.js rails.js

3o. Passo:
# Crie um arquivo vazio chamado rails.js, em public/javascripts/ que será o adaptador jQuery.
# Copie para dentro dele o conteúdo do adaptador jQuery para Rails que está em:
https://raw.github.com/rails/jquery-ujs/master/src/rails.js

4o. Passo:
# Em app/controllers/people_controller.rb, modifique a action destroy da seguinte forma:
def destroy
@person = Person.find(params[:id])
@person.destroy

respond_to do |format|
format.js
format.html { redirect_to(people_url) }
end
end

5o. Passo:
# Crie o seguinte arquivo app/views/people/destroy.js.erb, com o conteúdo a seguir:
/* Ilumina o registro a ser excluído */
$(‘table#person_table tr#’ + ‘<%= @person.id %>’).effect(“highlight”, {}, 600);
/* Elimina o registro fazendo com que ele desapareça gradualmente */
$(‘table#person_table tr#’ + ‘<%= @person.id %>’).fadeOut();

6o. Passo:
# Modifique o arquivo app/views/people/index.html.erb, para que fique assim:
# Obs.1: Note o “:remote => true” abaixo. Isso faz toda a diferença.
# Obs.2: Note o id “person_table” na tag e o id “person.id” na tag .
#        Isso faz com que exista um “link” entre o arquivo “destroy.js.erb” e esta página html.
<h1>Listing people</h1>
id=”person_table”>
<tr>
<th>Name</th>
<th></th>
<th></th>
<th></th>
</tr>
<% @people.each do |person| %>
id=”<%= person.id %>”>
<td><%= person.name %></td>
<%= link_to ‘Show’, person %>
<td><%= link_to ‘Edit’, edit_person_path(person) %></td>
<%= link_to ‘Destroy’, person, :method => :delete, :remote => true,
:confirm => ‘Are you sure?’ %>
</tr>
<% end %>
</table>
<br />
<%= link_to ‘New Person’, new_person_path %>

Pronto! Em apenas seis passos implementamos AJAX, usando bibliotecas javascript jQuery.
Agora a aplicação People, exclui registros de modo assíncrono,  usando recursos AJAX.

Figura 2

Figura 3

III – O que mais poderíamos ter feito ?

1) Para que uma nova aplicação fosse criada sem os arquivos da biblioteca Prototype, poderíamos ter usado o comando:
$ rails new people -J

2) Teríamos o mesmo resultado, mas o uso da gem jquery-rails poderia
ter nos poupado algum tempo: https://github.com/indirect/jquery-rails

3) Os outros métodos de inclusão, alteração e exibição de registros poderiam ser feitos também com recursos AJAX.

IV – Referências:

(1) http://pt.wikipedia.org/wiki/AJAX_(programa%C3%A7%C3%A3o)
(2) http://akitaonrails.com/2010/05/10/rails-3-introducao-a-javascript-nao-obstrusivo-e-responders

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s