Galileo Computing < openbook > Galileo Computing - Professionelle Bücher. Auch für Einsteiger.
Professionelle Bücher. Auch für Einsteiger.

Inhaltsverzeichnis
Geleitwort des Fachgutachters
Einleitung
1 Einführung
2 Installation
3 Erste Schritte
4 Einführung in Ruby
5 Eine einfache Bookmarkverwaltung
6 Test-Driven Development
7 Rails-Projekte erstellen
8 Templatesystem mit ActionView
9 Steuerzentrale mit ActionController
10 Datenbankzugriff mit ActiveRecord
11 E-Mails verwalten mit ActionMailer
12 Nützliche Helfer mit ActiveSupport
13 Ajax on Rails
14 RESTful Rails und Webservices
15 Rails mit Plug-ins erweitern
16 Performancesteigerung
17 Sicherheit
18 Veröffentlichen einer Rails-Applikation auf einem Server

Download:
- ZIP, ca. 6,7 MB
Buch bestellen
Ihre Meinung?

Spacer
 <<   zurück
Ruby on Rails 2 von Hussein Morsy, Tanja Otto
Das Entwickler-Handbuch
Buch: Ruby on Rails 2

Ruby on Rails 2
geb., mit DVD
699 S., 39,90 Euro
Galileo Computing
ISBN 978-3-89842-779-1
Online bestellenPrint-Version jetzt bestellen
* versandkostenfrei in (D) und (A)
Pfeil 5 Eine einfache Bookmarkverwaltung
  Pfeil 5.1 Rails-Projekt erstellen
  Pfeil 5.2 Weitere Views anlegen
  Pfeil 5.3 Layout
  Pfeil 5.4 Model
  Pfeil 5.5 CRUD - Create - Read - Update - Delete
  Pfeil 5.6 Fehlerbehandlung in Formularen
  Pfeil 5.7 Flash-Messages
  Pfeil 5.8 Refaktorisierung mit Helper und Partials
  Pfeil 5.9 Authentifizierung
  Pfeil 5.10 Routing
  Pfeil 5.11 RESTful Rails
  Pfeil 5.12 Darstellungsformate in RESTful Rails
  Pfeil 5.13 Ajax


Galileo Computing - Zum Seitenanfang

5.13 Ajax  Zur nächsten ÜberschriftZur vorigen Überschrift

Wenn wir in unserer Bookmarkverwaltung einen neuen Bookmark hinzufügen möchten, müssen wir erst das Formular zum Anlegen eines Bookmarks aufrufen und abschicken. Dann wird wieder die Index-Seite geladen, die auch den neuen Eintrag enthält. Das heißt, es kommt zweimal zu einem Seitenaufbau, nur um einen Bookmark hinzuzufügen. Das geht zwar heutzutage recht schnell, aber trotzdem wirkt es unkomfortabel.

Kein neu laden der Seite

Praktisch wäre doch, wenn nach der Anmeldung unterhalb der Liste aller angelegten Bookmarks ein Formular angezeigt würde, über das wir den Titel und die URL eines neuen Bookmarks eingeben könnten, und wenn wir dieses Formular abschicken, wird der neue Eintrag am Ende der Bookmarkliste hinzugefügt, ohne dass sich die Seite neu lädt. So, dass sich das Anlegen eines neuen Bookmarks wie eine Desktopanwendung verhalten würde. Das können wir mit Ajax lösen.


Galileo Computing - Zum Seitenanfang

Einbinden von JavaScript-Bibliotheken für Ajax  Zur nächsten ÜberschriftZur vorigen Überschrift

Die zugrunde liegende JavaScript-Bibliothek (prototype.js) wird beim Generieren eines Rails-Projektes zusammen mit anderen JavaScript-Bibliotheken im Verzeichnis public/javascripts automatisch mitgeneriert.

Die prototype.js wird über den Helper javascript_include_tag in der application.html.erb eingebunden:

Listing  app/views/layouts/application.html.erb

<head>
  <meta http-equiv="Content-type" content="text/html;
  charset=utf-8" >
  <title>Favoritenverwaltung - <%= @title %></title>
  <%= stylesheet_link_tag 'global' %>
  <%= javascript_include_tag :defaults %>
</head>

:defaults

