SlideShare ist ein Scribd-Unternehmen logo
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
?

Weitere ähnliche Inhalte

Ähnlich wie Ruby on Rails SS09 06

Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
Sven Haiges
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
QS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmateQS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmate
Michael Mirold
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzEric Eggert
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
Nico Steiner
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
jan_mindmatters
 
Forms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and OperationsForms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and Operations
Torsten Kleiber
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
Felix Sasaki
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
Manfred Steyer
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Benjamin Schmid
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
ssuser65180a
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
Tobias Kraft
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
Angelo Maron
 
Ruby on Rails SS09 03
Ruby on Rails SS09 03Ruby on Rails SS09 03
Ruby on Rails SS09 03
Daniel Dengler
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
Thomas Kratz
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
Sebastian Springer
 
Einführung in SASS und Compass
Einführung in SASS und CompassEinführung in SASS und Compass
Einführung in SASS und Compass
eigentor
 

Ähnlich wie Ruby on Rails SS09 06 (20)

Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006Grails 0.3-SNAPSHOT Presentation WJAX 2006
Grails 0.3-SNAPSHOT Presentation WJAX 2006
 
Ruby on Rails SS09 04
Ruby on Rails SS09 04Ruby on Rails SS09 04
Ruby on Rails SS09 04
 
Wicket Kurzübersicht
Wicket KurzübersichtWicket Kurzübersicht
Wicket Kurzübersicht
 
QS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmateQS-Tag 2015 - Web Layout Testing mit Galen und webmate
QS-Tag 2015 - Web Layout Testing mit Galen und webmate
 
Nutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 LinzNutze die Macht @ IKT-Forum 09 Linz
Nutze die Macht @ IKT-Forum 09 Linz
 
1&1 Frontend Workshop II
1&1 Frontend Workshop II1&1 Frontend Workshop II
1&1 Frontend Workshop II
 
Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007Rails i18n - Railskonferenz 2007
Rails i18n - Railskonferenz 2007
 
Ext Js On Rails
Ext Js On RailsExt Js On Rails
Ext Js On Rails
 
Ext Js On Rails
Ext Js On RailsExt Js On Rails
Ext Js On Rails
 
Forms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and OperationsForms and Reports 12c - Processes and Automation in Development and Operations
Forms and Reports 12c - Processes and Automation in Development and Operations
 
HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009HTML5 - presentation at W3C-Tag 2009
HTML5 - presentation at W3C-Tag 2009
 
.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1.NET Summit 2016 in München: ASP.NET Core 1
.NET Summit 2016 in München: ASP.NET Core 1
 
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEESchnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
Schnelle Winkel: 10x schnellere Webapps mit AngularJS und JEE
 
react-de.pdf
react-de.pdfreact-de.pdf
react-de.pdf
 
Grails im Überblick und in der Praxis
Grails im Überblick und in der PraxisGrails im Überblick und in der Praxis
Grails im Überblick und in der Praxis
 
Domain Driven Design in Rails
Domain Driven Design in RailsDomain Driven Design in Rails
Domain Driven Design in Rails
 
Ruby on Rails SS09 03
Ruby on Rails SS09 03Ruby on Rails SS09 03
Ruby on Rails SS09 03
 
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleunigermagnolia mit thymeleaf - ein agiler prozess-beschleuniger
magnolia mit thymeleaf - ein agiler prozess-beschleuniger
 
Einführung in React
Einführung in ReactEinführung in React
Einführung in React
 
Einführung in SASS und Compass
Einführung in SASS und CompassEinführung in SASS und Compass
Einführung in SASS und Compass
 

Mehr von Daniel Dengler

Ruby on Rails SS09 02
Ruby on Rails SS09 02Ruby on Rails SS09 02
Ruby on Rails SS09 02
Daniel Dengler
 
Ruby on Rails SS09 01
Ruby on Rails SS09 01Ruby on Rails SS09 01
Ruby on Rails SS09 01
Daniel Dengler
 

Mehr von Daniel Dengler (7)

Ruby on Rails SS09 11
Ruby on Rails SS09 11Ruby on Rails SS09 11
Ruby on Rails SS09 11
 
Ruby on Rails SS09 10
Ruby on Rails SS09 10Ruby on Rails SS09 10
Ruby on Rails SS09 10
 
Ruby on Rails SS09 08
Ruby on Rails SS09 08Ruby on Rails SS09 08
Ruby on Rails SS09 08
 
Ruby on Rails SS09 07
Ruby on Rails SS09 07Ruby on Rails SS09 07
Ruby on Rails SS09 07
 
Ruby on Rails SS09 05
Ruby on Rails SS09 05Ruby on Rails SS09 05
Ruby on Rails SS09 05
 
Ruby on Rails SS09 02
Ruby on Rails SS09 02Ruby on Rails SS09 02
Ruby on Rails SS09 02
 
Ruby on Rails SS09 01
Ruby on Rails SS09 01Ruby on Rails SS09 01
Ruby on Rails SS09 01
 

Ruby on Rails SS09 06

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

Hinweis der Redaktion