XUL Tutorial:XBL Inheritance

出典: MDC

このセクションでは、既存の XBL 定義を拡張する方法について見ていきます。

[編集] バインディングの継承

新たに作成したいと考えている XBL ウィジェットが既存のウィジェットに類似していることは、しばしばあると思います。 例えば、 XBL でポップアップの付いたボタンの作成を行いたい場合、 作成するボタンのために既存の XBL コードをコピーして使用するのも 1 つの方法ですが、 既存のボタンのコードから派生させて、単純に拡張する部分だけを作成すれば済むのであれば、 それに越したことは無いはずです

どんなバインディングでも、他のバインディングの拡張として派生させることができます。 派生したバインディングに対しては、プロパティやメソッド、イベントハンドラを追加することが可能です。 また、派生バインディングは、継承元になるバインディング (および、継承ツリーで更に上流にあるバインディング) が定義するすべての機能を持っています。

バインディングを、既存のバインディングの拡張として派生させるためには、binding タグに extends 属性を追加します。 例えば、以下のバインディングは、F4 キーが押された場合に、 値の先頭に「http://www」というテキストを追加する機能をもったテキスト入力欄を作成します。

Example 1 : ソース

<binding id="textboxwithhttp"
         extends="chrome://global/content/bindings/textbox.xml#textbox">
  <handlers>
    <handler event="keypress" keycode="VK_F4">
      this.value="http://www"+value;
    </handler>
  </handlers>
</binding>

この XBL は、XUL の textbox 要素を拡張しています。 上記の extends 属性に設定されているバインディングの URL は、textbox のためのバインディングの URL になります。 この指定によって、このバインディングには textbox のバインディングが提供するコンテントと振る舞いがすべて継承されることになります。 また、それに加えて、キーの押下イベントに応答するハンドラを追加しています。

[編集] 自動補完機能つきのテキスト入力欄

前述の例は、Mozilla の URL 自動補完機能の仕組みと類似しています。 自動補完をサポートしたテキスト入力欄も、基本となるテキスト入力欄を拡張した XBL バインディングを持っているだけです。

自動補完機能つきのテキスト入力欄には、 URL が打ち込まれていくたびに補完候補のメニューをポップアップ表示するために、新たなイベント処理が追加されています。 この自動補完つきの入力欄は、独自のアプリケーションからでも使用できます。 このために必要なことは、単に 2 つの拡張属性を設定したテキスト入力欄を作ることだけです。

<textbox type="autocomplete" searchSessions="history"/>

既存のテキスト入力欄に自動補完機能を追加するためには、type に autocomplete を設定します。 また、補完のために探すデータの種類を指示するために、searchSessions を設定します。 この場合は、値として history を使用しているため、アクセス履歴にある URL を探すことになります。 (アドレスブックにあるアドレスを探すために、addrbook という値も使用できます)。

次のセクションでは、XBL で定義したウィジェットの例を見ていきます。