XUL Tutorial: What is XBL?

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

Original Author: Neil Deakin

The following is the translation of the original text:

What is XBL?

XUL has a sister language called XBL, the full name is an extensible binding language (extensible Bindings Language), the main function of which is to define the behavior patterns of XUL components.

Binding

You can use XUL to define the layout of an application interface. You can also customize the appearance of these elements by setting styles. You can also create new skin by modifying the style. Like scrollbars or check boxes, which are often used as interface elements, you can modify their basic appearance by modifying the stylesheet or setting properties. But XUL will never allow you to modify the way these elements work. For example, you have to modify the function of the scroll bar, which is not possible with XUL, you need to XBL.

A typical XBL file includes a set of binding lists. Each binding item describes the behavior pattern of a XUL component. For example, a bound item might be associated with a scrollbar and describe the properties and methods that the scroll bar has, and when you create a scroll bar using XUL, you automatically have the properties and methods that XBL describes.

Like XUL, XBL is also described using XML, so there is a similar grammatical rule with XUL. The following example shows the basic skeleton of a typical XBL file:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl">
<binding id="binding1">
<!-- content, property, method and event descriptions go here -->
</binding>
<binding id="binding2">
<!-- content, property, method and event descriptions go here -->
</binding>
</bindings>

The bindings element is the root element of a XBL file that contains one or more binding elements. Each bingding element describes a binding item. The id attribute is used to identify each bound item, as shown in the previous example. This example has two binding items, one called Binding1, and one called Binding2. One may be attached to the scroll bar, and the other may be attached to the menu item. Each bound item can be attached to any XUL element. By using the class attribute, you can use bound items without restrictions. Note the namespace of the bindings element in the above example, which indicates that we are using XBL syntax.

You can associate an element to a specified item in a XBL file by-moz-binding the CSS property. For example, the following code:

scrollbar {
-moz-binding: url('chrome://findfile/content/findfile.xml#binding1');
}

The URL indicates that the binding item "Binding1" is in the "Chrome://findfile/content/findfile.xml" file. The "#binding1" syntax for adding a number before a number is used to represent a specific binding item, just as you would point to an anchor in an HTML file. You need to put all the bindings in a file. The result of the above example is that all scrollbar elements will have the behavior pattern you define through "binding1". If you do not use the-moz-binding to define an anchor point after the URL, the first binding item in the XBL file is automatically used by the system.

In a binding item, you can define five types of elements:

1. Content: The following child elements will be populated under the bound target element.

2. Properties: Properties are added to the element and can be accessed by script.

3. Method (Methods): The method is added to the element and can also be accessed directly from the script.

4. Events: You can add events such as keyboards and mice to elements, and you can add default processing scripts for events in binding items. Of course, you can also define new events in addition.

5. Style (Styles): You can customize the new style for elements by XBL.