How To Build A XUL Widget

We will build a component with a XBL file, and in the second time we will add an interaction with JavaScript to it, to show how to use this component.

Defining a component with XBL

The XBL format includes the following tags:

bindings

The root tag of the XML file in XBL format. It will contain the definitions of one or more components.

binding

Definition of a component. A binding is added for each component.

content

Is used to add contents in the definition of the component, therefore in binding.

children

Mark out position which is used to indicate where the contents of a component will be placed. If one element contains another tag in the XUL code, the tag children in the XBL code indicates the position of this sub-element.
Children has an include attribute which defines a list of elements, separated by the code | and which belong to this children.

implementation

Description of the behavior part of the component.

method

Definition of code for the behavior of the component.

field

Storage field, therefore a variable accessible by the methods of the component and the application which uses it.

property

A kind of variable usable to start events or to react.

The XBL File

The XBL file is thus defined simply with some tags, and in the following general form:

<?xml version="1.0"?>
<bindings xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
    <binding id="nomxbl">
        <content>
            ...tags, attributes, methods, events, style...
        </content>
    </binding>
    <binding>
         ... etc.
</bindings>

Each binding tag has an id identifier, which specifies the name of the XBL component (not to be confused with the name of class).
The name of class is used in the XUL application and in the CSS file, while the XBL identifier is used in a CSS descriptor and the XBL file.

Adding the component

The XBL file is integrated in the XUL file by a descriptor of CSS style sheet.
This descriptor has the name of the XUL tag which one wants to create and the property - moz-binding which indicates the URL of the XBL file which defines this component.
If the tag is called "box"?, the XBL file "xbl.xml"?, the CSS descriptor will be:

box.classname
{
    - moz-binding: URL("xbl.xml#xblname"); 
}

In this case, the file xbl.css is in the same directory as the XUL application.
In the chapter about style sheets, we saw how to integrate a CSS file:

<?xml-stylesheet href= "xbl.css" type= "text/css" ?> 

To connect XUL and the component, the tag in the XUL document has a name of class that is the CSS descriptor:

<box class= "classname"/>

This name of class being declared as sub-element in the descriptor as one sees it higher: box.nomclasse.

Example

One will create a component which has of a text input field, a button "Clear"? to erase the contents, and a button "Enter"? to use the typed text. Once defined this component could be re-used in applications which we will make interact with it.
The simplified XBL file will be as follows:

</bindings>
    <binding id="xblname">
        <content>
            <xul:vbox">
                <xul:label value="Type a text:" />
            <xul:hbox>
                <ul:textbox />
                <xul:button label="Enter"  />
                <xul:button label="Clear"  />
            </xul:hbox>
        </xul:vbox>
        </content>
    </binding>
</bindings>

The CSS file uses the name of class "classname"? and the XML component name "xblname".

box.nomclasse 
{
    - moz-binding:URL("xbl.xml#xblname"?);
}  

The XUL file becomes very simple then. It uses the name of class given in CSS:

<window> 
    <box class="classname "/> 
</window>

Complete files:

• Demo code.zip.

In chapters to come, we will see the implementation of methods to interact with the application.