Anonymous Content

無名内容

In this section we'll look at creating content with XBL.

このセクションでは、XBL を使った内容の生成を見ることにします。

XBL Content

XBL の内容

XBL can be used to automatically add a set of elements inside another element. The XUL file only needs to specify the outer element while the inner elements are described in the XBL. This is useful for creating a single widget that is made up of a set of other widgets, but can be referred to as only a single widget. Mechanisms are provided for adding attributes to the inner elements that were specified on the outer element.

XBL を使うと、要素の中に要素のセットを自動的に追加できます。 内側の要素を XBL に記述することにより、XUL ファイルでは外側の要素を記述するだけで済みます。 これにより、ウィジェットのセットを使って単一のウィジェットとして扱えるものを作ることができます。外側の要素で指定された内側の要素に、属性を追加するメカニズムが提供されています。

The example below shows how a scrollbar might be declared (It has been simplified a bit from the real thing):

下の例は、スクロールバーを宣言する方法を示しています (これは、実際のものより少々単純化しています)。

<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:thumb/>
      <xul:/slider>
      <xul:scrollbarbutton type="increment"/>
    </content>
  </binding>
</bindings>

This file contains a single binding, declared with the binding element. The id attribute should be set to the identifier of the binding. This way it can be referred to through the CSS -moz-binding property.

このファイルには、binding 要素で宣言されたバインディングが一つあります。id 属性をバインディングの識別子に設定する必要があります。こうすることにより、CSS の -moz-binding プロパティから参照できるからです。

The content tag is used to declare anonymous content that will be added to the scroll bar. All of the elements inside the content tag will be added inside the element that the binding is bound to. Presumably this binding would be bound to a scroll bar, altough it doesn't have to be. Any element that has its CSS -moz-binding property set to the URI of the binding will use it.

content タグは、 スクロールバーに追加される無名内容 (Anonymous Content) を宣言するのに使われています。 content タグ内のすべての要素は、 バインディングが結び付けられる要素内に追加されます。このバインディングはスクロールバーに 結び付けられると想定していますが、そうでなければならないという訳ではありません。 CSS -moz-binding プロパティがバインディングの URI に設定された要素はどれも、これを使用します。

The result of using the above binding is that the line of XUL below will be expanded as follows, assuming that the scrollbar is bound to the XBL above:

上のバインディングを使うと、下の XUL の行は、scrollbar が上の XBL に結び付けられていると仮定すると、次のように拡張されます:

<scrollbar>

expands to:

<scrollbar>
  <xul:scrollbarbutton type="decrement"/>
    <xul:slider flex="1"/>
      <xul:thumb/>
    </xul:slider>
  <xul:scrollbarbutton type="increment"/>
</scrollbar>

The elements within the content tag are added to the scroll bar anonymously. Although anonymous content is displayed on screen, you cannot get to it through a script in the normal way. To the XUL, it's as if there was only one single element, even though it is really made up of a number of elements.

content タグ内の内容は、 スクロールバーに無名のまま追加されます。無名内容はスクリーン上に表示されますが、 通常の方法では、スクリプトから取得することはできません。XUL にとって、これは、 実際には多数の要素からなっているにも関わらず、一つの要素しかないものとして扱われるからです。

If you look at a scroll bar in a Mozilla window, you will see that it is made up of an arrow button, a slider, a thumb inside it and a second arrow button at the end, which are the elements that appear in the XBL above. These elements would in turn be bound to other bindings that use the base XUL elements. Notice that the content elements need the XUL namespace (they appear preceded with xul:), because they are XUL elements and aren't valid in XBL. This namespace was declared on the bindings tag. If you don't use the namespace on XUL elements, Mozilla will assume that the elements are XBL, not understand them, and your elements won't work correctly.

Mozilla ウィンドウのスクロールバーを見ると、それは矢印ボタン、スライダー、 スライダー内のサム、最後に 2 つめの矢印ボタンからなっているのが分かります。 これらは上の XBL に記述されている要素です。結果として、これらの要素がこの基本的な XUL 要素を利用する他のバインディングにも結び付けられることになります。内容要素には XUL 名前空間が必要である ことに注意して下さい (それらは xul: 接頭辞付きです)。それらは XUL 要素であって、 XBL では妥当ではないためです。この名前空間は、 bindings タグで宣言されています。 XUL 要素に名前空間を使わない場合、Mozilla は要素が XBL であると想定し、 それを理解しません。そのため、要素は正しい働きをしないでしょう。

Another example, this time for a field for entering a filename:

別の例を示します。今度は、ファイル名を入力するフィールドのためのものです。

<binding id="fileentry">
  <content>
    <textbox/>
    <button label="Browse..."/>
  </content>
</binding>

Attaching this binding to an element will cause it to contain a field for entering text, followed by a Browse button. This inner content is created anonymously and cannot be seen using the DOM.

