UIウィジェットの紹介

ここからは、Dojoが提供しているUIウィジェットにはどういったものがあるかを紹介していく。字数の制限もあるため、ウィジェットの一覧と、使い方に少しコツが必要だと思われるウィジェットに絞って解説を行う。完全なリファレンスは、Dojoのドキュメント を参照していただきたい。英語のドキュメントではあるが、ウィジェットの使い方をきちんと押さえていれば読みこなすのは難しくない。

これらのウィジェットの多くは、HTMLが標準でサポートしているフォーム要素 (<input>や<select>など) と機能はほぼ同じだ。それでもDijitのウィジェットを使う理由は、Dojoのテーマに沿った見た目で統一されていること。また、値の検証やフォーマット機能を持つテキストフィールド、コンボボックスやスライダーなど、標準HTMLにはないリッチな機能を持つウィジェットも存在する。

フォーム要素各種

ウィジェットのクラス 説明
dijit.form.Form formタグに置換されるが、さまざまな違いを持つ
dijit.form.Button シンプルなボタン。ボタンのラベルはlabel属性、もしくはタグ内部に記述する。ラベルにHTML要素を使用することも可能
dijit.form.DropDownButton クリックするとプルダウンメニューが表示されるボタン
dijit.form.ComboButton 複数の選択候補を持つボタン
dijit.form.ToggleButton 通常/押下の2つの状態を持続するボタン
dijit.form.CheckBox チェックボックス
dijit.form.RadioButton ラジオボタン
dijit.form.TextBox シンプルなテキストボックス
dijit.form.Textarea テキストエリア。入力された内容に従って高さが変化する
dijit.form.ValidationTextBox 正規表現やカスタムの関数を用いて、値の検証を行えるテキストボックス
dijit.form.NumberTextBox 数値の入力に特化したテキストボックス。入力形式のチェック、表示の自動フォーマットが行われる
dijit.form.CurrencyTextBox 金額の入力に特化したテキストボックス。入力形式のチェック、表示の自動フォーマットが行われる
dijit.form.TimeTextBox 時間の入力に特化したテキストボックス。フォーカスが当たるとタイムテーブルが表示される
dijit.form.DateTextBox 日付の入力に特化したテキストボックス。フォーカスが当たるとカレンダーが表示される
dijit.form.FilteringSelect キー入力も可能な選択リスト
dijit.form.ComboBox 候補からの値の選択も可能なテキストボックス
dijit.form.NumberSpinner 一定間隔による数値の増減が可能なボタンを持つテキストボックス
dijit.form.HorizontalSlider 横方向のスライダ
dijit.form.VerticalSlider 縦方向のスライダ