XBL Attribute Inheritance
XBL 属性の継承
In this section we'll see how attributes can be inherited.
このセクションでは、どうすれば属性が継承できるか見ることにしましょう。
Inherited Attributes
継承された属性
XBL allows us to build composite widgets while hiding their actual implementation. However, with the features mentioned so far, the anonymous content is always created in the same way. It would be useful to add attributes to the bound elements that modify the inner elements. For example:
XBL を使えば、実際の実装を隠しながら、複合ウィジェットを作ることができます。 しかし、これまでに述べてきた機能を使えば、無名内容は、いつも同じやり方で 作ることができます。結び付けられた要素に内側の要素を変更する属性を追加できれば、 役に立つでしょう。例えば :
XUL:
<searchbox/>
XBL:
<binding id="searchBinding">
<content>
<xul:textbox/>
<xul:button label="Search"/>
</content>
</binding>In the example, the label attribute has been placed directly on the button element. The problem with this is that the label would be the same every time the binding was used. In this case, it would be preferable if the attribute could be specified on the searchbox instead. XBL provides an inherits attribute which can be used to inherit attributes from the bound element. It should be placed on the element that should inherit an attribute from the outer element, in this case the button. Its value should be set to a comma-separated list of attribute names that are to be inherited.
例では、label 属性が button 要素に直接置かれています。 この場合の問題は、バインディングが使われても、毎回ラベルが同じになるということです。 この例の場合、代わりに属性が searchbox で指定されていると好ましいでしょう。 XBL には、結び付けられた要素から属性を継承するために用いられる、 inherits 属性があります。 外側の要素 (この例ではボタンです) から属性を継承する予定の要素に、inherits 属性を 置きます。その値を、継承する属性名をカンマで区切ったリストに設定します。
<xul:textbox xbl:inherits="flex"/> <xul:button xbl:inherits="label"/>
When the content is generated, the textbox grabs the flex attribute from the searchbox and the button grabs the label attribute from the searchbox. This allows both the flexibility of the textbox and the label of the button to be different for each use of the binding. In addition, changing the value of the attributes on the searchbox with a script will update the textbox and button also. You can add the inherits attribute to as many elements as you wish, to inherit any number of attributes.
内容が生成されると、textbox は searchbox から flex 属性を捉え、 button は searchbox から label 属性を捉えます。このことは、テキストボックスの フレキシビリティとボタンのラベルの両者が、バインディングを使うたびに区別されている、 ということです。さらに、searchbox の属性値をスクリプトで変更すると、 テキストボックスとボタンの属性値も更新されます。任意の数の属性を継承するよう、 望むだけの数の要素に inherits 属性を追加することができます。
Note how the inherits attribute has been placed in the XBL namespace, by prefixing it with 'xbl:'. The namespace should be declared somewhere earlier, usually on the bindings element. The next example demonstrates this.
inherits 属性が XBL 名前空間にどう置かれるのか、 に気をつけてください。'xbl:' というプリフィクスが付きます。名前空間は、 使用前のどこか、通常は bindings 要素、で宣言すべきです。次の例で示します。
<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>In this example, the button inherits the label attribute, but this attribute is also given a value directly in the XBL. This technique is used to set the default value if the attribute is not present. This button will inherit its label attribute from the outer element. However, if no label is present, it will be given a default value of OK.
この例では、ボタンは label 属性を継承しますが、 この属性は XBL でも直接値が与えられています。このテクニックは、属性が存在しない ときにデフォルト値を与えるために用いられます。 このボタンは、その label 属性を外側の要素から継承します。 しかし、 label 属性がなければ、 OK というデフォルト値になります。
There may be times where two generated elements need to inherit from an attribute that has the same name. For example, to create a labeled textbox (a textbox with a text description beside it) out of a label and a textbox element, the label will need to inherit its text from the value attribute and the textbox will also need to inherit its default value from the value attribute as well. To solve this, we will need to use a different attribute and map it to the same one. The following demonstrates this:
生成された 2 つの要素が同じ名前の属性を継承する必要がある場合があるかもしれません。 例えば、label 要素と textbox 要素からラベル付きの テキストボックス (横にテキストによる説明のあるテキストボックス) を作るためには、 ラベルは value 属性からテキストを継承する必要があり、 またテキストボックスも同様に value 属性からデフォルト 値を継承する必要があります。これを解決するには、別の属性を使い、それを同じ要素に マップする必要があります。以下の例は、これを示しています。
XUL:
<box class="labeledtextbox" title="Enter some text:" value="OK"/>
CSS:
box.labeledtextbox {
-moz-binding: url('chrome://example/skin/example.xml#labeledtextbox');
}
XBL:
<binding id="labeledtextbox">
<content>
<xul:label xbl:inherits="value=title"/>
<xul:textbox xbl:inherits="value"/>
</content>
</binding>The textbox inherits the value attribute directly. To set the value attribute on the label, we need to use a different attribute name and map it to the value. The inherits attribute on the label grabs the title attribute from the labeledtextbox and maps it to the value attribute of the label element. The syntax <inner attribute>=<outer attribute> is used to map one attribute to another. Here is another example:
textbox は、 value 属性を、直接継承します。ラベルに value 属性を設定するには、別の属性名を使い、 それを値にマップする必要があります。ラベルの inherits 属性は labeledtextbox から title 属性を捉え、 label 要素の value 属性にマップしています。構文 <inner attribute>=<outer attribute> を使って、ある属性を別の属性に マップします。もう一つ別の例を示します。
XUL:
<box class="okcancel" oktitle="OK" canceltitle="Cancel" image="happy.png"/>
CSS:
box.okcancel {
-moz-binding: url('chrome://example/skin/example.xml#okcancel');
}
XBL:
<binding id="okcancel">
<content>
<xul:button xbl:inherits="label=oktitle,image"/>
<xul:button xbl:inherits="label=canceltitle"/>
</content>
</binding>The value of the oktitle attribute is mapped to the label attribute of the first button. The canceltitle attribute is mapped to the label attribute of the second button. The first button also inherits the image attribute. The result is as follows:
oktitle 属性の値は、最初のボタンの label 属性にマップされます。 canceltitle 属性は、2 番目のボタンの label 属性にマップされます。最初のボタンは image 属性も継承します。その結果は、次のようになります。
<box class="okcancel" oktitle="OK" canceltitle="Cancel" image="happy.png"> <button label="OK" image="happy.png"/> <button label="Cancel"/> </box>
Note that the attributes are duplicated on the inner (anonymous) content. Changing the attributes on the box with the okcancel class will automatically change the values on the buttons. You may also have noticed that we just made up our own attribute names. This is valid in XUL.
属性が内部の (無名) 内容で複製されている点に注意して下さい。 okcancel クラスをもつボックスの属性を変更すると、 ボタンの値も自動的に更新されます。自分自身の属性名を作ったことにも気が付いた かもしれません。XUL では、これは妥当です。
(Next) In the next section, we look at adding properties, methods and events to a binding.
(進む) 次のセクションでは、バインディングへのプロパティ、メソッド、イベントの追加を見ることにしましょう。