よくある「コード入力で名称表示」部品をdojoで作ってみる

Written on Apr 22, 2008. Posted in dojo

dojoはすでにRelease Versionが1.1となっていて、昨年から今までにかけて、かなりのスピードで進化している。昔のVersion 0.4.3と比較すると、コンポーネントの作り方などに大きな変更が入っていたりする。本職でdojoを使う機会も多いので、ここでは代表的なカスタムコンポーネントの作り方を紹介してみよう。

代表例とは「コード入力とその名称の表示」部品。商品コードを入力すると、その脇に商品名が自動的に表示される、というものだ。

ちなみに、dojoは以下のサイトから1.1を入手する。

http://dojotoolkit.org/downloads

入手後、Webサイトの任意のコンテキスト内に配置する。多くの場合、jsとかjavascriptsとか、JavaScriptコードのファイルを配置する専用のディレクトリを作成する。今回は、以下のようなレイアウトとしてみる。

+– index.html +– js 　+– dojo 　+– dijit 　+– dojox 　+– util 　+– jp 　　+– eisbahn 　　　+– CodeInputField.js 　　　+– CodeInputField.html

最初に、CodeInputField.jsファイルから。

dojo.provide(“jp.eisbahn.CodeInputField”); dojo.require(“dijit.form._FormWidget”); dojo.declare( “jp.eisbahn.CodeInputField”, dijit.form._FormWidget, { templatePath: dojo.moduleUrl(“jp.eisbahn”, “CodeInputField.html”), setValue: function(value) { this.code.value = value; this._onChange(null); }, getValue: function() { return this.code.value; }, _onChange: function(evt) { var v = this.getValue(); if (v == ‘1’) { this.displayName.innerHTML = ‘PC-8801MH’; } else if (v == ‘2’) { this.displayName.innerHTML = ‘FM-77L2’; } else { this.displayName.innerHTML = ‘’; } } } );

dojo.provide()関数により、このモジュールの宣言を行い、dijit.form._FormWidgetを継承して、dojo.declare()関数によりjp.eisbahn.CodeInputFieldクラスを宣言している。_FormWidgetクラスを継承することにより、getValue()およびsetValue()関数の作成が求められる。コード入力フィールドのonChangeイベントに対応するために、_onChange()関数を作成してある。ここでは、入力値によって、固定的に名称を表示している。

上記のコード中で、this.codeやthis.displayといった変数を使用しているが、これが何を指すのかは上記だけではわからない。templatePathに、CodeInputField.htmlファイルを指定しているのだが、このHTMLファイルに答えが隠されている。

${label}：

このHTMLは、CodeInputField部品のテンプレート、つまりHTMLの断片となる。${…}で囲まれた部分は、このコンポーネントを使用する際に指定したパラメータ値で置換される。これについては、index.htmlファイルを見ていくときに再度紹介するとして、ここではdojoAttach〜に注目。

まずはdojoAttachPoint属性。これにより、JavaScriptコード中から対象DOM要素を変数でアクセスできるようになる。dojoAttachPoint=”code”およびdojoAttachPoint=”displayName”が付加されている要素が、先のthis.〜で参照していたものになる。JavaScriptコードの中でdocument.getElementById()などを使用する必要がなくなり、さらにこのコンポーネントが複数個配置された場合なども気にせず使えるので、非常に便利な機能だ。

さらに、dojoAttachEvent属性も非常に強力。これによって、対象DOM要素でのイベントハンドラを登録することができる。ここで注意点として、”onChange:_onChange”ではダメ。イベント名は全て小文字にして記述しないといけない。これのために半日を無駄にすることも多々あるので、dojoAttachEvent使用時には最新の注意が必要だ。

最後に、index.htmlを見てみよう。これは、CodeInputField部品を実際に使う記述がなされる。

Custom Component Test

基本的に、dojoType属性にCodeInputFieldクラス名を記述するだけで、そのdiv要素がコード入力部品に自動的に置き換わる。テンプレートのHTML内で”${name}”や”${label}”という記述があったが、上記のname属性やlabel属性の値で置き換わる。部品を使う側でカスタマイズができるようになるので、活用すべきものだろう。

JSPのカスタムタグを開発しているような感覚を、dojoが提供してくれる。これは実際の大規模案件でも非常に有効なテクニックなので、ぜひチャレンジしてみてほしい。