Weitere ähnliche Inhalte Ähnlich wie Ruby on Rails SS09 06 Ähnlich wie Ruby on Rails SS09 06 (20) Mehr von Daniel Dengler (7) Ruby on Rails SS09 061. 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
3. Nachtrag: Scaffolding
automatische Generierung von Controllern und
Views aus Datenmodellen
ruby script/generate scaffold ModelName
Die generierten Controller und Views sind keine
fertige Anwendung, aber eine gute Grundlage um
eine Anwendung daraus zu entwickeln
8. Layouts
Layout
Controller View
(etwa views/layouts/application.html.erb)
@var
9. Views
Layout
Controller View
View
@var (etwa views/home/index.html.erb)
10. Partials
Layout
View
Partial
(etwa views/home/_project.html.erb)
Controller View
@var
11. Partials
Layout
View
Partial
(etwa views/home/_project.html.erb)
Controller View
@var
Partial
(etwa views/home/_project.html.erb)
13. Formulare
Zweck: Eingabe von Daten
API Module:
• ActionView::Helpers::FormHelper
• ActionView::Helpers::FormTagHelper
• ActionView::Helpers::FormOptionsHelper
• ActionView::Helpers::DateHelper
• ActionView::Helpers::ActiveRecordHelper
16. FormHelper vs. FormTagHelper
Beide:
• liefern die bekannten HTML-Eingabe-Felder
FormHelper
• kennt das aktuell zu bearbeitende Objekt
• wird häu g in einem Form-Block angewandt
FormTagHelper (wird nicht weiter im Kurs behandelt)
• kennt nicht das aktuell zu bearbeitende Objekt
18. FormHelper
<% form_for(@project) do |f| %>
<%= f.error_messages %>
<p>
<%= f.label :title %><br />
<%= f.text_field :title %>
</p>
<p>
<%= f.submit 'Create' %>
</p>
<% end %>
19. FormTagHelper
<% form_tag(projects_path) do %>
<%= error_messages_for :project %>
<p>
<%= label_tag quot;project[title]quot;, quot;Titlequot; %><br />
<%= text_field_tag quot;project[title]quot;, @project.title %>
</p>
<p>
<%= submit_tag 'Create' %>
</p>
<% end %>
20. <form action=quot;/projectsquot; class=quot;new_projectquot; id=quot;new_projectquot; method=quot;postquot;>
<div style=quot;margin:0;padding:0quot;>
<input name=quot;authenticity_tokenquot; type=quot;hiddenquot;
value=quot;cAVj0EkF9iU5HfBHgto70FqYkVQcahBgR0Aaog6igH8=quot; />
</div>
<p>
<label for=quot;project_titlequot;>Title</label><br />
<input id=quot;project_titlequot; name=quot;project[title]quot; size=quot;30quot; type=quot;textquot; />
</p>
<p>
<input id=quot;project_submitquot; name=quot;commitquot; type=quot;submitquot; value=quot;Createquot; />
</p>
</form>
22. Basis
• Vorgefertigtes Framework
• Eigenes einfaches Framework
• Kein Framework
23. Vorgefertigtes Framework
Pro
• solide Basis
• viele Features
• gut geeignet für Einsteiger
Contra
• unnötig großer Umfang
• tiefgreifende Anpassungen oft schwierig
28. Grundlegender Aufbau
reset.css
base.css
pluginA.css pluginB.css pluginC.css
Plugin Plugin Plugin
29. Grundlegender Aufbau
reset.css
base.css
pluginA.css pluginB.css pluginC.css
application.css
Anpassungen der Applikation
30. Grundlegender Aufbau
reset.css
Ladereihenfolge
base.css
pluginA.css pluginB.css pluginC.css
application.css
Anpassungen der Applikation
35. 960 Grid System
Breite: 960 Pixel
Spalten: 12 oder 16
Dateien:
• reset.css (Browser-Reset)
• text.css (Basis-Text-Styles)
• 960.css (Basis-Layout)
36. Die verwendeten Stylesheets
<!DOCTYPE html PUBLIC quot;-//W3C//DTD XHTML 1.0 Strict//ENquot; quot;http://www.w3.org/TR/
xhtml1/DTD/xhtml1-strict.dtdquot;>
<html xmlns=quot;http://www.w3.org/1999/xhtmlquot; xml:lang=quot;enquot; lang=quot;enquot;>
<head>
<meta http-equiv=quot;content-typequot; content=quot;text/html; charset=utf-8quot; />
<title>960 Grid System — Demo</title>
<link rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;allquot; href=quot;css/reset.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;allquot; href=quot;css/text.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;allquot; href=quot;css/960.cssquot; />
<link rel=quot;stylesheetquot; type=quot;text/cssquot; media=quot;allquot; href=quot;css/application.cssquot; />
</head>
<body>
...
</body>
</html>
37. Container & Spalten
<div class=quot;container_12quot;>
<div class=quot;grid_3quot;>
...
</div>
<div class=quot;grid_9quot;>
...
</div>
</div>
40. body
container_12
grid_3 grid_9
... ...
41. Untergliederung
<div class=quot;container_12quot;>
<div class=quot;grid_3quot;>
...
</div>
<div class=quot;grid_9quot;>
<div class=quot;grid_3 alphaquot;>
...
</div>
<div class=quot;grid_3quot;>
...
</div>
<div class=quot;grid_3 omegaquot;>
...
</div>
</div>
</div>
42. body
container_12
grid_3 grid_9
... ...
43. body
container_12
grid_3 grid_9
... ...
grid_3 grid_3 grid_3
alpha omega
... ... ...