このバインディングを要素に貼り付けることによって、要素は、テキスト入力の フィールドとその後ろに Browse ボタンをもつことになります。この内側の内容は、 無名のまま作られるので、DOM を使って見ることはできません。

The anonymous content is created automatically whenever a binding is attached to an element. If you place child elements inside the XUL, they will override the elements provided by the binding. For example, take this XUL fragment, assuming it is bound to the scrollbar XBL earlier:

無名内容は、バインディングが要素に貼り付けられるといつでも、自動的に作られます。 ただし XUL 内に子供要素を置いたなら、バインディングで与えられた要素を上書きします。 例えば、前に出てきた scrollbar XBL に結び付けられていると仮定して、次の XUL フラグメントを見て下さい:

<scrollbar/>

<scrollbar>
  <button label="Overridden"/>
</scrollbar>

The first scroll bar, because it has no content of its own, will have its content generated from a binding definition declared in an XBL file. The second scroll bar has its own content so it will use that instead of the XBL content, resulting in something that isn't much of a scroll bar at all. Note that the built-in elements such as scroll bars, get their XBL from the files in the bindings directory in the toolkit package.

最初のスクロールバーは、それ自身の内容がないので、XBL ファイルで宣言された バインディング定義から生成された内容になります。2 番目のスクロールバーには それ自身の内容があるので、XBL の内容ではなく、それを使います。その結果、 スクロールバーらしからぬものが出来上がります。スクロールバーなどの組み込み要素は、 その XBL を toolkit パッケージの bindings ディレクトリのファイルから取得する 点に注意して下さい。

This only applies to the elements defined within the content tag. Properties, methods and other aspects of XBL are still available whether the content is from XBL or whether the XUL provides its own content.

このことは、content タグ内で定義された要素だけに当てはまります。XBL のプロパティやメソッド、 その他の部分は、内容が XBL のものであるのか、それともその内容が XUL のもの であるのかに関わらず、利用可能です。

There may be times when you want both the XBL content and the content provided by the XUL file to be displayed. You can do this by using the children element. The children added in the XUL are added in place of the children element. This is handy when creating custom menu widgets. For example, a simplified version of an editable menulist element, might be created as follows:

XBL の内容と XUL ファイルの内容の両方を表示させたい場合もあるでしょう。これは、 children 要素を使えば可能です。 XUL に追加された子供は、children 要素の場所に追加されます。 これを使えば、カスタムメニューウィジェットを手軽に作ることができます。例えば、 編集可能な menulist 要素の 簡略バージョンは、次のようにして作ることができるでしょう。

XUL:

<menu class="dropbox">
  <menupopup>
    <menuitem label="1000"/>
    <menuitem label="2000"/>
  </menupopup>
</menu>

CSS:

menu.dropbox {
    -moz-binding: url('chrome://example/skin/example.xml#dropbox');
}

XBL:

<binding id="dropbox">
  <content>
    <children/>
    <xul:textbox flex="1"/>
    <xul:button src="chrome://global/skin/images/dropbox.jpg"/>
  </content>
</binding>

This example creates an input field with a button beside it. The menupopup will be added to the content in the location specified by the children element. Note that to DOM functions, the content will appear as it was in the XUL file, so the menupopup will be a child of the menu. The XBL content is hidden away so the XUL developer doesn't need to even know it is there.

この例は、横にボタンのある入力フィールドを作ります。 menupopup は、 children 要素に置き代わって内容に追加されます。DOM 関数にとっては、 XUL ファイルにあったかのように その内容が現れるため、 menupopup は menu の子供になります。 XBL 内容は隠されるので、 XUL 開発者はそこにあることさえ知る必要がありません。

The resulting content would be:

出来上がる内容は、次のようなものです:

<menu class="dropbox">
  <menupopup>
    <menuitem label="1000"/>
    <menuitem label="2000"/>
  </menupopup>
  <textbox flex="1"/>
  <button src="chrome://global/skin/images/dropbox.jpg"/>
</menu>

In some cases, you may wish to only include specific types of content and not others. Or, you may wish to place different types of content in different places. The includes attribute can be used to allow only certain elements to appear in the content. Its value should be set to a single tag name, or to a list of tags separated by vertical bars ( The | symbol ).

場合によっては、特定のタイプの内容だけを含め、他のものは含めたくないかもしれません。 あるいは、複数の場所に異なるタイプの内容を置きたいかもしれません。 includes 属性によって、一部の要素のみがその内容内に 表示されるように許可することができます。その値は単一のタグ名にするか、垂直バー (| 記号) によって区切ったタグのリストに設定しなければなりません。

<children includes="button">

