今回からUIウィジェットの紹介!

今回からいよいよ、Dijitが持つ多彩なUIウィジェットを詳解していく。

今回はテキストフィールドやチェックボックスといった、標準的なHTMLでもサポートされている入力フォームを紹介する。そうした標準的な部品が、Dijitではどのように強化されているか、という点から説明する。

チェックボックス、ラジオボタン、トグルボタン

対応するクラス

  • dijit.form.CheckBox
  • dijit.form.RadioButton
  • dijit.form.ToggleButton

利用例

チェックボックス、ラジオボタン、トグルボタン 

<input type="checkbox" dojoType="dijit.form.CheckBox" checked="checked">チェックボックス
<input type="radio" dojoType="dijit.form.RadioButton">ラジオボタン
<button jsId="tButton" dojoType="dijit.form.ToggleButton" label="トグルボタン:オフ">
  <script type="dojo/method" event="onClick">
    if (tButton.checked) tButton.setLabel("トグルボタン:オン");
    else tButton.setLabel("トグルボタン:オフ");
  </script>
</button><br>

説明

まず紹介するのは、チェックボックスとラジオボタンだ。標準HTMLでも、checkboxやradioといったtype属性を持つinput要素として提供されているこれらの部品は、機能的にはほとんど標準のものと違いがない。また、「値のON/OFF」を行えるウィジェットとして、「トグルボタン」も提供されている。利用方法も、dojoType属性に正しいクラス名を指定する以外は注意するところがない。

トグルボタンにだけは少し注意が必要だ。トグルボタンは、内部的にはチェックボックスと同じく「checked」と言う属性を保持しており、ボタンを押すたびにtrue/falseが切り替わるようになっている。しかし見た目上は全く変化がないので、現在ボタンが押された状態なのかどうかが全くわからない。そのため、上のサンプルコードではクリックされるたびにONかOFFかを調べ、ボタンのラベルを変更することで現在の状態を把握できるようにしている。

属性

  • checked……ウィジェットのON/OFFを表す属性。タグの属性として指定する場合は「checked="checked"」のように指定する。JavaScriptコードでこの属性を利用する場合は、Boolean型の値として扱うことができる

メソッド

  • setValue(/*Boolean*/ checked)……値のON/OFFをセットする

拡張ポイント

  • onClick(/*Event*/ e)……クリック時に発生するイベント

ボタン

対応するクラス

dijit.form.Button

利用例

マイコミアイコンボタン 

<style type="text/css">
.customButtonIcon {
  background-image: url(http://journal.mycom.co.jp/favicon.ico);
  background-repeat: no-repeat;
  width: 18px;
  height: 18px;
  text-align: center;
}
</style>
<button dojoType="dijit.form.Button" label="クリック!"
  iconClass="customButtonIcon">
  <script type="dojo/connect" event="onClick">
    alert("aaa");
  </script>
</button>

説明

言わずとしれた、ボタンウィジェットだ。標準的なボタンと異なるのは、label属性を用いて表示されるテキストを制御できること、iconClass属性を用いてアイコンをセットできることだ。これらの属性の使用方法は、サンプルコードを参照のこと。

属性

  • iconClass……ボタンにアイコンを表示するためのCSSクラス名
  • label……ボタンのラベル
  • showLabel……ラベルを表示するかどうか

メソッド

  • setLabel(/String/ label)……ラベルをセットする

拡張ポイント

  • onClick(/*Event*/ e)……クリック時に発生するイベント

テキストエリア

対応するクラス

  • dijit.form.SimpleTextarea
  • dijit.form.Textarea

利用例

テキストエリア 

テキストエリア:
<textarea dojoType="dijit.form.Textarea" style="width: 100px"></textarea>

説明

複数行の文字列を入力可能なテキストエリアで、SimpleTextAreaとTextAreaの2種類がある。

SimpleTextAreaは、標準的なtextareaタグとほとんど変わらない(が、Dijitを利用するならば必ずこのウィジェットを使おう)。

Textareaは、入力された値に応じて、テキストエリアの高さが変化するのが最大の特徴だ。そのため、従来のテキストエリアがサポートしていたrows属性や、CSSのheight属性などを使って高さを固定してはならない。 　

まとめ

今回はここで字数がつきてしまったのでここまで。今回紹介したウィジェットは、標準のHTMLとの乖離が比較的少ないものばかりだったので理解しやいだろう。

次回は各種テキストフィールドと、Formウィジェットを紹介する。