Oomoo

March 6, 2008

A View In Pieces

Filed under: rails, view — oomoo @ 12:05 am

“A View is used to render a particular action of a controller in the browser.”

A “View” can be split into components: a layout, a view, and a partial depending on the complexity of a page.

Layout

The layout is a page template which will be used to render several views. Thus, it is reusable.

It contains some elements such as HTML header and footer, menus, design elements, etc. that you want to be the same across several views.

Layouts are stored in /app/views/layouts/

View

The view is used to render a particular action of our controller in the browser (like index, list, show_detail, edit, etc.).  Views are stored in:
/app/views/<name_of_model>/<name_of_view>.html.erb

Examples:
/app/views/customer/index.html.erb
/app/views/customer/list.html.erb
/app/views/customer/edit.html.erb

Partial
A partial is used to render only a part of a page. It gives you an easy way to generate a common piece of rails code/html over and over, for example, iterating through a list of orders for a customer. In Ruby terms, it is much like a Ruby “block”.  It can be really useful when working with Ajax. (for example, refreshing a a table of items without refreshing an entire page).
Partial filenames always begin with an underscore

Partials are stored in
/app/views/<name_of_model>/_<name_of_partial>.rhtml.erb
/app/views/customer/_customer_list.html.erb
 

Index
If you name your initial view page “index.html.erb”, you do not need to specify it’s name in the browser.

For example, if your view is: \app\views\orders\index.html.erb
browse to http://localhost:3000/orders will display the index page.

If you use some other view filename, you just need to specify that view name in the address.
For example, if your view is: \app\views\orders\list.html.erb
browse to http://localhost:3000/orders/list to display the page

Simple View Example

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” http://www.w3.org/TR/html4/strict.dtd“>
<html>
  <head>
    <meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1” />
    <title>Orders</title>
  </head>
  <body>
    <h1>Order Detail</h1>
    <p>Find me in app/views/orders/index.html.erb</p>
    Order ID: <%= @order.id %><br/>
    Order #: <%= @order.ordPK %><br/>
    Customer PO #: <%= @order.ordCustPONum %><br/>
  </body>
</html>

View-Related File Locations

Views \app\views\<modelname>\<myviewname>
Helpers \app\helpers\<modelname>_helper.rb
Images \public\images\
Stylesheets \public\stylesheets\
JavaScripts \public\javascripts\
Layouts \app\views\layouts\
Partials \app\views\<modelname>\_<partialname>.rhtml.erb

Link a CSS Stylesheet into the HTML by using:

<%= stylesheet_link_tag mystyle.css” , :media => “all” %>
   
…instead of…
<link href=”style.css” mce_href=”style.css” rel=”stylesheet” type=”text/css” />

Link in Javascript by using:

<%=javascript_include_tag :defaults %>
    
…or…
<%=javascript_include_tag “prototype”, “effects”, “dragdrop”, “controls” %>

*I got much of this post from a web training presentation that I can’t find to give credit, I apologize!

Advertisements

Leave a Comment »

No comments yet.

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

%d bloggers like this: