このセクションでは、XBL を使った内容の生成を見ることにします。
XBL を使うと、別の要素の中に要素のセットを自動的に追加できます。XUL ファイルでは、外側の要素を指定するだけです。内側の要素は、XBL で記述します。これは、他のウィジェットのセットからなるウィジェットをつくるのに役立ちます。この場合でも、それは、一つのウィジェットとして参照できます。外側の要素で指定された内側の要素に属性を追加するメカニズムが提供されています。
下の例は、スクロールバーを宣言する方法を示しています (これは、実際のものより少々単純化しています)。
<bindings xmlns="http://www.mozilla.org/xbl"
xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
<binding id="scrollbarBinding">
<content>
<xul:scrollbarbutton type="decrement"/>
<xul:slider flex="1"/>
<xul:scrollbarbutton type="increment"/>
</content>
</binding>
</bindings>
|
このファイルには、binding 要素で宣言されたバインディングが一つあります。id 属性をバインディングの識別子に設定すべきです。こうすることにより、CSS の -moz-binding プロパティーから参照できるからです。
content タグは、スクロールバーに追加される無名内容 (Anonymous Content) を宣言するのに使われています。content タグ内のすべての要素は、バインディングが結び付けられる要素内に追加されます。このバインディングはスクロールバーに結び付けられると想定していますが、そうでなければならないという訳ではありません。バインディングの URI に設定された CSS -moz-binding プロパティーをもつ要素はどれも、これを使用します。
上のバインディングを使うと、下の XUL の行は、次のように拡張されます。
<scrollbar> 次のように拡張: <scrollbar> <xul:scrollbarbutton type="decrement"/> <xul:slider flex="1"/> <xul:scrollbarbutton type="increment"/> </scrollbar> |
content タグ内の内容は、スクロールバーに無名のまま追加されます。無名内容はスクリーン上に表示されますが、通常の方法では、スクリプトから取得することはできません。XUL にとって、これは、実際には多数の要素からなっているにも関わらず、一つの要素しかないものとして扱われるからです。
Mozilla ウィンドウのスクロールバーを見ると、それは矢印ボタン、スライダー、2 つめの矢印ボタンからなっているのが分かります。これは、上の XBL で表示される要素です。内容要素には XUL ネームスペースが必要であることに注意して下さい (それらは xul: 接頭辞付きです)。それらは XUL 要素であって、XBL では妥当ではないためです。このネームスペースは、bindings タグで宣言されています。XUL 要素にネームスペースを使わない場合、Mozilla は要素が XBL であると想定し、それを理解しません。そのため、要素は正しい働きをしないでしょう。
別の例を示します。今度は、ファイル名を入力するフィールドのためのものです。
<binding id="fileentry"> <textbox/> <button label="Browse..."/> </binding> |
このバインディングを要素に貼り付けることによって、要素は、テキスト入力のフィールドとその後ろに Browse ボタンをもつことになります。この内側の内容は、無名のまま作られるので、DOM を使って見ることはできません。
無名内容は、バインディングが要素に貼り付けられるといつでも自動的に作られます。しかし、要素を XUL ファイル内の scrollbar 要素に直接置くと、どうなるのでしょうか。答えは、この内容が XBL ファイルが指定するものを上書きするということです。例えば、次の XUL フラグメントを見て下さい。
<scrollbar align="vertical"/> <scrollbar align="vertical"> <button label="Overridden"/> </scrollbar> |
最初のスクロールバーは、それ自身の内容がないので、XBL ファイルで宣言されたバインディング定義から生成された内容になります。2 番目のスクロールバーにはそれ自身の内容があるので、XBL の内容ではなく、それを使います。その結果、スクロールバーらしからぬものが出来上がります。スクロールバーなどの組み込み要素は、その XBL をファイル chrome/xulBindings.xml から取得する点に注意して下さい。
このことは、content タグ内で定義された要素だけに当てはまります。XBL のプロパティーやメソッド、その他の部分は、内容が XBL のものであるのか、それともその内容が XUL のものであるのかに関わらず、利用可能です。
XBL の内容と XUL ファイルの内容の両方を表示させたい場合もあるでしょう。これは、includes 属性を使えば可能です。これを使えば XBL を使いながら、ある要素を内容内に表示できます。その値はタグ名にするか、バー (| 記号) によって区切ったタグのリストに設定します。
リストしたタグ名は、タグが空であるかどうかチェックされません。 includes 属性を使わない場合、XUL 要素内のタグはすべて XBL 内容を無視します。しかし、XBL に結び付けられた要素の内容内にあるタグが includes 属性にリストされていれば、XBL 内容とそれが結び付けられた要素の内容を追加することができます。
これを使えば、カスタムメニューウィジェットを手軽に作ることができます。例えば、 menulist 要素の簡略バージョンは、次のようにして作ることができるでしょう。
XUL:
<menu class="dropbox">
<menupopup>
<menuitem label="1000"/>
<menuitem label="2000"/>
</menupopup>
</menu>
CSS:
box.dropbox {
-moz-binding: url('chrome://example/skin/example.xbl#dropbox');
}
XBL:
<binding id="dropbox">
<content includes="menupopup">
<xul:textbox flex="1"/>
<xul:button src="chrome://global/skin/dropbox.gif"/>
</content>
</binding>
|
この例は、横にボタンのある入力フィールドを作ります。includes 属性が使われているので、menupopup タグには、無名内容と XUL 内容が作られます。結果として出来上がるのは、ドロップダウンボックス付きの編集可能なフィールドです。通常、menupopup タグは省略します。そうしても、XUL 開発者はメニューの追加ができるからです。
出来上がる内容は、次のようなものです。
<menu class="dropbox">
<menupopup>
<menuitem label="1000"/>
<menuitem label="2000"/>
</menupopup>
<textbox flex="1"/>
<button src="chrome://global/skin/dropbox.gif"/>
</menu>
|
includes 属性について 2 点補足します。まず、template と observes タグを指定する必要はありません。それらは自動的にインクルードされるからです。第 2 に、includes の値をアスタリスク (*) にすることによって、すべてのタグを指定したことにできます。例えば、次の例を見て下さい。
<content includes="*"> |
生成された内容も明示的に指定された内容も、同じレベルに追加できます。両側でズームインとズームアウトができるイメージを表示するウィジェットを作りたいとしましょう。これは、イメージとボタンを 2 つもつボックスを使って作ることができます。イメージ要素は、XBL の外に置かなければなりません。それは、使うたびに異なるからです。
XUL:
<box class="zoombox">
<image src="happy.gif"/>
<image src="angry.gif"/>
</box>
XBL:
<binding id="zoombox">
<content includes="image">
<xul:box flex="1" align="horizontal">
<xul:button label="Zoom In"/>
<xul:box flex="1" style="border: 1px solid black"/>
<xul:button label="Zoom Out"/>
</xul:box>
</content>
</binding>
|
問題は、image 要素が XBL 内容のトップレベルに追加される点です。実際には、これは、内側のボックス (境界スタイルをもつボックス) 内に置くべきものです このため、children タグを使う必要があります。XBL を次のように変更します。
例 11.2.1
<binding id="zoombox">
<content>
<xul:box flex="1" orient="horizontal">
<xul:button label="Zoom In"/>
<xul:box flex="1" style="border: 1px solid black">
<children/>
</xul:box>
<xul:button label="Zoom Out"/>
</xul:box>
</content>
</binding>
|
これで、XUL ファイル内の明示的な子供は、children タグの位置に置かれます。その結果、表示は次のものと同じことになります。
<binding id="zoombox">
<content>
<xul:box flex="1" align="horizontal">
<xul:button label="Zoom In"/>
<xul:box flex="1" style="border: 1px solid black">
<image src="happy.gif"/>
<image src="angry.gif"/>
</xul:box>
<xul:button label="Zoom Out"/>
</xul:box>
</content>
</binding>
|
しかしながら、DOM の視角からすると、子供要素は依然としてもとの位置にあります。つまり、外側の XUL ボックスには、子供は 2 つあります。2 つのイメージです。境界付きの内側のボックスには、子供が一つあります。children タグです。これは、XBL を用いる DOM を使う場合、重要な違いです。これは、CSS 選択子ルールにも当てはまります。これについては、後のセクションで詳しく説明します。
includes 属性は、children を使う場合は必要ありません。この要素があると、子供要素があると想定されるからです。
内容は children 要素のあるその位置に追加されるのではない点に注意して下さい。これは、その親要素がどれかを指定するのに使われるだけです。例えば、次の例は、4 つのナビゲーションボタンをもつウィジェットを作ります。
例 11.2.2
<binding id="navbox">
<content>
<xul:vbox>
<xul:button label="Up"/>
<xul:hbox>
<xul:button label="Left"/>
<children/>
<xul:button label="Right"/>
</xul:hbox>
<xul:button label="Down"/>
</xul:vbox>
</content>
</binding>
|
しかしながら、指定された子供はどれも、実際には、'Right' ボタンの後に追加されます。children タグは、"この位置の親が、子供を追加する場所だ" と言っているにすぎません。これを修正するには、別のボックスの内部に children タグを置きます。
複数の children を使い、ある要素をある場所に置き、別の要素を別の場所に置くこともできます。includes 属性を追加し、それをバー (|) で区切ったタグリストに設定することにより、そのリスト内の要素だけをその場所に置くことができます。例えば、次の XBL を使えば、テキストラベルとボタンを、他の要素とは別の場所に表示できます。
例 11.2.3
<binding id="navbox">
<content>
<xul:vbox>
<xul:text value="Labels and Buttons"/>
<children includes="text|button"/>
</xul:vbox>
<xul:vbox>
<xul:text value="Other Elements"/>
<children/>
</xul:vbox>
</content>
</binding>
|
その includes 属性が指示しているように、最初の children 要素だけがテキストとボタン要素を捉えます。2 番目の children 要素には includes がないので、残りの要素すべてを捉えます。
(進む) 次のセクションでは、どうすれば属性を無名内容に継承できるかを見ることにしましょう。