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.3 Layout  topZur vorigen Überschrift

Fehlendes HTML-Grundgerüst

Die Seiten sehen noch sehr schlicht aus. Genau genommen existiert noch gar kein richtiges HTML-Dokument. Denn wenn Sie sich zum Beispiel den HTML-Code der index.html.erb ansehen, sehen Sie, dass der html -Tag, die doctype -Deklaration, der head - und der body -Tag fehlen.

Abbildung  HTML-Code im Webbrowser

Die fehlenden Elemente könnten Sie in jedem View ergänzen, aber das wäre zum einen zu umständlich, zum anderen würde es dem Rails zugrunde liegenden DRY-Konzept-Don't repeat yourself widersprechen.

application. html.erb

Das heißt, es muss eine zentrale Datei geben, in der das HTML-Grundgerüst definiert werden kann. Rails hat vorgesehen, dass eine solche Datei im Verzeichnis app/views/layouts abgelegt werden kann. Wenn diese Datei application.html.erb heißt, wird sie für alle Views der Applikation benutzt, es sei denn, im Controller wurde etwas anderes definiert. Aber dazu später mehr.

Layout für alle Views eines Controllers
Wenn Sie im Verzeichnis app/views/layouts eine html.erb -Datei ablegen, die so heißt wie ein Controller, wird für alle Views dieses Controllers diese Datei statt der application.html.erb benutzt.

Sie können also manuell im Verzeichnis app/views/layouts die Datei application.html.erb anlegen, in der Sie das HTML-Grundgerüst der Bookmarkverwaltung definieren:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta http-equiv="Content-type" content="text/html;
  charset=utf-8" />
  <title>Favoritenverwaltung</title>
</head>
<body>

</body>
</html>

Beim Aufruf im Browser werden Sie feststellen, dass, egal welchen View Sie aufrufen, die Seiten immer leer bleiben. Wo sind die Inhalte der Template-Dateien?

yield

Es muss also in der application.html.erb einen Bereich geben, in den der Inhalt der Views geladen wird. Dafür gibt es in Rails den Befehl <%= yield %> . »Yield« heißt »Inhalt« und bedeutet, dass an diese Stelle, an der der yield -Befehl steht, der Inhalt der Template-Dateien geladen wird. Wenn Sie den yield -Befehl im Body der application.html.erb einfügen und anschließend die Bookmarkverwaltung im Browser aufrufen, werden wieder alle Inhalte dargestellt.

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
  <meta http-equiv="Content-type" content="text/html;
  charset=utf-8" />
  <title>Favoritenverwaltung</title>
</head>

<body>
  <%= yield %>
</body>
</html>

Stylesheets

Um die Oberfläche unserer Bookmarkverwaltung etwas schöner zu gestalten, haben wir einige CSS-Formatierungen vorgenommen. Auch für den Speicherort von Stylesheet-Dateien gibt es eine Konvention in Rails -- die Dateien liegen im Verzeichnis public/stylesheets . Allerdings reicht es nicht, eine CSS-Datei in diesem Verzeichnis abzulegen, sondern Sie müssen auch noch in den Views den Zugriff auf diese Datei gewährleisten. Das können Sie zum einen tun, indem Sie in der Datei application.html.erb einen Link zu der CSS-Datei einfügen:

<link rel="stylesheet" href="/stylesheets/global.css"
type="text/css" media="screen" title="no title"
charset="utf-8" />

Helper

Das funktioniert. Keine Frage. Aber da Rails schon die Konvention hat, dass die CSS-Dateien im Ordner public/stylesheets abgelegt werden, erwarten wir doch schon fast einen einfacheren Zugriff darauf. Und in der Tat gibt es in Rails einen sogenannten Helper dafür. Helper sind Abkürzungen, Makros oder Methoden, die uns in so mancher Situation den Programmieralltag erleichtern. In diesem Fall lautet der Helper:

<%= stylesheet_link_tag 'global' %>

Das heißt, die Helper-Methode stylesheet_link_tag erwartet als Parameter den Dateinamen der CSS-Datei. Da sie eine CSS-Datei erwartet, wird der Dateiname ohne Dateiendung übergeben. Per Konvention ist definiert, dass sich die CSS-Dateien im Ordner public/stylesheets befinden. Deshalb muss der Pfad zu der Datei nicht übergeben werden.

Strukturierung

In der Datei application.html.erb setzen wir innerhalb des Head-Bereichs den styleheet_link_tag ein. Außerdem fügen wir weitere HTML-Elemente zur Strukturierung der HTML-Seite wie folgt hinzu:

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

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

<body>
  <div id="container">
    <div id="header">
      <h1>Meine Linksammlung</h1>
    </div>
    <div id="content">
      <%= yield %>
    </div>
  </div>

</body>
</html>

global.css

Die von uns benutzte global.css hat folgenden Inhalt:

Listing  public/stylesheets/global.css

* {
  margin: 0;
}
body {
  background-color: #ddd;
}
#container {
  width: 500px;
  margin: 0 auto;
}
#header {
  background-color: #006999;
  padding: 10px;
  color: #fff;
  text-align: center;
}
#content {
  border: 2px solid #006999;
  padding: 10px;
  background-color: #fff;
  min-height: 200px;
}
h2 {
  font-size: 1.1em;
  margin-bottom: 0.5em;
}
.flash {
  border: 1px solid #000;
  padding: 0.2em
}
.notice {
  border: 1px solid #008414;
  color: #008414;
  background-color: #D8FFBB;
}
.error {
  border: 1px solid #990A0C;
  color: #990A0C;
  background-color: #FFA894;
}
label {
  display: block;
}
#newForm {
  margin: 1em 0;
  padding: 0.5em;
  background-color: #E7E7E7;
}
input {
  margin: 0.5em 0;
}
input[type="submit"] {
  margin-top: 2em;
}
.newBookmark {
  margin-top: 1em;
  display: block;
}

Abbildung  Bookmarkverwaltung mit CSS

Titel setzen

Wenn man die einzelnen Seiten der Bookmarkverwaltung aufruft, fällt auf, dass die Titelzeile für alle Seiten die gleiche ist. Schön wäre doch, wenn man am Seitentitel erkennen könnte, auf welcher Seite man sich befindet. Dazu kann man in jedem View eine Instanzvariable @title setzen, zum Beispiel in dem View zum Ändern eines Bookmarks:

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

<% @title = "bearbeiten" %>
<h2>Favorit bearbeiten</h2>

In der application.html.erb wird @title ausgegeben:

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

...

<title>Favoritenverwaltung - <%= @title %></title>
...

Wenn Sie das Formular zum Ändern eines Bookmarks im Browser aufrufen, wird im Titel »Favoritenverwaltung -- bearbeiten« ausgegeben:

Abbildung  Anpassung Titelzeile

Default-Titel

Wenn nicht alle Views einen eigenen Titel erhalten sollen, können Sie auch einen Default-Wert angeben, der immer dann angezeigt wird, wenn ein View keinen eigenen Titel hat, sprich, wenn die Variable @title nicht gesetzt ist:

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

...
<title>Favoritenverwaltung - <%= @title || "Unbenannt" %>
</title>
...


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