• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Ruby on Rails SS09 06
 

Ruby on Rails SS09 06

on

  • 1,082 views

 

Statistics

Views

Total Views
1,082
Views on SlideShare
1,079
Embed Views
3

Actions

Likes
0
Downloads
0
Comments
0

1 Embed 3

http://www.slideshare.net 3

Accessibility

Categories

Upload Details

Uploaded via as Apple Keynote

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />
  • <br />

Ruby on Rails SS09 06 Ruby on Rails SS09 06 Presentation Transcript

  • 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: Scaffolding ActionView Exkurs: CSS Layouts
  • 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
  • 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 quot;project[title]quot;, quot;Titlequot; %><br /> <%= text_field_tag quot;project[title]quot;, @project.title %> </p> <p> <%= submit_tag 'Create' %> </p> <% end %>
  • <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>
  • 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-Definitionen
  • 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 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>
  • Container & Spalten <div class=quot;container_12quot;> <div class=quot;grid_3quot;> ... </div> <div class=quot;grid_9quot;> ... </div> </div>
  • body
  • body container_12
  • body container_12 grid_3 grid_9 ... ...
  • 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>
  • 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
  • ?