XUL Tutorial:Introduction to XBL

出典: MDC

XUL には、姉妹言語として XBL (eXtensible Bindings Language) が用意されています。 この言語を利用して、XUL ウィジェットの振る舞いを宣言することが可能です。

[編集] バインディング

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

XBL では、XUL ウィジェットの振る舞いをバインディング (binging) として記述することができ、 XBL ファイルには、記述したいくつかのバインディングをまとめて置くことができます。 例えば、スクロールバーに結びつけるためのバインディングを記述する場合、 振る舞いとしては、 スクロールバーを構成する XUL 要素についての記述に加えて、 スクロールバーのプロパティとメソッドについても記述することになります。

XUL と同様に、XBL も XML 応用言語の一種であるため、構文規則も似たものになります。 以下の例は、XBL ファイルの基本的な枠組みを示しています。

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
  <binding id="binding1">
    <!-- content, property, method and event descriptions go here -->
  </binding>
  <binding id="binding2">
    <!-- content, property, method and event descriptions go here -->
  </binding>
</bindings>

bindings 要素は、XBL ファイルにおけるルート要素になっており、 そこには、1 つ以上の binding 要素が含まれています。 それぞれの binding 要素では、個々のバインディングを宣言します。 そこに置かれている id 属性は、バインディングを識別するのに使用されることになります。 上の雛形には、2 つのバインディングがあり、 1 つは、binding1 で、もう 1 つは、binding2 です。 これらは、片方をスクロールバーに結びつけ、もう片方はメニューに結びつけるといったような具合に利用します。 バインディングは、どの XUL 要素に対しても結びつけることが可能です。 CSS クラスを使用すれば、異なったバインディングを必要なだけ利用できます。 上記のテンプレートの bindings 要素に置かれている名前空間の指定に注目してください。 これは、XBL の構文を使うことを宣言するものです。

バインディングを要素に割り当てるためには、CSS プロパティ -moz-binding に、バインディングファイルを示す URL を設定します。 例えば、次のようにします。

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

この URL は、chrome://findfile/content/findfile.xml ファイル中に置かれている binding1 という id を持ったバインディングを指しています。 ここで、#binding1 の部分の構文は、特定のバインディングを指すために使用され、これは HTML ファイルの中のアンカーを指すための方法とよく似ています。 通常、バインディングは、すべて 1 つのファイルにまとめて置きます。 この例の結果、すべてのスクロールバー要素は、 binding1 というバインディングで記述された振る舞いをもつことになります。

バインディングには、以下の 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.xml#okcancel');
}

XBL (example.xml):

<?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>

この例では、ボックスを 1 つだけ持ったウィンドウを生成しています。 このボックスは、class に okcancelbuttons を値として持つように宣言されています。 そして、この XUL ファイルのためのスタイルシートでは、okcancelbuttons クラスを持つボックスは、XBL ファイルで定義された専用のバインディングを持っていることを指示しています。 なお、バインディングの設定は、box だけでなく、独自のカスタムタグを含めて他の任意の要素に対しても使用することが可能です。

次のセクションでは、XBL についてさらに詳しく見ていきますが、 その前に、上記の例についてまとめておきます。 この例を実行した場合には、OK ボタンと Cancel ボタンの 2 つのボタンがボックスの中に自動的に追加されることになります。

次のセクションでは、XBL を使ったコンテントの生成について見ていきます。