October 23, 2014
Hot Topics:
RSS RSS feed Download our iPhone app

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

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

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

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.





Page 2 of 2



Comment and Contribute

 


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

 

 


Sitemap | Contact Us

Rocket Fuel