XUL Tutorial: Instance Building XBL Components

This article supporting source code

Original title: XUL TUTORIAL-BINDINGS-XBL Example

Original Author: Neil Deakin

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

The following is the translation of the original text:

This section will present a complete example of a XBL.

Slide element (A slideshow Element)

Let's build a complete example of using the XBL element, which is a component that holds a set of objects, and each page displays only one. The navigation buttons placed below are used to loop through these objects, and the current page number appears in a text box. You can add any element to the page, preferably a set of pictures, and we name the component "slide" elements.

First, we decide which elements need to be displayed through XBL anonymous content. Because of the paging effect, it may be appropriate to use the deck element as a container. The loop display is defined in the Xul file, not in the XBL, but we want to insert the content into the XBL deck, which takes advantage of the children element. Below, we need to add two buttons to display the previous and next pages separately, and a text component (in fact, a label) to display the page number.

Instance 11.8.1: Source code

<binding id="slideshow">
<content>
<xul:vbox flex="1">
<xul:deck xbl:inherits="selectedIndex" selectedIndex="0" flex="1">
<children/>
</xul:deck>
<xul:hbox>
<xul:button xbl:inherits="label=previoustext"/>
<xul:label flex="1"/>
<xul:button xbl:inherits="label=nexttext"/>
</xul:hbox>
</xul:vbox>
</content>
</binding>

This binding creates the slide structure we need. Many elements have been added to the Flex feature, so they can be automatically laid out. The label attributes on the two buttons are inherited from the binding elements, respectively, corresponding to the required characteristics, previoustext and nexttext, so that you can easily modify the text displayed on the button. The child elements of the element to which the XBL binding item is associated are displayed under the deck element. SelectedIndex is an attribute inherited from an element so that we can set the initial display page in XUL.

The following XUL file is used to build the results to be displayed.

<box class="slideshow" previoustext="Previous" nexttext="Next" flex="1">
<button label="Button 1"/>
<checkbox label="Checkbox 2"/>
<textbox/>
</box>

There are no less style sheets:

.slideshow {
-moz-binding: url("slideshow.xml#slideshow");
}

The first button "button 1" corresponds to the first page in deck, because the label component is not displayed because the label component is not set, we can of course set a value for it, but we will do more on it later.

Next, we'll add a property that holds the page number, and this property gets the value from the deck selectedindex attribute, which corresponds to the current page number. Similarly, we can modify this property to synchronize the SelectedIndex features on the deck. In addition, the text component needs to be updated in real time when the page number changes.

<property name="page"
onget="return parseInt(document.getAnonymousNodes(this)[0].childNodes[0].getAttribute('selectedIndex'));"
onset="return this.setPage(val);"/>

The value of the page property comes from the first element of an anonymous content array. Because the first element returns the VBox element, we need to take the first child element of the VBox in order to get the deck element. This is not a way to get anonymous content, because deck is already visible in the DOM for VBox. Anyway, finally we got the value of the SelectedIndex attribute. To modify the current number, we need to add a Setpage method, which is defined below.

The OnCommand event handler needs to be added on the forward and backward buttons, which allows you to modify the page number when you switch pages. This is handy because we just need to make a change to the page property that you just added:

<xul:button xbl:inherits="label=previoustext"
oncommand="parentNode.parentNode.parentNode.page--;"/>
<xul:description flex="1"/>
<xul:button xbl:inherits="label=nexttext"
oncommand="parentNode.parentNode.parentNode.page++;"/>