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
4. Verwendung
Dynamische GUI ähnliche Anwendungen oft mit
den Zielen die Serverlast zu reduzieren und die
Usability zu steigern.
Technologien:
• JavaScript
• XML
7. Browser Server
Seite anfragen
Seite generieren
Seite anzeigen
8. Browser Server
Seite anfragen
Seite generieren
Seite anzeigen
Events abwarten
9. Browser Server
Seite anfragen
Seite generieren
Seite anzeigen
Events abwarten
AJAX-Anfrage
10. Browser Server
Seite anfragen
Seite generieren
Seite anzeigen
Events abwarten
AJAX-Anfrage
Skripte oder Daten
generieren
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. 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
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. Elemente eindeutig bezeichnen
<% content_tag_for(:tr, task) do %>
<td> TabellenZellen </td> ...
<% end %>
# Generiert:
<tr class="task" id="task_33"> ... </tr>
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. 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. 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. 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)
