XUL チュートリアル - XBL 属性の継承

このセクションでは、どうすれば属性が継承できるか見ることにしましょう。

継承された属性

XBL を使えば、実際の実装を隠しながら、複合ウィジェットを作ることができます。しかし、これまでに述べてきた機能を使えば、無名内容は、いつも同じやり方で作ることができます。結び付けられた要素に、内側の要素を変更する属性を追加できれば役に立つでしょう。例えば、スクロールバーは、次のようにして作ることができます。

XUL:

<scrollbar curpos="5" maxpos="100" increment="1" pageincrement="5">

XBL:

<binding id="scrollbarBinding">
  <content>
    <xul:scrollbarbutton type="decrement"/>
    <xul:slider flex="1"/>
    <xul:scrollbarbutton type="increment"/>
  </content>
</binding>

しかしながら、scrollbar に置かれた curpos などの属性はどうなるのでしょうか。これらの属性は、実際には、slider に移したいのです。inherits 属性を使えば、これは可能です。これは、属性を継承する要素に置きます。この場合は、スライダーです。その値は、継承させたい属性名をカンマで区切ったリストに設定します。

<xul:slider flex="1" inherits="curpos,maxpos,increment,pageincrement"/>

内容が生成されると、slider は、scrollbar から継承された属性を捉えます。更に、スクロールバーの属性が変化すると、スライダーも更新されます。inherits 属性は、必要となるどんな数の要素にも追加できます。それによって、属性を幾つでも継承できます。

属性を継承する以外に、内側の要素にも属性の指定ができます。これによって、属性が存在しない場合の、デフォルト値の設定ができます。例えば、次の例を見て下さい。

<bindings xmlns:xbl="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">

<xbl:binding id="buttonBinding">
  <xbl:content>
    <xul:button label="OK" xbl:inherits="label"/>
  </xbl:content>
</xbl:binding>

このボタンは、その label 属性を外側の要素から継承します。しかし、 label 属性がなければ、OK というデフォルト値になります。

XBL というネームスペースを明示的に指定しなければならない点に注意して下さい。これは、inherits 属性が XBL に由来するもので XUL 要素では何の意味ももたないからです。(実際には、現在の Mozilla はネームスペースが何であろうと頓着しません。)

生成された 2 つの要素が同じ名前の属性を継承する必要がある場合があるかもしれません。例えば、ラベル付きのボタン (横にテキストによる説明のあるボタン) を作るためには、テキストウィジェットは、label と button 要素から description 属性のテキストを継承する必要があります。ボタンも同様です。これを解決するには別の属性を使い、それを同じ要素にマップする必要があります。以下の例は、これを示しています。

XUL:

<box class="labeledbutton" title="Click this button:" label="OK"/>

CSS:

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

XBL:

<binding id="labeledbutton">
  <content>
    <xul:description inherits="value=title"/>
    <xul:button inherits="label"/>
  </content>
</binding>

button は、label 属性を、直接、継承します。テキストウィジェットに label を設定するには、別の属性名を使い、それを値にマップする必要があります。ここでは、テキスト要素の inherits 属性は、labeledbutton の title 属性を捉え、それを description 要素の value 属性にマップしています。シンタックス <inner attribute>=<outer attribute> を使って、ある属性を別の属性にマップします。次のコードは別の例です。

XUL:

<box class="okcancel" oktitle="OK" canceltitle="Cancel" crop="right"/>

CSS:

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

XBL:

<binding id="okcancel">
  <content>
    <xul:button inherits="label=oktitle,crop"/>
    <xul:button inherits="label=canceltitle"/>
  </content>
</binding>

oktitle 属性の値は、最初のボタンの label 属性にマップされ、canceltitle 属性は、2 番目のボタンの label 属性にマップされます。最初のボタンは crop 属性も継承しています。その結果は、次のようになります。

<box class="okcancel" oktitle="OK" canceltitle="Cancel" crop="right">
  <button label="OK" crop="right"/>
  <button label="Cancel"/>
<okcancel>

属性が内部の (無名) 内容で複製されている点に注意して下さい。okcancel クラスをもつボックスの属性を変更すると、ボタンの値も自動的に更新されます。自分自身の属性名を作ったことにも気が付いたかもしれません。これは妥当です。

(進む) 次のセクションでは、バインディングへのプロパティー、メソッド、イベントの追加を見ることにしましょう。