Ruby on Rails SS09 06

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

6 Ruby on Rails Nachtrag: Scaﬀolding ActionView Exkurs: CSS Layouts

Nachtrag: Scaﬀolding automatische Generierung von Controllern und Views aus Datenmodellen ruby script/generate scaﬀold ModelName Die generierten Controller und Views sind keine fertige Anwendung, aber eine gute Grundlage um eine Anwendung daraus zu entwickeln

Demo

ActionView Layouts & Formulare

Daten uss Controller View @var

Layouts Controller View @var

Layouts Layout Controller View (etwa views/layouts/application.html.erb) @var

Views Layout Controller View View @var (etwa views/home/index.html.erb)

Partials Layout View Partial (etwa views/home/_project.html.erb) Controller View @var

Partials Layout View Partial (etwa views/home/_project.html.erb) Controller View @var Partial (etwa views/home/_project.html.erb)

Demo

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

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

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

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

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

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

FormTagHelper <% form_tag(projects_path) do %> <%= error_messages_for :project %> <p> <%= label_tag \"project[title]\", \"Title\" %><br /> <%= text_field_tag \"project[title]\", @project.title %> </p> <p> <%= submit_tag 'Create' %> </p> <% end %>

<form action=\"/projects\" class=\"new_project\" id=\"new_project\" method=\"post\"> <div style=\"margin:0;padding:0\"> <input name=\"authenticity_token\" type=\"hidden\" value=\"cAVj0EkF9iU5HfBHgto70FqYkVQcahBgR0Aaog6igH8=\" /> </div> <p> <label for=\"project_title\">Title</label><br /> <input id=\"project_title\" name=\"project[title]\" size=\"30\" type=\"text\" /> </p> <p> <input id=\"project_submit\" name=\"commit\" type=\"submit\" value=\"Create\" /> </p> </form>

EXKURS CSS Layouts

Basis • Vorgefertigtes Framework • Eigenes einfaches Framework • Kein Framework

Vorgefertigtes Framework Pro • solide Basis • viele Features • gut geeignet für Einsteiger Contra • unnötig großer Umfang • tiefgreifende Anpassungen oft schwierig

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

Grundlegender Aufbau Framework

Grundlegender Aufbau reset.css alle Browser Styles entfernen

Grundlegender Aufbau reset.css base.css Layout-Deﬁnitionen

Grundlegender Aufbau reset.css base.css pluginA.css pluginB.css pluginC.css Plugin Plugin Plugin

Grundlegender Aufbau reset.css base.css pluginA.css pluginB.css pluginC.css application.css Anpassungen der Applikation

Grundlegender Aufbau reset.css Ladereihenfolge base.css pluginA.css pluginB.css pluginC.css application.css Anpassungen der Applikation

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

960.gs

blueprintcss.org

developer.yahoo.com/yui/

960 Grid System Breite: 960 Pixel Spalten: 12 oder 16 Dateien: • reset.css (Browser-Reset) • text.css (Basis-Text-Styles) • 960.css (Basis-Layout)

Die verwendeten Stylesheets <!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Strict//EN\" \"http://www.w3.org/TR/ xhtml1/DTD/xhtml1-strict.dtd\"> <html xmlns=\"http://www.w3.org/1999/xhtml\" xml:lang=\"en\" lang=\"en\"> <head> <meta http-equiv=\"content-type\" content=\"text/html; charset=utf-8\" /> <title>960 Grid System — Demo</title> <link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"css/reset.css\" /> <link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"css/text.css\" /> <link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"css/960.css\" /> <link rel=\"stylesheet\" type=\"text/css\" media=\"all\" href=\"css/application.css\" /> </head> <body> ... </body> </html>

Container & Spalten <div class=\"container_12\"> <div class=\"grid_3\"> ... </div> <div class=\"grid_9\"> ... </div> </div>

body

body container_12

body container_12 grid_3 grid_9 ... ...

Untergliederung <div class=\"container_12\"> <div class=\"grid_3\"> ... </div> <div class=\"grid_9\"> <div class=\"grid_3 alpha\"> ... </div> <div class=\"grid_3\"> ... </div> <div class=\"grid_3 omega\"> ... </div> </div> </div>

body container_12 grid_3 grid_9 ... ...

body container_12 grid_3 grid_9 ... ... grid_3 grid_3 grid_3 alpha omega ... ... ...

Demo

Links Rails Guides & Railscasts

guides.rubyonrails.org

railscasts.com

?

Ruby on Rails SS09 06

0 comments

Notes on slide 1

Favorites, Groups & Events