XUL Tutorial: Defining Attributes for XBL elements

Original title: XUL tutorial-bindings-adding Properties

Original Author: Neil Deakin

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

The following is the translation of the original text:

Add attribute (Adding properties)

In this section, we'll learn how to add custom attributes to the XBL element.

XBL interface

The attributes of an element can be accessed through JavaScript and DOM. In XBL, you can customize attributes for elements, and of course you can add methods to elements. All you have to do is get a reference to the element (using getElementById or a similar method) and you can access the property directly or invoke the method.

You can add three kinds of subkeys to the element. Field (Fields) is used to save simple values. Properties are used to hold values that might be invoked or modified by other code. Methods (Methods) are functions that can be executed.

These three seed items are defined in the implementation element, and the implementation element must be a child element of the binding element. By implementation elements, you can define any field, property, and method elements, and the basic syntax looks like this:

<binding id="element-name">
<content>
-- content goes here --
</content>
<implementation>
<field name="field-name-1"/>
<field name="field-name-2"/>
<field name="field-name-3"/>
<property name="property-name-1"/>
<property name="property-name-2"/>
<property name="property-name-3"/>
.
.
.
<method name="method-name-1/>
-- method content goes here --
</method>
.
.
.
</implementation>
</binding>

Field (Fields)

You can use the field element to define fields. Typically, a field corresponds to an attribute on an element, such as a label or disabled attribute, but this is not necessary.

The name attribute of the field element is used to identify the names of the fields. In the script, you can use this name to manipulate the field. The following example creates a button that is the function of creating and saving a random number. You can call the same random number multiple times by calling the button's numbers property. Most of the operations in the example are done in the OnCommand handler. In a subsequent tutorial, we will put these actions into the XBL.

XUL:
<box id="random-box" class="randomizer"/>
<button label="Generate"
oncommand="document.getElementById('random-box').number=Math.random();"/>
<button label="Show"
oncommand="alert(document.getElementById('random-box').number)"/>
XBL:
<binding id="randomizer">
<implementation>
<field name="number"/>
</implementation>
</binding>

In the binding item we define a number field to hold a random count. The other two buttons are used to generate and retrieve this random number. The syntax for assigning and taking values for attributes of an element is very similar. In this example, there is no child element defined inside the box element of XUL, and no anonymous content is defined in the XBL, which is completely effective.

This example also has flaws because the field does not have a default value set. We can add the following to the field tag as the default value for this column.

<field name="number">
25
</field>

This action assigns 25 as the default value to the Number field. In fact, you can use a script inside the field element to get the default value by calculating, which may be necessary at some point. For example, the following field will use the current date as the default value.

<field name="currentTime">
new Date().getTime();
</field>