Your SlideShare is downloading. ×
Ruby on Rails SS09 06
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Ruby on Rails SS09 06

641

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
641
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

















































  • Transcript

    • 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
    • 48. ?

    ×