어떤 정보가 저장되었을 때, 혹은 저장에 실패했을 때, 사용자에게 성공/실패 메시지를 보여주기 위해 사용하는 한 가지 방법은 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;
   }

dom 선택

css selector와 같은 형식으로 dom을 선택할 수 있다. selector를 사용하기 위해서 jQuery 혹은 $를 사용한다.

1. jQuery("#id")
2. $(".class")
3. $("tag.class")

return되는 것은 jQuery 객체이다.

event handling

가장 맘에 드는 event handling이다. 다음과 같이 선택된 DOM에 원하는 event 함수들을 달아놓으면 된다.

1. $(document).ready( function() {
2.   $("#project_submit").click(function(){  
       alert("submit the form");
       return true;
     });
3. });

$(document).ready 는 브라우져가 모든 js 들을 다 download 받은 후 실행될 것을 보장한다. (window.onload와 같다.)

$("#project_submit").click 은 project_submit이란 id를 가진 dom에 click 이벤트가 발생하면 실행된다.

더 자세한 event에 대해서는 http://docs.jquery.com/Events 를 참조한다.

Effect

간단한 effect들 역시 손쉽게 사용할 수 있다.

1. $("#message_box").fadeOut();

더 자세한 효과들에 대해서는 http://docs.jquery.com/Effects 를 참조.

each, map, unique

배열이 있고 배열을 iteration 하고 싶은 경우 each를 사용할 수 있다.

1. members = ["juddy", "james"];
2. $.each(members, function() {
     project.members.push(this));
   });

function 안의 this는 각 member를 가르킨다.

selector를 이용했다면 다음과 같이 더 간결한 표현도 가능하다.

1. $(".project").each( function() {  
2. });

Ajax Request

Ajax request도 간단하게 사용할 수 있다.

1. $.ajax({
     type: "POST",
     url: "/projects/recent",
     data: "duration=5&user=juddy",
2.   success: function(html){
      $("#recent_projects").replaceWith(html);
     }
   });

success는 요청 성공시 호출되는 event handler이다. 이렇게 각 요청에 대해서 event handler를 작성할 수도 있고, 모든 요청에 대한 global event handler를 다음과 같이 정의할 수도 있다.

1. $("#ajax_msg").ajaxSuccess(function(evt, request, settings){
      $(this).append("<li>Successful Request!</li>");
    });

json request를 callback과 함께 사용하고 싶다면 getJSON을 사용할 수도 있다. (GET요청만 사용가능)

1. $.getJSON("/projects/recent",
     function(data){
       // handle data
     });
   });

더 자세한 내용은 http://docs.jquery.com/Ajax 를 참조.

이 글은 스프링노트에서 작성되었습니다.

rails는 prototype/script.aculo.us를 기본 탑재하고 있다. 게다가 rails는 이에 그치지 않고 이것들을 이용한 helper method들을 제공해 준다.

1. page.visual_effect :fade "div_id"

이러한 helper method들은 편리하기는 하지만 prototype/script.aculo.us가 아닌 다른 js 라이브러리를 사용하고 싶은 경우 선택을 주저하게 만드는 요인이기도 하다. 다른 js라이브러리를 사용한다는 말은 위 helper method들을 사용하지 않겠다는 말이기도 하니까.. jQuery와 prototype을 같이 사용할 수 있는 방법도 있지만 중복이 있어 비효율적이다. 이런 고민을 하고 있다면 jRails가 좋은 선택일 듯 싶다.

jRrails는 rails 에서 prototype/script.aculo.us 대신 jQuery를 사용하도록 해 주는 plugin이다. jRails는 prototype/script.aculo.us를 사용하는 helper method들을 jQuery를 사용해서 처리하도록 변경해 준다. 그래서 helper mehod들을 똑같이 사용할 수 있다. 좋다!

설치 

plugin 설치를 하자.

1. ruby script/plugin install http://ennerchi.googlecode.com/svn/trunk/plugins/jrails

설치를 하면 RAILS_ROOT/public/javascripts 에 jquery.js, jquery-fx.js, jquery-ui.js, jrails.js 파일을 만든다. 

이제 prototype.js, controls.js, dragdrop.js, effects.js를 지워도 된다.

이 파일들을 javascript_include_tag를 이용해서 각각 포함시킬 수도 있고, 다음과 같이 :default 를 사용해서 한꺼번에 포함시킬 수도 있다.

1. <%= javascript_include_tag :defaults %>

사용

특별한 사용이랄 게 없다. helper method를 이용하고 싶다면 그대로 사용하면 된다.

js 를 직접 사용해야 할 때는 prototype대신 jQuery를 이용하자.

참조

http://ennerchi.com/projects/jrails

이 글은 스프링노트에서 작성되었습니다.

rails 에서는 prototype이라는 좋은 javascript library가 포함되어 있다. rails는 prototype을 이용한 helper method들을 제공해 준다. 아주 좋은 점은 이 helper method들을 이용해서 javascript를 직접 이용하지 않고서도 Ajax 기능을 구현할 수 있다는 것이다. 이는 매우 편리하고, 괜찮은 성능을 보여주기는 하나, 내부를 이해하기 어려워서 응용 동작을 하기 어려울 때가 있다. prototype 자체도 잘 만들어졌고, 사용하기도 편리하지만, 다른 javascript library도 장점을 가지고 있다.

