1 AJAX em aplicações Rails Lívia Monnerat Castro

Apresentação em tema: "1 AJAX em aplicações Rails Lívia Monnerat Castro"— Transcrição da apresentação:

1 1 AJAX em aplicações Rails Lívia Monnerat Castro livia.monnerat@gmail.com

2 2 AJAX no Rails  O Rails provê alguns helpers para javascript, que proporcionam funcionalidades com o mínimo de código javascript escrito pelo programador JavaScriptHelper JavaScriptMacrosHelper PrototypeHelper

3 3 AJAX no Rails  Para utilizar os helpers e todo o javascript fornecidos pelo Rails, é preciso incluir uma linha no layout de cada view: irá incluir tags script para importar cada arquivo javascript fornecido pelo Rails

4 4 Edição local  No módulo JavaScriptMacrosHelper há um helper que adiciona um componente html para edição de registros no próprio form.  Vamos utilizar este helper para edição de alunos, na partial _form_ajax.rhtml (copiado a partir de _form.rhtml)‏ in_place_editor_field(object, method, tag_options = {}, in_place_editor_options = {})‏ objeto alvo da edição método responsável por preencher o campo opções para a tag html que será criada opções do editor

5 5 Edição local app/views/students/_form_ajax.rhtml objeto a ser editado o componente vai ser preenchido com o nome de student para o parâmetro in_place_editor_options é passado um hash que mapeia uma url para a ação responsável pela edição do campo, o campo editado e a variável que contém o objeto em edição

6 6 Edição local  É preciso alterar o template edit.rhtml para que a partial _form_ajax seja exibida ao invés de _form

7 7 Edição local  No controlador students definiremos o método responsável pela edição dos registros verifica se é uma requisição ajax guarda em 'nome' de 'student' o valor correspondente ao campo 'nome' em params renderiza texto puro na tela

8 8 request  request é o objeto que empacota a requisição tratada pelo servidor  Ele possui diversos métodos, entre eles: xhr? -> diz se é uma requisição ajax get? -> se é uma requisição do tipo GET port -> qual a porta path -> qual o caminho  Quando é feita uma XMLHttpRequest, os dados são enviados como um post de formulário e recebidos em trechos html para atualização de partes da tela do usuário.

9 9 link_to_remote  Um helper bastante últil é o link_to_remote  Ele retorna um link para uma ação remota, chamada via XmlHttpRequest  O resultado da chamada pode ser inserido em um objeto DOM dinamicamente  Vejamos um exemplo. Vamos inserir na página de lista de registrations um link para consultar a hora certa. Para isso será alterado o template list.rhtml em app/views/registrations

10 10 link_to_remote texto do link id do objeto DOM que será atualizado url da ação a ser executada O resultado final será um link como este no pé da página. Vejamos como construi-lo: app/views/registrations/list.rhtml

11 11 link_to_remote app/controllers/registrations_controller.rb  O método “hora_certa” precisa ser definido no controlador de registrations: renderiza diretamente o trecho html em formato texto

12 12 link_to_remote  Quando o usuário clica no link, é montada uma requisição do tipo XmlHttpRequest que é enviada ao servidor solicitando a ação “hora_certa”  Esta ação retorna um fragmento de HTML que será recebida pelo javascript que está rodando no lado cliente da aplicação  Este js recebe a resposta e utiliza para alterar o conteúdo da com id=hora aqui é feita a atualização

13 13 Referências  JavascriptMacrosHelper http://api.rubyonrails.org/classes/ActionView/Helpers/JavaScript MacrosHelper.html  JavascriptHelper http://api.rubyonrails.org/classes/ActionView/Helpers/JavaScript Helper.html  JavascriptPrototypeHelper http://api.rubyonrails.org/classes/ActionView/Helpers/PrototypeH elper.html