December 18, 2014
Hot Topics:

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

  • February 15, 2007
  • By Dominic Da Silva
  • Send Email »
  • More Articles »

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:





Page 1 of 2



Comment and Contribute

 


(Maximum characters: 1200). You have characters left.

 

 


Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Sitemap | Contact Us

Rocket Fuel