Durch Übergabe des Parameters :defaults werden alle automatisch mitgenerierten JavaScript-Dateien geladen. Wenn man nur eine Datei laden möchte, kann man statt :defaults den gewünschten Dateinamen übergeben. Wenn Sie sich den HTML-Code der Index-Seite, nachdem Sie sie neu geladen haben, ansehen, sehen Sie den Code, den der Helper erzeugt:

<head>
  <meta http-equiv="Content-type" content="text/html;
  charset=utf-8" >
  <title>Favoritenverwaltung - liste</title>
  <link href="/stylesheets/global.css?1179424417"
  media="screen" rel="Stylesheet" type="text/css" />
  <script src="/javascripts/prototype.js?1179233115"
  type="text/javascript" ></script>
  <script src="/javascripts/effects.js?1179233115"
  type="text/javascript" ></script>
  <script src="/javascripts/dragdrop.js?1179233115"
  type="text/javascript" ></script>
  <script src="/javascripts/controls.js?1179233115"
  type="text/javascript" ></script>
  <script src="/javascripts/application.js?1179233115"
  type="text/javascript" ></script>
</head>

Galileo Computing - Zum Seitenanfang

Ajaxbasierte Formulare  Zur nächsten ÜberschriftZur vorigen Überschrift

Formular einbinden

Wir wollen direkt, nachdem wir uns angemeldet haben, den Titel und die URL eines neuen Bookmarks über ein Formular unterhalb der Liste eingeben können. Dazu müssen wir das Formular in die index.html.erb einfügen. Da wir das Formular in ein Partial auslagern, binden wir in der index.html.erb das Partial ein:

Listing  app/views/bookmarks/index.html.erb

<% @title = "liste" %>
<h2>Liste der Favoriten</h2>
<ul id= "bookmarks">
  <%= render :partial => @bookmarks %>
</ul>
<% if admin? %>
  <p>
    <%= render :partial => "ajax_form" %>
  </p>
<% end %>

Das ul -Tag für die Liste haben wir mit der ID bookmarks versehen, da wir mit Ajax auf das Element zugreifen. Unser Ziel ist es ja, per Ajax weitere Listenelemente zu der Liste hinzuzufügen.

remote_form_for

Anschließend legen wir im Verzeichnis app/views/bookmarks die Datei _ajax_form.html.erb an. Zum Anlegen des Formulars nutzen wir den Helper remote_form_for, der dafür sorgt, dass über JavaScript ein Ajax-Aufruf erfolgt. Da wir über dieses Formular einen Bookmark hinzufügen möchten, müssen wir im Bookmarks-Controller die Action create mit der HTTP-Methode POST aufrufen. Das heißt, wir senden das Formular an die bookmarks_url:

Listing  app/views/bookmarks/_ajax_form.html.erb

<% remote_form_for :bookmark, :url => bookmarks_url do |f| %>
<p>
  <label for="bookmark_title" >Titel</label>
  <%= f.text_field :title %>
  <%= error_message_on(:bookmark, :title)%>
</p>

<p>
  <label for="bookmark_url" >URL</label>
  <%= f.text_field :url %>
  <%= error_message_on(:bookmark, :url)%>
</p>

<p>
  <%= submit_tag "hinzufügen" %>
</p>
<% end %>

Jetzt wird nach dem Log-in auf der Index-Seite unser Formular angezeigt:

Abbildung  Ajax-Formular


Galileo Computing - Zum Seitenanfang

Ajax im Controller  Zur nächsten ÜberschriftZur vorigen Überschrift

Anpassungen

Damit das Formular auch funktioniert, müssen wir noch einige Anpassungen im Controller vornehmen. Die Formulardaten werden im Controller an die Action create gesendet. Diese erzeugt aus den Formulardaten ein neues Bookmarks-Objekt. Wenn das Bookmarks-Objekt erfolgreich gespeichert werden kann, wird eine Flash-Meldung ausgegeben, und es erfolgt eine Weiterleitung auf die Index-Seite mit der Liste aller Bookmarks, die dann den neuen Eintrag enthält:

Listing  app/controllers/bookmarks_controller.rb

def create
  @bookmark = Bookmark.new(params[:bookmark])
  if @bookmark.save
    flash[:notice] = "Favorit wurde erfolgreich angelegt."
    redirect_to bookmarks_path
  else
    render :action => "new"
  end
