入力フォームウィジェットを自作するには

ではさらに、入力フォームを自作するための方法を学んでいこう。入力フォームを自作するには、以下のような条件を満たせばよい。

• dijit.form._FormWidgetを継承する
• setValue()メソッドとgetValue()メソッドをオーバーライドする
• HTMLテンプレート内では、ウィジェットのフォーカスに対応できるよう、dojoAttachPointにfocusNodeを指定したDOMを用意する。

入力フォーム自作のサンプルとして用意したのは、以下のようにして貼り付けるだけで都道府県の一覧が表示される選択リストだ。

    <!-- 都道府県の一覧が表示される -->
    <div dojoType="mycom.TodouhukenSelect"></div>

図8 都道府県選択リスト

サンプルを単純にするため、selectタグのmultiple属性やsize属性については考慮しないものとする。

ではまず、このウィジェットのHTMLテンプレートを見てみよう。

    <select dojoAttachPoint="focusNode,todouhukenList" name="${name}>
    </select>

単にselectタグが1つあるだけ、と言う非常に単純なものだ。注目すべきはdojoAttachPoint属性の値だ。カンマで区切って、複数の値が指定されていることがおわかりだろう。

まず、先に挙げた入力フォームの条件を満たすため、「focusNode」が指定されている。これにより、このウィジェットにフォーカスを当てると、このselectが選択されるようになる。

次に指定されているのは「todouhukenList」だ。先ほども説明したが、dojoAttachPointは「ウィジェットクラス内で、テンプレート内のDOMを参照できる変数」として扱われる。つまり、ウィジェットクラス内で「todouhukenList」と言う変数を参照すると、このselectタグを表している、ということだ。

以下に示すウィジェットのソースコードで、todouhukenListと言う変数を前触れなしに参照していることを確認していたいたきたい。あわせて、以下の点にも注目だ。

1. setValue()、getValue()のオーバーライド
2. postCreate()を用いたウィジェットの初期化

リスト4 mycom/TodoufukenSelect.js

    dojo.provide("mycom.TodouhukenSelect");

    dojo.require("dijit.form._FormWidget");

    dojo.declare(
      "mycom.TodouhukenSelect",
      dijit.form._FormWidget,
      {
        // 都道府県の一覧
        todouhukenMap: {
           "01":"北海道","02":"青森県" ,"03":"岩手県" ,"04":"宮城県" ,"05":"秋田県" ,"06":"山形県" ,"07":"福島県",
           "08":"茨城県" ,"09":"栃木県" ,"10":"群馬県" ,"11":"埼玉県" ,"12":"千葉県" ,"13":"東京都" ,"14":"神奈川県",
           "15":"新潟県" ,"16":"富山県" ,"17":"石川県" ,"18":"福井県" ,"19":"山梨県" ,"20":"長野県" ,"21":"岐阜県" ,"22":"静岡県" ,"23":"愛知県",
           "24":"三重県" ,"25":"滋賀県" ,"26":"京都府" ,"27":"大阪府" ,"28":"兵庫県" ,"29":"奈良県" ,"30":"和歌山県",
           "31":"鳥取県" ,"32":"島根県" ,"33":"岡山県" ,"34":"広島県" ,"35":"山口県" ,"36":"徳島県" ,"37":"香川県" ,"38":"愛媛県" ,"39":"高知県",
           "40":"福岡県" ,"41":"佐賀県" ,"42":"長崎県" ,"43":"熊本県" ,"44":"大分県" ,"45":"宮崎県" ,"46":"鹿児島県" ,"47":"沖縄県" },

        templatePath: dojo.moduleUrl("mycom","templates/TodouhukenSelect.html"),

        postCreate: function() {
          // 都道府県一覧から、選択リストのオプションを作成する
          // todouhukenListを参照していることに注意!
          var options = this.todouhukenList.options;
          for (var todouhukenCode in this.todouhukenMap) {
            options[options.length] = new Option(this.todouhukenMap[todouhukenCode], todouhukenCode);
          }
          this.inherited(arguments);
        },
        setValue: function(value) {
          // 指定された値に合致するオプションを選択する
          var options = this.todouhukenList.options;
          for (var i = 0, optCount = options.length; i < optCount; i++) {
            if (options[i].value == value) {
              this.todouhukenList.selectedIndex = i;
              break;
            }
          }
          this.inherited(arguments);
        },
        getValue: function() {
          // 選択されているオプションの値を返す
          var list = this.todouhukenList;
          return list.options[list.selectedIndex].value;
        }
      }
    );

まとめ

今回も、かなり盛りだくさんの内容であったが、いかがだったであろうか。

マークアップによるUIプログラミングはDojo固有のものであるが、圧倒的な開発生産性を提供する。DojoのUIウィジェットに対応したWYSIWYGなツールが登場するのも、それほど先の話ではないだろう。

上級者向けに`dojo.data`やウィジェットの自作など、かなり高度な内容も紹介したが、Dijit自体は決して難しいものではないので誤解しないでいただきたい。

記事の最初にも申し上げたが、より幅広い読者を対象としたフォロー記事をまもなく予定しているので、乞うご期待!