Yahoo! UI Library ＞ Yahoo! UI Libraryの構成
2007年01月09日
Yahoo! UI Library内のバリエーション
Yahoo! UI LibraryにはVer 0.1.22 時点で２０種類のライブラリが含まれ、大きく分けると４つに分類されます。基本的に必要なライブラリを選択して利用します。
1.YAHOO ・・・ Yahoo! UI Libraryのベース部分になります。
2.YAHOO.util ・・・ 主にユーティリティです。
3.YAHOO.widget ・・・ 主にウィジェット（部品）です。
4.CSS関連 ・・・ ブラウザに依存しないCSSの集合。単独で利用できます。
CSS以外の各々のフォルダには、jsファイルが複数入っていますが、基本的には、[名称].js（通常版）、[名称]-debug.js（デバッグ版）、[名称]-min.js（圧縮版）の３種類のJavascriptファイルがあります。テスト時は「デバッグ」または「通常版」、実際にサイトで使う場合には「圧縮版」を利用しましょう。
YAHOO
"yahoo"フォルダに定義されています。これがyahoo.jsがYUIの本体になります。
ソースを見れば分かりますが、YAHOOという名称のオブジェクトが全ての基本になります。毎回この名称を宣言するのが嫌でこのライブラリを利用しない人も中にはいるようですが、別名を付けてやることで最初の１行だけの宣言で済みます。
[例]
var Y = YAHOO;
Y.util.・・・
更に"."が付きすぎるとJavascriptの処理が重くなるので、YAHOO.utilとYAHOO.widgetも別名を付けると便利です。
[例]
var Y = YAHOO;
var YU = Y.util;
var YW = Y.widget;
これで、あまり違和感なくYahoo! UI Libraryを使えると思います。
YAHOO.util
１．animation
アニメーション部分を統括したユーティリティです。
２．connection
主にAjaxを用いる為に利用されるユーティリティです。
３．container
コンフィグとキーリスナーのユーティリティです。
※Containerは一部YAHOO.util、一部YAHOO.widget
４．dom
DOMへのアクセスを行う為のユーティリティです。
５．dragdrop
ドラッグ＆ドロップを行う為のユーティリティです。
６．event
イベントの登録・実行を行う為のユーティリティです。
７．utilities
１～６のセット。全て利用するならこれ一つでＯＫ。
８．yahoo-dom-event
４(dom)と６(event)のセット。
YAHOO.widget
１．autocomplete
オートコンプリート用のパーツ。
２．calendar
カレンダー用のパーツ。
３．container
ダイアログやパネル、ツールチップなどのパーツ。
※Containerは一部YAHOO.util、一部YAHOO.widget
４．logger
ログの読み書きを行うツール。
５．menu
メニュー用のパーツ。
６．slider
スライド用のパーツ。
７．tabview
タブビュー用のパーツ。
８．treeview
ツリービュー用のパーツ。
CSS
ただのスタイルシートなので、特にYAHOO UI! Libraryを利用しない場合でも使えます。というよりも、どんなサイトでもreset.cssとfonts.cssを定義しておけば、ブラウザごとの表示の違いをある程度吸収してくれるのでかなり便利です。
１．reset
スタイルシートを初期化して、ブラウザ間の異差をなくします。
２．fonts
フォントの初期化、バグの吸収を行います。
３．grids
レイアウトを設定するスタイルシートです。
４．reset-fonts-grids
１～３のセット。
その他
それ以外にも名称の予約があるので注意しましょう。
1.YAHOO.example ・・・ サンプル作成用。主にツールキットのexamplesで利用されている。
2.YAHOO.extend ・・・ クラス継承用。既存のクラスの継承時に利用する。
まとめ
上記の中から必要なライブラリを選択して利用します。最初は分かりづらいですが、徐々に慣れていくのが吉。ちなみにYAHOO.widgetのほとんどはYAHOO.utilや他のYAHOO.widgetとの依存があるので注意してください（分からなければ”utilities.js”をインクルード）。
各々の詳細に関しては、ドキュメント及び、サンプルが附属しているのでそれを参照すると分かりやすいと思います。
【トラックバック】
このエントリーのトラックバックURL:
