XUL Tutorial: Extending the XBL Element

This article supporting source code

Original title: XUL TUTORIAL-BINDINGS-XBL Inheritance

Original Author: Neil Deakin

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

The following is the translation of the original text:

In this section, we will learn to extend the existing XBL definition.

Inheritance (inheritance)

Sometimes you might want to build a component that is similar to an existing one, such as if you want to create a button that pops up the menu, one way is to repeat the wheel, copy the existing button code, but there is a better way to inherit the existing button code.

All bound items can be extended, and child-bound items can add additional properties, methods, and event handlers. A child-bound item also has all of the features defined in the parent binding item (also includes all the functionality of the parent-bound item of the parent binding item, all the functionality that follows the tree model).

To extend an existing binding item, first add the extends attribute to the binding tag. For example, the following example creates a text box and adds "http://www" to the contents of the text box when the F4 key is pressed.

Instance 11.7.1: Source code

<binding id="textboxwithhttp"
extends="chrome://global/content/bindings/textbox.xml#textbox">
this.value="http://www"+value;
</binding>

The above binding is extended from the textbox element. The corresponding URL in the extends attribute refers to the actual address of the binding item corresponding to the TextBox element. This means that we inherit the behavior and content provided by all the textbox bindings. In addition, we added a KeyPress event to respond to the action by pressing the F4 key.

Automatically complete the Entered text box (autocompleting textboxes)

The following example is similar to Mozilla's own automatic address entry feature. The text box that inherits from the bound item of the basic text box will support the ability to automatically complete the input.

Automatic completion of the entered text box adds an additional event handle, and when the text box is entered, a list of subsequent content is automatically displayed. You can use this feature in your own application, just create a text box with two additional features added to it.

<textbox type="autocomplete" searchSessions="history"/>

Sets the type attribute to AutoComplete, which adds the AutoComplete input feature to the text box. Where to look for data through searchsessions settings, in this case, set to history, which represents finding data from the URL's history. (can also be set to Addrbook, which represents finding data from an address book)

In the next summary, we'll build a XBL component with the knowledge we learned earlier.