Using a framework such as twitter-bootstrap can really speed up the time it takes to build your front end. It works really well with Rails, and can give your application that polish without the headache of trying to build cross-browser/cross-platform compliant views from scratch.
Today will be a post on adding what is known in the Rails community as flash_messages. For those of us unfamiliar to what that means, its the yellow ‘notice’ bar in the above image directing us to login or signup before proceeding into the application.
The layouts folder included in every new rails app creation, comes default with an
application.html.erb file. This is a file we can think of as the big stage where all the pieces of our project will come together for an orchestrated performance.
Heres what the directory structure looks like when navigating to the
Typically there are a number of partial files that will be created and added to an application.html.erb file. A great place to see an example of adding partials to our application file is on Michael Hartl’s ruby.railstutorial.org site. The image we are looking for is Listing 5.1.
So we can add shim , navigation, header and footer partials into our application file to make things a bit more manageable. For our purposes we will be creating a
_flash_messages.html.erb to house where our flash message display, and including it in our
application.html.erb file when we are done.
Lets see what our file could look like:
Basically the method loops through and displays a twitter bootstrap styled alert or success box, like the one in the image at the beginning of the post. We can add these messages in our controllers if an action does something we want and if an action doesn’t act as we want it to.
Here’s a quick example of a controller method that includes a flash message tied to an action succeeding:
So when the
update method saves the flash message is “your venue has been updated”. And if the
@venue.update_attributes(params[:venue] doesn’t happen, we render the edit page again, this time with a flash message saying “unable to update venue”.
Now that we have both pieces of the flash message puzzle created, we can tie our partial
_flash_messages.html.erb into our
Heres a peak at what that could look like:
Line 15 has is rendering the partial we have just created. Notice that when typing the path, we didn’t include the underscore (_) in the path. This is because Rails is set up to treat files beginning with an underscore as a partial. We can also see that our navigation (on line 13) and footer (on line 19) are abstracted out into partials as well.
This will help keep your application file clean and arguably better organized, making any updates relatively easier to read.
A final note, you want to have twitter bootstrap installed in your Gemfile. You can do this by navigating to your gemfile in your root structure and adding one of the many bootstrap gems that work with rails. I personally use bootstrap-sass. Here’s a look at how I add it to my gemfile.
There may or may not look like a lot going on in the above example. But line 5 is the focus. I just add
gem 'bootstrap-sass' and then in my terminal/command prompt type
bundle install to get it loaded and ready to go.