This line will add all buttons that are children of the bound element in place of the children tag. Other elements will not match this tag. You can place multiple children elements in a binding to place different types of content in different places. If an element in the XUL does not match any of the children elements, that element (and any others that don't match) will be used instead of the bound content.

この行は、children タグのある場所に、結び付けられた要素の子供である全ての button を追加します。 他の要素は、このタグにマッチしていません。binding に複数の children 要素を置いて、 別の場所に別のタイプの内容を置くことができます。XUL の要素が、どの children 要素にもマッチしない場合には、その要素 (と他のマッチしない全ての要素) は結び付けられた内容の代わりに使用されます。

Here is another example. Let's say that we wanted to create a widget that displayed an image with a zoom in and zoom out button on each side of it. This would be created with a box to hold the image and two buttons. The image element has to placed outside the XBL as it will differ with each use.

もう 1 つの例を示します。両側でズームインとズームアウトができる、画像を 表示するウィジェットを作りたいとしましょう。これは、画像と 2 つのボタン をもつボックスを使って作ることができます。image 要素は使うたびに異なるため、 XBL の外に置かなければなりません。

XUL:

<box class="zoombox">
  <image src="images/happy.jpg"/>
  <image src="images/angry.jpg"/>
</box>

XBL:

<binding id="zoombox">
  <content>
    <xul:box flex="1">
      <xul:button label="Zoom In"/>
      <xul:box flex="1" style="border: 1px solid black">
        <children includes="image"/>
      </xul:box>
      <xul:button label="Zoom Out"/>
    </xul:box>
  </content>
</binding>

The explicit children in the XUL file will be placed at the location of the children tag. There are two images, so both will be added next to each other. This results in a display that is equivalent to the following:

XUL ファイル内の明示的な子供は、 children タグの位置に 置かれます。2 つの image があるため、両方ともが連なって追加されます。 この結果、表示は次のものと同じことになります。

<binding id="zoombox">
  <content>
    <xul:box flex="1">
      <xul:button label="Zoom In"/>
      <xul:box flex="1" style="border: 1px solid black">
        <image src="images/happy.jpg"/>
        <image src="images/angry.jpg"/>
      </xul:box>
      <xul:button label="Zoom Out"/>
    </xul:box>
  </content>
</binding>

From the DOM's perspective, the child elements are still in their original location. That is, the outer XUL box has two children, which are the two images. The inner box with the border has one child, the children tag. This is an important distinction when using the DOM with XBL. This also applies to CSS selector rules.

DOM の視角からすると、子供要素は依然としてもとの位置にあります。つまり、 外側の XUL ボックスには、子供は 2 つあります。2 つの image です。 境界付きの内側のボックスには、子供が一つあります。 children タグです。 これは、DOM を XBL とともに用いる場合、重要な違いです。これは、CSS 選択子ルール にも当てはまります。

Multiple Children Elements

複数の children 要素

You can also use multiple children elements and have certain elements be placed in one location and other elements placed in another. By adding a includes attribute and setting it to a vertical bar-separated list of tags, you can make only elements in that list be placed at that location. For example, the following XBL will cause text labels and buttons to appear in a different location than other elements:

複数の children 要素を使い、ある要素をある場所に置き、別の要素を別の場所に置くこともできます。 includes 属性を追加し、それを垂直バー (|) で区切ったタグリストに設定することにより、そのリスト内の要素だけをその 場所に置くことができます。例えば、次の XBL を使えば、テキストラベルとボタンを、 他の要素とは別の場所に表示できます :

Example 11.2.1: Source
<binding id="navbox">
  <content>
    <xul:vbox>
      <xul:label value="Labels and Buttons"/>
      <children includes="label|button"/>
    </xul:vbox>
    <xul:vbox>
      <xul:label value="Other Elements"/>
      <children/>
    </xul:vbox>
  </content>
</binding>

The first children element only grabs the label and button elements, as indicated by its includes attribute. The second children element, because it has no includes attribute, grabs all of the remaining elements.

その includes 属性が指示しているように、最初の children 要素だけが label と button 要素を捉えます。2 番目の children 要素には includes 属性がないので、残りの要素すべてを捉えます。


(Next) In the next section, we'll look at how attributes can be inherited into the anonymous content.

(進む) 次のセクションでは、どうすれば属性を無名内容に継承できるかを見ることにしましょう。

Examples: 11.2.1


Copyright (C) 1999 - 2004 XulPlanet.com
訳者: kmine
このドキュメントのオリジナルは XULPlanet において英語で公布されています。
またドキュメントの管理の言語は現在も英語です。この日本語訳は、
利用者の利便のために Mozilla Japan 翻訳部門によって提供されたものです。
フィードバックは英語で、元の著者に送って下さい。
翻訳された文書の一覧は、現在以下のURLで見ることが出来ます。
http://www.mozilla.gr.jp/jt/xul/progress.html