O'Reilly logo

Rails Kochbuch by Rob Orsini

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

First
|
295
Max.
Linie
Max.
Linie
Kapitel 8
KAPITEL 8
JavaScript und Ajax
8.0 Einführung
JavaScript ist eine Prototyp-basierte Skriptsprache mit einer Syntax, die sich an die Pro-
grammiersprache C anlehnt. Sie ist entfernt verwandt mit ECMAScript, das durch Ecma
International standardisiert wurde (siehe die ECMA-262-Spezifikation). In Webanwen-
dungen wird JavaScript häufig eingesetzt, um statische Seiten um dynamische Funktionen
zu erweitern oder um den Server etwas zu entlasten, indem man den Browser des Benut-
zers einen Teil der Arbeit erledigen lässt.
Die weitere Verbreitung von JavaScript war immer abhängig davon, wie die unterschied-
lichen Webbrowser die verschiedenen Features der Sprache implementiert (oder in man-
chen Fällen ignoriert) haben. JavaScript-Entwickler, die bereits einige Zeit im Geschäft
sind, werden sich daran erinnern, Browser-Vergleichstabellen studiert zu haben, wenn sie
entscheiden mussten, ob ein bestimmter JavaScript-Mechanismus die Portabilität ihrer
Webanwendung beeinträchtigen würde oder nicht. Glücklicherweise hat sich diese Situ-
ation zum Besseren gewendet. Die Browser-Anbieter versuchen (aus welchen Gründen
auch immer) nicht länger, Marktanteile zu gewinnen, indem sie bestimmte Eigenheiten in
ihre Software einbauen. Entwickler können JavaScript mittlerweile großzügig in ihren
Webanwendungen nutzen und können sicher sein, dass die meisten Benutzer diese Fea-
tures auf die gleiche Weise erleben.
Es gibt immer noch Unterschiede bei den verschiedenen JavaScript-Implementierungen
der einzelnen Browser, aber glücklicherweise gibt es dafür eine Lösung. Eine Reihe von
JavaScript-Helper-Bibliotheken sind in den letzten Jahren entstanden, die solchen Aufga-
ben wie der Browser-Versionserkennung und Konformitätsprüfungen den Schrecken neh-
men. Diese Bibliotheken enthalten auch eine Vielzahl von Helper-Funktionen, die solche
Dinge wie die DOM-Manipulation einer Seite weniger aufwendig machen.
Das von Rails verwendete JavaScript-Framework heißt Prototype. (Beachten Sie, dass die-
ser Name häufig mit der
prototype-Eigenschaft von JavaScript-Objekten verwechselt
wird.) Die Prototype-Bibliothek vereinfacht eine Reihe von unter JavaScript üblichen Auf-
00____RailsKochbuch.book Seite 295 Dienstag, 3. Juli 2007 8:13 08
Max.
Linie
Max.
Linie
296
|
Kapitel 8: JavaScript und Ajax
Links
gaben, wie etwa die DOM-Manipulation oder die Ajax-Interaktion. Ergänzend zum Pro-
totype-Framework, wird Rails außerdem mit der JavaScript-Effekt-Bibliothek script.
aculo.us ausgeliefert. script.aculo.us ermöglicht Webanwendungen, verblüffende Effekte
zu verwenden, die man bisher nur bei Desktop-Software kannte. Es ist übrigens bemer-
kenswert, dass sowohl Sam Stephenson (der Entwickler des Prototype-Frameworks) als
auch Thomas Fuchs (der Entwickler von script.aculo.us) dem Rails-Kernteam angehören.
Das erklärt sicherlich, warum beide Bibliotheken so gut in das Rails-Framework integriert
sind.
Die eigentliche Stärke beim Umgang mit JavaScript und Ajax in Rails ist die Tatsache, dass
die Dinge so einfach sind. So einfach, dass es häufig nicht schwieriger ist, fortgeschrittene
dynamische Features in eine Seite zu integrieren, als andere HTML-Elemente. Die in Rails
enthaltenen JavaScript-Helper und das RJS-Templating-System machen es möglich, dass
Sie sich gar nicht um JavaScript-Code kümmern müssen (wenn Sie das nicht wollen).
Wirklich cool ist die Tatsache, dass Sie über Ruby-Code mit JavaScript arbeiten. Auf diese
Weise können Sie während der Entwicklung mental bei einer Sprache bleiben, und häufig
ist der Code dadurch einfacher zu verstehen und zu warten.
Dieses Kapitel zeigt Ihnen einige der gängigen Effekte, die Sie aus dem Rails-Framework
mit JavaScript und Ajax erreichen können. Wir hoffen, dass die Einfachheit, mit der diese
Features eingebunden werden können, dazu führt, dass Sie neue Anwendungsmöglichkei-
ten für diese Effekte entwickeln und in Ihre eigenen Anwendungen einbinden.
8.1 DOM-Elemente in eine Seite einfügen
Problem
Sie wollen ein Formular dynamisch um Elemente erweitern, ohne den gesamten Request/
Ausgabe-Zyklus erneut durchgehen zu müssen. Zum Beispiel könnten Sie eine webba-
sierte Bildergalerie besitzen, in der ein Formular enthalten ist, über das Benutzer Images
hochladen können. Sie wollen vertrauenswürdigen Benutzern erlauben, eine beliebige
Anzahl von Bildern auf einmal hochzuladen. Wenn das Formular also mit einem Datei-
Upload-Tag beginnt und der Benutzer ein zusätzliches Bild hochladen möchte, dann soll
er in der Lage sein, mit einem einzelnen Klick ein weiteres Datei-Upload-Element hinzu-
zufügen.
Lösung
Verwenden Sie den JavaScript-Helper link_to_remote. Dieser Helper erlaubt Ihnen die
Verwendung des
XMLHttpRequest-Objekts, um nur den Teil einer Seite zu aktualisieren,
den Sie brauchen.
Binden Sie die Prototype-JavaScript-Bibliotheken in das Layout Ihres Controllers ein.
00____RailsKochbuch.book Seite 296 Dienstag, 3. Juli 2007 8:13 08
Max.
Linie
Max.
Linie
8.1 DOM-Elemente in eine Seite einfügen
|
297
Rechts
app/views/layouts/upload.rhtml:
<html>
<head>
<title>Datei-Upload</title>
<%= javascript_include_tag 'prototype' %>
</head>
<body>
<%= yield %>
</body>
</html>
Nun binden Sie einen Aufruf von link_to_remote in Ihren View ein. Der Aufruf muss die
id des zu aktualisierenden Seitenelements enthalten, die anzustoßende Controller-Aktion
und die Position neu eingefügter Elemente.
app/views/upload/index.rhtml:
<h1>Datei-Upload</h1>
<% if flash[:notice] %>
<p style="color: green;"><%= flash[:notice] %></p>
<% end %>
<% form_tag({ :action => "add" },
:id => id, :enctype =>
"multipart/form-data") do %>
<b>Dateien:</b>
<%= link_to_remote "Feld hinzufügen",
:update => "files",
:url => { :action => "add_field" },
:position => "after" %>;
<div id="files">
<%= render :partial => 'file_input' %>
</div>
<%= submit_tag(value = "Dateien hinzufügen", options = {}) %>
<% end %>
Legen Sie ein partielles Template mit dem Dateieingabe-Feld an:
app/views/upload/_file_input.rhtml:
<input name="assets[]" type="file"><br />
Abschließend definieren Sie die add_field-Aktion in Ihrem Controller so, dass sie den
HTML-Code für die zusätzlichen Dateieingabe-Felder zurückliefert. Dazu benötigt man
nur ein HTML-Fragment:
app/controllers/upload_controller.rb:
class UploadController < ApplicationController
def index
end
00____RailsKochbuch.book Seite 297 Dienstag, 3. Juli 2007 8:13 08

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required