Ruby on Rails Course Day 5

By @AlSayedGamal

Views Haml and bootstrap

Agenda

Views, partials and helpers

rendering and layout

adding haml and syntax difference compared to ERB

adding twitter bootstrap and responsive grid design basics

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.

Rendering and layout

Each controller is associated with layout.

And each layout has some regionsrepresented by yield statement and region name

Helpers

Helper example:

form_for

link_to

You can define your own on app/helpers folder.

Haml is DRY markdowncleaner views in action

Haml Simple rules

%tagname#id.class

Twitter BootstrapResponsive and grid design in action

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

Add new regions to layout

-if content_for?

= yield = yield(:region)

= content_for do

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

Exercise