The Yahoo! User Interface Library を使ってみよう！

さて、使い勝手の向上と格好良さの向上の為に、The Yahoo! User Interface Library (YUI) を使ってみることにしました。

以前仕事でAjaxを多用したアプリを作った事があります。 RailsのAjax機能(主にPrototype.js)を元に作り、かなり使い勝手の良いアプリが出来、お客様も喜んでくれたのですが・・・・・・私のデザインセンスではカッコ良くはありませんでした ^^);

しかし、YUIを使うと見栄えのするAjaxページが簡単に作れます＼(＾＾)／

ここ２日くらい、YUIを組み込む為に試行錯誤し下のような画面が作れました。上の単純なHTMLだけの画面と比べると断然クールです！

メイン画面

表の表示には DataTable というコンポーネントを使っています。データはJSON形式で与えるので通常HTMLの「テーブル」を表示するのより簡単です。

感謝言葉の入力画面

入力ダイアログは Dialgというコンポーネントを使っています。フォームは通常の表示されな＜div＞の中に通常の＜form＞で定義するので、通常のHTMLアプリから簡単に移行できます。

感謝の言葉表示画面

表示ポップアップは Tooltip を使っています。ツールチップを表示する要素と表示テキストを関連付けるだけで簡単に作れます。

結果としては、かなり簡単にできましたが実はかなり時間が掛かりました ^^);

YUIを使うさいの手順としては

Examplesを見て良さそうコンポーネントを探す。
そのコンポーネントのドキュメント(Getting Started)を読む。
コンポーネントのドキュメントとExampleのソースの両方を見ながらプログラムしてみる。

とすると良いです。コンポーネントのドキュメントを読むとExampleから違う物をイメージしてしていたりする事を防げます。また、 Getting Started にはたまに抜けや小さな間違いが在ったりするので、Exampleのソースを見るのも重要です。

また、YUI のファイルは JavascriptとCSSがきれいに分かれていないので YUIを public/yui 等のディレクトリーに展開し、以下のような Rails TAG で定義すると簡単です。

<!--CSS file (default YUI Sam Skin) -->
<%= stylesheet_link_tag "/yui/build/fonts/fonts-min.css" %>
<%= stylesheet_link_tag "/yui/build/datatable/assets/skins/sam/datatable.css" %>
<%= stylesheet_link_tag "/yui/build/container/assets/skins/sam/container.css" %>

<!-- YUI JS Dependencies -->
<%= javascript_include_tag "/yui/build/yahoo-dom-event/yahoo-dom-event.js" %>
<%= javascript_include_tag "/yui/build/element/element-beta-min.js" %>
<%= javascript_include_tag "/yui/build/datasource/datasource-beta-min.js" %>
<%= javascript_include_tag "/yui/build/dragdrop/dragdrop-min.js"  %>

<!-- YUI JS Source files -->
<%= javascript_include_tag "/yui/build/animation/animation-min.js" %>
<%= javascript_include_tag "/yui/build/datatable/datatable-beta-min.js" %>
<%= javascript_include_tag "/yui/build/container/container-min.js" %>
<%= javascript_include_tag "/yui/build/connection/connection-min.js" %>