Getting Started With Rails Views
by Erik Andrejko
April 21, 2009
|
In this article Erik Andrejko will discuss Ruby on Rails
views and making most of the HTML template system in Rails.
|
In the Model View Controller (MVC) pattern it is the
"views" that are used to implement the user interface to
your application. In a web application the user interface is
typically implemented as a combination of HTML and
Javascript and each can be considered part of a view. The
views are as important, if not more important, than the
other components that make up the MVC architecture and many
respected web application developers start by designing the
UI and the views first.
ERB Templates
In Ruby on Rails each view is stored using some type of
template and the default template system is called ERB.
Templates written in ERB allow inserting arbitrary Ruby code
and variables along with HTML or other source inside the
template file. Rails supports multiple template systems and
uses a file extension to distinguish amongst them. For
example, an HTML file using the ERB template system will
have .html.erb as a file extension.
Using ERB templates is straightforward. To display the
value of the variable @customer within an ERB
template you would use the following:
<%= @customer %>
Within an ERB template Ruby code can be included using
both <% %> and <%= %>
tags. The <% %> are used to execute Ruby
code that does not return anything, such as conditions,
loops or blocks, and the <%= %> tags are
used to insert the value of a Ruby expression.
You can surround parts of an ERB template within and
if ... end block by using the <%
%> tags:
<% if @customer %>
<%= @customer.name %>
<% end %>
Although any amount of Ruby code can be placed between
the <% %> tags, it is a good idea to keep
the code inside templates as simple as possible.
The View
For each controller there is an associated directory in
the app/views directory which holds the ERB
templates that make up the views associated with that
controller. These views are used to display the HTML that
results from each controller action.
As with everything else in Rails there is a naming
convention for views. Typically, the views share their name
with the associated controller action. For example, the
index controller action of the
customers_controller will use the
index.html.erb view file in the
app/views/customers directory. By
‘view’ most Rails developers refer to this file.
However, the complete HTML returned to the client is
composed of a combination of this view file and also a
layout template.
Using Layouts
Typically, many elements of a web application will be the
same across different views: elements such as headers,
footers and page layouts. In order to limit the amount of
repetition between views, Ruby on Rails utilizes a layout
mechanism. The layouts are stored as ERB templates in the
app/views/layouts directory. The default layout
is called application.html.erb and when
rendering a view associated with a controller action, Ruby
on Rails will select a layout automatically.
A typical layout will look like:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>My Web Application</title>
<%= javascript_include_tag :defaults %>
<%= stylesheet_link_tag "main" %>
</head>
<body>
<%= yield %>
</body>
</html>
The <%= yield %> is used to specify
the place to include the controller action template inside
the layout.
In the <head> section the lines look like this:
<%= javascript_include_tag :defaults %>
<%= stylesheet_link_tag "customer", "main" %>
These are used to link to external javascript files and
stylesheets. By convention, the Javascript files are stored
in the public/javascsripts/ directory and the
CSS stylesheets are stores in the
public/stylesheets directory. The
:defaults symbol will include the following
Javascript files:
- prototype.js
- effects.js
- dragdrop.js
- controls.js
- application.js
All of these files are included with Ruby on Rails. The
prototype.js file is the Prototype Javascript
library, a popular and useful Javascript framework. The
effects.js, dragdrop.js and
controls.js are part of the script.aculo.us library,
making it easy to add rich behavior to your web application.
In development it is usually easier to organize your
application into several separate Javascript and CSS files.
In production it is best to send the browser at most one
minified Javascript and CSS file. There is a Rails plugin
which will handle all you to do both and will automatically
minify the Javascript and CSS in production: the asset_packager plugin.
Forms
Getting Started with Ruby on Rails
Rendering the view from the controller
|
