Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Ruby on Rails SS09 11

663 views

Published on

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Ruby on Rails SS09 11

  1. 1. Daniel Dengler web developer Ruby on Rails Workshop SS 2009 „Ruby on Rails“ and the Rails-Logo are registered trademarks of David Heinemeier Hansson – www.rubyonrails.org
  2. 2. 11 Ruby on Rails AJAX
  3. 3. AJAX asynchronous JavaScript and XML
  4. 4. Verwendung Dynamische GUI ähnliche Anwendungen oft mit den Zielen die Serverlast zu reduzieren und die Usability zu steigern. Technologien: • JavaScript • XML
  5. 5. Browser Server Seite anfragen
  6. 6. Browser Server Seite anfragen Seite generieren
  7. 7. Browser Server Seite anfragen Seite generieren Seite anzeigen
  8. 8. Browser Server Seite anfragen Seite generieren Seite anzeigen Events abwarten
  9. 9. Browser Server Seite anfragen Seite generieren Seite anzeigen Events abwarten AJAX-Anfrage
  10. 10. Browser Server Seite anfragen Seite generieren Seite anzeigen Events abwarten AJAX-Anfrage Skripte oder Daten generieren
  11. 11. Browser Server Seite anfragen Seite generieren Seite anzeigen Events abwarten AJAX-Anfrage Skripte oder Daten Antwort auswerten generieren (Skripte ausführen, Inhalte ändern)
  12. 12. Der Rails-Ansatz Das Modul JavascriptHelper in Rails kapselt die Generierung von JavaScript in Ruby-Code. Daher muss für die einfache Verwendung von AJAX in Rails kein eigener JavaScript-Code geschrieben werden Mitgelieferte Bibliotheken: • Prototype (Core) • Effects, DragDrop, Controls
  13. 13. Bibliotheken einbinden Im jeweiligen Layout im Head Bereich anzugeben: <%= javascript_include_tag :defaults %> Lädt die Bibliotheken im Browser
  14. 14. Elemente eindeutig bezeichnen • Elemente die später manipuliert werden sollen, müssen eindeutig identi zierbar sein. • Einfachste Lösung: ElementIDs in das generierte HTML Dokument aufnehmen
  15. 15. Elemente eindeutig bezeichnen <% content_tag_for(:tr, task) do %> <td> TabellenZellen </td> ... <% end %> # Generiert: <tr class="task" id="task_33"> ... </tr>
  16. 16. AJAX Links <%= link_to_remote "Destroy", :url => project_path(@project), :con rm => 'Are you sure?', :method => :delete %> Erstellt einen „JavaScript“ Link, der einen AJAX Aufruf startet. Das Ergebnis des Aufrufes wird ausgewertet und die Seite entsprechend verändert.
  17. 17. AJAX Formulare <% remote_form_for(@project) do |f| %> FORMULARELEMENTE <% end %> Erstellt ein „JavaScript“ Formular, das einen AJAX Aufruf startet. Das Ergebnis des Aufrufes wird ausgewertet und die Seite entsprechend verändert.
  18. 18. Die Antwort # DELETE /tasks/1 # DELETE /tasks/1.xml # DELETE /tasks/1.js def destroy @task = Task.find(params[:id]) @task.destroy respond_to do |format| format.html { redirect_to(project_tasks_url(@project)) } format.js format.xml { head :ok } end end
  19. 19. Die Antwort respond_to do |format| format.html { redirect_to(project_tasks_url(@project)) } format.js format.xml { head :ok } end # format.js leitet zum view delete.js.rjs weiter # Element das gelöscht wurde ausblenden page.visual_effect :fade, dom_id(@task)
  20. 20. Details ActionView::Helpers::PrototypeHelper ActionView::Helpers::PrototypeHelper::JavaScriptGen erator Helfer für die Identi zierung von HTML Elementen ActionView::Helpers::RecordTagHelper ActionView::Helpers::RecordIdenti cationHelper
  21. 21. Praxis-Session
  22. 22. ?

×