end

Fallunterscheidung

In der Abfrage, ob das Bookmarks-Objekt gespeichert werden konnte, benötigen wir jetzt eine Fallunterscheidung. Denn wenn die Daten per Ajax, also über ein JavaScript, gesendet werden, müssen wir uns anders verhalten, als wenn die Daten über das HTML-Formular gesendet werden. Eine solche Fallunterscheidung haben wir schon in der Action show für die Ausgabe der Daten im HTML- oder XML-Format kennengelernt.

Wir setzen also wieder die Methode respond_to ein und unterscheiden zwischen den beiden Formaten html und - für den Fall, dass die Daten über das Ajax-Formular gesendet wurden - js.

Listing  app/controllers/bookmarks_controller.rb

def create
  @bookmark = Bookmark.new(params[:bookmark])
  if @bookmark.save
    respond_to do |format|
      format.html do
        flash[:notice] = "Favorit wurde erfolgreich angelegt."
        redirect_to bookmarks_path
      end
      format.js do
        render :update do |page|
          page.insert_html :bottom, 'bookmarks',
          :partial => 'bookmark'
        end
      end
    end
  else
    render :action => "new"
  end
end

HTML

Im Falle von HTML soll das ausgeführt werden, was bis jetzt auch ausgeführt wurde, wenn das Bookmarks-Objekt gespeichert werden konnte.

JavaScript

Im Falle der JavaScript-Anfrage ist es ja so, dass das Ajax-Formular unterhalb der Liste aller Bookmarks dargestellt wird und nach dem Absenden des Formulars der neue Eintrag am Ende der Liste hinzugefügt werden soll, ohne dass sich die Seite neu aufbaut. Die Listeneinträge selbst haben wir in das Partial _bookmark.html.erb ausgelagert. Das heißt, wir aktualisieren die Liste »bookmarks«, indem wir mit dem Befehl

page.insert_html :bottom, 'bookmarks', :partial => 'bookmark'

einen Listeneintrag hinzufügen.

Neuer Eintrag über ein Ajax-Formular
Galileo Computing - Zum Seitenanfang

RJS-Templates  topZur vorigen Überschrift

Highlighting mit visual_effect

Da der neue Bookmark der Liste hinzugefügt wird, ohne dass sich die Seite neu aufbaut, könnte der User das leicht übersehen und im ersten Moment das Gefühl haben, dass das Hinzufügen nicht funktioniert hat. Um dem User ein deutliches visuelles Feedback zu geben, dass etwas auf seine Eingabe hin passiert ist, wird gerne im Zusammenhang mit Ajax ein Highlighting verwendet, das den Hintergrund des neuen Elementes kurz aufleuchten lässt. Der Einfachheit halber werden wir zunächst den Hintergrund der gesamten Liste aufleuchten lassen. Dazu gibt es in Rails die Methode visual_effect, der wir den gewünschten Effekt und den Namen des Elementes übergeben:

Listing  app/controllers/bookmarks_controller.rb

...
format.js do
  render :update do |page|
    page.insert_html :bottom, 'bookmarks',
		     :partial => 'bookmark'
    page.visual_effect :highlight, 'bookmarks'
  end
end
...

Wenn Sie jetzt einen neuen Bookmark über das Ajax-Formular hinzufügen, leuchtet nach dem Absenden des Formulars die Liste der Bookmarks kurz auf.

create.js.rjs

Bevor wir uns darum kümmern, dass nur der neu hinzugefügte Eintrag in der Liste aufleuchtet, sollten wir uns um etwas anderes kümmern. Der Code zum Hinzufügen eines neuen Eintrags und zum Highlighten der Liste ist Ruby-Code, der in JavaScript umgewandelt wird. Dafür gibt es ein spezielles Ruby-JavaScript-Template-Format (rjs), das heißt, wir können diesen Code auslagern. Dazu legen wir im Verzeichnis app/views/bookmarks die Datei create.js.rjs an und fügen den Code zum Erzeugen des neuen Listeneintrages und zum Highlighten der Liste ein:

Listing  app/views/bookmarks/create.js.rjs

page.insert_html :bottom, 'bookmarks', :partial => 'bookmark'
page.visual_effect :highlight, 'bookmarks'

