Languages Change your View: Enhancing the User Interface of a Ruby on Rails...

Change your View: Enhancing the User Interface of a Ruby on Rails Application

Ruby is the programming language on the tip of everyone’s tongue these days. The power and ease of software development with Ruby has helped make an upstart web framework called Ruby on Rails the hottest web framework around. Some may argue that the Web 2.0 wave is riding the Rails on Rails wave, as more and more Ruby on Rails powered web sites pop up on the Internet.

This article will give a brief introduction to Ruby on Rails and show you how to get your first simple Ruby on Rails web application up and running. In Part 2 of this article, you will connect your web application to the MySQL database and add CRUD (Create, Read, Update, and Delete) support to the web application.

Ruby: A Scripting Language Gem

It is hard to imagine anyone in the programming world these days who has not heard of Ruby. The ever-increasing popularity of the Ruby on Rails web framework is helping to make Ruby the language of choice for rapid application development and testing. Ruby is an interpreted scripting language that provides quick and easy object-oriented programming and contains some neat features such as closures, blocks, and mixins. Ruby is also highly portable, running on Unix/Linux, Windows, and MacOS. For those wanting a more thorough introduction to Ruby, you can read W. Jason Gilmore’s article on Ruby.

Rails: The Fast Train to Web Application Development

Clicking the ‘Next page’ link takes you to the second page, which has a link to the previous page (and no link for the next page because this is the end of the list):

You are going to enhance this listing page to 1) indicate how many total guitars the list contains, 2) indicate how many guitars are being viewed, and 3) add navigation links for the first and last pages of the listing.

Enhancing Pagination in the Guitar Listing

You first update ‘guitars_controller.rb’ with a ‘paginate_collection’ method. This method returns a set containing the pages of the collection and the current slice of the collection. The ‘list’ method is updated to use this new ‘paginate_collection’ method (as opposed to the built-in ActiveController ‘paginate’ method). The ‘index’ method is updated to call the ‘list’ method and then render the ‘list’ action. The modified ‘guitars_controller.rb’ methods are listed below:

# paginate a collection
def paginate_collection(collection, options = {})
   default_options = {:per_page => 10, :page => 1}
   options = default_options.merge options

   pages = self, collection.size, options[:per_page],
   first = pages.current.offset
   last = [first + options[:per_page], collection.size].min
   slice = collection[first...last]
   return [pages, slice]

def index
   render :action => 'list'

def list

   if @params[:page] == nil
      @count = 0
   @guitar_page = @params[:guitar_page]
   @guitar_list = Guitar.find_all
   @entry_pages, @entries = paginate_collection @guitar_list,
      { :per_page => 3, :page => @params[:page] }
   @count = (@entry_pages.current.to_i - 1) * 3


The ‘guitars.rhtml’ file is also updated. It uses the ‘@guitar_list’ variable to display the size of the guitar and the ‘@entries’ variable to display the current count of the guitars being viewed on the current page. The ‘for’ loop now iterates of the ‘@entries’ variable, setting the current Guitar object in a ‘guitar’ variable and printing its ‘make’, ‘model’, and ‘color’ fields. The updated pagination links use the ‘@entry_pages’ variable to set the ‘:page’ request parameter. The modified ‘list.rhtml’ file is below:

<h1>Listing guitars</h1>

<h2>You have <%= @guitar_list.size %> items, viewing
   <%= @entries.size %></h2>

<% if @entries.size > 0 %>

      <% for column in Guitar.content_columns %>
         <th><%= column.human_name %></th>
      <% end %>

   <% for guitar in @entries %>
         <td><%= guitar.make %></td>
         <td><%= guitar.model %></td>
         <td><%= guitar.color %></td>

         <td><%= link_to 'Show', :action => 'show',
                                 :id => guitar %></td>
         <td><%= link_to 'Edit', :action => 'edit',
                                 :id => guitar %></td>
         <td><%= link_to 'Destroy', { :action => 'destroy',
                                      :id => guitar },
                                      :confirm => 'Are you sure?',
                                      :method => :post %>

   <% end %>

   <%= link_to '<< First', { :page => 1 } %>
   <%= link_to '< Prev', { :page => @entry_pages.current.previous }
      if @entry_pages.current.previous %>
   <%= link_to 'Next >', { :page => }
      if %>
   <%= link_to 'Last >>', { :page => @entry_pages.length } %>

   <% else %>
      <b>Sorry. You have no guitars at the moment.</b>
<% end %>

<br />

<%= link_to 'New guitar', :action => 'new' %>

Start up the ‘myfirstrailsapp’ application and point your web browser to ‘http://localhost:3000/guitars’ and you will see the modified guitar listing:

You then can navigate through the list by using the updated pagination links:


This third article in my Ruby on Rails series has shown you how to enhance the user interface of your Rails application. By understanding Rails’ RHTML files, you can create more user-friendly views for your application. In the next article, you will look at Rails’ built-in support for AJAX and also work on adding some more tables to your application; these tables will allow users to use dropdown selection lists for your guitar models and colors.


About the Author

Dominic Da Silva ( is the President of SilvaSoft, Inc., a software consulting company specializing in Java, Ruby, and .NET-based web and web services development. He has worked with Java since the year 2000 and is a Linux user from the 1.0 days. He is also Sun Certified for the Java 2 platform. Born on the beautiful Caribbean island of Trinidad and Tobago, he now makes his home in sunny Orlando, Florida.

Latest Posts

Related Stories