Rails course day 5
-
Upload
al-sayed-gamal -
Category
Software
-
view
180 -
download
0
Transcript of Rails course day 5
![Page 1: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/1.jpg)
Ruby on Rails Course Day 5
By @AlSayedGamal
![Page 2: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/2.jpg)
Views Haml and bootstrap
![Page 3: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/3.jpg)
Agenda
Views, partials and helpers
rendering and layout
adding haml and syntax difference compared to ERB
adding twitter bootstrap and responsive grid design basics
![Page 4: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/4.jpg)
Views, partials and helpers
Views are loaded by convention.
Normal content will fall in main yield part.
_ prefixed files are called partials and are rendered inside views for reusability sake.
Example: _form in any scaffold.
![Page 5: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/5.jpg)
Rendering and layout
Each controller is associated with layout.
And each layout has some regionsrepresented by yield statement and region name
![Page 6: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/6.jpg)
Helpers
Helper example:
form_for
link_to
You can define your own on app/helpers folder.
![Page 7: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/7.jpg)
Haml is DRY markdowncleaner views in action
![Page 8: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/8.jpg)
Haml Simple rules
%tagname#id.class
![Page 9: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/9.jpg)
Twitter BootstrapResponsive and grid design in action
![Page 10: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/10.jpg)
Installation and Usage
add following gems to your Gemfile and bundle
gem 'twitter-bootstrap-rails'
gem 'haml'
gem ‘haml-rails'
now install bootstrap static assets
rails generate bootstrap:install static
Generate fluid layout
rails g bootstrap:layout application fluid*
Scaffold and style
rails g bootstrap:themed <scaffold_model>s
*remove the .erb default one
![Page 11: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/11.jpg)
Add new regions to layout
-if content_for?
= yield = yield(:region)
= content_for do
![Page 12: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/12.jpg)
Associated Model form best practicesUse”accepts_nested_attributes_for” to accept data from associated model.
Use“fields_for” to show this associated model fields.
Use ”validated_associated” to validate related model
Useform builder’s collection_* to link related modelsExample: collection_select
![Page 13: Rails course day 5](https://reader036.fdocuments.us/reader036/viewer/2022062412/5884db7c1a28ab4b778b505b/html5/thumbnails/13.jpg)
Exercise