XUL Tutorial: Defining Attributes for XBL elements

Original address: http://www.xulplanet.com/tutorials/xultu/xblatin.html

Original Author: Neil Deakin

The following is the translation of the original text:

XBL feature Inheritance (XBL attribute inheritance)

In this section we will learn how to inherit the attributes.

Inherited attributes (inherited Attributes)

XBL allows us to hide the actual implementation of complex components. But with the features described so far, we can only use the same method to create anonymous content. It would be useful if we could modify the internal elements by adding attributes to the binding element. Here's an example:

XUL:
<searchbox/>
XBL:
<binding id="searchBinding">
<content>
<xul:textbox/>
<xul:button label="Search"/>
</content>
</binding

In this example, a label attribute is added directly to the button element. The problem now is that the attribute will not change as long as it is bound to the element, and it is always the same value. In this case, it would be more appropriate if this feature can be modified on the searchbox. XBL provides an inheritance attribute that can be inherited from the attributes of a bound element. This feature should be defined on the element that inherits the attributes of the external element, and should be defined on the button in this example. The value of the attribute is set to a comma-delimited list, and each item in the list is the attribute name to inherit.

<xul:textbox xbl:inherits="flex" />
<xul:button xbl:inherits="label" />

When content is generated, the textbox element extracts the Flex feature from the SearchBox, and the button element extracts the label attribute from the SearchBox. In this way, the adaptability of the inner text box of each binding element and the label of the button can be different. Also, if you modify the attribute values on the searchbox by scripting, the attributes of the TextBox and button inheritance are updated immediately. You can add inheritance attributes to each element according to your needs.

Note that the "XBL:" prefix is used before the Inherits attribute name, which is the XBL namespace. This namespace should be declared before use, usually when defining the bindings element. This is demonstrated in the next example:

<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 buttons integrate the label attribute, but the attribute is also assigned a value in the XBL. This actually sets the default value for the label attribute, which is used if the value is assigned to the label attribute in Xul, and if not, the default value defined in XBL is used.

I've met many times that two different elements need to inherit attributes of the same name. For example, if you create a text box with a description, you need a LABEL element and a TextBox element, and the label element needs to inherit the value attribute to set the displayed text, and the TextBox element also needs to inherit the value attribute to set the default value within the text box. To resolve this conflict, we need to add a different feature and map it to one side of the conflict, as demonstrated in the following code:

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>