1. 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

2. 6
Ruby on Rails
Nachtrag: Scaffolding
ActionView
Exkurs: CSS Layouts

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

4. Demo

5. ActionView
Layouts & Formulare

6. Daten uss
Controller View
@var

7. Layouts
Controller View
@var

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)

12. Demo

13. Formulare
Zweck: Eingabe von Daten
API Module:
• ActionView::Helpers::FormHelper
• ActionView::Helpers::FormTagHelper
• ActionView::Helpers::FormOptionsHelper
• ActionView::Helpers::DateHelper
• ActionView::Helpers::ActiveRecordHelper

14. FormHelper
check_box
elds_for
le_ eld
form_for
hidden_ eld
label
password_ eld
radio_button
text_area
text_ eld

15. FormTagHelper
check_box_tag
elds_for_tag
le_ eld_tag
form_tag
hidden_ eld_tag
label_tag
password_ eld_tag
radio_button_tag
text_area_tag
text_ eld_tag

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

17. FormHelper vs. FormTagHelper
FormHelper
• text_ eld(object_name, method, options = {})
FormTagHelper
• text_ eld_tag(name, value = nil, options = {})

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>

21. EXKURS
CSS Layouts

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

24. Eigenes einfaches Framework
Pro
• sehr individuell
• geringer Umfang
Contra
• nicht für Einsteiger geeignet

25. Grundlegender Aufbau
Framework

26. Grundlegender Aufbau
reset.css
alle Browser Styles entfernen

27. Grundlegender Aufbau
reset.css
base.css
Layout-Definitionen

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

31. Bekannte Frameworks
• 960 Grid System
• Blueprint CSS
• The Yahoo! User Interface Library (YUI)

32. 960.gs

33. blueprintcss.org

34. developer.yahoo.com/yui/

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 &mdash; 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>

38. body

39. body
container_12

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
... ... ...

44. Demo

45. Links
Rails Guides & Railscasts

46. guides.rubyonrails.org

47. railscasts.com

49. ?