マークアップを使用して柔軟なレイアウトを行ったり、ツールバーや右クリックメニュー、ダイアログやグリッドなど、非常に高度なUIウィジェットが利用できるのも、Dojoの強みだ。字数の都合上、詳細な解説が行えないのが残念だ。Dojoには、レイアウトをふんだんに使用した以下のようなサンプルが付属しているので参考にしてほしい。

レイアウトに関するもの

図6 レイアウトのデモ

dijit.layout.ContentPane レイアウトの単位となる表示領域。href属性による別ページの読み込みが可能
dijit.layout.StackContainer 複数のペインのうち常に1つだけが前面に表示されるレイアウト
dijit.layout.AccordionContainer アコーディオンのように開閉するタイトルバーを用いて複数のペインを切り替えるレイアウト
dijit.layout.LayoutContainer 下左右/中央という位置を指定してペインの配置を行うレイアウト
dijit.layout.SplitContainer ペインごとに画面分割/サイズの変更が可能なレイアウト
dijit.layout.TabContainer タブ形式でペインを切り替えるレイアウト

ダイアログメニュー

dijit.Dialog ダイアログ。この要素に囲まれたHTMLを、モーダルなダイアログとして表示する。別ページの読み込みも可能
dijit.TooltipDialog ツールチップのように表示されるダイアログ。画面の他の場所をクリックするとダイアログは消える
dijit.Toolbar アイコンを並べて表示するツールバー
dijit.Menu ComboButton、DropDownButton、右クリックなどで使用されるメニュー
dijit.MenuItem メニュー項目
dijit.PopupMenuItem サブメニューを表示するためのメニュー項目
dijit.MenuSeparator メニュー間の区切り線
dijit.PopupMenuItem サブメニューを表示するためのメニュー項目
dijit.MenuSeparator メニュー間の区切り線
dijit.TitlePane タイトルバーを持ち、開閉が可能なペイン
dijit.Tooltip ツールチップ。HTMLを利用できる

その他

dijit.ColorPalette 色選択パレット
dijit.Editor 高機能なエディ
dijit.ProgressBar 進捗バー
dijit.Tree ツリー
dijit.InlineEditBox クリックすると編集を行える表示領域。編集には、各種テキストボックスやテキストエリアが利用可能

実験的(代表的なもの)

dojox.charting.widget.Chart2D 2次元のチャート
dojox.Grid 2次元のグリッド
dojox.image.ThumbnailPicker 画像のサムネイルを一列に表示するウィジェット
dojox.image.SlideShow 画像をスライドショーで表示
dojox.image.Gallery ThumbnailPickerとSlideShowを組み合わせたウィジェット
dojox.image.Lightbox 画像のLightbox風表示を行う
dojox.presentation.*
dojox.widget.SortList ソートが可能なリスト
dojox.widget.FileInput 見た目のカスタマイズが可能なファイル入力フォーム