어떤 정보가 저장되었을 때, 혹은 저장에 실패했을 때, 사용자에게 성공/실패 메시지를 보여주기 위해 사용하는 한 가지 방법은 flash message이다. controller에서 다음과 같은 식으로 flash message를 저장한다.

1. flash[:notice] = “Logged in successfully!”

그리고 view에서 flash message를 다음과 같이 사용할 수 있다.

1. <%= flash[:notice] %>

flash 메시지는 cookie에 저장되어 다음 요청까지 남아 있기 때문에 redirect 요청을 사용할 때 특히 유용하다.

이와 같이 flash message는 주로 공지(notice)나 에러(error) 같은 메시지를 위해 사용된다. 이런 메시지들은 전 페이지에 걸쳐 발생한다. 이들을 각 view에서 보여주는 것은 번거로울 뿐만 아니라 view마다 보여지는 방식이 다르다면 사이트를 산만하게 보이게 할 수도 있다.  일관된 방식으로 보여주는 것은 개발에도 편리하고 일관성도 유지할 수 있다. 예를 들어 ‘항상 오른쪽 상단에 공지 메시지가 보여지게 된다’ 와 같은 정책을 갖는 것이다. 이는 다음과 같이 layout에서 flash message를 보여주는 방법으로 간단히 구현할 수 있다.

1. # layout
2. <div id=’contents’>
3.   <%= flash_messages %>
4.   <%= yield  %>
5. </div>
7. # application_helper
8. def flash_messages
9.   if(flash[:notice])
10.     content_tag(:div, flash[:notice], :class=>”notice”)
11.   end
12. end

이 방법은 편하기는 하지만 멋지지는 않다. jGrowl을 사용해서 좀 더 멋지게 보여지도록 하자.

jGrowl은 MAC의 growl 알림 시스템에 영감을 받은 jquery 플러그인이다. 메시지가 발생하면 투명한 메시지 박스가 보여진다. 세련된 느낌의 그 박스를 보고 있자면 기분이 좋다. 여기 데모가 있다.

jGrowl의 사용은 간단하다. jGrowl을 다운 받아서 설치(jquery.js, jquery.jgrowl.js, jquery.jgrowl.css 파일을 추가)한 후 다음과 같이 사용할 수 있다.

1. $.jGrowl("hello jGrowl");

이제 아래와 같이 flash message들을 jGrwol을 통해 보여지도록 하자.

application_helper의 flash_message를 수정해서 jGrowl을 통해 메시지를 보여지도록 한다.

1. module ApplicationHelper
     def flash_messages
       messages = []
       %w(notice error).each do |type|
         if flash[type.to_sym]
           messages << """
     $('#flash_container').jGrowl('#{flash[type.to_sym]}',
     {
       header: '#{type.upcase}',
       theme: '#{type.downcase}'
     });
           """
         end
       end
       javascript_tag """
   $(function(){
     #{messages.join}
   });
       """
     end
2. end

flash_container 밑에 jGrowl 메시지들이 들어가도록 했다. header는 메시지의 처음에 나오는 제목이다. theme를 지정하면 메시지 element의 CSS class가 theme로 설정된다.
이제 flash_container를 layout 파일의 적당한 위치에 넣자.

1. <div id="content">
2.   <div id="flash_container"></div>
3.   <%= flash_messages %>
4.   <%= yield  %>
5. </div>

그리고 css를 다음과 같이 주어 오른쪽 상단에 메시지들이 보여지도록 하자.

1. div#content {
     position: relative;
   }
   div#flash_container {
     position: absolute;
     right: 5px;
   }

error 와 notice의 CSS를 설정해서 조금 더 보기 좋게 할 수도 있다.

1. div.jGrowl-notification.error div.header {
     background: transparent url(/images/icon_error.png) no-repeat left;
     padding-left: 20px;
     color:red;
   }
   div.jGrowl-notification.notice div.header {
     background: transparent url(/images/icon_info.png) no-repeat left;
     padding-left: 20px;
     color:#009BC7;
   }