Im Bookmarks-Controller können wir alle Befehle löschen, die bis jetzt ausgeführt wurden, wenn das Ajax-Formular an die Action create geschickt wurde, da das Rendern des gleichnamigen rjs -Templates automatisch erfolgt:

Listing  app/controllers/bookmarks_controller.rb

def create
  @bookmark = Bookmark.new(params[:bookmark])
  if @bookmark.save
    respond_to do |format|
      format.html do
        flash[:notice] = "Favorit wurde erfolgreich angelegt."
        redirect_to bookmarks_path
      end
      format.js
    end
  else
    render :action => "new"
  end
end

Zugriff über Element-ID

Wenn wir nur den über das Ajax-Formular neu hinzugefügten Eintrag, also das letzte Element der Liste, aufleuchten lassen wollen, müssen wir auf dieses Element zugreifen können. Da das alles über JavaScript läuft, heißt das, dass das Element eine ID haben muss. Das heißt wiederum, dass jedes Element der Liste eine ID haben muss. Also müssen wir in unserem Partial _bookmark.html.erb jedem li -Element eine eindeutige ID zuweisen. Dazu nutzen wir die bookmark.id jeden Elements:

Listing  app/views/bookmarks/_bookmark.html.erb

<li id = "bookmark-<%= bookmark.id %>">
...

IDs im HTML-Code

Wenn wir die Index-Seite aktualisieren und uns den HTML-Code anschauen, sehen wir, dass jedes Element der Liste jetzt eine eindeutige ID hat, die sich aus dem Wort »bookmark« und der ID des Bookmarks zusammensetzt:

Listing  HTML-Code index.html.erb

...
<ul id="bookmarks" >
<li id = "bookmark-1">
...
</li>
<li id = "bookmark-2">
...
</li>
</ul>
...

Auf diese IDs können wir jetzt zugreifen. Das bedeutet für unser Highlighting in der Datei create.js.rjs:

Listing  app/views/bookmarks/create.js.rjs

page.insert_html :bottom, 'bookmarks', :partial => 'bookmark'

page.visual_effect :highlight, "bookmark-#{@bookmark.id}"

Jetzt leuchtet nur noch das neu hinzugefügte Element in der Liste auf.

Damit haben wir auch einen Ajax-Aufruf durchgeführt, und unsere Bookmarkverwaltung ist dadurch etwas komfortabler in der Bedienung geworden. Man könnte Ajax auch für das Löschen und Ändern eines Bookmarks einsetzen. Beim Ändern könnte sich zum Beispiel ein Bereich mit den zu ändernden Daten ausklappen. Da sind Ihrer Phantasie keine Grenzen gesetzt.



Ihr Kommentar

Wie hat Ihnen das <openbook> gefallen? Wir freuen uns immer über Ihre freundlichen und kritischen Rückmeldungen.






 <<   zurück
  Zum Katalog
Zum Katalog: Ruby on Rails 2






Ruby on Rails 2
Jetzt bestellen
 Ihre Meinung?
Wie hat Ihnen das <openbook> gefallen?
Ihre Meinung

 Buchtipps
Zum Katalog: Zend Framework






 Zend Framework


Zum Katalog: AJAX






 AJAX


Zum Katalog: Praxisbuch Web 2.0






 Praxisbuch Web 2.0


Zum Katalog: CSS-Layouts






 CSS-Layouts


Zum Katalog: JavaScript und Ajax






 JavaScript und Ajax


Zum Katalog: Professionelles Webdesign mit (X)HTML und CSS






 Professionelles Webdesign
 mit (X)HTML und CSS


Zum Katalog: Suchmaschinen-Optimierung






 Suchmaschinen-Optimierung


Zum Katalog: XHTML, HTML und CSS






 XHTML, HTML und CSS


 Shopping
Versandkostenfrei bestellen in Deutschland und Österreich
InfoInfo




Copyright © Galileo Press 2008
Für Ihren privaten Gebrauch dürfen Sie die Online-Version natürlich ausdrucken. Ansonsten unterliegt das <openbook> denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.


[Galileo Computing]

Galileo Press, Rheinwerkallee 4, 53227 Bonn, Tel.: 0228.42150.0, Fax 0228.42150.77, info@galileo-press.de