YUI (Yahoo! UI Library) on Rails ： Calendar （1）

Rails

YUIとは，Yahoo! UI Library の略で，ヤフー！が提供するユーザインターフェイスライブラリ．DOM，DHTML，AJAX のような技術をつかった，リッチでインタラクティブなWebアプリケーションを実現するライブラリである．これをRailsで実際に使ってみようと思う．

Railsのディレクトリにコピー

解凍したファイルで，必要なものをRailsの所定のディレクトリにコピーする．

js
  • /yui/build/yahoo/*.js → /RAILS_ROOT/public/javascripts/yui/yahoo/*.js
  • /yui/build/event/*.js → /RAILS_ROOT/public/javascripts/yui/event/*.js
  • /yui/build/dom/*.js → /RAILS_ROOT/public/javascripts/yui/dom/*.js
  • /yui/build/calendar/*.js → /RAILS_ROOT/public/javascripts/yui/cal/*.js
css
image
  • /yui/build/calendar/assets/*.gif → /RAILS_ROOT/public/images/yui/cal/*.gif

ビュー

  • test_cal.rhtml を作成
  • 使用するスクリプトのパスを設定
  • 何もできないカレンダーの表示はできる
[/views/books/test_cal.rhtml]

<html>
<head>
  <title>Calendar Test</title>
  <%= javascript_include_tag "yui/yahoo/yahoo",
                             "yui/event/event",
                             "yui/dom/dom",
                             "yui/cal/calendar",
                             "yui/cal/calendar-debug",
                             "yui/cal/calendar-min" %>
  <%= stylesheet_link_tag 'yui/cal/calendar' %>

    <script>
    	YAHOO.namespace("example.calendar");
    
    	function init() {
    		YAHOO.example.calendar.cal1 = new YAHOO.widget.Calendar("cal1","cal1Container");
    		YAHOO.example.calendar.cal1.render();
    	}
    
    	YAHOO.util.Event.addListener(window, "load", init);
    </script>
			
</head>

<body>
  <div id="cal1Container"></div>
</body>
</html>