XUL Tutorial: Defining content for XBL elements

This article supporting source code

Original: http://www.xulplanet.com/tutorials/xultu/xblcontent.html

Original Author: Neil Deakin

The following is the translation of the original text:

Anonymous contents (Anonymous content)

In this section, we'll explore how to use XBL to build content.

XBL Content

XBL can be used to add a set of elements to an element. In Xul, only the outermost element needs to be defined, and the elements inside can be defined in XBL. This is a great feature for developing components (widgets) that consist of a series of elements, except that each element can only point to one such component. This mechanism can also define attributes for an external element, which, in contrast, can be done in an internal element, that is, in a XBL.

The following example shows how to define a scroll bar (scrollbar), which, of course, is a simplified example to illustrate the problem.

<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 only one binding item defined with the binding element. The id attribute is used as the identifier for this binding item, so that you can point to any element through the-moz-binding property of the CSS.

The content tag is used to define the anonymous contents that will be added to the scroll bar. All elements in the content will eventually be added to the element that the binding item points to. This binding may be bound to a scroll bar or something else, which is not fixed, as long as the elements point to the address of the binding item through the-moz-binding attribute of the CSS.

If you associate the above binding item with the scroll bar, the following line of XUL code will be extended to the next:

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

All elements in the content tag are added anonymously to the scroll bar. Although the content does appear on the screen, you can't use the usual way to manipulate them in a script: Anonymous, you can't find how to operate it. For XUL, there is only one single element, and XUL does not see the elements that are composed internally.

If you look at the scroll bar in the Mozilla window, you'll see that it consists of an up arrow button, a slider, a page-flipping area, and a downward-pointing arrow button that is defined in XBL. These elements are then bound to other binding items in turn. Notice that the elements in the content use the Xul namespace (obviously, because the elements are preceded by XUL), because these elements are XUL elements rather than XBL, and they are not valid in XBL. This namespace is also defined on the bindings tag. If you do not use the namespace identifier in front of these XUL elements, Mozilla will determine that these elements are XBL elements, but the rules that use XBL cannot interpret these elements, resulting in an error.

To illustrate one more example, these we define a file selection box:

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

By associating this binding item with any element, the element contains a text box and a browse button that is anonymous and cannot be seen or manipulated in the DOM.

Anonymous content is automatically created when a binding item is associated with an element. If this element originally contained child elements, then the child elements would overwrite the elements embedded by the binding item. For example, the following XUL code fragment assumes that he is bound to the scroll bar bound item mentioned above.

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