jQuery는 가장 가벼운 javascript library 중 하나다. 문법이 간결하고, 효율적이어서 개발자들에게 재밌는 코딩을 할 수 있게 해 준다는 평을 받고 있다. jQuery의 core는 아주 가볍게 구현되어 있고, 필요한 기능들은 plug-in을 통해 확장하는 형식을 가지고 있다. 플러그인을 돌아다니다 보면 내가 필요로 하는 기능들을 대부분 발견할 수 있다.

여기서는 rails application에서 jQuery와 Prototype을 같이 이용하는 방법을 알아보자. 

prototype을 버리고 jQuery만 사용하고 싶다면 jRails plugin을 이용하는 것도 좋은 방법이다. [Rails] jRails plugin 사용하기

jQuery 을 rails에서 사용하기

 jQuery 와 prototype 과의 충돌을 막기위해

application.js에 다음을 추가하고,

1. jQuery.noConflict();

layout 에 다음을 추가한다.

1. <%= javascript_include_tag 'jquery', 'application' %>

반드시 application 이 jquery 다음에 와야 한다.

jQuery.noConflict()는 jquery가 $ 의 사용권한을 포기하게 해서 prototype과의 충돌을 피할 수 있게 해준다. jquery에서는 $ 대신 jQuery라는 문자열을 사용한다.

dom을 선택하기

dom의 선택은 css selector와 동일한 방법으로 할 수 있다.

jQuery(".className") 은 class='className'인 모든 dom들을 선택할 것이다.

jQuery("#idName")은 id='idName'인 dom을 선택할 것이다.

jQuery("div")는 모든 div taf를 가진 dom들을 선택할 것이다.

jQuery로 아름다운 코드 작성하기

jQuery를 사용하면 좋은 점은 javascript를 사용하지 않는 사용자에게도 제대로 기능하는 서비스를 할 수 있다는 것이다. 예를 들어  javascript를 사용하지 않거나 사용할 수 없는 사용자가 있다고 생각해 보자. Ajax를 이용한 기능은 javascript를 사용하지 않는 사용자에게는 동작하지 않는다.  그 사용자들에도 서비스를 제공하기 위한 최선의 방법은 javascript를 사용하는 사용자에게는 Ajax를 이용한 멋진 기능을 제공하고, javascript를 사용하지 않는 사용자에게는 Ajax 없이 화려하지 않게 동작하는 기능을 제공하는 것이다. 어떻게 할 수 있을까?

우선 javascript를 전혀 사용하지 않고 html code만으로 동작하는 기능을 만든다. 그 후  Ajax 기능을 추가하고 싶은 부분에 jQuery의 event handler 기능을 이용해서 Ajax 기능을 넣어준다. ( 이 기능은 rails 의 plugin인 UJS(unobstructive javascript for ruby on rails)를 사용해서도 할 수 있다. ) jQuery는 이 동작을 이해하기 쉽고, 깔끔하게 할 수 있도록 해 준다.

다음 javascript code를 보자.

1. jQuery(document).ready(function() {
      jQuery("a.external").click(function() {
         window.open(this.url, "_blank")
      })
   })

이 코드는 external 이란 class를 가진 모든 a tag가 눌려지면 새 창을 하나 더 만들어서 링크의 내용을 열도록 해 준다.

jQuery(document).ready(function() {} 는 모든 dom들이 전부 다 load될 때까지 기다렸다가 block를 실행하도록 해 준다. 그럼으로써 블록 안에서 실행되는 code들이 온전히 수행될 것을 보장해 준다.

jQuery("a.external").click(function() {}는 external 이란 class를 갖는 a가 click되었을때 행해지는 동작을 정의한다. 여기서는 새창에서 열기.

이와 같이 코드를 쓸 때 얻을 수 있는 또 다른 장점은 javascript code들이 HTML 과 분리가 된다는 것이다. 이것은 보기 좋은 code를 만들 수 있고, 그래서 관리하기가 편해진다.

다음은 link_to_remote를 사용하는 대신, link_to와 jQuery를 사용해서 link_to_remote의 기능을 하도록 한 한 예이다.

1. <%= link_to 'show post', post_path(post), :class => 'post-detail' %>
   <div id='post-detail'/>
   <script type="text/javascript">
     $(function() {
     $(".post-detail").click( function() {
         $.ajax({
           url: this.href,
           dataType: "html",
           beforeSend: function(xhr) {xhr.setRequestHeader("Accept", "text/html");},
           success: function(data) {
               $("#post-detail").html(data);
           }
         });
         return false;
     });
   });
   </script>

$(function() {} 는 jQuery(document).ready(function() {}와 완전히 동일한 축약형 표현이다.

위 코드는 post-detail에 click 이벤트가 발생하면 post_path로 ajax request를 보내서 받은 응답을 post_detail id를 가진 div에 쓸 것이다.

Reference

http://yehudakatz.com/2007/01/31/using-jquery-in-rails-part-i/

http://mad.ly/2007/05/17/jquery-ajax-rails/

이 글은 스프링노트에서 작성되었습니다.