XBL Inheritance

In this section, we'll look at how to extend existing XBL definitions.

Inheritance

Sometimes you may want to create an XBL widget that is similar to an existing one. For example, let's say you want to create an XBL button with a popup. One way to create this is to duplicate the existing XBL code for buttons. However, it would be better to simply extend the existing button code.

Any binding can be extended with another. The child binding can add properties, methods and event handlers. The child binding will have all the features it defines in addition to the features from the binding it inherits from (and any that binding inherits from and so on up the tree).

To extend an existing binding, add an extends attribute on to the binding tag. For example, the following binding creates a textbox which adds the text 'http://www' to the beginning of its value when the F4 key is pressed.

var el = env.locale; Example 1 : Source

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

The XBL here extends from the XUL textbox element. The URL given in the extends attribute above is the URL of the textbox binding. This means that we inherit all of the content and behavior provided by the textbox binding. In addition, we add a handler which responds to the keypress event.

Autocompleting TextBoxes

The example above is similar to how the URL autocomplete feature works in Mozilla. A textbox that supports autocomplete is just one with a XBL binding that extends the basic textbox.

The autocomplete textbox adds extra event handling so that when a URL is typed, a menu will pop up with possible completions. You can use it in your own applications too. Just create a textbox with two extra attributes.

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

Set the type to autocomplete to add the autocomplete feature to an existing textbox. Set the searchSessions to indicate what type of data to look up. In this case, the value history is used, which looks up URLs in the history. (You can also use the value addrbook to look up addresses in the address book.)

In the next section, we'll see an example XBL-defined widget.