XUL チュートリアル - XBL 入門

XUL には姉妹言語 XBL (eXtensible Bindings Language) があります。この言語は、XUL ウィジェットの振る舞いを宣言するのに使われます。

バインディング (Binding)

XUL を使えば、アプリケーションのユーザーインターフェースのレイアウトを定義することができます。それらにスタイルを適用することによって、要素の外見をカスタマイズできます。また、スタイルを変更することによって、新しいスキンを作ることもできます。スクロールバーやチェックボックスなどすべての要素の基本的な外見は、スタイルを調整するか、要素に属性を設定することによって変更できるかもしれません。しかし、XUL には、どのように要素が動作するかを変更する手段がありません。例えば、スクロールバーの一部が動作する方法を変更したいとします。このためには、XBL が必要になります。

XBL ファイルは、バインディングのセットからなります。個々のバインディングには、XUL ウィジェットの振る舞いを記述します。例えば、バインディングは、スクロールバーに張り付けられるかもしれません。振る舞いには、スクロールバーを作り上げる XUL 要素を記述する以外に、スクロールバーのプロパティーとメソッドを記述します。

XUL と同様に、XBL は XML 言語です。そのため、それは似たシンタックスルールをしています。以下の例は、XBL ファイルの基本的なスケルトンを示しています。

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="binding1">
    <!-- 内容、プロパティー、メソッド、イベントの記述がここに来る -->
  </binding>
  <binding id="binding2">
    <!-- 内容、プロパティー、メソッド、イベントの記述がここに来る -->
  </binding>
</bindings>

ここには、2 つのバインディングが宣言されています。一つはスクロールバーに張り付けられ、もう一つはメニューに張り付けられるかもしれません。バインディングは、どの XUL 要素にも貼り付けることができます。CSS クラスを使う場合、様々なバインディングを必要なだけ使うことができます。上のテンプレートの bindings 要素にあるネームスペースに注意して下さい。これは、XBL シンタックスを使うことを宣言するものです。

bindings 要素は、XBL ファイルのルート要素です。これは、一つかそれ以上の binding 要素からなります。個々の binding 要素によって、それぞれのバインディングを宣言します。id 属性は、上の例で示しているように、バインディングを識別するのに使うことができます。テンプレートには、バインディングが 2 つあります。一つは、binding1 という名前で、もう一つは、binding2 という名前です。

CSS プロパティー -moz-binding を使って、要素にバインディングを割り当てます。バインディングファイルの URL をこのプロパティーに割り当てます。例えば、次のようにします。

scrollbar {
    -moz-binding: url('chrome://findfile/content/findfile.xbl#binding1');
}

URL は、'chrome://findfile/content/findfile.xbl' ファイルの id 'binding1' を使って、バインディングを指しています。'#binding1' シンタックスは、指定のバインディングを指すのに使われています。これは、HTML ファイルのアンカーを指す方法と非常によく似ています。通常、バインディングはすべて、一つのファイルに置きます。この例の結果、スクロールバー要素はすべて、バインディング 'binding1' で記述された振る舞いをもつことになります。-moz-binding URL にアンカーを使用しない場合は、XBL ファイルの最初のバインディングが使用されます。

XBL は、新しいスキンを作る場合に役立ちます。スキンの作成者は XBL を変更するだけで、スクロールバー、メニューなどの外見と機能のすべてが変更できます。これが役に立つのは、バインディングをどの XUL 要素にも貼り付けることができるからです。バインディングを定義するのにネイティブ XPCOM コンポーネントを使う方法もあります。そのため、可能性は無限です。XBL ファイルは、通常、クロムの内容サブディレクトリーに置きます。スキンに固有の XBL ファイルは、スキンディレクトリーに置きます。

バインディングには、5 種類のものを宣言します。

1. 内容: バインディングが結び付けられる要素に追加される子供要素。
2. プロパティー: 要素に追加されるプロパティー。これは、スクリプトからアクセスできる。
3. メソッド: 要素に追加されるメソッド。これは、スクリプトから呼び出すことができる。
4. イベント: 要素が応答するマウスクリックやキーの押し下げなどのイベント。バインディングには、デフォルトの処理を提供するスクリプトを追加できる。更に、新しいイベントの定義ができる。
5. スタイル: XBL が定義される要素がもつカスタムスタイルプロパティー。

バインディングの例

box は汎用的なので、カスタムウィジェットを作るのに使えます (もちろん、どの要素にも、自分で作った要素であっても、使えます。) box タグに class を割り当てることによって、そのクラスに属するボックスだけにバインディングを関連付けることができます。以下は、この例です。

XUL (example.xul):

<?xml version="1.0"?>
<?xml-stylesheet href="chrome://global/skin/" type="text/css"?>
<?xml-stylesheet href="chrome://example/skin/example.css" type="text/css"?>

<window
    xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <box class="okcancelbuttons"/>
</window>

CSS (example.css):

box.okcancelbuttons {
    -moz-binding: url('chrome://example/skin/example.xbl#okcancel');
}

XBL (example.xbl):

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <binding id="okcancel">
    <content>
      <xul:button label="OK"/>
      <xul:button label="Cancel"/>
    </content>
  </binding>
</bindings>

この例は、ボックス一つからなるウィンドウを作っています。ボックスは、okcancelbuttons という class をもつように宣言されています。ファイルに関連付けられたスタイルシートは、okcancelbuttons クラスをもつボックスが、XBL ファイルで定義された特殊用途化された振る舞いをもつことを指示しています。class を使うことにより、自分自身の特殊用途化されたウィジェットを作ることができます。box 以外の要素、自分自身のカスタムタグですら、使用することができます。

次のセクションでは、XBL 各部の細部をもっと詳しく見ることにしましょう。しかし、簡潔にするため、ボタンを 2 つ、ボックス内に自動的に追加するものを例にします。一つは OK ボタン、もう一つは Cancel ボタンです。

(進む) 次のセクションでは、XBL を使った内容の生成を見ることにしましょう。