Project Ramon

A learning journey from a Ruby noob perspective

Bootstrap Basics: Adding Flash Messages to your App

bootstrap1

 

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 views/layouts/application.html.erb file:

bootstrap2

 

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 application.html.erb file.

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.

Also, depending on your bootstrap gem and/or bootstrap design specifications, you may be writing to files in the assets directory as well. Specifically in the javascripts and stylesheets folder. For a great video tutorial on bootstrap checkout Railscast.

 

Advertisements

Categories: AirPair, Newbie, Ruby, Ruby on rails

Tags: , , , , ,

1 reply

Trackbacks

  1. AirPair.com – What I’ve Learned So Far | Project Ramon

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s