Home arrow Ruby-on-Rails arrow Page 2 - Adding Style with Action Pack

Adding Style with Action Pack

In this conclusion to an eighteen-part series on the Action Pack library for Rails, we'll take the application we've built in previous parts and give it some style. This article is excerpted from chapter six of the book Beginning Rails: From Novice to Professional, written by Jeffery Allan Hardy, Cloves Carneiro Jr. and Hampton Catlin (Apress; ISBN: 1590596862).

Author Info:
By: Apress Publishing
Rating: 4 stars4 stars4 stars4 stars4 stars / 3
August 10, 2011
  1. · Adding Style with Action Pack
  2. · Highlighting the Selected Tab

print this article

Adding Style with Action Pack - Highlighting the Selected Tab
(Page 2 of 2 )

We want to apply a CSS class to the navigation links to indicate to the user that the link is selected. To accomplish this, we’ll make (you guessed it) a new helper method that wraps link_to and adds some functionality, as shown in Listing 6-34. Add this method to the application helper in app/helpers/application_helper.rb .

Listing 6-34. Helper Addition to app/helpers/application_helper.rb

def link_to_with_selected(name, url_options={}, html_options={}, &block)

css_class = (!!block.call) ? 'selected' : nil

link_to name, url_options, html_options.merge(:class => css_class) end

This method works by applying the CSS class selected to the link if the given block returns true . We use it just as we would a regular link_to helper, except that we pass it a block. Inside the block, we need to do a little work to figure out whether the link should be selected. To do this, we interrogate the current environment a bit to determine whether we’re showing events or adding a new event.

To see this at work, we need to update the application layout in app/views/layouts/ application.rhtml and use link_to_with_selected in place of link_to for our tabbed navi gation. The relevant code is shown in Listing 6-35.

Listing 6-35. Updated Navigation List in app/views/layouts/application.rhtml

<ul class="navigation">

  • > <%= link_to_with_selected('Events', events_url) do

    params[:controller] == 'events' && params[:action] != 'new' end %>


    <% if logged_in? %>

    <li> <%= link_to_with_selected('New Event', new_event_url) do params[:controller] == 'events' && params[:action] == 'new' end %> </li>

    <% end %> </ul>

    Now when we’re in the events controller and not on the new action ( params[:action] != 'new' ) or when we’re on the new action ( params[:action] == 'new' ), the block yields true , and the correct tab is selected. Perfect!

    With the CSS in place and with this helper to improve navigation, our application is really starting to look nice. If you’ve done everything correctly, yours should look a lot like Figure 6-5.


    This chapter covered a lot of ground. Truth be told, we probably could have made this into two or even three chapters. But as you know by now, Action Pack is a tightly inte grated component of Rails, and it would have been difficult to separate the concepts while retaining continuity.

    We started this chapter with a general introduction to the components that compose Action Pack, the Rails library responsible for the controller and the view. Then we launched into a controller walk-through, where we built a complete controller from scratch, eliminating our scaffolding dependency. In doing so, you learned about routes, how to generate a controller, how actions relate to views, how to create templates, and how to work with layouts. We introduced Rails’ form helpers, and you learned how to easily create forms that integrate with Active Record objects. We also introduced partials, and you learned how to leverage them to keep your templates DRY and easy to maintain.

    We discussed a fair number of advanced topics in this chapter as well, including sessions and state, the philosophy of the shared-nothing architecture, and how to protect actions using filters. But we didn’t stop there. You also learned how to sanitize HTML to protect your application from defacement from malicious users, and how to create your own helpers to improve your interface. We even took the time to make our application look pretty, sprucing up the layout and adding some CSS.

    This chapter gave you your first taste of Rails outside the model. You now have a complete understanding of how Rails divides its concerns and a first-hand look at MVC in action. We started by modeling our domain in Chapters 4 and 5, and now we’ve completed the first iteration of building a web application around our domain.

    We’ve said it before, but we’ll say it again: you should be proud of yourself. At this stage, you know a lot about Rails. The next chapters will build on this knowledge, starting with techniques to improve user interaction by way of a technology known as Ajax.  

  • DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

    blog comments powered by Disqus

    - Ruby-on-Rails Faces Second Security Flaw in ...
    - Ruby 2.0 Prepped for February 2013 Release
    - Why LinkedIn Switched from Ruby on Rails
    - Adding Style with Action Pack
    - Handling HTML in Templates with Action Pack
    - Filters, Controllers and Helpers in Action P...
    - Action Pack and Controller Filters
    - Action Pack Categories and Events
    - Logging Out, Events and Templates with Actio...
    - Action Pack Sessions and Architecture
    - More on Action Pack Partial Templates
    - Action Pack Partial Templates
    - Displaying Error Messages with the Action Pa...
    - Action Pack Request Parameters
    - Creating an Action Pack Registration Form

    Watch our Tech Videos 
    Dev Articles Forums 
     RSS  Articles
     RSS  Forums
     RSS  All Feeds
    Write For Us 
    Weekly Newsletter
    Developer Updates  
    Free Website Content 
    Contact Us 
    Site Map 
    Privacy Policy 

    Developer Shed Affiliates


    © 2003-2018 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
    Popular Web Development Topics
    All Web Development Tutorials