Views and layouts¶
What is a view?¶
Views are the V in MVC. Every controller has his own folder under /app/views which contains views. Views are user-interface pages. They are built from HTML and embedded Ruby.
A View file consists of three parts. E.g., edit.html.erb. Edit refers to action in controller (def edit … end). HTML refers to the content type which will be rendered by view. Erb refers to rendering engine, that will be used to render view. The most commonly used render engine is Embedded Ruby (Erb), but other rendering engines exist exist such as HAML.
To embed ruby code into HTML page, Erb offers some special tags:
With the tag <%= ruby code %> the result of code execution will be displayed on the web page. E.g., <%= link_to "New Book", new_book_path %>.
With the tag <% ruby code %> the code will be executed, but output won't be displayed on the web page. E.g., <% if logged_in? %>. This tag adds extra blank lines into web page source, to get rid of them we can use the tag <%- ruby code -%>.
To comment code in erb tags just add the symbol # right after first %. E.g., <%#=h @book.description %>.
What is a layout?¶
To add common elements to all or some pages, Rails offers a special form of view – a layout. Layouts lay under /app/views/layouts. E.g., application.html.erb. Application refers to theapplication controller. Layout file can be, for example, a regular XHTML document:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> Bookclub - <%= params[:controller].capitalize %> - <%= params[:action].capitalize %> </title>
<%= stylesheet_link_tag "style" %>
<%= javascript_include_tag :defaults %>
</head>
<body>
<div id="main_container">
</div>
</div> <!-- header -->
<div id="center_content">
<%= yield %>
</div>
</body>
</html>
In this layout we can see two rails helpers: stylesheet_link_tag and javascript_include_tag.
Tag stylesheet_link_tag defines which css file from folder /public/stylesheets will be included. So <%= stylesheet_link_tag "style" %> will load file style.css.
Tag javascript_include_tag defines which files from folder /public/javascripts will be loaded. <%= javascript_include_tag :defaults %> will load default js files: application.js, controls.js, dragdrop.js, effects.js and prototype.js. This tag allows you to load certain files. E.g., <%= javascript_include_tag 'jquery' %> will load file jquery.js.
Line with <%= yield %> is the position where the content from the views will be rendered. So content in
<div id="center_content">depends on current rendered view. edit, show, index etc.
In your application you can use several layouts. To define which layout will be used by a spacific controller, in the controller file add option layout 'name_of_layout'. By default, rails will try to load a layout with the name of the controller if one exists, otherwise it will use the application layout.
With options :only and :except you can define which action will use or won't use this layout. E.g., layout 'books' :only => :show. This means that layout 'books' will be used only by action 'show'. If options is layout 'books' :except => :edit, then layout 'books' will be used in all actions, except action 'edit'.