Daniel Dengler
                                                                                               web develope...
11
Ruby on Rails
     AJAX
AJAX
asynchronous JavaScript and XML
Verwendung

Dynamische GUI ähnliche Anwendungen oft mit
den Zielen die Serverlast zu reduzieren und die
Usability zu steig...
Browser        Server

Seite anfragen
Browser            Server

Seite anfragen
                 Seite generieren
Browser            Server

Seite anfragen
                 Seite generieren
Seite anzeigen
Browser            Server

 Seite anfragen
                  Seite generieren
 Seite anzeigen

Events abwarten
Browser            Server

 Seite anfragen
                  Seite generieren
 Seite anzeigen

Events abwarten

 AJAX-Anfr...
Browser             Server

 Seite anfragen
                   Seite generieren
 Seite anzeigen

Events abwarten

 AJAX-An...
Browser               Server

  Seite anfragen
                       Seite generieren
  Seite anzeigen

 Events abwarten
...
Der Rails-Ansatz
Das Modul JavascriptHelper in Rails kapselt die
Generierung von JavaScript in Ruby-Code. Daher
muss für d...
Bibliotheken einbinden


Im jeweiligen Layout im Head Bereich anzugeben:
<%= javascript_include_tag :defaults %>
Lädt die ...
Elemente eindeutig bezeichnen



•   Elemente die später manipuliert werden sollen,
    müssen eindeutig identi zierbar se...
Elemente eindeutig bezeichnen


<% content_tag_for(:tr, task) do %>
  <td> TabellenZellen </td> ...
<% end %>


# Generier...
AJAX Links

<%= link_to_remote "Destroy",
 :url => project_path(@project),
 :con rm => 'Are you sure?',
 :method => :delet...
AJAX Formulare

<% remote_form_for(@project) do |f| %>
 FORMULARELEMENTE
<% end %>
Erstellt ein „JavaScript“ Formular, das...
Die Antwort
# DELETE /tasks/1
# DELETE /tasks/1.xml
# DELETE /tasks/1.js
def destroy
  @task = Task.find(params[:id])
  @t...
Die Antwort

respond_to do |format|
  format.html { redirect_to(project_tasks_url(@project)) }
  format.js
  format.xml { ...
Details
ActionView::Helpers::PrototypeHelper
ActionView::Helpers::PrototypeHelper::JavaScriptGen
erator


Helfer für die I...
Praxis-Session
?
Nächste SlideShare
Wird geladen in …5
×

Ruby on Rails SS09 11

559 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
559
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
5
Aktionen
Geteilt
0
Downloads
0
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

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. ?

×