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

Ruby on Rails was created by David Heinemeier Hansson, a partner of 37 signals, as a web application framework for building their web applications. David open sourced Ruby on Rails under the MIT license and it is now the fastest growing web application framework. It is a full-stack framework for developing database-backed web applications according to the Model-View-Control pattern. It provides Ajax support in the view layer, a request and response controller, and a domain model wrapping the database. All that is needed to deploy a Rails web application is a web server and a database. In this article, you will download and install Ruby, the Rails framework, and MySQL so you can run your very first Ruby on Rails web application.

To Recap (Adding CRUD to Your Ruby on Rails Application)

In my previous Ruby on Rails article, you added CRUD support to your simple Rails application. You first created your MySQL database table called 'guitars'. You then had Rails create your scaffold, which provided you with CRUD operations for your 'guitars' table. However, the user interface left much to be desired. This was a sample of the listing page:

As you can see, it is very plain. So, go ahead and enhance the user interface of this application. You will perform the following modifications:

1. Display a message when the guitar list is empty
2. Display the guitar list count
3. Enhance the pagination in the guitar listing

Ruby on Rails Views

Before you begin the modifications, first understand Ruby on Rails Views. If you look at the directory structure of the 'myfistwebappappsviews' directory, you will see two directories, 'guitars' and 'layouts'.

Both directories hold files ending with a '.rhtml' extension. In Rails the view is rendered by using RHTML files (files with a .rhtml extension). These files are HTML files with embedded Ruby code. The embedded Ruby code is contained within <%, <%=, and %> tags.

Understanding RHTML Files

The Rails controller makes the data that the view needs available via instance variables (variables with names beginning with @). The 'list' method of the 'guitars_controller' calls the ActiveController's built-in 'paginate' method to paginate the list of guitars, and uses the returned values to set the '@guitar_pages' and '@guitars' variables.

def list
   @guitar_pages, @guitars = paginate :guitars, :per_page => 3
end

The @guitar_pages instance variable is used to paginate the list (three items per page). The list of Guitar objects is held in the @guitars instance variable. The 'list.rhtml' file uses these variables to render the guitar listing:

<h1>Listing guitars</h1>

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

<% for guitar in @guitars %>
   <tr>
   <% for column in Guitar.content_columns %>
      <td><%=h guitar.send(column.name) %></td>
   <% end %>
      <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 %></td>
   </tr>
<% end %>
</table>

<%= link_to 'Previous page', { :page =>
   @guitar_pages.current.previous }
   if @guitar_pages.current.previous %>
<%= link_to 'Next page', { :page => @guitar_pages.current.next }
   if @guitar_pages.current.next %>

<br />

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

It first iterates through the columns stored in the 'guitars' table and prints them out as table headers. The 'content_columns' method is a built-in method of the ActiveRecord class, which the class Guitar extends, that provides the listing of columns mapped to the attributes of the Guitar object.

Displaying a Message when the Guitar List Is Empty

Update 'list.rhtml' to display a message informing the user that there are no guitars in the list. To do thisyou wrap your code to display the list with an if-else code block that checks the size of the '@guitars' variable. If the size is greater than zero, you display the listing; otherwise, you inform the user that there are no guitars in the list. The updated 'list.rhtml' looks like this:

<h1>Listing guitars</h1>

<% if @guitars.size > 0 %>

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

   <% for guitar in @guitars %>
      <tr>
      <% for column in Guitar.content_columns %>
         <td><%=h guitar.send(column.name) %></td>
      <% end %>
         <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 %>
      </tr>
   <% end %>
   </table>

   <%= link_to 'Previous page', { :page =>
                                  @guitar_pages.current.previous }
                                  if @guitar_pages.current.previous %>

   <%= link_to 'Next page', { :page => @guitar_pages.current.next }
                              if @guitar_pages.current.next %>

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

<br />

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

Here is what the listing page looks like now if the listing is empty:

Current Pagination for the Guitar Listing

Now, add six guitars and see the current pagination for the guitar listing in action. The listing now shows the first three guitars with a link for navigating to the next page:

Click here for a larger image.

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):

Click here for a larger image.

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 = Paginator.new self, collection.size, options[:per_page],
      options[:page]
   first = pages.current.offset
   last = [first + options[:per_page], collection.size].min
   slice = collection[first...last]
   return [pages, slice]
end

def index
   list
   render :action => 'list'
end

def list

   if @params[:page] == nil
      @count = 0
   end
   @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

end

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 %>

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

   <% for guitar in @entries %>
      <tr>
         <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 %>

      </tr>
   <% end %>
   </table>

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

   <% else %>
      <p>
      <b>Sorry. You have no guitars at the moment.</b>
      </p>
<% 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:

Conclusion

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.

References

• Ruby
• Ruby on Rails
• An Interview with David Heinemeier Hansson
• RubyGems
• MySql
• SilvaSoft, Inc. weblog

About the Author

Dominic Da Silva (http://www.dominicdasilva.com/) 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.