Ruby on Rails: Erste Schritte: Vorlagen und Stile

Bislang wurden alle Ansichten von Rails erzeugt. Das ist bequem, verhindert aber jegliche Individualität.

Wenn wir die Indexseite ansehen, so hat diese keinerlei Charme. Noch schlimmer – der HTML-Code hält auch dem HTML-Test nicht stand: This page is not Valid HTML 4.01 Transitional!

Wir sehen uns der Reihe nach an...

... wie Vorlagen von Rails aussehen,
... wo wir den allgemeinen Seitenaufbau festlegen und
... wie wir Stilvorlagen einbinden.

Vorlagen

Die "Ruby on Rails Hyper Text Markup Language" (RHTML) ist eine einfach Erweiterung von HTML.

RHTML-Code besteht aus HTML-Code und darin eingebettetem Ruby Code (Embedded Ruby; ERb) der mit <% %> oder mit <%= %> geklammert wird.

Bevor eine HTML-Seite ausgeliefert wird, führt Rails den Code aus. Hierbei gilt:

<% %> der Ruby-Code wird ausgewertet
<%= %> der Ruby-Code wird ausgewertet und das Ergebnis wird in den HTML-Code eingebettet.

Vielmehr gibt es über RHTML nicht zu lernen. Viel wichtiger wird der Ruby-Code werden, welcher die Brücke zum Rails-System bildet.

Anwendungs-Layout

Mit einem Layout wird in Rails der allgemeine Aufbau einer Web-Seite beschrieben. Üblicherweise besteht das Layout aus den html-, header- und body-Elementen. Eine Steuerung (Controller) verwendet ein solches Layout und bettet die verschiedenen Sichten, wie edit, show oder new, darin ein.

Im Verzeichnis app/views/layouts/ befinden sich alle Layouts. Das Verzeichnis ist zunächst leer. Wir erstellen dort die Datei standard.rhtml.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Datei: app/views/layouts/standard.rhtml -->
<html>
	<head>
		<title>Sport</title>
	</head>
	<body>
	<%= yield %>
	</body>
</html>

Der RHTML-Code enthält nur den Ruby-Ausdruck yield. Dies ist ein Platzhalter für die verschiedenen Sichten, die von der Steuerung eingefügt werden.

Die Steuerung sucht gemäß Konvention nach einem Layout application, so dass wir die Indexseite mit dem neuen Layout aufrufen können. Die Indexseite hat noch weniger Charme als zuvor, da sie keine Stilvorlagen mehr verwendet. Dafür können wir aber nach Lust und Laune eigene Stile in unser Layout aufnehmen, und für den HTML-Code gilt: This Page Is Valid XHTML 1.0 Transitional!

Weitere Layouts

Ein eigenes Layout für die gesamte Web-Anwendung ist nur der Anfang.

Sollte es nötig werden, so können wir für jede Steuerung ein individuelles Layout angeben. Hat die Steuerung den Namen ActivityController, so sucht diese nicht nur nach dem application-Layout, sondern auch nach einem activity-Layout.

Und wenn wir uns von allen Konventionen lösen möchten, so können wir in der Steuerung das Layout angeben.

# Datei: app/controllers/activity_controller.rb
class ActivityController < ApplicationController
  scaffold :activity
  layout 'standard'
end

Die layout-Anweisung legt die Datei standard.rhtml als Layout fest.

Für die Priorität der vorhanden Layouts gilt: Eigenes Layout vor Steuerungs-Layout vor Anwendung-Layout.

Stilvorlagen

Als wir noch kein Layout verwendet hatten, hat Rails die Stilvorgaben unmittelbar im HTML-Code platziert. Wir könnten dies selbstverständlich auch in unserem Layout tun. Aber warum soll der Browser bei jedem Seitenaufruf die Stile laden? Wir gehen den üblichen Weg und platzieren die Stilvorlage in einer eigenen Datei.

Das Verzeichnis public/stylesheets/ nimmt alle Stilvorlagen auf. Wir legen die Datei standard.css an:

body { background-color: #fff; color: #333; }
body, p, ol, ul, td { font-family: verdana, arial, helvetica, sans-serif; font-size:   13px; line-height: 18px; }
pre { color: inherit; background-color: #eee; padding: 10px; font-size: 11px; }
a { color: #000; background-color: inherit; }
a:visited { color: #666; background-color: inherit; }
a:hover { color: #fff; background-color:#000; }
.fieldWithErrors { padding: 2px; color: inherit; background-color: red; display: table; }
#errorExplanation { width: 400px; border: 2px solid red; padding: 7px; padding-bottom: 12px; margin-bottom: 20px; color: inherit; background-color: #f0f0f0; }
#errorExplanation h2 { text-align: left; font-weight: bold; padding: 5px 5px 5px 15px; font-size: 12px; margin: -7px; color: inherit; background-color: #c00; color: #fff; }
#errorExplanation p { color: #333; background-color: inherit; margin-bottom: 0; padding: 5px; }
#errorExplanation ul li { font-size: 12px; list-style: square; }

Die Stile entsprechen den Rails-Stilen mit zusätzlichen Farbangaben, so dass die Vorlage einem CSS-Test standhält. Seien Sie kreativ und geben der Anwendung ein wenig Charme.

Damit der Stil eingebunden wird, wechseln wir zum standard-Layout und verweisen dort auf die Stilvorlage:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Datei: app/views/layouts/standard.rhtml -->
<html>
	<head>
		<title>Sport</title>
		<%= stylesheet_link_tag 'standard' %>
	</head>
	<body>
	<%= @content_for_layout %>
	</body>
</html>

Die stylesheet_link_tag-Anweisung erzeugt das link-Element zu standard.css mit allen notwendigen Attributen.