Web developer often comes to a situation where he needs to “decorate” a block of a page. There is a simple solution and simple and elegant solution.

Helpers concept in Ruby on Rails is very powerful and will be used to do the trick.

Imagine, you want to create a rounded box helper similar to Nifty Corners (http://www.html.it/articoli/nifty/index.html), but you do not want to use javascript. So, a handy helper needs to be created.

The principle of the Nifty Corners trick is adding few b tags before content, few b tags after it and few lines to CSS.

<div id="container"> <b class="rtop"> <b class="r1"></b> <b class="r2"></b> <b class="r3"></b> <b class="r4"></b> </b> <!--content goes here --> <b class="rbottom"> <b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b> </b> </div>

and modification of CSS

.rtop , .rbottom { display :block } .rtop *, .rbottom * { display : block ; height : 1px ; overflow : hidden } .r1 { margin : 0 5px ; } .r2 { margin : 0 3px ; } .r3 { margin : 0 2px ; } .r4 { margin : 0 1px ; height : 2px ; } .r1 , .r2 , .r3 , .r4 { background-color :red ; } .cont { background-color :red ; }

Easy solution

The easy solution uses two helpers. One to put before the content and one to put it after. So, the view could look like:

... <%= round_box_start %> content <%= round_box_end %> ...

Well, it does not look good. So, what about the other solution?

Easy and elegant solution

We will create a block level helper. The view will look much better.

... <% round_box do %> content <% end %> ...

Now, let’s create the helper:

def round_box ( &block ) b = '<div id="container"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><div class="cont">' e = '</div><b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b></div>' # Get the data from the block data = capture ( &block ) res = b + data + e # Use concat method to pass text back to the view concat ( res, block. binding ) end

Good, but works only for red boxes. How to pass another color? Simply:

... <% round_box ( color ) do %> content <% end %> ...

and in helper

def round_box ( color, &block ) b = '<div id="container"><b class="rtop"><b class="r1"></b><b class="r2"></b><b class="r3"></b><b class="r4"></b></b><div class="cont">' e = '</div><b class="rbottom"><b class="r4"></b> <b class="r3"></b> <b class="r2"></b> <b class="r1"></b></b></div>' # Get the data from the block data = capture ( &block ) res = b + data + e # Use concat method to pass text back to the view concat ( res, block. binding ) end

Final implementation of the colored box is left as a homework :o)