次は、XBL で定義された要素にカスタムプロパティーを追加する方法を見ることにしましょう。
JavaScript と DOM には、要素のプロパティーの取得と設定のためのアクセス手段があります。XBL を使えば、自分で作った要素に自分のプロパティーが定義できます。呼び出すことのできるメソッドを追加することもできます。このために必要なのは、(GetElementById か似た関数を使って) 要素への参照を取得し、次に追加プロパティーの取得と設定を行ない、メソッドを呼び出すだけです。マウスクリックやキーの押し下げなど、要素に渡されるイベントのデフォルトハンドラーを定義することもできます。
プロパティーとメソッドは、implementation 要素内で定義できます。これは、binding 要素の子供にします。implementation 内には、それぞれ必要な個々の property と method 要素を定義します。一般的なシンタックスは次の通りです。
<binding id="element-name">
<content>
-- 内容がここに来る --
</content>
<implementation>
<property name="property-name-1"/>
<property name="property-name-2"/>
<property name="property-name-3"/>
.
.
.
<method name="method-name-1/>
-- メソッドの内容がここに来る --
</method>
.
.
.
</implementation>
</binding>
|
個々のプロパティーは、 property 要素を使って定義します。しばしば、プロパティーは label や disabled など、要素に置かれた属性に対応しますが、そうでなければならないという訳ではありません。
property 要素の name 属性を使って、プロパティーの名前を指示します。この名前は、その値の取得と設定のためスクリプトから使用することができます。下の例は、乱数を生成したり保存するためのボタンを作っています。ボタンの number プロパティーを取得することにより、同じ数を何度も検索することができます。ここでの仕事のほとんどは、onclick ハンドラーで行なわれています。後で、これを XBL に移す方法を見ることにします。
XUL:
<box id="random-box" class="randomizer"/>
<button label="Generate">
onclick="document.getElementById('random-box').number=Math.random();"/>
<button label="Show"
onclick="alert(document.getElementById('test-id').number)"/>
XBL:
<binding id="randomizer">
<implementation>
<property name="number"/>
</implementation>
</binding>
|
number プロパティーは、バインディングで定義されています。これは、乱数を保存するものです。追加したボタンを 2 つ使って、このプロパティーの値の設定と取得を行ないます。そのシンタックスは、HTML 要素のプロパティーの取得と設定によく似ています。この例では、XUL ボックスにも XBL 内のその定義にも、まったく内容はありません。これは、完全に妥当です。
この例は、まったく正しいという訳ではありません。プロパティーにデフォルト値が割り当てられていないからです。このため、property タグの内容としてデフォルト値を追加します。次の例を見て下さい。
<property name="number"> 25 </property> |
ここでは、number プロパティーのデフォルト値に 25 を割り当てています。実際には、こうする代わりに、property タグ内に、デフォルト値を評価するスクリプトを置くこともできます。値を計算する必要がある場合には、こうする必要があるかもしれません。例えば、次のプロパティーは、現在時刻と同じ値をデフォルトにしています。
<property name="currentTime"> new Date().getTime(); </property> |
時には、プロパティーに割り当てるデータをチェックしたい場合があるでしょう。また、必要に応じて、動的に値の計算がしたいかもしれません。例えば、現在時刻を保持するプロパティーが欲しい場合、必要な時に値を生成したいはずです。
これをコントロールするには、onget と onset 属性が使えます。それぞれを property 要素に追加し、その値を、プロパティーの値の取得や設定を行なうスクリプトに設定します。
例えば、現在時刻を計算するため、スクリプトを onget に割り当てます。スクリプトがプロパティーの値にアクセスするたびにその値を検索するため、onget が呼び出されます。スクリプトは、そのプロパティーの値として扱われるべき値を返します。
onset ハンドラーも似ていますが、スクリプトを使ってプロパティーに新しい値を割り当てる場合に呼び出されます。このスクリプトは、値をどこかに保存するとき、その値をチェックすべきでしょう。例えば、プロパティーによっては、数値だけを保存できるものがあります。こうしたプロパティーにアルファベットからなるテキストを割り当てようとすると、エラーにすべきです。
特殊変数 val は、プロパティーに割り当てるべき値を保持します。これを使って、値を取得し、そのチェックを行ない、値を割り当てます。onset も新しい値を返すべきでしょう。
以下では、典型的な場合、何が起こるのか説明します。
'banana' と 'orange' という名前の要素が 2 つあります。そこには、'size' という名前のカスタムプロパティーがあります。次のスクリプトを実行します。
banana.size = orange.size; |
onget と onset 属性はオプションです。そのどちらかだけ設定することもできれば、その両方を設定することもできます。いずれも設定しないことも可能です。それらを設定しない場合、値は特殊な処理をされることなく保存され検索されるだけです。これが、前の乱数の例の内容です。
property タグには、'element.property' というシンタックスを使ってスクリプトからアクセスできるプロパティーを定義します。プロパティーを XBL で定義された要素の属性と一致させることがよくあります。次の例は、プロパティーを要素の属性にマップしています。
<property name="size"
onget="return this.getAttribute('size');"
onset="return this.setAttribute('size',val);"
/>
|
スクリプトによってプロパティーの値を取得しようとするときはいつでも、プロパティーではなく要素の同じ名前の属性が取得されます。スクリプトによって値を設定しようとするときはいつでも、値は要素の属性に設定されます。このようにすると、プロパティーや属性を変更しても、両方は同じ値になるので便利です。
onget と onset 属性には別のシンタックスが使えます。これは、スクリプトが長い場合に役立ちます。onget 属性は、getter という名前の子供要素で置き換えることができます。同様に、onset 属性は、setter 要素で置き換えることができます。以下はこの例です。
<property name="number">
<getter>
return this.getAttribute('number');
</getter>
<setter>
var v=parseInt(val);
if (!isNaN(v)) return this.setAttribute('number',''+v);
else return this.getAttribute('number');"
</setter>
0
/>
|
このプロパティーは整数値だけを保持できます。それ以外の文字を入力すると拒否されます。数値でなければ、値は変更されません。これは、setter 要素内のコードで行なわれています。プロパティーの実際の値は、number 属性に保存されます。
取得や設定を行なうハンドラーを作る場合、どちらのシンタックスでも使えます。
property タグに readonly タグを追加し、それを true に設定することにより、プロパティーを読み取り専用にすることができます。読み取り専用のプロパティーに値を設定しようとすると、エラーになります。
(進む) 次のセクションでは、XBL で定義された要素にメソッドを追加する方法を見ることにしましょう。